피그마 화면 검토 체크리스트: 버튼, 문구, 입력값 실무 확인법
피그마 화면을 검토할 때 가장 먼저 색상이나 배치를 보면 길을 잃기 쉽습니다. IT 기획자가 먼저 봐야 할 것은 예쁜 화면이 아니라 사용자가 제대로 행동할 수 있는 화면인지입니다.
특히 실무에서 문제가 자주 생기는 지점은 세 가지입니다. 버튼, 문구, 입력값입니다. 버튼은 사용자의 행동을 만들고, 문구는 사용자의 판단을 돕고, 입력값은 서비스의 데이터를 만듭니다.
이 세 가지를 제대로 확인하지 않으면 개발 단계에서 “이 버튼 누르면 어디로 가나요?”, “이 문구 확정인가요?”, “이 값은 필수인가요?” 같은 질문이 돌아옵니다. 작은 질문처럼 보여도 쌓이면 일정표 위에 모래성이 생깁니다.
화면 검토 체크리스트가 필요한 이유
피그마 화면은 보기에는 완성된 것처럼 보여도 실제 서비스 정책이 빠져 있을 수 있습니다. 버튼은 있는데 클릭 후 이동 화면이 없고, 입력창은 있는데 필수 여부가 없고, 오류 문구는 있는데 사용자에게 무엇을 해야 하는지 알려주지 않는 경우가 있습니다.
그래서 IT 기획자는 화면을 볼 때 감상자가 아니라 검수자가 되어야 합니다. 화면을 보고 “괜찮아 보인다”에서 끝내지 말고, 사용자가 클릭하고 입력하고 실패하는 상황까지 확인해야 합니다.
- 버튼을 누르면 어디로 이동하는가?
- 문구가 사용자의 행동을 정확히 안내하는가?
- 입력값의 필수 여부와 형식이 정해져 있는가?
- 오류 상황에서 다시 시도할 수 있는가?
- 개발자가 구현할 기준이 명확한가?
1. 버튼 검토: 사용자의 다음 행동 확인하기
버튼은 화면에서 가장 중요한 행동 장치입니다. 사용자는 버튼을 보고 다음 행동을 결정합니다. 그래서 버튼 검토는 단순히 색상이나 위치를 보는 것이 아니라 기능 흐름을 확인하는 작업입니다.
| 검토 항목 | 기획자 질문 |
|---|---|
| 버튼명 | 버튼 문구가 실제 동작과 일치하는가? |
| 클릭 후 이동 | 클릭하면 어떤 화면으로 이동하는가? |
| 활성 조건 | 언제 버튼이 활성화되고 비활성화되는가? |
| 위험 행동 | 삭제나 취소 전에 확인 팝업이 필요한가? |
| 중복 클릭 | 저장 버튼을 여러 번 누를 때 처리가 필요한가? |
예를 들어 “저장” 버튼과 “등록” 버튼은 비슷해 보이지만 의미가 다릅니다. 기존 데이터를 수정하는 흐름이라면 저장이 자연스럽고, 새 데이터를 만드는 흐름이라면 등록이 더 적합할 수 있습니다.
버튼을 검토할 때는 “이 버튼은 무엇을 한다”가 아니라 “이 버튼을 누른 뒤 사용자는 어디로 가고, 시스템은 무엇을 처리하는가”까지 확인해야 합니다.
2. 문구 검토: 사용자가 오해하지 않게 만들기
문구는 화면의 작은 안내자입니다. 문구가 모호하면 사용자는 멈춥니다. 특히 오류 메시지, 안내 문구, 버튼 문구, 확인 팝업 문구는 기획자가 꼼꼼히 봐야 합니다.
| 문구 유형 | 검토 기준 | 예시 |
|---|---|---|
| 버튼 문구 | 행동이 명확한가? | 저장, 등록, 신청하기, 다음 |
| 안내 문구 | 사용자가 무엇을 해야 하는지 알려주는가? | 이메일 주소를 입력해 주세요. |
| 오류 문구 | 원인과 해결 방법이 보이는가? | 비밀번호를 다시 확인해 주세요. |
| 확인 문구 | 실행 결과를 예측할 수 있는가? | 삭제하면 복구할 수 없습니다. 삭제하시겠습니까? |
나쁜 문구는 짧기만 합니다. 좋은 문구는 짧으면서도 사용자가 다음 행동을 알 수 있게 합니다. “오류가 발생했습니다”보다 “네트워크 연결을 확인한 뒤 다시 시도해 주세요”가 더 실무적입니다.
3. 입력값 검토: 데이터와 정책 기준 확인하기
입력값은 화면에서 가장 많은 정책을 품고 있습니다. 이름, 이메일, 휴대폰 번호, 비밀번호, 날짜, 금액, 주소 같은 입력값은 단순한 칸이 아닙니다. 각각 조건과 검증 기준이 필요합니다.
- 필수 입력값과 선택 입력값이 구분되어 있는가?
- 입력 가능한 글자 수 제한이 있는가?
- 숫자, 영문, 한글, 특수문자 허용 기준이 있는가?
- 잘못 입력했을 때 오류 메시지가 표시되는가?
- 입력 중 자동 포맷이 필요한가?
- 저장 실패 시 입력값이 유지되는가?
| 입력값 | 확인해야 할 정책 |
|---|---|
| 이메일 | 필수 여부, 형식 검증, 중복 확인, 오류 문구 |
| 비밀번호 | 최소 길이, 조합 조건, 표시·숨김, 재입력 확인 |
| 휴대폰 번호 | 숫자만 입력, 자동 하이픈, 인증번호 발송, 재전송 제한 |
| 날짜 | 선택 가능 기간, 과거일 허용 여부, 기본값 |
4. 오류 메시지와 예외 상황 확인하기
정상 화면만 검토하면 반쪽 검토입니다. 실제 사용자는 잘못 입력하고, 빈 데이터를 만나고, 권한이 없는 화면에 접근하고, 저장 실패를 경험합니다.
따라서 피그마 화면 검토에서는 오류와 예외 상황을 반드시 확인해야 합니다. 이 부분은 개발 후반에 발견되면 수정 비용이 커집니다.
- 필수값 미입력 시 어떤 문구가 나오는가?
- 잘못된 형식 입력 시 어느 위치에 오류가 표시되는가?
- 검색 결과가 0건일 때 빈 화면이 있는가?
- 권한 없음 화면에서 다음 행동이 안내되는가?
- 서버 오류나 저장 실패 시 재시도 버튼이 필요한가?
5. 개발자에게 전달할 질문 정리하기
화면 검토가 끝나면 개발자에게 확인할 질문을 정리해야 합니다. 좋은 질문은 추상적이지 않습니다. 버튼, 문구, 입력값, 조건을 기준으로 묻습니다.
이 저장 버튼은 필수값이 모두 입력된 뒤 활성화되는 구조가 맞나요?
이메일 중복 확인은 입력 중 자동으로 처리하나요, 버튼 클릭으로 처리하나요?
저장 실패 시 사용자가 입력한 값은 유지되나요?
삭제 전 확인 팝업은 공통 컴포넌트를 사용하나요?
이렇게 질문하면 회의가 짧아집니다. “이거 어떻게 되나요?”라는 큰 그물을 던지는 대신, “이 버튼의 활성 조건은 무엇인가요?”처럼 작은 낚싯바늘을 던지는 방식입니다.
실무용 최종 체크리스트
| 구분 | 확인 항목 | 완료 |
|---|---|---|
| 버튼 | 버튼명과 실제 동작이 일치한다. | □ |
| 버튼 | 클릭 후 이동 화면이 정의되어 있다. | □ |
| 버튼 | 활성·비활성 조건이 정리되어 있다. | □ |
| 문구 | 안내 문구가 사용자의 다음 행동을 알려준다. | □ |
| 문구 | 오류 문구에 원인 또는 해결 방법이 포함되어 있다. | □ |
| 입력값 | 필수값과 선택값이 구분되어 있다. | □ |
| 입력값 | 입력 형식, 글자 수, 허용 문자가 정리되어 있다. | □ |
| 예외 | 빈 화면, 오류 화면, 권한 없음 화면이 검토되었다. | □ |
결론
피그마 화면 검토는 디자인 감상이 아닙니다. IT 기획자에게 화면 검토는 버튼, 문구, 입력값을 통해 기능과 정책의 빈틈을 찾는 과정입니다.
버튼은 사용자의 행동을 만들고, 문구는 사용자의 판단을 돕고, 입력값은 서비스의 데이터를 만듭니다. 이 세 가지를 먼저 보면 화면 검토의 절반은 이미 정리됩니다.
좋은 기획자는 화면을 많이 넘겨보는 사람이 아니라, 화면 속 작은 질문을 먼저 발견하는 사람입니다. 버튼 하나, 문구 한 줄, 입력칸 하나가 개발 일정의 작은 나사입니다. 나사가 느슨하면 서비스라는 기계가 덜컹거립니다.
FAQ
Q1. 피그마 화면 검토는 어디부터 시작해야 하나요?
먼저 버튼을 확인하는 것이 좋습니다. 버튼은 사용자의 다음 행동과 화면 이동을 결정하기 때문입니다. 그다음 문구, 입력값, 오류 화면 순서로 보면 효율적입니다.
Q2. IT 기획자가 문구까지 검토해야 하나요?
검토하는 것이 좋습니다. 버튼명, 오류 메시지, 안내 문구는 기능 이해와 사용자 행동에 직접 영향을 줍니다. 특히 오류 문구는 원인과 해결 방법이 보이도록 정리해야 합니다.
Q3. 입력값 검토에서 가장 중요한 것은 무엇인가요?
필수 여부, 입력 형식, 글자 수 제한, 오류 메시지, 저장 실패 시 입력값 유지 여부를 확인하는 것이 중요합니다.
Q4. 피그마 화면만 검토하면 정책서는 없어도 되나요?
아닙니다. 피그마는 화면을 확인하는 데 강하고, 정책서는 조건과 예외를 설명하는 데 필요합니다. 화면에서 발견한 정책 이슈는 별도 문서에 정리하는 것이 좋습니다.
참고자료
Figma Help Center - Guide to prototyping in Figma
Figma Help Center - Add comments to files
Figma Help Center - Comment on prototypes
Google Search Central - Meta descriptions