Figma 같은 확대 / 축소 / 이동 구현이 궁금했다

Figma 같은 확대 / 축소 / 이동 구현이 궁금했다.

 

 

"눈에서 멀어지면 마음에서 멀어진다" 라는 말 하나도 틀린게 없다. 막상 구현을 하려고 보니 예전에 어떻게 했더라? 부터 시작된다. 하루종일 Gemini와 수다를 떨다보니 새로운 시각이 눈에 들어왔다. 초심으로 돌아가는 것처럼 하나 하나 글로 작성해보고자 한다. 운이 좋다면 발표도 해봐야겠다. 그래야 머리에 남을테니까.

 

 

오늘의 궁금증은 Flutter로 Figma앱을 구현해볼 수 있느냐?
이것에 대한 검증을 다룬 이야기다.

 

 

내가 만약 피그마를 구현한다면 어떤게 가장 고민스러울까? 생각해봤다.

1. 컴포넌트들을 드래그&드롭으로 위치시킨다.
2. 화면에 배치된 다양한 컴포넌트들을 확대/축소를 통해 볼 수 있어야 한다.
3. 만들어진 컴포넌트들을 소스 코드로 제공해줘야 한다.

물론 여러가지가 더 있겠지만 사실상 이 3가지 고민이 가장 큰 꼭지라는 생각이 들었다. 1번이 가장 큰 걱정이긴 했지만. 1번과 2번은 결국 캔버스에서 처리하면 될일이라 생각했고 드래그앤 드롭을 당장 고민하기엔 머리가 아팠으니 2번부터 해보기로 했다.

 

피그마에서 확대/축소

 

나는 아이디어가 생길때까지 피그마에서 한참을 스크롤을 조작했다. 과거에 어떻게 했었지?를 2시간 정도 한 뒤에 Interactive View 를 확인했으나 왠지 모르겠지만 내 입맛대로 안될 것이라는 섵부른 판단으로 검색을 시작했다. 오랜만에 검색도 잘 안되길래 결국 제미나이 선생님과 면담을 요청했다.

 

그렇게 해서 찾은 결과물이 아래 링크의 내용이었다.

https://github.com/Norbert515/flutter_ide

 

한번 보시면 Figma와 비슷한 형태의 UI Builder 툴이라는 것을 알 수 있다. 데모로 제공되는 스크린샷도 그렇고 완성도가 매우 높아 이걸 기반으로 나의 궁금증을 해소해보기로 했다.

 

 

 

 

저장소의 소스코드는 이미 3년이 지났기 때문에 최신 Flutter 로 변환을 하는데 시간만 많이 걸릴 것 같아 핵심이라 생각됐던 부분만 포팅을 해봤다. 포팅을 하고나서 유심히 살펴보니 저장소의 코드를 보지 않아도 충분했다.

 

Transform.scale(
  scale: zoom,
  alignment: Alignment.center,
  child: Builder(builder: (context) {
    return Stack(
      children: _children,
    );
  }),
)

 

이렇게 부분적인 코드만 놓고 뭘 어쩌라고 물으신다면... 나중에 제대로 정리를 해볼 시간이 있을 거라고 장담하겠다. 애초에 이 개발로그를 작성하는 이유가 '저도 잘 몰라서 이제 좀 잘 알아보려구요...' 이다. 

 

Transform.scale 함수는 말그대로 사이즈를 조절하기 위한 용도로 작성된 위젯이다. 보통 애니매이션 효과를 적용 할 때 사용되곤 한다. zoom 이라는 변수를 조정하는 것으로 확대/축소를 처리한다.

 

중요한건! Transform 은 말그대로 투영에 대한 부분을 담당하고 있기 때문에 위젯의 위치도 옮겨주지 않았다면 실제로는 존재하지 않는 위치를 누르게 되면서 터치 오류가 발생 할 수 있다. 이를 해결하기 위해 Stack 위젯은 위젯들을 배치 할 때 Offset 정보를 이용할 수 있다. 즉 확대/축소/이동을 2개의 위젯 조합을 통해 할 수 있다는 것이다. 

 

오늘은 겨우 이것을 알아내기위해서 긴 시간을 들여 확인을 해봤다.

분석을 해보다보니 좀 더 확인을 해봐야 하는 부분들이 많아 보인다. 이 부분은 다음 개발로그에서 또 다뤄보겠다.