사용자 화면 · 회원가입/로그인

소셜 로그인 머지 바텀시트

LOG-004 · 2026. 03. 04

화면 이름 소셜 로그인 머지 바텀시트
화면 위치 기능 클릭 > 로그인 진입 화면 > 이메일 로그인 > 바텀시트
화면 ID LOG-004
작성일 2026. 03. 04
9:41
CH
차트 Chaart
Top Collectors'
Picks

CHAART로 빠른 로그인하기

쉽고 빠르게 차트로 로그인하세요

(아이콘) 카카오톡으로 연동하기
(아이콘) Google로 연동하기
(아이콘) Apple로 연동하기
(아이콘) Naver로 연동하기
1
Description
1 소셜 로그인 머지 바텀시트
  • 노출 방식
    • 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트
    • 이메일 로그인(LOG-003) 성공 후, 동일 이메일로 가입된 소셜 로그인 계정이 존재할 경우 자동 노출
    • 목적: 기존 이메일 계정과 소셜 로그인 계정을 하나의 계정으로 연동(머지) 안내
  • 안내 문구 영역
    • 타이틀: "CHAART로 빠른 로그인하기"
    • 설명 문구: "기존 계정과 소셜 계정을 연동하면 더 쉽고 빠르게 로그인할 수 있어요"
  • 소셜 로그인 버튼 영역
    • 소셜 로그인 버튼 구성
      • 카카오톡 계정으로 연동하기
      • Google 계정으로 연동하기
      • Apple 계정으로 연동하기
      • Naver 계정으로 연동하기
  • 버튼 동작 순서
    • 사용자 이메일과 연동 가능한 소셜 로그인 수단만 활성화 가능
    • 소셜 계정이 기존 차트 계정과 연동 불가능할 경우 바텀시트 또는 마이노출 처리
    • 소셜 로그인 버튼 클릭 시 동작
      • 해당 소셜 플랫폼 인증 절차 진행
      • 인증 성공 시
        • 기존 이메일 계정과 소셜 계정 머지(연동) 처리
        • 소셜 계정 연동 성공 메시지 토스트 노출, 로그인된 상태 유지
      • 로그인 요청 발생 시점의 원래 화면으로 이동
      • 인증 실패 또는 취소 시
        • 소셜 계정 연동 실패 메시지 토스트 노출 후, 현재 소셜 로그인 머지 바텀시트 유지
  • 닫기 버튼 동작
    • 기존 이메일 로그인 상태 유지
    • 계정 연동 없이 로그인된 상태로 원래 화면으로 이동
  • 예외 및 보안 처리
    • 계정 머지 처리 시
      • 이메일 기준으로 계정 중복 여부 먼저 검증
      • 이메일로 등록된 기존 이메일 계정 기준으로 유지
    • 머지 이후
      • 이후 로그인 시 선택한 소셜 계정으로 로그인 가능

Design Output

UI 디자인 산출물

위 스토리보드 기획을 CHAART OS 디자인 토큰으로 변환한 결과물. 실제 구현 시 참조할 최종 디자인.

9:41
차트 Chaart
Top Collectors'
Picks

CHAART로 빠른 로그인하기

쉽고 빠르게 차트로 로그인하세요

카카오톡으로 연동하기
Google로 연동하기
Apple로 연동하기
Naver로 연동하기
Applied Design Tokens
요소Token값
바텀시트 배경 --bg #FAFAF8 — 직각 (R=0)
딤 오버레이 --charcoal 45% rgba(26,26,26,0.45)
타이틀 --sans · 20px · 700 Pretendard, ls: -0.03em, center
서브텍스트 --sans · 14px · --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) 아이콘 22×22 · --text-muted stroke: square/miter, 1.5px
좌우 패딩 24px 바텀시트 내부 콘텐츠 마진
Design Description

Update History

2026.03.04초기 디자인 작성
1 소셜 로그인 머지 바텀시트
  • 노출 방식
    • 화면 하단에서 슬라이드 업 형태로 노출되는 바텀시트
    • 이메일 로그인(LOG-003) 성공 후, 동일 이메일로 가입된 소셜 로그인 계정이 존재할 경우 자동 노출
    • 목적: 기존 이메일 계정과 소셜 로그인 계정을 하나의 계정으로 연동(머지) 안내
  • 안내 문구 영역
    • 타이틀: "CHAART로 빠른 로그인하기"
    • 설명 문구: "기존 계정과 소셜 계정을 연동하면 더 쉽고 빠르게 로그인할 수 있어요"
  • 소셜 로그인 버튼 영역
    • 소셜 로그인 버튼 구성
      • 카카오톡 계정으로 연동하기
      • Google 계정으로 연동하기
      • Apple 계정으로 연동하기
      • Naver 계정으로 연동하기
  • 버튼 동작 순서
    • 사용자 이메일과 연동 가능한 소셜 로그인 수단만 활성화 가능
    • 소셜 계정이 기존 차트 계정과 연동 불가능할 경우 바텀시트 또는 마이노출 처리
    • 소셜 로그인 버튼 클릭 시 동작
      • 해당 소셜 플랫폼 인증 절차 진행
      • 인증 성공 시
        • 기존 이메일 계정과 소셜 계정 머지(연동) 처리
        • 소셜 계정 연동 성공 메시지 토스트 노출, 로그인된 상태 유지
      • 로그인 요청 발생 시점의 원래 화면으로 이동
      • 인증 실패 또는 취소 시
        • 소셜 계정 연동 실패 메시지 토스트 노출 후, 현재 소셜 로그인 머지 바텀시트 유지
  • 닫기 버튼 동작
    • 기존 이메일 로그인 상태 유지
    • 계정 연동 없이 로그인된 상태로 원래 화면으로 이동
  • 예외 및 보안 처리
    • 계정 머지 처리 시
      • 이메일 기준으로 계정 중복 여부 먼저 검증
      • 이메일로 등록된 기존 이메일 계정 기준으로 유지
    • 머지 이후
      • 이후 로그인 시 선택한 소셜 계정으로 로그인 가능
← 이전 화면: LOG-003 다음 화면: LOG-005 →