개발 전 필수! 기획자가 피그마 프로토타입을 검토하는 올바른 방법
피그마 프로토타입은 단순히 “클릭되는 화면”이 아닙니다. 개발 전에 사용자의 이동 흐름, 버튼 동작, 오류 상황, 빈 데이터 화면을 미리 확인하는 중요한 검토 도구입니다.
IT 기획자는 프로토타입을 볼 때 화면이 예쁜지보다 기능 흐름이 정확한지를 먼저 봐야 합니다. 화면은 멀쩡해 보여도 버튼을 눌렀을 때 엉뚱한 곳으로 이동하면 개발 단계에서 다시 논의가 시작됩니다. 회의실에 작은 도돌이표가 생기는 순간입니다.
개발 전에 프로토타입을 검토해야 하는 이유
개발이 시작된 뒤 화면 흐름이 바뀌면 일정과 커뮤니케이션 비용이 커집니다. 그래서 개발 전에 피그마 프로토타입으로 주요 흐름을 확인해야 합니다.
특히 기획자는 정상 흐름만 보면 안 됩니다. 실패했을 때, 취소했을 때, 데이터가 없을 때, 권한이 없을 때 사용자가 어떤 화면을 보게 되는지까지 확인해야 합니다.
- 버튼 클릭 후 이동 화면이 맞는가?
- 저장 후 목록으로 가는가, 상세에 남는가?
- 오류 발생 시 다시 시도할 수 있는가?
- 데이터가 없을 때 안내 문구가 있는가?
- 권한이 없는 사용자의 화면이 준비되어 있는가?
1. 시작 화면 확인하기
프로토타입 검토의 첫 단계는 시작 화면 확인입니다. 사용자가 어느 화면에서 흐름을 시작하는지 명확해야 합니다.
| 확인 항목 | 기획자 질문 |
|---|---|
| 시작 지점 | 사용자가 처음 진입하는 화면이 맞는가? |
| 진입 조건 | 로그인 전, 로그인 후, 권한별 진입 화면이 구분되는가? |
| 화면 이름 | 프레임 이름만 보고도 기능을 이해할 수 있는가? |
2. 버튼 클릭 후 이동 화면 확인하기
프로토타입에서 가장 중요한 것은 버튼 클릭 후 이동 화면입니다. 사용자는 버튼을 누르고 다음 행동으로 넘어갑니다. 이 흐름이 어긋나면 기획 의도도 흔들립니다.
- 등록 버튼 클릭 후 완료 화면으로 이동하는가?
- 저장 버튼 클릭 후 목록으로 이동하는가?
- 삭제 버튼 클릭 전 확인 팝업이 뜨는가?
- 비밀번호 찾기 클릭 시 재설정 화면으로 이동하는가?
- 상세 화면에서 수정 화면으로 이동하는가?
버튼을 하나씩 눌러보며 “이동 화면이 맞는가?”를 확인하세요. 생각보다 많은 오류가 여기서 잡힙니다.
3. 취소·닫기·뒤로가기 흐름 확인하기
정상 흐름은 대체로 잘 준비됩니다. 하지만 취소, 닫기, 뒤로가기 흐름은 자주 빠집니다. 사용자는 언제든 작업을 멈추거나 이전 화면으로 돌아가려 합니다.
| 상황 | 확인할 흐름 |
|---|---|
| 취소 버튼 | 입력 중인 내용이 있을 때 확인 팝업이 필요한가? |
| 닫기 버튼 | 팝업을 닫으면 원래 화면 상태가 유지되는가? |
| 뒤로가기 | 이전 화면으로 이동할지, 목록으로 이동할지 정해져 있는가? |
4. 오류와 예외 화면 확인하기
개발 전 가장 꼼꼼히 봐야 하는 부분은 예외 화면입니다. 정상 화면만 있으면 서비스는 반쪽짜리입니다. 실무에서는 사용자가 잘못 입력하고, 네트워크가 끊기고, 데이터가 없고, 권한이 없는 상황이 생깁니다.
- 필수값 미입력 시 오류 문구가 있는가?
- 저장 실패 시 사용자가 다시 시도할 수 있는가?
- 검색 결과가 0건일 때 빈 화면이 있는가?
- 권한 없음 화면에서 다음 행동이 안내되는가?
- 로딩 중 화면 또는 처리 중 상태가 필요한가?
5. 개발자 회의 질문 정리하기
프로토타입 검토 후에는 개발자와 확인할 질문을 정리해야 합니다. 이때 질문은 추상적이면 안 됩니다. 화면, 버튼, 조건을 기준으로 물어보는 것이 좋습니다.
- 이 버튼 클릭 시 연결된 프레임이 개발 기준 화면인가요?
- 저장 실패 시 입력값은 유지되나요?
- 권한 없음 화면은 별도 API 오류와 연결되나요?
- 삭제 전 확인 팝업은 공통 컴포넌트를 사용하나요?
- 모바일에서는 같은 흐름을 사용하나요?
결론
피그마 프로토타입 검토는 개발 전 반드시 필요한 과정입니다. 기획자는 시작 화면, 버튼 이동, 취소·뒤로가기, 오류 화면, 빈 화면, 권한 없음 화면을 순서대로 확인해야 합니다.
프로토타입은 개발물이 아닙니다. 하지만 개발 전에 흐름의 구멍을 찾는 데 매우 강력합니다. 화면의 빈틈을 초기에 찾으면 개발 단계의 재작업을 줄일 수 있습니다.
결국 좋은 기획자는 화면을 많이 그리는 사람이 아니라, 사용자가 막히는 지점을 먼저 발견하는 사람입니다. 피그마 프로토타입은 그 지점을 찾는 실무용 손전등입니다.
FAQ
Q1. 피그마 프로토타입은 개발 전에 꼭 검토해야 하나요?
검토하는 것이 좋습니다. 개발 전에 화면 이동과 예외 흐름을 확인하면 개발 중 재작업과 커뮤니케이션 비용을 줄일 수 있습니다.
Q2. 기획자는 프로토타입에서 무엇을 먼저 봐야 하나요?
시작 화면, 주요 버튼 클릭 후 이동 화면, 취소와 뒤로가기 흐름, 오류와 빈 화면 순서로 확인하는 것이 좋습니다.
Q3. 정상 흐름만 확인하면 충분한가요?
아닙니다. 오류, 빈 데이터, 권한 없음, 로딩 중 화면처럼 실패하거나 예외적인 상황도 반드시 확인해야 합니다.
Q4. 프로토타입 검토 후 개발자에게 무엇을 물어봐야 하나요?
개발 기준 프레임, 버튼 클릭 후 이동 화면, 오류 처리 방식, 입력값 유지 여부, 모바일과 PC 흐름 차이를 확인하는 것이 좋습니다.
참고 자료
Figma Help Center - Guide to prototyping in Figma
Figma Help Center - Prototype triggers
Figma Help Center - Prototype actions
Google Search Central - Meta descriptions