사용자 화면 · 회원가입/로그인
로그인 진입 화면
LOG-001 · 2026. 03. 03
차트로 로그인하기
차트는 필요한 순간에만 로그인을 요청합니다
(아이콘) 카카오톡으로 로그인 또는 회원가입
(아이콘) Google로 로그인 또는 회원가입
(아이콘) Apple로 로그인 또는 회원가입
최근 로그인
(아이콘) Naver로 로그인 또는 회원가입
또는
1
2
3
4
5
| 1 |
헤더 |
- Back 버튼
- Back 버튼 클릭 시, 로그인 진입 직전 화면으로 이동
|
| 2 |
카피 영역 |
- 메인 카피 : 사용 목적 안내 문구 노출
- 서브 카피 : 서비스 정책 안내 문구 노출
- CTA 없음
|
| 3 |
이미지 영역 |
- 단일 이미지 영역
- 이미지 : 브랜드 톤앤 매너 반영한 대표 이미지 노출
- CTA 없음
|
| 4 |
로그인 버튼 |
- 소셜 로그인
- 클릭 시, 해당 플랫폼 인증 진행
- 최초 로그인 또는 캐싱 X 사용자
- 버튼 클릭 시, 약관 동의 바텀 시트 노출(LOG-002)
- 기존 로그인 사용자
- 소셜 로그인 중단 케이스
- 소셜 로그인 도중 사용자가 인증을 취소한 경우
- 오류 토스트 메시지 노출 — "로그인이 취소됐습니다"
- 로그인 진입 화면 유지
- 이메일 로그인
- 클릭 시, 아이디/비밀번호 입력 화면으로 이동 (LOG-003)
- 로그인 성공/실패
- 로그인 성공 : 로그인 성공 메시지 토스트 노출 후, 로그인 요청 발생 시점의 원래 화면으로 이동
- 로그인 실패 : 오류 메시지 토스트 또는 팝업 노출 (LOG-011)
|
| 5 |
최근 로그인 표시 |
- 노출 조건
- 사용자가 이전에 로그인에 성공한 이력이 있는 경우
- 단말 기준으로 마지막 로그인에 사용된 소셜 로그인 버튼에 노출
- 표시 방식
- 해당 소셜 로그인 버튼에 '최근 로그인' 텍스트 배지 노출
- 단순 안내용 UI로 버튼 기능에는 영향 없음
- 동작
|
| 6 |
비고 |
- 재로그인/세션 만료 처리
- 인증 토큰 만료 시
- 현재 액션 중단
- 인증 토큰 만료 토스트 메시지 노출 후, 로그인 화면 이동 — "로그인을 재시도해주세요."
- 로그인 완료 후 원래 화면으로 복귀
- 정지 계정 토스트 메세지
- "정지된 계정입니다. 문의사항은 cs@chaart.io로 부탁드립니다"
- 탈퇴 계정 토스트 메세지
- "탈퇴 계정입니다. nn일 후, 재가입 가능합니다."
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
차트로 시작하기.
나를 위한 단 하나의 차트.
지금 바로 로그인하고 시작해 보세요.
| 요소 | Token | 값 |
|---|
| 타이틀 |
--sans · 30px · 800 |
Pretendard Variable, Extra Bold · "차트" → --red-brand |
| 서브타이틀 |
--text-secondary · 17px · line-height 1.6 |
#6B6B6B |
| 히어로 영역 |
--paper #F0EDE6 + linen 텍스처 |
삭제됨 (2026.03.09) |
| 카카오 버튼 |
Platform · #FEE500 |
카카오 브랜드 가이드 |
| Google 버튼 |
Platform · #FFFFFF + border |
Google Identity 가이드 |
| Apple 버튼 |
Platform · #000000 |
Apple HIG 가이드 |
| Naver 버튼 |
Platform · #03C75A |
네이버 브랜드 가이드 |
| 이메일 버튼 |
--charcoal border · 시스템 아이콘 mail |
Secondary action |
| 최근 로그인 말풍선 |
--red-brand bg · #fff · --sans · 11px · 600 |
#B22A30 — 말풍선 + 하단 화살표, floating 애니메이션 |
| 버튼 높이 |
50px |
터치 타겟 최소 48px 이상 충족 |
| 버튼 간격 |
--space-3 (10px) |
btn-stack gap |
| 좌우 패딩 |
32px |
iPhone 14 Pro 기준 컨텐츠 마진 |
| 토스트 |
--sans · 12px · 500 · padding: 10px 20px |
error: #D32F2F · info: --charcoal · bottom 24px · 라운드 없음 |
단말 기준 마지막 로그인에 사용된 소셜 로그인 버튼에 "최근 로그인" 말풍선이 노출됩니다.
Interactive Case Demo — 각 케이스 버튼 클릭 시 위 폰 목업에서 시뮬레이션됩니다
Update History
2026.03.03초기 디자인 작성
2026.03.09"최근 로그인" 뱃지 → 말풍선(speech bubble) 스타일로 개선 · Design Description 추가
2026.03.09히어로 이미지 영역 삭제 · 타이틀 카피 변경 ("차트로 시작하기.") · 폰트 사이즈 조정
2026.03.09예외 케이스 인터랙티브 테스트 패널 추가 (토큰 만료 · 정지 계정 · 탈퇴 계정 · 소셜 취소)
| 1 |
헤더 |
- Back 버튼
- 클릭 시 로그인 진입 직전 화면으로 이동
- 아이콘: chevron-left
var(--icon-lg) 24px
|
| 2 |
카피 영역 |
- 타이틀: "차트로 시작하기." — "차트"
--red-brand 컬러
--sans · 30px · Extra Bold(800)letter-spacing: -0.02em
- 서브타이틀: "나를 위한 단 하나의 차트. 지금 바로 로그인하고 시작해 보세요."
--text-secondary #6B6B6B · 17px · line-height 1.6
|
| 3 |
히어로 이미지 |
- 브랜드 톤앤매너 반영한 대표 이미지 — 삭제됨 (2026.03.09)
- 배경:
--paper #F0EDE6 + linen 텍스처
- CHRT 각인 + emboss filter 처리
- CTA 없음 — 순수 브랜딩 영역
|
| 4 |
소셜 로그인 버튼 |
- 버튼 스택 구성 (위→아래)
- 카카오톡 — #FEE500 배경, 카카오 브랜드 가이드
- Google — #FFFFFF + border, Google Identity 가이드
- Apple — #000000 배경, Apple HIG 가이드
- Naver — #03C75A 배경, 네이버 브랜드 가이드
- 버튼 사양
- 높이: 50px (터치 타겟 48px 이상 충족)
- 간격:
--space-3 (10px)
- 좌우 패딩: 32px
- 아이콘:
--icon-md 20px
- 클릭 동작
- 최초 로그인 / 캐싱 X → 약관 동의 바텀시트 노출 (LOG-002)
- 기존 로그인 사용자 → 로그인 처리 후 서비스 진입
- 소셜 인증 취소 시 → "로그인이 취소됐습니다" 토스트
- 이메일 로그인
- Secondary 스타일:
--charcoal border · mail 아이콘
- 클릭 시 아이디/비밀번호 입력 화면 이동 (LOG-003)
- 로그인 성공/실패
- 성공: 토스트 "로그인되었습니다" → 원래 화면 이동
- 실패: 오류 토스트 또는 팝업 (LOG-011)
|
| 5 |
최근 로그인 말풍선 |
- 노출 조건
- 사용자가 이전에 로그인에 성공한 이력이 있는 경우
- 단말 기준으로 마지막 로그인에 사용된 소셜 로그인 버튼에 노출
- 표시 방식
- 해당 버튼 상단 중앙에 말풍선(speech bubble) 형태로 노출
- 배경:
--red-brand #B22A30 · 하단 삼각 화살표(::after)
- 텍스트: #fff ·
--sans · 11px · font-weight 600
- 그림자:
0 2px 8px rgba(178,42,48,0.25)
- 버튼과 간격: margin-top 18px (자동)
- 모션: floating 애니메이션 —
2s ease-in-out infinite · translateY(±3px)
- 동작
- 단순 안내용 UI — 버튼 기능에는 영향 없음
- '최근 로그인' 표시가 된 버튼 클릭 시 해당 소셜 로그인 바로 인증 진행
- 버튼 문구 변경 규칙
- 기본 상태 (말풍선 없음): "~로 시작하기" (예: "카카오톡으로 시작하기")
- 말풍선 부착 시: "~로 계속하기" (예: "카카오톡으로 계속하기")
- 말풍선이 부착된 버튼만 문구가 변경됨 — 나머지 버튼은 "시작하기" 유지
|
| 6 |
예외 케이스 |
- 인증 토큰 만료 시
- 현재 액션 중단
- 토스트: "로그인을 재시도해주세요." → 로그인 화면 이동
- 로그인 완료 후 원래 화면으로 복귀
- 정지 계정
- 토스트: "정지된 계정입니다. 문의사항은 cs@chaart.io로 부탁드립니다"
- 탈퇴 계정
- 토스트: "탈퇴 계정입니다. nn일 후, 재가입 가능합니다."
- 소셜 인증 취소
- 토스트: "로그인이 취소됐습니다" (info)
- 토스트 공통 사양
- 위치: 폰 하단 24px (홈바 위)
- 스타일:
--sans 12px / 500 / padding 10px 20px / 라운드 없음
- error: #D32F2F 배경 · info:
--charcoal 배경
- 애니메이션: slide-up + fade-in (300ms) → 3초 노출 → slide-down + fade-out
|