소셜 로그인 디자인 명세¶

요지¶

소셜 가입의 디자인은 "한 번의 버튼 클릭 뒤에 숨은 여러 갈래"를 깔끔하게 보여주는 일이다. Provider 버튼으로 시작해 콜백을 거치면, 상황에 따라 계정 연동·프로필 확인·U14 차단·결과 중 하나로 빠진다. 이 분기를 여섯 개 화면(6.1~6.6)으로 정리하고 문구 초안까지 함께 잡았다.

상위 PRD¶

정책과 범위는 prd, 구현과 OAuth 흐름은 frd, 회원 도메인은 member.

사용자 플로우¶

6.1 소셜 진입(카카오/네이버/구글 버튼, 로그인·가입 공용)
  → 6.2 콜백 처리(로딩 스피너, 실패 시 재시도)
  ├ 이메일 중복 → 6.3 계정 연동 확인(기존 비밀번호 입력)
  ├ 이메일/연령 미완 → 6.4 프로필 확인(닉네임·이메일·약관)
  ├ U14 → 6.5 가입 불가
  └ → 6.6 가입 결과(완료/실패)

화면 · 컴포넌트 (Figma 링크)¶

화면	구성
6.1 소셜 진입	카카오/네이버/구글 버튼 3종(브랜드 가이드라인·로고 규격 준수). 로그인·가입 공용 진입점
6.2 콜백 처리	인증 결과 로딩 스피너. 실패 시 7.2 문구·재시도
6.3 계정 연동 확인	중복 이메일 안내 + 기존 계정 비밀번호 입력 + [기존 계정에 연결]/[다른 계정으로 다시 시도]
6.4 프로필 확인	닉네임·이메일(미제공 시 필수·제공 시 read-only)·약관 동의·Unknown 연령 시 생년 선택 입력
6.5 가입 불가(U14)	차단 안내 + FAQ/문의 버튼 + 뒤로/메인
6.6 가입 결과	가입/연동 완료·실패 표시 + [서비스 시작하기]/[메인으로]

소셜 버튼과 토큰은 design-system을 따른다(각 Provider의 브랜드 로고 규격을 지킨다). 화면 실제 에셋은 원본(Notion)에 있다.

인터랙션 · 상태¶

콜백이 실패하거나 사용자가 취소하면 진입 화면으로 되돌리고 다시 시도하게 한다. 문구는 상황마다 다르게 잡았는데 — 가입 불가는 "만 14세 미만은 서비스에 가입하실 수 없습니다", 인증 실패는 "인증에 실패했습니다. 잠시 후 다시 시도해 주세요", 이메일 중복은 "이미 가입된 이메일입니다. 기존 계정에 연결하여 로그인을 완료해 주세요", 성공은 "가입이 완료되었습니다. 서비스를 시작해 보세요!"다. 모두 초안이다.

접근성¶

약관 fieldset/legend, 오류 role=alert·aria-live, 첫 오류 포커스 등 폼 접근성은 회원가입과 같은 패턴을 쓰므로 회원가입 디자인 명세을 따른다. 화면 크기별 원칙은 responsive.

개발 핸드오프 노트¶

전달 규약은 dev-handoff, 구현·OAuth 흐름·연동 분기는 frd를 본다.