[Way to PM] 프론트 엔드 - Figma Plugin을 통해 화면 설계 쉽게 접근하기

Over View

해당 글은 백엔드 프로젝트를 위해 화면설계(와이어프레임)를 고안하던 중 Figma Plugin을 사용해 쉽게 접근하는 방법에 대해 다룹니다.

---

 

 백엔드 프로젝트를 위해 기능명세 작성 후 이를 바탕으로 와이어프레임을 작성해야했습니다.(방밥론은 워터폴방식으로 진행)

 kakaoOven처럼 화면 설계 자체를 쉽게 도와주는 프로그램도 있었으나, Figma로 작성하면 진입은 상대적으로 어려울 것 같아도 효율적이라 판단했습니다.

 기능 명세와 요구사항이 간단한 것도 있었지만, 결국 실무에 가면 Figma를 사용하거나 사용하는 디자이너님과 협업하게 될 것이기 때문에 미리 다뤄보고 싶은 마음도 있었습니다.

 

 Figma를 프론트엔드 프로젝트로(백엔드 과정에 앞서 5주동안만 배움) 랜딩페이지를 구현할 때 이미 작성된 디자인을 참고할 때 한 번 사용해봤고 이번이 두번째입니다.

 기존에 공모전에 참가 준비를 하며 UX설계를 해본 경험이 있는데, 모두 PPT로 진행해 시간이 너무 오래 걸린 기억이 나서 노코드 툴인 버블(bubble.io)처럼 내장된 디자인 요소가 있었으면 했습니다. 예를 들면 버튼태그가 그렇습니다.

 

 하지만 Figma 자체적으론 이미 만들어진 내장된 디자인 요소는 없었습니다. 평소 유튜브로 AI를 이용해 디자인을 생성하는 것이 가능해졌다는 것을 인지하고 있었기 때문에 해당 방법을 찾아보았습니다.

 결론적으로 'WireFrame Designer'라는 플러그인을 이용해 여러 필요한 요소들을 간편히 제공받을 수 있었다. 해당 플러그인은 '앱' 와이어프레임을 디자인해주지만, 디자인 결과물을 보고 요소들을 차용해 웹으로 Figma환경에서 바로 가져다쓰면 되므로 당연히 '웹' 와이퍼프레임에도 적용이 가능할 것이라 생각했습니다.

 

 플러그인을 run하면 원하는 기능 명세를 대략적으로 적고 Design을 누르면 오른쪽과 같이 앱의 형태로 해당 요소들을 만들어주는데, 이 요소들을 웹으로 끌어다가 사용하면 됩니다.

 특히 저 디자인 요소 묶음을 이동시키려고 하는데 자꾸 크기가 조절되어서(move커서로 선택했음에도 불구하고) 문제를 찾아보니 AutoLayout설정이 되어있으면 요소들을 움직일 수가 없습니다.

 

 기술의 편의로 탄생한 도구들을 대략적으로 이해하고, 내게 필요한 기능에 집중해 방법을 터득하고, 결과물을 얻어내는 경험을 작게라도 할때마다 AI, ML, LLM 등이 머지 않아 우리내 일상에 깊숙이 파고들 것같다는 느낌을 받습니다.

 지금이라도 IT의 가능성에 눈을 떠 (누군가는 아니라고 할 수 있겠으나) 합격한 기업을 포기하고 생각을 현실로 만들어줄 수단을 배울 기회를 잡은 것에 감사를 느낍니다.