피그마로 로그인 화면 검토하기: IT 기획자가 놓치면 안 되는 정책 포인트
로그인 화면은 단순해 보입니다. 아이디 입력창, 비밀번호 입력창, 로그인 버튼만 있으면 끝난 것처럼 보입니다. 하지만 IT 기획자에게 로그인 화면은 작은 문이 아니라 인증 정책이 모여 있는 관문입니다.
피그마에서 로그인 화면을 검토할 때는 디자인이 깔끔한지만 보면 부족합니다. 사용자가 무엇을 입력하는지, 실패하면 어떤 메시지가 나오는지, 계정이 잠기면 어떻게 안내하는지, 로그인 후 어디로 이동하는지까지 확인해야 합니다.
이번 글에서는 피그마 로그인 화면을 기준으로 IT 기획자가 놓치면 안 되는 정책 포인트를 정리했습니다. 화면은 작지만, 숨어 있는 정책은 제법 큽니다. 작은 문 뒤에 정책 창고가 있는 셈입니다.
로그인 화면을 정책 중심으로 봐야 하는 이유
로그인 화면은 서비스의 첫 관문입니다. 사용자가 정상적으로 들어오는 길이기도 하고, 잘못된 접근을 막아야 하는 곳이기도 합니다.
그래서 기획자는 로그인 화면을 볼 때 “입력창이 있는가?”에서 멈추면 안 됩니다. 입력 조건, 오류 문구, 실패 횟수, 계정 상태, 로그인 후 이동 위치까지 함께 봐야 합니다.
- 아이디와 비밀번호 입력 조건이 정의되어 있는가?
- 로그인 실패 시 어떤 문구를 보여줄 것인가?
- 실패 횟수 제한이나 계정 잠금 정책이 있는가?
- 자동 로그인 또는 로그인 유지 기능이 필요한가?
- 로그인 성공 후 사용자는 어디로 이동하는가?
1. 아이디와 비밀번호 입력값 확인하기
입력창은 단순한 칸이 아닙니다. 사용자가 어떤 값을 넣을 수 있는지, 어떤 값은 막아야 하는지, 잘못 입력했을 때 어떻게 안내할지 정책이 필요합니다.
| 항목 | 확인해야 할 정책 |
|---|---|
| 아이디 | 이메일 형식인지, 사번인지, 휴대폰 번호인지 기준을 정합니다. |
| 비밀번호 | 최소 길이, 최대 길이, 허용 문자, 표시·숨김 기능을 확인합니다. |
| 입력 안내 | placeholder 문구가 실제 입력 기준과 맞는지 확인합니다. |
| 자동 완성 | 브라우저 저장 계정 사용 허용 여부를 확인합니다. |
특히 아이디 입력창은 서비스마다 기준이 다릅니다. 이메일 로그인인지, 휴대폰 번호 로그인인지, 기업 내부 시스템처럼 사번 로그인인지에 따라 오류 문구와 검증 방식이 달라집니다.
2. 로그인 버튼 정책 확인하기
로그인 버튼은 사용자의 인증 요청을 시작하는 장치입니다. 버튼 하나에도 활성 조건, 중복 클릭 방지, 로딩 상태, 실패 처리 정책이 필요합니다.
- 아이디와 비밀번호가 모두 입력되어야 버튼이 활성화되는가?
- 입력값이 비어 있어도 버튼을 누를 수 있는가?
- 로그인 요청 중 버튼을 비활성화할 것인가?
- 중복 클릭 시 요청이 여러 번 발생하지 않도록 처리하는가?
- 로그인 실패 후 버튼 상태는 어떻게 돌아오는가?
로그인 버튼은 “누르면 로그인된다”가 아니라 “언제 누를 수 있고, 누른 뒤 어떤 상태가 되며, 실패하면 어떻게 복구되는가”까지 확인해야 합니다.
3. 오류 메시지와 보안 문구 확인하기
로그인 화면에서 오류 문구는 매우 중요합니다. 너무 자세하면 보안상 위험할 수 있고, 너무 모호하면 사용자가 다음 행동을 알기 어렵습니다.
| 상황 | 피해야 할 문구 | 검토 가능한 문구 |
|---|---|---|
| 아이디 없음 | 존재하지 않는 아이디입니다. | 아이디 또는 비밀번호를 확인해 주세요. |
| 비밀번호 오류 | 비밀번호가 틀렸습니다. | 아이디 또는 비밀번호를 확인해 주세요. |
| 필수값 미입력 | 오류입니다. | 아이디를 입력해 주세요. |
| 잠긴 계정 | 계정이 차단되었습니다. | 로그인이 제한되었습니다. 안내에 따라 다시 시도해 주세요. |
보안이 중요한 서비스라면 아이디가 없는지, 비밀번호가 틀렸는지 구체적으로 나누어 보여주지 않는 방식이 필요할 수 있습니다. 이 부분은 보안 정책과 함께 확인해야 합니다.
4. 계정 상태별 화면 확인하기
로그인은 성공과 실패만 있는 것이 아닙니다. 계정 상태에 따라 여러 케이스가 생깁니다. 이 상태 화면이 빠지면 개발 중반 이후 질문이 쏟아집니다.
- 휴면 계정은 어떤 안내 화면으로 이동하는가?
- 비밀번호 만료 계정은 변경 화면으로 이동하는가?
- 탈퇴한 계정은 어떤 메시지를 보여주는가?
- 관리자에 의해 정지된 계정은 어떻게 안내하는가?
- 로그인 실패 횟수 초과 시 잠금 또는 제한 화면이 있는가?
피그마에서는 기본 로그인 화면만 있으면 안 됩니다. 계정 상태별 예외 화면 또는 팝업이 준비되어 있는지 확인해야 합니다.
5. 비밀번호 찾기와 회원가입 이동 확인하기
로그인 화면 주변에는 보조 흐름이 붙어 있습니다. 대표적으로 비밀번호 찾기, 아이디 찾기, 회원가입, 고객센터 이동입니다.
| 보조 기능 | 확인 질문 |
|---|---|
| 비밀번호 찾기 | 이메일 인증, 휴대폰 인증, 본인확인 중 어떤 방식을 사용하는가? |
| 아이디 찾기 | 결과를 전체 노출할 것인가, 일부 마스킹할 것인가? |
| 회원가입 | 개인 회원, 기업 회원, 관리자 계정이 구분되는가? |
| 고객센터 | 계정 잠김이나 인증 실패 시 도움 경로가 있는가? |
6. 피그마 프로토타입으로 흐름 검토하기
로그인 화면은 피그마 프로토타입으로 꼭 확인해야 합니다. 화면만 보는 것과 실제 버튼을 눌러보는 것은 다릅니다.
- 로그인 성공 시 메인 화면으로 이동하는가?
- 이전 페이지 접근 중 로그인했다면 원래 페이지로 돌아가는가?
- 비밀번호 찾기 클릭 시 올바른 화면으로 이동하는가?
- 필수값 미입력 시 오류 문구가 제 위치에 나타나는가?
- 계정 잠금 케이스가 별도 화면 또는 팝업으로 준비되어 있는가?
프로토타입 검토에서는 “정상 로그인”만 누르고 끝내면 안 됩니다. 실패, 잠금, 찾기, 가입, 뒤로가기까지 눌러봐야 합니다. 로그인 화면의 진짜 성격은 실패했을 때 드러납니다.
7. 개발자에게 확인할 질문
피그마 화면 검토가 끝나면 개발자에게 확인할 질문을 정리해야 합니다. 질문은 화면 요소와 정책 조건을 기준으로 구체적으로 작성하는 것이 좋습니다.
로그인 실패 횟수 제한은 프론트에서 안내만 하고, 실제 카운트는 서버에서 관리하나요?
로그인 요청 중 버튼 중복 클릭은 어떻게 막나요?
아이디 또는 비밀번호 오류 메시지는 보안 정책상 동일 문구로 처리하나요?
로그인 성공 후 이전 요청 페이지로 이동하는 정책이 필요한가요?
휴면 계정과 정지 계정은 각각 다른 화면으로 이동하나요?
로그인 화면 최종 체크리스트
| 구분 | 확인 항목 | 완료 |
|---|---|---|
| 입력값 | 아이디 형식과 비밀번호 입력 조건이 정의되어 있다. | □ |
| 버튼 | 로그인 버튼 활성·비활성 조건이 정리되어 있다. | □ |
| 오류 | 로그인 실패 메시지가 보안 정책과 맞다. | □ |
| 계정 상태 | 휴면, 잠금, 정지, 탈퇴 계정 처리 방식이 있다. | □ |
| 보조 흐름 | 비밀번호 찾기, 아이디 찾기, 회원가입 이동이 연결되어 있다. | □ |
| 프로토타입 | 성공, 실패, 예외 흐름을 클릭해서 확인했다. | □ |
| 개발 전달 | 서버 처리, 오류 코드, 실패 횟수 정책을 개발자와 확인했다. | □ |
결론
피그마로 로그인 화면을 검토할 때는 화면의 단순함에 속으면 안 됩니다. 로그인 화면은 작지만 아이디, 비밀번호, 오류 메시지, 계정 상태, 보안 정책, 이동 흐름이 모두 모이는 중요한 화면입니다.
IT 기획자는 로그인 화면을 보며 “입력창과 버튼이 있는가?”가 아니라 “사용자가 성공하거나 실패했을 때 어떤 정책으로 처리되는가?”를 확인해야 합니다.
로그인 화면은 서비스의 현관문입니다. 현관문 손잡이는 작아 보여도, 잠금장치와 출입 규칙은 아주 중요합니다. 피그마에서 그 손잡이만 보지 말고 문 뒤의 정책까지 함께 확인해야 합니다.
FAQ
Q1. 로그인 화면 검토에서 가장 먼저 봐야 할 것은 무엇인가요?
아이디와 비밀번호 입력 기준을 먼저 확인하는 것이 좋습니다. 어떤 형식을 허용하는지, 필수값인지, 오류 문구는 어떻게 표시되는지 확인해야 합니다.
Q2. 로그인 실패 메시지는 자세할수록 좋은가요?
항상 그렇지는 않습니다. 보안이 중요한 서비스에서는 아이디 존재 여부나 비밀번호 오류 여부가 드러나지 않도록 일반화된 문구를 사용하는 것이 좋습니다.
Q3. 로그인 화면에 계정 잠금 정책도 포함해야 하나요?
포함하는 것이 좋습니다. 실패 횟수 초과, 휴면 계정, 정지 계정, 탈퇴 계정 같은 상태별 처리 방식이 없으면 개발 단계에서 재논의가 생길 수 있습니다.
Q4. 피그마 프로토타입으로 로그인 화면을 어떻게 검토하나요?
로그인 성공 흐름뿐 아니라 실패, 필수값 미입력, 비밀번호 찾기, 회원가입, 계정 잠금 흐름까지 클릭해보며 확인해야 합니다.
참고자료
Figma Help Center - Guide to prototyping in Figma
Figma Help Center - Add comments to files
OWASP Cheat Sheet Series - Authentication Cheat Sheet
Google Search Central - Meta descriptions