회원가입 디자인 명세¶

요지¶

가입 화면의 설계 원칙은 "지금 할 일만 보여주고, 할 수 있을 때만 버튼을 켠다"이다. 이메일 → 인증·비밀번호·약관 → 이름·역할의 3단계 마법사로 흐르고, 상단 진행 바로 위치를 알려준다. 각 단계의 조건을 채우기 전에는 다음 버튼을 비활성으로 두고, 오류는 필드 바로 아래(인라인)에, 서버가 돌려준 문제는 폼 위쪽 배너에 띄운다.

상위 PRD¶

요구사항과 범위는 prd, 구현은 frd, 회원 도메인은 member에 있다.

사용자 플로우¶

세 단계를 진행 바(스텝퍼)와 함께 차례로 밟는다.

Step 1 이메일 입력 → 중복검사 통과 → [계속]
Step 2 이메일 인증코드 + 비밀번호(+확인) + 약관 동의 → [다음으로]
Step 3 이름 + 역할 라디오 → [가입 완료] → 자동 로그인 / /login

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

Step 1: 히어로("깔끔한 공부 디에듀, 시작해볼까요?" 두 번째 줄 --primary, 하이파이브 일러스트), 이메일 Input, [계속] CTA(기본 비활성→유효 시 활성), "이미 가입하셨나요? 로그인" 링크.
Step 2: 이메일 read-only 표시, "인증 코드 보내기"(180초 타이머·60초 쿨다운·일 5회), 코드 입력(6자리 숫자), 비밀번호/확인(눈 토글·강도 Weak/Medium/Strong), 약관 체크박스(필수 2 + 선택 마케팅, 보기 모달).
Step 3: 이름 Input(maxlength=30), 역할 라디오(카드형 하이라이트 + role description 툴팁), 역할 설명 미리보기, [가입 완료] CTA.
토큰·컬러: 활성 #FF5C00, 에러 #FF5A5A, 비활성 gray-200은 design-system을 따른다. Figma 프레임과 일러스트 실제 에셋은 원본(Notion)에 있다.

인터랙션 · 상태¶

폼은 IDLE → 입력 중 → (유효/무효) → 제출의 상태를 거치고, 다음 버튼은 그 단계 조건을 채웠을 때만 켜진다. 사용자가 헤매지 않도록 오류가 나면 첫 오류 필드로 자동 포커스를 옮기고, 입력 테두리 색을 회색→주황→빨강으로 바꿔 상태를 눈으로 알린다. 필드 단위 오류는 그 아래 인라인으로, 서버가 돌려준 오류는 폼 위쪽 배너로 구분해 보여준다.

인증 코드를 보내면 쿨다운·남은 시간을 실시간으로 안내하고, 만료되거나 틀리면 인라인 오류를 띄운다. 비밀번호는 입력하는 동안 강도를 막대와 글자(Weak/Medium/Strong)로 함께 보여준다.

접근성¶

가입 폼은 시각에만 의존하지 않도록 신경 썼다. 오류 메시지는 role=alert·aria-live로 읽어 주고, 각 입력에 aria-invalid·aria-describedby를 연결한다. 약관은 fieldset/legend로 묶고 필수 항목에 aria-required를, 인증코드 칸은 숫자 키패드(inputmode=numeric)를, 비밀번호 강도는 role=status를 쓴다. 모달은 Esc로 닫히고 포커스가 갇히지 않게 한다. 명도 대비는 4.5:1을 권장하되 최소 3:1을 지킨다. 화면 크기별 레이아웃은 responsive.

개발 핸드오프 노트¶

토큰 매핑과 전달 규약은 dev-handoff, 구현·API·문구 키 매핑은 frd를 참고한다.