서비스 기획자라면 ‘화면 설계’는 필수 역량입니다. 예전에는 파워포인트나 엑셀로 화면 구성을 그렸지만, 요즘은 피그마(Figma)가 사실상 표준 툴이 되었습니다. 저는 디자인 전공도, UI/UX 경험도 없었지만 피그마를 익히면서 와이어프레임부터 프로토타입까지 혼자 제작할 수 있게 되었습니다. 이번 글에서는 제가 피그마를 활용해 기획안을 구현한 실제 경험과 팁을 공유합니다.
1. 피그마를 선택한 이유
처음에는 ‘굳이 디자인 툴까지 배워야 하나’라는 생각을 했습니다. 하지만 피그마의 장점은 분명했습니다. 클라우드 기반이라 설치 없이 브라우저에서 실행 가능하고, 실시간 협업 기능 덕분에 디자이너·개발자와 함께 즉시 피드백을 주고받을 수 있습니다. 무엇보다 무료 버전도 웬만한 기획 업무에 충분했습니다.
2. 와이어프레임 제작 과정
저는 처음부터 완벽한 화면을 그리기보다, 서비스 구조와 기능 흐름을 빠르게 시각화하는 데 집중했습니다.
- 기본 프레임 설정: 피그마에서 제공하는 디바이스 프레임(모바일, 태블릿, 웹)을 선택해 작업 환경을 설정합니다.
- UI 키트 활용: 피그마 커뮤니티에서 무료로 제공하는 UI 컴포넌트를 가져와 버튼, 입력창, 네비게이션 바 등을 바로 배치합니다.
- 흐름도 병행: 각 화면이 어떻게 연결되는지 간단한 플로우 차트를 작성해 구조를 명확히 합니다.
이 과정을 통해 종이에 그린 스케치보다 훨씬 깔끔하고 이해하기 쉬운 와이어프레임을 완성할 수 있었습니다.
3. 프로토타입 연결
피그마의 가장 강력한 기능 중 하나는 ‘프로토타입 모드’입니다. 화면 간 연결을 설정해 실제 앱처럼 클릭하며 흐름을 테스트할 수 있습니다.
- 버튼 클릭 시 다음 화면으로 이동
- 모달 창 팝업
- 슬라이드 애니메이션 효과
이렇게 연결한 프로토타입 링크를 팀원이나 이해관계자에게 공유하면, 별도의 설치 없이 웹 브라우저에서 바로 확인할 수 있습니다. 덕분에 회의 때 ‘기획 의도’를 말로 설명하는 대신 직접 보여줄 수 있어, 피드백이 훨씬 빨라졌습니다.
4. 디자이너·개발자와의 협업
피그마의 협업 기능 덕분에 디자이너는 디자인을 덧입히고, 개발자는 CSS 값과 리소스를 바로 추출할 수 있습니다. 특히, 화면 설계서를 따로 만들 필요 없이 피그마 링크만 공유하면 되니 문서 작업 부담이 줄었습니다.
또한, 실시간 코멘트 기능을 활용해 특정 버튼 색상, 폰트 크기, 여백 등에 대해 바로 피드백을 주고받았습니다. 예전처럼 수정 사항을 캡처해 이메일로 보내는 비효율적인 방식이 사라진 것입니다.
5. 초보 기획자를 위한 피그마 활용 팁
- 커뮤니티 템플릿 활용: 처음부터 모든 UI를 직접 그릴 필요 없습니다. 커뮤니티 템플릿을 가져와 수정하면 시간을 절약할 수 있습니다.
- 컴포넌트와 스타일 지정: 버튼, 폰트, 색상을 컴포넌트와 스타일로 지정해 두면, 전체 디자인을 한 번에 변경할 수 있습니다.
- 단축키 학습: 기본 단축키만 익혀도 작업 속도가 2배 이상 빨라집니다. 예:
Shift + A는 자동 레이아웃 설정.
6. 피그마 활용의 효과
피그마를 익히고 나서 기획서와 화면 설계 품질이 확연히 올라갔습니다. 이전에는 ‘설계도’ 없이 구두로 설명하다 보니 개발 과정에서 오해가 생겼지만, 이제는 시각화된 자료로 소통하니 이해도와 완성도가 동시에 높아졌습니다.
7. 앞으로의 확장 계획
향후에는 피그마 플러그인을 활용해 데이터 기반 프로토타입 제작, AI 자동 레이아웃 생성, 사용자 테스트용 시뮬레이션까지 확장하려 합니다. 특히, FigJam과 연계해 회의에서 바로 아이디어를 시각화하는 워크숍 방식을 도입할 계획입니다.
맺음말
피그마는 비전공자 기획자에게도 충분히 다룰 수 있는 강력한 도구입니다. 디자인 전공이 아니어도, 서비스 구조를 시각화하고 프로토타입을 제작할 수 있다는 점에서 기획 역량이 한 단계 성장하게 됩니다. 처음에는 조금 낯설지만, 한두 번 프로젝트에 적용해 보면 ‘왜 이제야 배웠을까’라는 생각이 들 것입니다. 만약 아직 피그마를 써보지 않았다면, 오늘 바로 계정을 만들고 첫 화면을 그려 보시길 추천합니다.