05 · Service Patterns · 진입 · 계정
회원가입 · 로그인Signup · Login
처음 교회 홈페이지에 들어와 가장 이탈이 많이 일어나는 구간. 최소 정보 · 명확한 오류 · 빠른 대안(소셜·패스워드리스)이 완수율을 좌우합니다.
회원가입 구조
- 최소 필드만. 이메일 + 비밀번호가 기본. 추가 정보는 가입 후 온보딩에서.
- 소셜 로그인 먼저. Google · Apple · Kakao 버튼을 상단에 두고, “또는” 구분선 아래 이메일 폼.
- 약관 동의는 필수·선택을 명확히 분리. 전체 동의 체크박스 제공.
- 가입 직후 이메일 확인 안내보다, 확인 없이 서비스를 살짝 경험하게 한 뒤 요구하는 편이 전환이 높습니다.
Do· 3필드 이하
이메일·비밀번호·닉네임 3개까지가 허용 상한. 그 이상은 가입 후 설정 화면으로 밀어내세요.
Don't· 취향 선택까지 강요
주소·전화·관심사까지 받는 ‘완벽한 회원가입’은 이탈률 2~3배를 각오해야 합니다. 가입 후 얻으면 됩니다.
로그인
- 이메일 입력 시 비밀번호 없이 먼저 확인하고, 해당 사용자의 로그인 방법(소셜/비번)을 안내.
- “비밀번호를 잊으셨나요?” 링크는 비번 필드 근처. 놓치면 사용자는 포기합니다.
- 실패 메시지는 “이메일 또는 비밀번호가 올바르지 않습니다”로 통합. 어느 쪽이 틀렸는지 드러내면 보안 문제.
- 비밀번호 보기 토글은 기본 제공. 오타가 실패의 절반 이상.
비밀번호 정책
- 최소 8자 + 숫자/문자 조합 정도가 균형점. 너무 복잡하면 사용자가 재사용합니다.
- 규칙을 입력 중에 실시간 체크리스트로 보여주세요. 에러보다 가이드가 낫습니다.
- 침해된 비밀번호(HIBP 등)를 체크하면 진짜 보안이 올라갑니다.
흔한 에러 시나리오
| 상황 | 메시지 | 액션 |
|---|---|---|
| 이메일 중복 | 이미 가입된 이메일입니다. | 로그인 이동 · 비번 재설정 |
| 비밀번호 실패 3회 | 계정이 일시 잠겼습니다. 10분 후 다시 시도하세요. | 비번 재설정 링크 전송 |
| 소셜 계정 미연결 | 이 이메일은 Google로 가입되어 있습니다. | Google로 계속하기 |
조합되는 컴포넌트
접근성 · 보안
- 이메일 · 비밀번호
autocomplete속성 필수.autocomplete="new-password"로 가입/로그인 구분. - 2단계 인증 코드는
autocomplete="one-time-code"+inputmode="numeric". - 소셜 버튼은 공식 브랜드 가이드 준수(색·로고 비율).
- 폼 제출 중 버튼 비활성화로 중복 요청 차단.