"말보다 화면으로 보여주세요" – 기획자의 피그마 프로토타이핑 생존기
"말보다 화면으로 보여주세요" – 기획자의 피그마 프로토타이핑 생존기
"이 버튼을 누르면 어디로 가나요?", "팝업이 뜨는 건가요, 페이지가 바뀌는 건가요?" 기획서 리뷰 시간에 질문 폭탄을 맞아 손이 마르는 경험이 있다면, 이제 프로토타이핑(Prototyping)을 시작할 타이밍입니다.
여기서 중요한 포인트는 하나입니다. 기획자의 프로토타입 목표는 ‘화려함’이 아니라 논리적 근거를 클릭으로 증명하고 UX 결함을 사전에 검증하는 것입니다.
1) 기획자가 프로토타이핑을 해야 하는 3가지 이유
프로토타이핑은 “보기 좋아서”가 아니라 기획자의 생존과 직결됩니다.
- 커뮤니케이션 비용 절감: 백 마디 설명보다 한 번의 클릭이 정확합니다.
- UX 논리 검증: 정적인 화면에선 보이지 않는 막다른 길(Dead-end), 불필요한 단계가 튀어나옵니다.
- 의사결정권자 설득: "왜 여기 있어요?"에 "직접 눌러보면 이 동선이 가장 빠릅니다"라고 보여줄 수 있습니다.
프로토타입은 완성품이 아니라 가설을 빠르게 시험하는 실험 장치입니다. 그러니 부담은 내려놓고, 클릭 가능한 ‘논리’를 먼저 만드세요.
2) 기획자를 위한 핵심 기능 2개: Navigate to, Open overlay
기획자는 Smart Animate에 몰입할 필요가 없습니다. 아래 2개만 제대로 써도 리뷰에서 나오는 질문의 70%는 증발합니다.
- Navigate to: 페이지(프레임) 이동, 전체 플로우를 보여주는 기본기
- Open overlay: 팝업/바텀시트/툴팁, “화면 위에 뜨는 UI”를 현실감 있게
4) Open overlay로 팝업/바텀시트를 “현실처럼” 만드는 법
“팝업이 뜨나요, 페이지가 바뀌나요?” 질문을 끝내는 답은 오버레이입니다. 오버레이는 현재 화면 위에 UI를 띄우기 때문에, 사용자 경험이 훨씬 정확하게 전달됩니다.
4-1. 오버레이가 특히 유용한 UI
- 바텀 시트(옵션 선택, 필터)
- 모달 팝업(확인/취소)
- 툴팁, 드롭다운, 안내 레이어
4-2. 설정 팁: “Close when clicking outside”는 사실상 생존 옵션
오버레이를 닫는 방식이 불편하면 테스트 자체가 고문이 됩니다. 오버레이 설정에서 Close when clicking outside를 켜두면, 바깥 영역 클릭 시 오버레이가 닫혀 실제 서비스와 비슷한 사용감을 만들 수 있습니다.
4-3. 오버레이 운영 규칙(기획자 기준)
- 오버레이 안 버튼은 보통 “닫기 + 다음 액션”이 함께 필요함(예: 적용 후 닫기)
- 배경 dim(어두운 배경)이 필요한 경우: 오버레이 배경 옵션을 켜서 맥락을 분리
- 오버레이를 너무 남발하면 사용자가 길을 잃음: “선택/확인” 성격에만 집중
5) 프로토타입 공유 전 자가점검 체크리스트(Dead-end 제거)
| 점검 항목 | 기획자가 확인할 질문 | 최소 대응 |
|---|---|---|
| 태스크 성공 경로 | 사용자가 목표(예: 결제 완료)까지 끊김 없이 도달하는가? | 해피 패스 전부 연결(Navigate to) |
| 에러 케이스 | 필수값 미입력, 네트워크 실패 시 무엇이 뜨는가? | 오버레이 또는 에러 화면 1장 연결 |
| 전환의 맥락 | 탭 이동인지, 상세 진입인지 사용자가 구분 가능한가? | 전환 라벨(텍스트) 또는 헤더 제목 명확화 |
| 예외(Edge) | 데이터 없음(Empty)일 때 다음 행동이 있는가? | Empty 화면에 CTA 연결 |
| 막다른 길 | 어떤 화면에서든 “나가기/뒤로/홈”이 존재하는가? | Back 또는 Home 연결 1개라도 확보 |
체크리스트를 통과하면, 리뷰에서 “어디로 가요?” 대신 “이 동선 좋은데요” 같은 말이 나오기 시작합니다. (가끔만요. 아주 가끔. 😄)
6) 20분 생존 루틴: 해피 패스만 빠르게 연결하는 순서
- 목표 1개 고정: 결제 완료, 가입 완료, 검색 결과 도달 등
- 핵심 화면 4~7장만 선정: 나머지는 오늘은 과감히 보류
- Navigate to로 일단 직선 연결: 화면 간 이동을 먼저 “뚫기”
- 팝업/바텀시트는 오버레이로 처리: 화면 복제 대신 Open overlay
- 뒤로가기는 Back: 분기 많은 플로우에서 유지보수 절약
- Empty 또는 Error 1장만 추가: 최소 예외로 논리 구멍 잡기
- 프레젠테이션으로 1회 리허설: 스스로 “클릭 테스트” 후 공유
7) 주석 템플릿: 질문을 미리 막는 문장
프로토타입은 클릭으로 보여주고, 주석은 “조건”을 고정합니다. 아래 문장만 붙여도 리뷰가 빨라집니다.
[Flow]
- On click: Navigate to (프레임명)
- Back: Back action 사용(이전 화면으로)
[Overlay]
- Open overlay: (오버레이명)
- Close: Close when clicking outside = ON
- Dim: 배경 dim ON/OFF (정책)
[Rule]
- Disabled 조건: (예: 필수값 모두 입력 전)
- Error 조건: (예: API 실패 시)
- Empty 조건: (예: items.length === 0)
[Copy]
- 빈 화면 문구: "아직 데이터가 없어요"
- CTA: "등록하기" → (이동 프레임)
FAQ
Q 기획자가 프로토타입을 어디까지 만들어야 하나요?
A해피 패스는 반드시 끝까지, 예외는 최소 1개(Empty 또는 Error)만이라도 포함하면 충분합니다. 목표는 ‘완벽’이 아니라 ‘검증’입니다.
Q 팝업은 화면을 복제해서 만들면 안 되나요?
A가능하지만 유지보수 비용이 올라갑니다. 팝업/바텀시트 성격이라면 오버레이가 사용자 경험 전달에 더 적합합니다.
Q 뒤로가기는 왜 Back이 더 좋나요?
A플로우가 여러 갈래일 때, 특정 프레임으로 되돌리는 방식은 연결을 계속 고쳐야 합니다. Back은 “이전에 보던 화면”으로 자연스럽게 돌아가도록 돕습니다.
Q 오버레이를 클릭 바깥으로 닫히게 하는 설정이 있나요?
A오버레이 설정에서 “Close when clicking outside” 옵션을 켜면 바깥 클릭으로 닫히게 만들 수 있습니다.
Q 한 화면에 인터랙션을 여러 개 걸어도 되나요?
A가능합니다. 다만 기획자 단계에서는 “한 요소, 한 역할”이 유지보수에 유리합니다. 복잡한 경우는 우선 해피 패스부터 단순하게 두는 편이 좋습니다.