사용자 화면 · 회원가입/로그인
소셜 로그인 머지 바텀시트
LOG-004 · 2026. 01. 29
Description
| 1 | 소셜 로그인 머지 바텀시트 |
|
Design Output
UI 디자인 산출물
위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.
차트, 검증된 기준으로
거래하는 리세일 마켓.
어떤 방식으로 찾으시겠어요?
직접 찾을게요 공개 마켓 탐색
조용히 찾을래요 프라이빗 세일 의뢰
실시간 마켓 업데이트
지금 주목할 작품
컬렉터들의 선택
CHAART로 빠른 로그인하기
쉽고 빠르게 차트로 로그인하세요
카카오톡으로 연동하기
Google로 연동하기
Apple로 연동하기
Naver로 연동하기
개발 구현 가이드 — LOG-004 소셜 로그인 머지 바텀시트
디자인 상태
완료
완료
최종 승인
류우상 ✅
류우상 ✅
승인일
2026-03-27
2026-03-27
Update History
2026.03.26구현 가이드 최신화 검증 — Description 전수 대조 누락 0건, 토큰 섹션 통합 확인, 디자인 산출물 동기화 완료
2026.03.25구현 가이드 코드 동기화 확인 — 실제 코드와 가이드 내용 일치 검증 완료. 추가 변경 사항 없음.
2026.03.19인라인 스타일 → sb-dp-thumb-texture 클래스 전환
2026.03.17구현 가이드 ↔ 디자인 산출물 불일치 수정
2026.03.16구현 가이드 최신화 — Applied Design Tokens 통합, Description/디자인 산출물 기준 전면 재작성
2026.03.11HTML 구조 수정 — sb-content 닫힘 오류 수정, zone/marker 위치 복원, 네이버 버튼 하단 여백 추가
2026.03.11LOG-003 canonical shell 기준으로 Design Output shell 정렬, docs 최신화
2026.03.10홈 화면 배경 HOM-001 디자인 반영
2026.03.04초기 디자인 작성
Implementation Specification
1. 화면 구조 개요
LOG-004는 이메일 로그인(LOG-003) 성공 후, 동일 이메일 주소로 가입된 소셜 계정이 존재할 때 자동으로 노출되는 계정 연동(머지) 바텀시트이다. 새 버전 앱 업데이트 사용자에게는 최초 1회 노출된다. 배경에는 HOM-001 홈 화면이 그대로 보이며, 딤 오버레이 위에 바텀시트가 하단에서 슬라이드 업으로 등장한다.
2. 레이어 구조 + 치수
| # | 영역 | 높이/위치 | 비고 |
|---|---|---|---|
| 1 | 배경 (HOM-001 홈 화면) | 전체 화면 393x852 | 홈 화면 그대로 유지, pointer-events:none |
| 2 | 딤 오버레이 | inset:0, rgba(0,0,0,0.3), z-index:1 | 터치 시 시트 닫기 트리거 |
| 3 | 바텀시트 컨테이너 | bottom:0, left:0, right:0, z-index:2 | bg: --bg #FAFAF8, R=0 직각 |
| 3-a | 핸들 바 | 36x4px, padding-top:12px | rgba(26,26,26,0.12), flex justify-center |
| 3-b | 닫기(X) 버튼 | 22x22, position:absolute top:16px right:20px | --text-muted #888888, stroke:1.5px, linecap:square, linejoin:miter |
| 3-c | 타이틀 영역 | padding:20px 24px 0, text-align:center | 타이틀 + 서브텍스트 |
| 3-d | 소셜 버튼 스택 | padding:24px 24px 32px, 4개x50px, gap:10px | 카카오/Google/Apple/Naver |
- 바텀시트 배경:
var(--bg)#FAFAF8 — border-radius:0 (R=0 직각) - 핸들 바: width:36px, height:4px, background:
rgba(26,26,26,0.12), 상단 중앙 정렬, padding-top:12px - 닫기(X): SVG 22x22px, stroke:
var(--text-muted)#888888, stroke-width:1.5, linecap:square, linejoin:miter, position:absolute top:16px right:20px - 타이틀 영역 패딩: padding:20px 24px 0
- 버튼 스택 패딩: padding:24px 24px 32px
3. 핵심 인터랙션
- 소셜 버튼 클릭: 해당 소셜 플랫폼 OAuth 인증 절차 진행 (외부 인앱 브라우저 또는 SDK)
- 인증 성공: 기존 이메일 계정과 선택 소셜 계정을 이메일 기준으로 머지(연동) → 성공 토스트 2.5초 → 로그인 성공 상태 전환 → 원래 요청 화면으로 자동 이동
- 인증 실패: 에러 토스트 노출, 현재 머지 바텀시트 유지. 다른 소셜 수단 재선택 가능
- 사용자 취소: 현재 머지 바텀시트 유지 (상태 변경 없음, 토스트 없음)
- 닫기(X) 클릭: 소셜 머지 프로세스 취소 → 기존 이메일 로그인 상태 유지 → 원래 요청 화면 이동
- 딤 오버레이 터치: X 버튼과 동일 닫기 동작
- 노출 규칙: 사용자 이메일과 연동 가능한 소셜 수단만 활성화. 연동 불가 수단은 disabled(
opacity:0.35; pointer-events:none) 또는 미노출
4. 상태 변화
- Default: 바텀시트 등장 완료 — 4개 소셜 버튼 활성, 닫기(X) 버튼 활성
- 버튼 disabled: 연동 불가 소셜 —
opacity:0.35,pointer-events:none, 배경색 유지 - 인증 진행 중: 선택 버튼 로딩 상태 (
opacity:0.6, 스피너 16px #fff) - 연동 성공 후: 바텀시트 닫힘 → 세션 전환 → 원래 화면 이동
- 재노출 조건: 소셜 연동 미완료 사용자 대상 3개월 후 재노출. 신규 앱 업데이트 시 최초 1회
5. 네비게이션 플로우
- 진입: LOG-003 (이메일 로그인 성공) → 동일 이메일 소셜 계정 존재 감지 → LOG-004 자동 노출
- 소셜 연동 성공: LOG-004 닫힘 → 원래 요청 화면 (HOM-001 등)
- 닫기(X) / 딤 터치: LOG-004 닫힘 → 이메일 로그인 상태 유지 → 원래 요청 화면
6. 에러/예외 처리
- 인증 실패: "소셜 계정 연동에 실패했습니다. 다시 시도해주세요." — 에러 토스트 bg:
var(--color-error-toast), text:#fff, 2.5초 auto-dismiss, 시트 유지 - 이미 다른 계정에 연결된 소셜: "이미 다른 계정에 연결된 소셜 계정입니다." — 정보 토스트 bg:
var(--charcoal)#1A1A1A, text:#fff, 시트 유지 - 네트워크 오류: "네트워크 연결을 확인해주세요." — 에러 토스트, 시트 유지
- 사용자 취소: 토스트 없음, 시트 유지, 상태 변경 없음
- 지원 불가 소셜: 해당 버튼 미노출 또는 disabled, 별도 에러 없음
- 토스트 공통 사양: 폰 내부 하단 16px 고정, 2.5초 auto-dismiss
- 보안: 이메일 기준 중복 검증 → 기존 이메일 계정을 canonical(마스터)으로 유지 → 머지 후 선택 소셜로도 로그인 가능 → 소셜 1:1 매핑 (하나의 소셜 = 하나의 CHAART 계정)
7. 모션 스펙
- 바텀시트 등장:
translateY(100%) → translateY(0), 400ms,var(--ease-ios-spring) - 바텀시트 닫힘:
translateY(0) → translateY(100%), 400ms,var(--ease-ios-spring) - 딤 등장:
opacity:0 → 0.3, 300ms, ease-out (시트와 동시 실행) - 딤 닫힘:
opacity:0.3 → 0, 300ms, ease-out (시트와 동시 실행)
8. 여백·간격 요약
| 구간 | 값 |
|---|---|
| 핸들 바 상단 여백 | padding-top: 12px |
| 타이틀 영역 패딩 | 20px 24px 0 |
| 타이틀 → 서브텍스트 | margin-bottom: 8px |
| 서브텍스트 → 버튼 스택 | padding-top: 24px |
| 버튼 스택 좌우 패딩 | 24px |
| 버튼 스택 하단 패딩 | 32px |
| 버튼 간격 (gap) | var(--space-3) 10px |
| 버튼 높이 | 50px |
| 닫기(X) 위치 | top:16px, right:20px |
| 소셜 아이콘 좌측 패딩 | 20px |
| 소셜 아이콘 크기 | 16x16 ~ 18x18 |
9. 적용 디자인 토큰
- 바텀시트 배경:
--bg→ #FAFAF8 — 직각 (R=0) - 딤 오버레이: hardcoded
rgba(0,0,0,0.3)→ inset:0, z-index:1 — LOG-003 canonical (0.3) - 타이틀:
--sans20px 700 → Pretendard, ls: -0.03em, center - 서브텍스트: "쉽고 빠르게 차트로 로그인하세요" —
--sans14px--text-secondary→ #6B6B6B, ls: -0.005em - 카카오 버튼: Platform #FEE500 → "~으로 연동하기" 라벨
- Google 버튼: Platform #FFFFFF + border → Google Identity 가이드
- Apple 버튼: Platform #000000 → Apple HIG 가이드
- Naver 버튼: Platform #03C75A → 네이버 브랜드 가이드
- 버튼 높이: 50px → 터치 타겟 48px 이상 충족
- 버튼 간격:
--space-3(10px) → btn-stack gap - 닫기(X) 아이콘: 22x22
--text-muted→ stroke: square/miter, 1.5px - 좌우 패딩: 24px → 바텀시트 내부 콘텐츠 마진