와이어프레임 / 35-화면설계 / wireframes / 화면-01 로그인·회원가입

화면 01 · 로그인 / 회원가입 — 와이어프레임

파이프라인 ③단계 · 구조 뼈대(SOT) · Figma 정본 역추출 · 클릭 가능(prototype)
출처: fileKey=9FQdVis1fCSZCqhcfqTvWO · page 3:43 · 허브 노트: 화면-01-로그인-회원가입.md
6개 섹션 · 26개 상태 프레임 · 기기 375×812 · 최종 테마: 다크(와이어프레임은 구조만 회색으로 본다)

▶ 흐름 모드: 요소를 눌러 화면 이동 ▦ 전체 모드: 핫스팟 클릭 시 대상으로 스크롤 ①②③ 요소 번호 = 아래 주석 동작·이동·데이터·규칙·상태 유형 태그

01_01 · 로그인

이메일·비밀번호로 로그인. 한국 첫진입은 성인 확인 팝업이 겹친다. 오류 시 입력 아래 라벨이 뜨고 화면이 늘어난다.

로그인 · default
Email 2
Password 3
?도움이 필요하신가요? 4
Don't have an account? Sign Up 6
Sign In 5
  • 주석 · 로그인 기본
  • 1요소브랜드 로고. 서비스 진입점.
  • 2동작이메일 입력. 형식 검증·필수값.
  • 3동작비밀번호 입력. 마스킹·필수값.
  • 4이동도움말(icon-help-20) → 비밀번호 찾기.
  • 5데이터로그인 실행 → POST /auth/signIn(암호화) + 키 발급 POST /auth/publish/Key. 한국은 진입 시 본인인증 POST /cert/nice/init. (성공 시 메인 — 이 화면군 밖)
  • 6이동회원가입 /signup.
  • ·규칙지역=US면 본인인증 생략(세션 REGION_KEY). 한국 첫진입은 성인 확인 팝업이 먼저 뜬다.
로그인 · 첫진입 (한국 전용)
Email
Password
Sign In
19 1

청소년 이용 불가

19세 미만은 서비스를 이용할 수 없습니다.

알겠습니다 2
  • 주석 · 첫진입 성인 확인
  • 1규칙한국 서비스 첫 진입 전용. 19세 미만 이용 불가 고지. 근거: [[성인콘텐츠-정책]].
  • 2이동"알겠습니다" → 팝업 닫고 로그인으로.
로그인 · typing
user@email.com
Password
?도움이 필요하신가요?
Don't have an account? Sign Up
Sign In
  • ·상태입력 포커스 시 테두리가 진해진다. 이메일 형식을 실시간 확인.
로그인 · filled
user@email.com
••••••••
?도움이 필요하신가요?
Don't have an account? Sign Up
Sign In
  • ·상태두 칸 모두 채우면 Sign In이 활성화된다.
로그인 · error (1106px)
user@email.com
••••••••
이메일 또는 비밀번호가 올바르지 않습니다. 1
?도움이 필요하신가요?
Don't have an account? Sign Up
Sign In
  • 1상태인증 실패 시 입력 아래 Label 오류가 뜨고, 화면 높이가 812→1106px로 늘어난다.

01_01_01 · 잠금 화면 (PIN)

재방문·간편 재로그인 전용. 가린 이메일 + 자물쇠 + 4자리 PIN. 5회 실패 시 팝업.

PIN · default
aa****@gmail.com 1
🔒 Enter your PIN 2
Sign in with your ID 4
Confirm 5
  • 주석 · PIN 잠금 기본
  • 1요소마지막 로그인 계정을 가려서 표시(aa****@).
  • 2요소자물쇠(icon-lock-24) + "Enter your PIN" 안내.
  • 3데이터PIN 4칸 → 진입 판별 POST /auth/signIn/entry → PIN 로그인 POST /auth/signIn/pin.
  • 4이동"Sign in with your ID" → 이메일·비밀번호 전체 로그인.
  • 5동작Confirm으로 PIN 제출.
  • ·규칙토큰은 있으나 세션 검증이 없을 때 등장(주로 브라우저 재실행). PIN은 간편 재로그인 전용. 근거: [[결정-세션정책-다중로그인]].
PIN · typing
aa****@gmail.com
🔒 Enter your PIN
••
Sign in with your ID
Confirm
  • ·상태PIN을 한 자리씩 채우는 중. 채운 칸은 점(•)으로 표시.
PIN · filled
aa****@gmail.com
🔒 Enter your PIN
Sign in with your ID
Confirm
  • ·상태4칸을 모두 채우면 Confirm 활성.
PIN · error
aa****@gmail.com
🔒 Enter your PIN
PIN이 올바르지 않습니다 1
Sign in with your ID
Confirm
  • 1상태PIN 불일치 시 오류 Label 노출. 실패 횟수를 누적한다.
PIN · 5회 실패 (팝업)
aa****@gmail.com
Confirm

PIN 5회 오류

아이디로 다시 로그인해 주세요.

확인 1
  • 1규칙5회 연속 실패 → dim+popup으로 차단하고 아이디(전체) 로그인으로 유도.

01_02 · 회원가입

이메일로 새 계정 생성 → 인증 메일 발송 → 링크 클릭 → 완료. 인증 실패/진행 중 상태를 따로 그린다.

회원가입 · default
‹ 회원가입 1

계정 만들기

Email 2
Password 3
Confirm Password
전체 약관에 동의합니다 4
이용약관 · 개인정보 처리방침 5
Sign Up 6
  • 주석 · 회원가입 기본
  • 1이동뒤로 가기 → 로그인.
  • 2동작이메일 입력. 형식·중복 검증.
  • 3동작비밀번호 + 확인. 두 칸 일치 검증·필수.
  • 4동작약관 동의 체크(button/check+text). 필수 동의.
  • 5이동이용약관 /terms · 개인정보 /privacy.
  • 6데이터가입 실행 → 인증 메일 발송 POST /auth/email-verify → 발송 안내 화면.
회원가입 · typing
‹ 회원가입

계정 만들기

user@email.com
Password
Confirm Password
전체 약관에 동의합니다
Sign Up
  • ·상태입력 중. 각 칸을 실시간 검증한다.
회원가입 · filled
‹ 회원가입

계정 만들기

user@email.com
••••••••
••••••••
전체 약관에 동의합니다
Sign Up
  • ·상태전부 채우고 약관 동의 체크(on) → Sign Up 활성.
회원가입 · 인증 메일 발송
‹

이메일을 확인하세요

받은 메일의 인증 링크를 눌러
가입을 마치세요.

메일 다시 보내기 1
  • 1동작재발송 링크 → POST /auth/email-verify 재호출.
  • ·이동봉투(일러스트) 클릭 = 메일 링크 클릭 시뮬 → /verify 인증 후 가입 완료.
회원가입 · 가입 완료
‹

가입 완료!

이제 Oruli를 시작할 수 있어요.

시작하기 1
  • 1이동이메일 인증까지 끝난 상태. "시작하기" → 메인/온보딩(이 화면군 밖).
회원가입 · 인증 실패
‹

인증에 실패했어요

링크가 만료되었을 수 있어요.

  • ·상태인증 링크 만료·오류 시. 재발송/재가입으로 유도.
회원가입 · 인증 진행 중
‹

인증 진행 중

잠시만 기다려 주세요.

  • ·상태인증 결과를 기다리는 대기 화면.

01_03 · 약관

이용약관 전문을 스크롤로 읽는 단일 화면.

약관 · 단일 화면
‹ 이용약관 1
  • 1데이터이용약관 전문(/terms). 우측 스크롤바로 긴 본문을 읽는다. 뒤로 가기로 회원가입 복귀.

01_04 · 비밀번호 찾기

가입 이메일 입력 → 재설정 메일 발송. 가입 여부 결과를 결과 화면으로 안내.

비번찾기 · 이메일 입력
‹ 비밀번호 찾기

가입한 이메일을
입력해 주세요

Email 1
재설정 메일 받기 2
  • 주석 · 비밀번호 찾기
  • 1동작가입 때 쓴 이메일 입력.
  • 2데이터재설정 메일 발송 POST /auth/email-verify/password → 결과 화면.
비번찾기 · filled
‹ 비밀번호 찾기

가입한 이메일을
입력해 주세요

user@email.com
재설정 메일 받기
  • ·상태이메일 채움 → CTA 활성.
비번찾기 · 결과 A(발송)
‹

메일을 보냈어요

받은 메일에서 재설정을 진행하세요.

확인 1
  • 1동작가입 이력 있음 → 재설정 메일 발송 안내. "확인" → 로그인.
  • ·이동메일 링크 클릭 시 비밀번호 재설정 화면으로.
비번찾기 · 결과 B(미가입)
‹

가입 이력을 찾지 못했어요

이메일을 다시 확인해 주세요.

  • ·규칙가입 이력 없음 → 미가입 안내(하단 CTA 없음). 이메일 재확인 유도.

01_05 · 비밀번호 재설정

새 비밀번호를 두 번 입력 → 완료 팝업. 불일치 시 오류 라벨.

재설정 · default
‹ 비밀번호 재설정

새 비밀번호를
설정하세요

New Password 1
Confirm Password
재설정 2
  • 주석 · 비밀번호 재설정
  • 1동작새 비밀번호 + 확인. 두 칸 일치 검증.
  • 2데이터재설정 실행 POST /auth/email-verify/password → 완료 팝업.
재설정 · error
‹ 비밀번호 재설정

새 비밀번호를
설정하세요

••••••••
••••••
비밀번호가 일치하지 않습니다. 1
재설정
  • 1상태두 비밀번호 불일치 시 오류 Label 노출. 일치해야 CTA 진행.
재설정 · filled
‹ 비밀번호 재설정

새 비밀번호를
설정하세요

••••••••
••••••••
재설정
  • ·상태두 칸 일치 채움 → 재설정 활성.
재설정 · 완료 팝업
‹ 비밀번호 재설정

새 비밀번호를
설정하세요

••••••••
••••••••
재설정

재설정 완료

새 비밀번호로 로그인해 주세요.

확인 1
  • 1이동재설정 성공 → dim+popup. "확인" → 로그인 화면.

이 와이어프레임은 파이프라인 뼈대(SOT)이자 클릭 가능한 프로토타입이다. 번호 주석은 곧 ②화면설계 단계의 실질(동작·이동·엔드포인트·규칙)이다. 화면 구조가 바뀌면 이 파일을 갱신하고, 허브 노트 화면-01-로그인-회원가입.md의 wireframe: 필드가 이 파일을 가리킨다.