안녕하세요, IT UI/UX 기획자 디노에디입니다.
지난 IT 기초 지식 시리즈를 통해 기술적인 뼈대를 세웠다면, 이제는 그 뼈대 위에 실제로 살을 붙이고 동료들과 소통하는 '무기'들에 대해 이야기해보려 합니다.
그 첫 번째 주인공은 현재 IT 업계에서 가장 강력한 디자인 협업 툴로 자리 잡은 피그마(Figma)입니다.
불과 몇 년 전만 해도 기획자는 파워포인트(PPT)나 키노트로 수십 장의 화면 설계서를 쓰고, 이메일로 디자이너에게 넘기곤 했습니다. 하지만 이제는 기획자도 피그마라는 캔버스 위에서 디자이너, 개발자와 실시간으로 호흡하며 와이어프레임을 그리는 시대가 되었습니다.
디자인 감각이 없어도 피그마를 '영리하게' 활용하는 기획자가 되는 비결, 지금 바로 확인해 보세요!
1. 기획자가 피그마를 써야 하는 진짜 이유 (The Why)
많은 기획자가 "디자인은 디자이너의 영역인데, 굳이 제가 피그마까지 배워야 하나요?"라고 묻습니다. 하지만 피그마는 단순한 디자인 툴이 아니라 '협업의 허브'입니다.
- 실시간 협업과 버전 관리: 하나의 파일 안에서 동료들과 동시에 작업할 수 있습니다. "최종_진짜최종_제발끝.ppt" 같은 파일 이름 지옥에서 탈출하여, 언제나 최신 상태의 기획안을 공유할 수 있습니다.
- 살아있는 프로토타이핑(Prototyping): 버튼을 누르면 다음 화면으로 넘어가는 흐름을 실제 앱처럼 구현해 볼 수 있습니다. 정적인 문서에서는 발견하지 못했던 동선 오류나 누락된 케이스를 배포 전에 미리 잡아낼 수 있죠.
- 개발 생산성 향상: 기획자가 짠 와이어프레임의 수치, 텍스트, 간격 정보를 개발자가 즉시 확인하고 복사할 수 있습니다. 이는 커뮤니케이션 미스를 획기적으로 줄여줍니다.
2. 기획자가 알아야 할 피그마 핵심 기능 3가지 (The How)
디자이너처럼 화려한 그래픽을 만들 필요는 없지만, 다음 세 가지 기능을 알면 기획의 질이 달라집니다.
① 오토 레이아웃(Auto Layout): 기획서 수정의 고통을 없애다
내용이 길어지면 버튼 크기가 자동으로 조절되고, 리스트의 순서를 드래그 한 번으로 바꿀 수 있는 기능입니다. 예전처럼 텍스트가 길어졌다고 사각형 도형을 일일이 늘릴 필요가 없습니다. 오토 레이아웃을 다룰 줄 아는 기획자는 화면 설계서 수정 시간을 절반 이하로 단축합니다.
② 컴포넌트(Component)와 디자인 시스템 활용
지난 시리즈에서 배운 '디자인 시스템'을 실전에서 활용하는 단계입니다. 디자이너가 미리 만들어둔 버튼, 입력창, 헤더 컴포넌트를 가져다 '조립'하기만 하세요. 디자인 가이드에 어긋나는 기획을 할 확률이 줄어들고, 기획서 자체의 완성도가 높아집니다.
③ 데브 모드(Dev Mode): 개발자의 시선으로 보기
최근 피그마에 도입된 '데브 모드'는 기획자와 개발자 사이의 가교 역할을 합니다. 기획자가 설계한 요소에 마우스를 갖다 대기만 해도 여백(Padding), 컬러 코드(Hex), CSS 코드가 노출됩니다. 이 화면을 함께 보며 논의하면 "이 간격은 16px인가요, 20px인가요?" 같은 소모적인 질문이 사라집니다.
3. "함께 일하고 싶은 기획자"의 피그마 매너 (The Attitude)
피그마를 화려하게 다루는 것보다 훨씬 중요한 것이 바로 '캔버스 정리'입니다. 넓은 피그마 캔버스에서 길을 잃지 않게 해주는 매너가 필요합니다.
- 페이지(Page) 구조화: 좌측 페이지 패널을 활용해 [Draft], [Review], [Final], [Archive] 등으로 명확히 구분하세요. 동료들이 "어떤 화면이 확정인가요?"라고 물어볼 일을 없애야 합니다.
- 섹션(Section)과 이름 짓기: 기능 단위나 흐름 단위로 화면들을 그룹화(Section)하고 이름을 붙여주세요. 개발자가 전체 구조를 한눈에 파악할 수 있도록 돕는 지도 역할을 합니다.
- 댓글(Comment)의 기술: 특정 버튼의 동작 로직이나 데이터 예외 케이스는 해당 위치에 직접 댓글을 남기세요. 텍스트로 가득 찬 별도의 문서를 보는 것보다 훨씬 직관적으로 정보를 전달할 수 있습니다.
4. 마무리: 피그마는 도구일 뿐, 핵심은 '논리적 구조'입니다
피그마는 기획자의 생각을 시각화해 주는 훌륭한 도구일 뿐, 그 자체가 목적이 되어서는 안 됩니다. 기획자의 본질은 '이 화면에 어떤 정보가 우선적으로 담겨야 하며, 유저가 어떤 가치를 느끼며 움직이는가'를 설계하는 데 있습니다.
디자인은 전문가인 디자이너에게 맡기고, 우리 기획자들은 피그마를 활용해 '구현 가능하고 논리적인 구조'를 짜는 데 집중해 봅시다.
도구의 제약에서 벗어날 때 여러분의 기획안은 더욱 빛을 발할 것입니다.
글이 도움이 되셨다면 '공감'과 '댓글' 부탁드려요!
다음 편에서는 기획자의 일정 관리와 커뮤니케이션의 핵심, "슬랙(Slack)과 지라(Jira) 200% 활용하기"로 돌아오겠습니다.
효율적인 협업을 꿈꾸는 기획자라면 다음 포스팅도 놓치지 마세요!
'eddy's 기획자 IT 생존기 > eddy's 기획자 IT Knowledge' 카테고리의 다른 글
| [기획자 실무 툴 #3] 기록이 쌓이면 자산이 된다: 컨플루언스(Confluence) 활용법 (1) | 2026.02.18 |
|---|---|
| [기획자 실무 툴 #2] 슬랙과 지라, '채팅'과 '관리'를 넘어 '협업'으로 만드는 법 (0) | 2026.02.12 |
| [IT 기획자 가이드] 내 기획이 세상에 나가는 날: 배포와 버전 관리의 모든 것 (0) | 2026.02.10 |
| [IT 기획자 가이드] 기획은 조립이다: 디자인 시스템과 컴포넌트의 이해 (6) | 2026.02.10 |
| [IT 기획자 가이드] 하나로 두 마리 토끼를? 크로스 플랫폼(Flutter, React Native) 완벽 정리 (0) | 2026.02.09 |