사용자 화면 · 회원가입/로그인
온보딩 화면(기존 사용자)
LOG-008 · 2026. 03. 06
Description
| 1 | 인삿말 |
|
| 2 | 이메일 입력창 |
|
| 3 | 비밀번호 입력창 |
|
| 4 | 자동로그인 체크 |
|
| 5 | 로그인 버튼 |
|
| 6 | 회원가입 버튼 |
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
차트가 새로워졌어요.
베타에서 함께해준 덕분에 차트가 더 단단해졌어요.
새로워진 차트를 지금 만나보세요.
Image Area
새로운 차트 만나기
개발 구현 가이드 — LOG-008 기존 사용자 업데이트 안내
디자인 상태
완료
완료
최종 승인
류우상 ✅
류우상 ✅
승인일
2026-03-27
2026-03-27
Update History
2026.03.26구현 가이드 최신화 검증 — Description 전수 대조 누락 0건, 카피 토큰화(__title var(--text-lg), __desc→__sub weight 400+text-muted) 반영 확인
2026.03.25구현 가이드 최신화 — 헤더 타이틀 수정, 9개 섹션(화면구조/레이어+치수/인터랙션/상태변화/네비게이션/에러처리/모션/여백요약/적용토큰) 전수 대조 완료
2026.03.25이미지 영역 플레이스홀더 전환(height:380px, var(--alpha-4), dashed border), 카피 최신화, 브랜드 오버레이 제거 반영
2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.16구현 가이드 8섹션 최신화 (화면구조, 레이어구조+치수, 핵심인터랙션, 상태변화, 네비게이션플로우, 에러/예외, 모션스펙, 여백·간격 요약)
2026.03.11구현 가이드 추가 (7섹션: 화면구조, 레이어구조, 카피영역, 이미지영역, CTA버튼, 노출조건, 에러처리), CTA 레드 그라디언트 적용
2026.03.10디자인 산출물 최신화
2026.03.06초기 디자인 작성
Implementation Specification
1. 화면 구조 개요
※ LOG-008은 기존 이메일 로그인 사용자 대상, 앱 업데이트 후 최초 1회만 노출되는 단일 화면 온보딩이다.
- 화면 유형: 전체 화면 (full screen, 393x852px) -- 단일 화면
- 노출 대상: 기존 이메일 로그인 사용자, 앱 업데이트 후 최초 1회
- 목적: 차트 업데이트 안내 + 홈 화면 진입 유도
- 배경:
var(--bg)#FAFAF8 - 신규 사용자: 이 화면 미노출 -- LOG-007 온보딩 경로로 이동
2. 레이어 구조 + 치수
| # | 영역 | 높이/위치 | 상세 |
|---|---|---|---|
| 1 | 상태바 | 44px, top:0 | iOS 시스템 제공 |
| 2 | 빈 네비 영역 | height:48px | 버튼 없음 -- 화면 이탈 방지 (이전/닫기 없음) |
| 3 | 카피 영역 | auto, padding:20px 24px 0 | 타이틀 "차트가 새로워졌어요.": var(--font-ko) 18px/700 var(--charcoal) #1A1A1A ls:-0.02em var(--lh-tight) / 설명 (2줄 <br> 포함): 14px/500 var(--charcoal) ls:-0.005em var(--lh-relaxed), mb:4px — <br> 위치: "덕분에" 이후 줄넘김 |
| 4 | 이미지 영역 | height:380px, margin:20px 24px | 플레이스홀더: var(--alpha-4) 배경, 1px dashed var(--border), 중앙 "Image Area" 텍스트 (var(--mono) var(--text-xs) uppercase var(--ls-wide) var(--text-muted)) |
| 5 | CTA 버튼 | height:50px, absolute, bottom:48px, left/right:24px | var(--cta-gradient) linear-gradient(135deg, #961E23→#B22A30), var(--sans) 15px/600, #fff, ls:-0.01em, R=0 |
| 6 | Home Indicator | height:34px, bottom:0 | iOS 하단 안전 영역 |
3. 핵심 인터랙션
- CTA "새로운 차트 만나기": 클릭 → 온보딩 종료 플래그
seen_update_notice_v2=true저장 (localStorage + 서버) → 메인 홈(HOM-001)으로 이동 - 화면 이탈 차단: 빈 네비 영역(48px)에 이전/닫기 버튼 없음. 반드시 CTA를 통해서만 홈으로 이동 가능
- 이미지 플레이스홀더: 이미지 미확정 상태로
var(--alpha-4)배경 + dashed 보더. 실제 이미지 확정 후 교체 예정
4. 상태 변화
| 상태 | 조건 | 시각적 변화 |
|---|---|---|
| 기본 (노출) | 기존 사용자 + 업데이트 후 최초 로그인 | 카피 + 이미지 영역(플레이스홀더) + CTA 활성 |
| 이미지 미확정 | 이미지 미제공 상태 | var(--alpha-4) 플레이스홀더 유지, CTA 정상 |
| 홈 이동 실패 | CTA 클릭 후 네트워크 오류 | 토스트 "홈 화면으로 이동 중 오류가 발생했습니다" + CTA 재활성화 |
5. 네비게이션 플로우
- 진입: 기존 이메일 로그인 사용자 + 앱 업데이트 후 첫 로그인 → 자동 진입 (LOG-008)
- CTA "새로운 차트 만나기": 온보딩 종료 → HOM-001 메인 홈 이동
- 이후 로그인:
seen_update_notice_v2=true확인 → 이 화면 생략, 바로 HOM-001 진입 - 신규 사용자: 이 화면 미노출 → LOG-007 온보딩 경로로 분기
6. 에러/예외 처리
- 이미지 미확정:
var(--alpha-4)플레이스홀더 표시. CTA 동작 정상 - 홈 이동 실패 (네트워크): 토스트 "홈 화면으로 이동 중 오류가 발생했습니다" (error 스타일) + CTA 버튼 재활성화
- 온보딩 플래그 저장 실패: 재시도 1회 후 임시 처리 (재앱 실행 시 재노출 가능성 허용)
7. 모션 스펙
| 동작 | 속성 | duration | easing |
|---|---|---|---|
| 화면 진입 | opacity: 0→1 | 300ms | ease-out |
| CTA → HOM-001 | translateY(0→-100%) 또는 crossfade | 400ms | var(--ease-ios-spring) |
8. 여백·간격 요약
| 항목 | 값 | 비고 |
|---|---|---|
| 콘텐츠 좌우 padding | 24px | 전체 화면 공통 |
| 빈 네비 영역 | height: 48px | 이전/닫기 버튼 없음 |
| 카피 영역 padding | 20px 24px 0 | top:20px, left/right:24px |
| 타이틀→설명 gap | 4px | margin-bottom |
| 이미지 영역 margin | 20px 24px | 상하:20px, 좌우:24px |
| 이미지 영역 높이 | 380px | 플레이스홀더 고정 높이 |
| CTA bottom | 48px | Home Indicator 안전 영역 |
| CTA left/right | 24px | absolute 화면 하단 고정 |
9. 적용 디자인 토큰
- [색상]
--alpha-4: rgba(17,17,17,0.03)--bg: #FAFAF8--border: rgba(17,17,17,0.07)--charcoal: #1A1A1A--cta-gradient: linear-gradient(135deg, #961E23 0%, #B22A30 50%, #961E23 100%)--text: #1A1A1A--text-muted: #888888--text-secondary: #555555- [타이포그래피]
--font-ko: Pretendard Variable (한글 카피 전용)--mono: TASA Orbiter--sans: Pretendard Variable--lh-tight: 1.3 (타이틀 1줄)--lh-relaxed: 1.6 (설명 2줄 이상)- [모션]
--ease-ios-spring: cubic-bezier(0.32, 0.72, 0, 1)