디자인 툴이 무서운 기획자를 위한 가이드: 프로젝트 세팅부터 기획안 작성까지 이것만 따라 하세요
디자인 툴이 무서운 기획자를 위한 가이드: 프로젝트 세팅부터 기획안 작성까지 이것만 따라 하세요
요즘은 프로젝트에서 기획서를 피그마로 작성하는 경우가 많아 지고 있습니다.
제가 지금 진행하는 프로젝트도 피그마로 기획서를 작성하고 있는데요,
몇년간 PPT로 기획서를 작성하다가 오랫만에 피그마로 작성하다 보니
저도 어떻게 사용했었지 라는 생각이 먼저 들더라고요.
그래서 오늘 글은 피그마를 오랫만에 접속했거나, 처음 접하는 분들을 위해 피그마로 기획서 작성 시 어떻게 사용해야 하는지에 대한 글을 작성합니다.
디자이너에게서 피그마 초대 메일을 받고, 링크를 클릭하는 손가락이 갑자기 무거워진 경험 있으신가요?
“이거… 내가 만지면 레이아웃 폭발하는 거 아냐?” 같은 불안이 올라오는 순간이요. 하지만 기획자에게 피그마는 ‘디자인 툴’이라기보다 무한히 넓은 화이트보드에 더 가깝습니다.
오늘 글은 이미지 한 장 없이, 텍스트만으로 피그마에서 기획서를 완성하는 방법을 “진짜 순서대로” 정리했습니다. 이대로 따라 하면, 최소한 이런 말은 안 하게 됩니다: “저는… 그냥 메모장으로 드릴게요.”
이 글을 따라 하면 얻는 것
- 내 기획안을 적을 안전한 내 영역을 만들 수 있음
- 텍스트만으로도 위계가 선명한 기획서 구조를 잡을 수 있음
- 댓글로 디자이너/개발자와 논리적으로 커뮤니케이션할 수 있음
- 실수해도 되돌릴 수 있는 생존 단축키까지 손에 익힘
입장하자마자 10초 체크
- 권한 확인: View only인지, Edit 가능한지부터 확인합니다. (View only면 “작성” 대신 “코멘트” 중심으로 움직이게 됩니다.)
- 왼쪽 패널: Pages/Layers가 보이는지 확인합니다. 기획자는 여기가 지도입니다.
- 가장 중요한 주문: “일단 내 기획 페이지부터 만든다.”
1) 프로젝트 접속과 내 영역 확보하기
피그마에서 기획자가 제일 먼저 할 일은 ‘디자인을 잘하는 것’이 아니라, 기획서를 잃어버리지 않게 정리하는 것입니다.
1-1. 페이지(Page) 만들기
- 왼쪽 사이드바에서 Pages 목록을 열고 새 페이지 추가를 눌러 페이지를 만듭니다.
- 추천 이름 규칙: [기획] 서비스명_v1.0
- 페이지가 늘어날 걸 대비해서 숫자 프리픽스도 좋습니다: 00_개요 / 10_화면정의 / 90_변경이력
1-2. 페이지 안에서 ‘본문 구역’ 만들기
페이지는 “서랍”이고, 그 안에서 문서의 “챕터”를 만드는 게 섹션입니다.
- 섹션(Section)을 만들어 큰 사각형 영역을 잡습니다.
- 권장: 섹션 하나를 “기획서 본문”으로 쓰고, 섹션 제목에 날짜/버전 적기
- 예: [기획서] 결제 화면 정의 v1.0 (2026-02-01)
2) 텍스트 도구로 기획안 작성하기
초보 기획자에게 최고의 무기는 도형이 아니라 텍스트입니다. 텍스트는 개발자에게도 번역이 잘 됩니다. (도형은 가끔… 외계어가 됩니다 👽)
2-1. 글자 크기 기본 세팅
- 제목: 24~32px + Bold
- 본문: 14~16px
- 문단: Enter로 끊어서 “한 문장 한 호흡” 유지
3) 기획서의 구조 잡기: “위계”만 지켜도 절반은 성공
텍스트 기획서의 핵심은 위계(누가 상위고, 누가 하위냐)입니다. 아래 템플릿을 그대로 복사해서 섹션 안에 붙여 넣고 시작하세요.
3-1. 복붙용 텍스트 기획 템플릿
[화면명] 로그인 화면
[목적]
- 신규/기존 사용자의 인증 진입점 제공
[주요 기능]
- 이메일/비밀번호 로그인
- 소셜 로그인(구글/애플)
- 비밀번호 재설정 링크
[입력/검증 규칙]
- 이메일: 이메일 형식 아니면 버튼 비활성화
- 비밀번호: 8자 이상, 실패 5회 시 10분 잠금
[상태(State)]
- Empty: 입력 전 기본 안내 문구 노출
- Loading: 로그인 API 요청 중 버튼 로딩
- Error: 실패 사유에 따라 토스트/인라인 에러
- Success: 로그인 성공 시 홈으로 이동
[예외 케이스]
- 계정 미존재: “가입 여부 확인” 안내
- 서버 장애: “잠시 후 다시 시도” 공통 에러
- 네트워크 끊김: 오프라인 안내
[이동/연결]
- ‘비밀번호 찾기’ 클릭 → 비밀번호 재설정 화면
- ‘회원가입’ 클릭 → 회원가입 화면
4) 사용자 흐름을 “텍스트로” 박제하기
개발자 질문 폭탄은 보통 여기서 터집니다. “그래서 누르면 어디 가죠?”를 미리 써두면 조용해집니다.
- 이동 규칙: “A 버튼 클릭 시 B 페이지로 이동”을 항목으로 고정
- 조건부 이동: “로그인 성공 시 홈, 실패 시 에러 유지”처럼 분기 명시
- 데이터 노출 기준: “구독자만 메뉴 노출” 같은 룰을 한 줄로 확정
5) 디자이너/개발자와 소통하는 법: 댓글(Comment)로 ‘논리’를 남기기
피그마 댓글은 “말”이 아니라 기록입니다. 말풍선 하나가 회의 30분을 절약합니다.
5-1. 댓글 남기는 기본 흐름
- 댓글 모드로 전환
- 기획 텍스트 위를 클릭해서 말풍선을 고정
- @멘션으로 담당자 호출
- 요청을 “검토 부탁”이 아니라 “무엇을 확인해야 하는지”로 쓰기
5-2. 댓글 문장 템플릿(싸움 방지용)
@담당자 확인 요청드립니다.
- 확인 포인트: [에러 메시지 노출 방식]이 토스트인지 인라인인지
- 기준: 실패 사유가 '비밀번호 오류'일 때만 인라인, 나머지는 토스트
- 완료 조건: UI 시안에 두 케이스가 구분되어 표시되면 OK
6) 초보 기획자 피그마 생존 팁(실수해도 살아남기)
- 되돌리기: Ctrl+Z는 시간여행 버튼입니다. (마음의 평화 +80)
- 잠금: 내 섹션/텍스트가 자꾸 움직이면 잠가서 고정합니다.
- 줌: 넓은 캔버스는 확대/축소로 “지도 보기”를 합니다.
- 댓글 숨김 토글: 댓글이 너무 많아 어지러우면 토글로 정리합니다.
7) 마지막 체크리스트: “기획서로 인정받는” 최소 조건
- 화면명/목적/주요기능/예외케이스/이동규칙이 모두 있는가?
- 조건부 노출(권한, 상태, 데이터 유무)이 한 줄이라도 명시돼 있는가?
- 댓글로 “확인 포인트 + 완료 조건”을 남겼는가?
- 버전 표기(v1.0, 날짜)가 문서 상단에 있는가?
결론
피그마는 도구일 뿐이고, 기획자의 진짜 무기는 그 안에 담긴 논리입니다.
오늘은 ‘잘 디자인하기’가 아니라, 내 기획을 안전하게 정리하고 공유하는 방법을 익히는 날입니다. 이제 피그마를 열고, 첫 문장을 적어보세요.
“[화면명]” 이 한 줄만 써도 이미 시작입니다.
FAQ
Q 저는 View only인데 기획서를 어떻게 쓰죠?
AView only면 “작성”보다는 댓글 중심으로 움직이는 게 효율적입니다. 섹션 단위로 코멘트를 달고, 템플릿을 댓글에 붙여서 “확정 룰”을 남기면 협업 기록으로 충분히 기능합니다.
Q 페이지(Page)랑 섹션(Section)은 뭐가 달라요?
A페이지는 큰 묶음(서랍)이고, 섹션은 페이지 안에서 내용을 챕터처럼 나누는 구획입니다. 기획서는 보통 “기획 전용 페이지 1개 + 섹션 여러 개” 구성이 가장 단순합니다.
Q 텍스트만 쓰면 디자이너가 답답해하지 않을까요?
A오히려 좋아하는 경우가 많습니다. 디자이너는 “결정된 기준”을 원합니다. 텍스트로 상태/예외/노출 기준이 선명하면 시안 작업 속도가 빨라집니다.
Q 댓글을 어떻게 써야 일이 빨라지나요?
A댓글은 “요청”이 아니라 검토 포인트 + 완료 조건으로 씁니다. 예: “에러 노출 방식 확인 부탁” 대신 “비번 오류만 인라인, 나머지 토스트로 확정되면 OK”.
Q 실수로 옮기거나 지울까봐 무서워요.
A되돌리기(Ctrl+Z) + 잠금(레이어 Lock)을 같이 쓰면 안전도가 급상승합니다. “나의 문서가 흔들리지 않게”부터 세팅하세요.
Q 기획서 버전 관리는 어떻게 하는 게 좋아요?
A섹션 제목에 버전과 날짜를 박아두는 방식이 가장 실용적입니다. 예: “[기획서] 결제 v1.1 (2026-02-01)”. 변경 이력 섹션을 하나 만들어 “무엇이 바뀌었는지”만 적어도 협업 효율이 크게 오릅니다.