개요 컬러 · 토큰 타이포그래피 아이콘 레이아웃 · 셸 재스킨 브리지 기본 컴포넌트 폼 · 입력 내비게이션 오버레이 카드 · 리스트 칩 · 태그 · 뱃지 대시보드 데이터 시각화 분석 차트 애널리틱스 콘솔 RADAR 인텔리전스 시뮬레이터 · 모델 패턴 유통 모듈 생산성 도구 인증 · 온보딩 온보딩 팀 · 권한 · 감사 빌링 · 잔액

App Workspace

인증 · 온보딩

로그인 전(pre-auth) 인증 표면 — 공유 셸 inc/auth_shell.php의 2열 split(좌: 폼 / 우: 퍼플 마케팅 패널). 실제 .auth-body(External Light)와 동일하게 화이트 표면 위 PURPLE #6B3FF6 액센트 · NanumSquare로 렌더되며, 우측 퍼플 그라데이션 패널이 브랜드 블록입니다. 로그인 · 회원가입 · 2단계 인증 · 비밀번호 재설정 · 초대 수락을 모두 같은 셸로 운용합니다.

인증 표면

실제 인증 셸(.auth-body · External Light)과 동일한 라이트 토큰 — 화이트 서피스(#FFFFFF) · 스테이지 #F7F7F7 + 퍼플 액센트. 필수 표시(.req)·버튼·체크박스 모두 퍼플.

#F7F7F7
Bg
#FFFFFF
Surface
#F4F4F5
Surface-2
#E5E5E5
Line
#6B3FF6
Purple
#4F2BD9
Purple-2

인증 셸 (2열 split)

.login-split — 좌측 폼은 화이트 표면(#FFFFFF), 우측은 채워진 퍼플 그라데이션 마케팅 패널(155deg #7d55ff→#4B23C9 + radial glow). 1024px 미만에선 폼 먼저 세로 스택.

SOUND.RADAR
아티스트 워크스페이스

로그인

.login-split grid 1fr/1fr (≥1024) · .login-left(#fff) · .login-right(purple gradient) · 모바일 폼 우선

로그인 · 2단계 인증

동일 셸의 두 단계 — 비밀번호 검증 후 2FA가 켜져 있으면 6자리 코드 단계로 전환(pending_2fa). 코드 입력은 중앙 정렬 + letter-spacing:.3em · numeric · one-time-code.

로그인

2단계 인증

회원가입

.login-note 안내 박스 + 이름/이메일/비밀번호 필드 + "계속" 진행 버튼. 레이블·소속사도 대표 아티스트로 가입하는 흐름.

회원가입

재설정 · 초대 · 비밀번호 설정

같은 셸로 운용되는 보조 흐름 — 비밀번호 재설정(메일 발송 + 성공 상태), 팀 합류(접속 코드 + 이름/이메일), 초대 비밀번호 설정(8자+ 확인) + 완료 상태.

비밀번호 재설정

메일함을 확인하세요. 재설정 링크를 보냈습니다.

팀 합류

설정 완료

비밀번호가 설정되었습니다. 이제 로그인할 수 있습니다.
로그인

2단계 인증 설정 (TOTP)

계정 보안 설정의 2FA 등록 — 인증 앱으로 스캔할 QR + 수동 입력 키(monospace) + 6자리 검증. 폼 컴포넌트 상세는 폼 · 입력 참고.

인증 앱으로 QR을 스캔하거나 키를 직접 입력:
K7QF 4M2A 9XPL 3VTD

사용 규칙

권장
  • · 모든 인증 페이지는 공통 auth_shell 2열 split 재사용
  • · 액센트·필수표시(.req)·버튼은 PURPLE 일관
  • · 1차 액션은 .btn-primary.btn-block 하나, 풀폭
  • · 2FA 코드는 numeric·one-time-code·중앙정렬 letter-spacing
  • · 우측 패널 소셜 프루프는 외부 브랜드 없이 모노그램 원형
금지
  • · 제품 셸(좌측 사이드바·상단바)을 인증 페이지에 적용
  • · 실제 이메일·비밀번호·TOTP 키 노출 (전부 샘플)
  • · 외부 로고/리뷰 캡처를 소셜 프루프로 사용
  • · 이모지 — 무조건 icon() SVG
  • · 한 화면에 위계 없는 버튼 여러 개

source: inc/auth_shell.php · app/login·register·join·forgot·invite·account.php(2FA) — 샘플 데이터