로그인 및 비밀번호찾기 플로우 및 스토리보드 작성하기

사용자 인증은 모든 서비스의 첫 관문입니다. 사용자가 서비스를 이용하기 위해 가장 먼저 마주하는 경험이 바로 로그인이죠.

첫인상의 중요성은 아무리 강조해도 지나치지 않습니다. 아무리 뛰어난 서비스라도 로그인 과정에서 불편함을 느끼면 사용자는 쉽게 이탈합니다.

---

로그인과 비밀번호 찾기의 본질

로그인과 비밀번호 찾기는 단순한 기능이 아닌 서비스의 신뢰성과 보안, 사용성이 모두 집약된 영역입니다. 쉬워 보이지만 복잡한 고려사항이 필요한 기획 포인트입니다.

사용자 입장에서는 '그냥 로그인하고 싶을 뿐'인데, 기획자는 이 간단한 니즈 뒤에 숨겨진 수많은 변수와 예외상황을 고려해야 합니다.

과거에는 단순히 ID와 비밀번호만 입력하면 되었지만, 지금은 보안 강화와 편의성이라는 상충되는 가치 사이에서 최적의 균형점을 찾아야 합니다.

---

로그인 플로우 기획하기

로그인 플로우란 단순히 화면의 배치가 아닌 사용자 여정의 설계입니다. 이 여정을 설계할 때 고려해야 할 핵심 요소들을 살펴보겠습니다.

1. 로그인 진입점 설계

사용자가 로그인 화면에 어떻게 도달하는지 고민해 봐야 합니다. 메인 페이지에서 바로 로그인 창이 뜨는 방식도 있고, 헤더에 로그인 버튼을 배치하는 방식도 있습니다.

한 프로젝트에서 클라이언트는 "로그인 버튼을 눈에 띄게 해달라"고 요청했습니다. 그래서 저는 헤더에 강조색을 사용한 버튼을 배치했죠. 그런데 실제 사용 데이터를 분석해보니 사용자들은 로그인보다 서비스 탐색을 먼저 한다는 사실을 발견했습니다. 결국 로그인 버튼의 시각적 강조는 줄이고, 대신 특정 기능 사용 시점에 자연스럽게 로그인을 유도하는 방식으로 변경했더니 전환율이 오히려 높아졌습니다.

2. 필수 입력 필드 설계

기본적인 로그인 화면에는 아이디(또는 이메일)와 비밀번호 입력 필드가 포함됩니다. 하지만 여기서 중요한 것은 사용자 편의성입니다.

아이디/이메일 필드 디자인

• 자동완성 지원 여부
• 대소문자 구분 여부
• 입력 오류에 대한 실시간 피드백

비밀번호 필드 디자인

• 비밀번호 보기/숨기기 옵션
• 비밀번호 힌트 제공 방식
• 캡스락 켜짐 알림

3. 소셜 로그인 통합

요즘은 소셜 로그인이 필수적인 요소가 되었습니다. 하지만 어떤 소셜 로그인을 지원할지, 그리고 어떻게 배치할지는 서비스 성격과 타겟 사용자에 따라 달라집니다.

앱스토어나 구글플레이 통계를 보면 카카오 로그인이 압도적인 경우가 많지만, 글로벌 서비스라면 페이스북이나 구글 로그인의 비중이 높아집니다. 서비스의 목적과 사용자층을 고려해 적절한 소셜 로그인을 선택해야 합니다.

4. 자동 로그인 및 로그인 유지

사용자 편의성을 높이는 '자동 로그인' 또는 '로그인 상태 유지' 옵션도 중요합니다. 이 기능은 사용자 편의성과 보안 사이의 균형이 필요합니다.

금융 서비스나 개인정보가 많은 서비스라면 자동 로그인 보다는 간편 인증(생체인증 등)을 활용하는 것이 좋습니다. 반면, 컨텐츠 소비 중심의 서비스라면 로그인 유지 기능이 사용자 경험에 도움이 됩니다.

---

비밀번호 찾기 플로우 기획하기

비밀번호 찾기는 단순해 보이지만, 보안과 사용성, 그리고 기술적 구현 사이에서 균형을 찾아야 하는 중요한 기능입니다.

1. 인증 방식 선택

비밀번호 찾기를 위한 인증 방식으로는 크게 다음과 같은 방법들이 있습니다:

• 이메일 인증
• SMS 인증
• 개인정보 확인(생년월일, 이름 등)
• 이미 로그인된 다른 기기를 통한 인증

한 프로젝트에서는 비밀번호 찾기 과정이 너무 복잡하다는 피드백이 있었습니다. 이메일 인증 후 SMS 인증까지 요구했기 때문이죠. 분석 결과, 보안 수준을 다소 낮추더라도 사용성을 높이는 것이 전체 서비스 만족도에 더 긍정적인 영향을 준다는 결론에 도달했습니다. 그래서 인증 단계를 간소화했더니 비밀번호 찾기 완료율이 15% 증가했습니다.

2. 새 비밀번호 설정 규칙

비밀번호 재설정 단계에서는 새 비밀번호 입력에 대한 규칙을 명확히 안내해야 합니다:

• 비밀번호 복잡성 요구사항
• 이전 비밀번호와 동일한지 여부
• 비밀번호 확인 절차

특히 비밀번호 규칙을 실시간으로 안내하는 것이 중요합니다. 예를 들어, "비밀번호는 8자 이상이어야 합니다" 같은 메시지를 사용자가 입력하는 과정에서 바로 보여주는 것이 효과적입니다.

3. 성공적인 재설정 후 안내

비밀번호가 성공적으로 변경된 후에는 사용자에게 명확한 피드백을 제공해야 합니다:

• 변경 완료 확인 메시지
• 새 비밀번호로 즉시 로그인 유도
• 추가 보안 조치 안내(다른 기기에서 로그아웃 등)

---

스토리보드 작성 방법

로그인과 비밀번호 찾기 플로우를 스토리보드로 작성할 때는 다음과 같은 요소들을 포함해야 합니다.

1. 화면 구성요소 상세 명세

각 화면의 모든 UI 요소에 대한 상세 명세가 필요합니다:

• 입력 필드 (타입, 유효성 검사 규칙)
• 버튼 (상태별 디자인, 텍스트)
• 알림 및 오류 메시지
• 링크 및 이동 경로

예를 들어, 로그인 화면의 "로그인" 버튼은 다음과 같이 명세할 수 있습니다:

 

ID: BTN_LOGIN
타입: Primary Button
상태:
- Default: #4285F4, 텍스트 "로그인"
- Hover: #3367D6, 텍스트 "로그인"
- Disabled: #CCCCCC, 텍스트 "로그인" (필수 입력값이 모두 채워지지 않은 경우)
액션: 입력된 아이디/비밀번호로 로그인 API 호출

2. 상태 및 예외 처리 명세

모든 가능한 상태와 예외 상황에 대한 처리 방법을 명시해야 합니다:

• 로그인 실패 시 피드백
• 비밀번호 찾기 과정의 각 단계별 실패 처리
• 네트워크 오류 상황 처리
• 보안 관련 예외 상황(연속 로그인 실패 등)

3. 화면 간 이동 흐름 명세

사용자가 어떤 경로로 화면 간 이동할 수 있는지 명확히 표현해야 합니다:

• 로그인 화면 → 비밀번호 찾기 화면
• 비밀번호 찾기 화면 → 이메일 인증 화면
• 비밀번호 재설정 성공 → 로그인 화면

플로우차트를 활용하면 이런 흐름을 시각적으로 효과적으로 표현할 수 있습니다.

---

실제 스토리보드 예시

로그인 및 비밀번호 찾기 스토리보드의 간단한 예시를 살펴보겠습니다.

 

 

로그인 화면 스토리보드

 

화면 ID: SCR_LOGIN
화면명: 로그인

구성요소:
1. 입력 필드: 아이디/이메일 (INPUT_ID)
   - 타입: text
   - 유효성 검사: 이메일 형식 또는 아이디 규칙
   - 자동완성: 지원
   - 에러 메시지: "올바른 이메일 형식이 아닙니다."

2. 입력 필드: 비밀번호 (INPUT_PW)
   - 타입: password
   - 보기/숨기기 기능: 지원
   - 캡스락 알림: 지원
   - 에러 메시지: "비밀번호를 입력해주세요."

3. 체크박스: 로그인 상태 유지 (CHK_KEEP_LOGIN)
   - 기본값: 비선택
   - 설명 툴팁: "개인 기기에서만 사용하세요."

4. 버튼: 로그인 (BTN_LOGIN)
   - 타입: Primary
   - 기본 상태: 비활성화 (필수 입력값 미입력시)
   - 활성화 조건: 아이디, 비밀번호 입력 완료시

5. 링크: 비밀번호 찾기 (LINK_FIND_PW)
   - 타입: Text link
   - 액션: 비밀번호 찾기 화면으로 이동

6. 소셜 로그인 버튼들
   - 카카오 로그인 (BTN_KAKAO)
   - 네이버 로그인 (BTN_NAVER)
   - 구글 로그인 (BTN_GOOGLE)

오류 처리:
1. 로그인 실패
   - 메시지: "아이디 또는 비밀번호가 일치하지 않습니다."
   - 위치: 입력 필드 하단에 표시
   - 액션: 비밀번호 필드 초기화, 아이디 필드 유지

2. 5회 연속 로그인 실패
   - 액션: CAPTCHA 표시 또는 30분 동안 로그인 제한
   - 메시지: "보안을 위해 30분 후에 다시 시도해주세요."

 

 

비밀번호 찾기 화면 스토리보드

 

화면 ID: SCR_FIND_PW
화면명: 비밀번호 찾기

구성요소:
1. 안내 텍스트 (TXT_GUIDE)
   - 내용: "가입 시 등록한 이메일을 입력하시면 비밀번호 재설정 링크를 보내드립니다."

2. 입력 필드: 이메일 (INPUT_EMAIL)
   - 타입: email
   - 유효성 검사: 이메일 형식
   - 에러 메시지: "올바른 이메일 형식이 아닙니다."

3. 버튼: 인증 메일 발송 (BTN_SEND_EMAIL)
   - 타입: Primary
   - 기본 상태: 비활성화 (이메일 미입력시)
   - 활성화 조건: 유효한 이메일 입력 완료시

4. 링크: 로그인으로 돌아가기 (LINK_BACK_LOGIN)
   - 타입: Text link
   - 액션: 로그인 화면으로 이동

오류 처리:
1. 등록되지 않은 이메일
   - 메시지: "등록되지 않은 이메일입니다. 가입 시 사용한 이메일을 확인해주세요."
   - 위치: 입력 필드 하단에 표시

2. 이메일 발송 실패
   - 메시지: "메일 발송에 실패했습니다. 잠시 후 다시 시도해주세요."
   - 위치: 화면 상단에 알림으로 표시

---

로그인 및 비밀번호 찾기 플로우 작성 시 팁

1. 사용자 관점에서 생각하기

사용자는 로그인하려는 것이지, 보안 시스템과 싸우려는 것이 아닙니다. 보안은 중요하지만, 지나친 보안 절차는 오히려 사용자 이탈을 유발할 수 있습니다.

예전에 한 쇼핑몰 프로젝트에서 보안 팀의 요구로 복잡한 로그인 절차를 도입했습니다. 그 결과 로그인 완료율이 30% 감소했고, 결국 보안과 사용성의 균형점을 다시 찾아야 했습니다.

2. 명확한 피드백 제공하기

로그인 과정에서 오류가 발생했을 때 "로그인에 실패했습니다"라는 모호한 메시지보다는 "아이디 또는 비밀번호가 일치하지 않습니다"라는 구체적인 메시지가 더 도움이 됩니다.

단, 보안 측면에서 너무 구체적인 정보는 피해야 합니다. "해당 아이디는 존재하지 않습니다"라고 하면 해커가 유효한 아이디를 찾는 데 도움을 줄 수 있습니다.

3. 디바이스 특성 고려하기

모바일과 데스크톱에서의 로그인 경험은 서로 다릅니다. 모바일에서는 손가락으로 입력해야 하므로 버튼 크기나 입력 필드 디자인이 중요합니다.

또한 모바일에서는 생체인증(지문, 얼굴인식)이 가능하므로, 이를 활용한 간편 로그인 옵션을 고려해볼 수 있습니다.

4. 규제 및 접근성 고려하기

금융, 의료, 공공 서비스 등 특정 도메인에서는 로그인과 관련된 규제가 존재할 수 있습니다. 또한 장애인 접근성도 고려해야 합니다.

접근성을 고려한 로그인 화면 설계는 단순히 법적 요구사항을 충족하는 것을 넘어, 모든 사용자에게 더 나은 경험을 제공합니다.

---

로그인 및 비밀번호 찾기 UX 트렌드

1. 간편 인증의 확대

생체인증, OTP, Magic Link 등 비밀번호 없는 인증 방식이 증가하고 있습니다. 특히 Magic Link(이메일로 인증 링크 발송)는 사용자가 비밀번호를 기억할 필요가 없어 편리합니다.

2. 단계적 보안 강화

사용자 행동과 위험 수준에 따라 보안 강도를 조절하는 방식이 늘고 있습니다. 예를 들어, 평소와 다른 IP에서 접속할 경우에만 추가 인증을 요구하는 방식입니다.

3. 다크 패턴 지양

사용자를 속이거나 혼란스럽게 하는 다크 패턴을 지양하고, 명확하고 투명한 UX를 설계하는 것이 중요해지고 있습니다. 예를 들어, 자동 로그인 옵션을 강제로 체크해두는 방식은 지양해야 합니다.

---

로그인과 비밀번호 찾기 플로우는 사용자가 서비스를 이용하는 첫 관문입니다. 이 과정이 복잡하고 불편하다면, 아무리 뛰어난 서비스라도 사용자는 떠나갈 수 있습니다. 사용자 관점에서 생각하고, 보안과 편의성의 균형을 찾아 최적의 경험을 제공하는 것이 중요합니다.

Jay Kim 웹/앱 서비스기획 26년차
현대경제연구원 IT분야 전문 컨설턴트
프로필 http://bit.ly/3E1OGQB
프로젝트 문의: mailside@gmail.com (카카오톡, 지메일)