썸블링 디자인 시스템: 다크 테마로 감성을 전달하다

“왜 데이팅 앱은 빨간색이어야 하나요?”

Tinder는 빨간색입니다. Bumble은 노란색입니다. Hinge는 연한 살구색입니다. 기존 데이팅 앱들의 색상 언어는 대체로 밝고, 활기차고, 낙관적입니다. 첫인상에서 에너지를 전달하려는 의도가 분명합니다.

썸블링은 다른 선택을 했습니다. 다크 테마, 딥 퍼플, 미드나잇 블루. 처음 팀 내에서 이 방향을 제안했을 때 반응은 엇갈렸습니다. “데이팅 앱이 너무 무겁게 보이는 거 아닐까?” 하지만 썸블링이 전달하고 싶은 감성은 “빠른 만남”이 아니라 “깊은 연결”이었고, 그 감성에 어울리는 시각 언어는 확실히 달랐습니다.

다크 퍼스트(Dark-First)를 선택한 이유

많은 앱이 라이트 테마를 기본으로 만들고 다크 테마를 나중에 추가합니다. 썸블링은 반대로 다크 테마를 기본값으로 설계했습니다. 이 결정에는 세 가지 근거가 있습니다.

사용 맥락: 저녁과 밤. 데이팅 앱 사용 패턴을 분석하면 피크 타임이 저녁 9시에서 자정 사이에 집중됩니다. 침대에 누워 어두운 방에서 앱을 켤 때, 밝은 화이트 배경은 눈을 자극합니다. 다크 테마는 이 맥락에서 훨씬 자연스러운 경험을 만듭니다.

감성의 일치: 프리미엄과 친밀함. 고급 레스토랑, 재즈 바, 야경이 보이는 카페를 떠올려보세요. 공통점은 어둡고 조용한 분위기입니다. 다크 테마는 동일한 심리적 효과를 만듭니다. 낮보다 밤에 마음이 열리는 이유가 있습니다.

콘텐츠 집중도. 어두운 배경 위에 프로필 카드, OCEAN 레이더 차트, Soul Score 게이지가 놓이면 시선이 자연스럽게 콘텐츠로 향합니다. 라이트 테마에서 흔히 생기는 “배경과 콘텐츠가 경쟁하는” 문제가 줄어듭니다.

색상 시스템 설계

색상 팔레트를 정하는 과정은 단순히 예쁜 색을 고르는 일이 아니었습니다. 각 색상이 어떤 맥락에서, 어떤 감정을 전달해야 하는지를 먼저 정의했습니다.

graph TD
    subgraph Background["배경 레이어"]
        BG["#0F0E17<br/>배경 Background"]
    end
    subgraph Surface["서피스 레이어"]
        SF["#232136<br/>카드 · 모달 · 인풋"]
    end
    subgraph Brand["브랜드 컬러"]
        PR["#7F5AF0<br/>프라이머리 — 보라<br/>주요 CTA · 프로그레스"]
        AC["#FF6B9D<br/>액센트 — 핑크<br/>매칭 성공 · 감정 하이라이트"]
    end
    subgraph Text["텍스트"]
        TX["#FFFFFE<br/>기본 텍스트 — 오프화이트"]
        TM["#94A1B2<br/>보조 텍스트 — 블루그레이"]
    end

    BG --> SF
    SF --> Brand
    Brand --> Text

    style BG fill:#0F0E17,stroke:#94A1B2,color:#FFFFFE
    style SF fill:#232136,stroke:#94A1B2,color:#FFFFFE
    style PR fill:#7F5AF0,stroke:#7F5AF0,color:#fff
    style AC fill:#FF6B9D,stroke:#FF6B9D,color:#fff
    style TX fill:#232136,stroke:#FFFFFE,color:#FFFFFE
    style TM fill:#232136,stroke:#94A1B2,color:#94A1B2

배경과 서피스

배경 (Background): #0F0E17
서피스 (Surface):  #232136

#0F0E17은 순수한 검정(#000000)이 아닙니다. 아주 미묘하게 파란 기운이 도는 딥 네이비입니다. 순수 검정은 실제 세계에서 거의 존재하지 않고, 화면에서 인공적이고 차갑게 느껴집니다. #0F0E17은 밤하늘의 색에 가까워 더 자연스럽고 따뜻합니다.

#232136은 카드, 모달, 인풋 필드처럼 배경 위에 올라오는 요소들에 사용합니다. 배경과의 명도 차이가 적절해야 계층 구조가 보이면서도 눈이 피로하지 않습니다. 두 색상의 차이는 미묘하지만, 이 미묘함이 공간감을 만듭니다.

브랜드 컬러

프라이머리 (Primary): #7F5AF0  — 보라
액센트 (Accent):      #FF6B9D  — 핑크

왜 보라인가. 보라색은 색상 스펙트럼에서 가장 독특한 위치를 점합니다. 따뜻한 계열(빨강)과 차가운 계열(파랑)의 경계에 있어 “신비로움”과 “지성”이 동시에 느껴집니다. 심리학적으로 보라는 창의성, 직관, 영성과 연결됩니다. 썸블링이 추구하는 “내면의 연결”이라는 컨셉과 보라의 상징성이 일치했습니다.

실용적인 이유도 있습니다. 대부분의 경쟁 앱이 빨강, 주황, 노랑 계열을 씁니다. 보라는 데이팅 앱 시장에서 희귀하고, 그만큼 강한 브랜드 식별성을 만들 수 있었습니다.

#7F5AF0은 너무 밝지도 어둡지도 않은 미드 퍼플입니다. 다크 배경 위에서 충분한 명도 대비를 확보하면서도 눈에 과하게 튀지 않는 균형점을 찾는 데 여러 번의 시도가 필요했습니다.

핑크는 감정의 하이라이트. #FF6B9D는 매칭 성공 오버레이, 좋아요 하트, Soul Score 게이지 상단, 파티클 효과 등 “감정적 절정”의 순간에만 사용합니다. 핑크를 남용하면 의미가 희석됩니다. 아껴야 강합니다.

텍스트 컬러

기본 텍스트:  #FFFFFE  — 오프화이트
보조 텍스트:  #94A1B2  — 블루그레이

순수 흰색(#FFFFFF) 대신 #FFFFFE를 씁니다. 차이는 1비트지만 효과는 미묘합니다. 순수 흰색은 다크 배경에서 너무 날카롭게 튀어나옵니다. #FFFFFE는 약간 부드러워져 눈의 부담이 줄어듭니다. 토스, Linear 등 프리미엄 다크 테마 제품들이 많이 쓰는 기법입니다.

#94A1B2는 타임스탬프, 플레이스홀더, 보조 정보 등 시각적 계층에서 낮은 우선순위를 가지는 텍스트에 사용합니다. 이 색상이 기본 텍스트와 충분히 구분되면서도 다크 배경과 최소 4.5:1 명도 대비를 유지하는지를 반드시 확인합니다.

타이포그래피: 두 폰트의 역할 분담

한국어: Pretendard
영문:   Plus Jakarta Sans

Pretendard를 선택한 이유는 명확합니다. 한국어 타이포그래피 시장에서 현재 가장 완성도 높은 오픈소스 폰트입니다. 웨이트 9종, 글리프 2,350개 이상, 안정적인 가로획/세로획 비율. 무엇보다 다크 배경에서 얇은 폰트는 가독성이 떨어지는데, Pretendard의 Medium(500)과 SemiBold(600)는 다크 배경에서도 선명합니다.

Plus Jakarta Sans는 영문 숫자, UI 레이블, 그리고 썸블링의 브랜드 로고타입에 사용합니다. 둥근 형태와 여유 있는 자간이 Pretendard의 직선적인 구조와 시각적으로 보완 관계를 만듭니다. 두 폰트가 함께 쓰일 때 이질감 없이 잘 어울리는 조합인지를 여러 레이아웃에서 검증했습니다.

타입 스케일

xs:   12px / line-height 1.4  — 캡션, 타임스탬프
sm:   14px / line-height 1.5  — 보조 텍스트, 레이블
base: 16px / line-height 1.6  — 본문
lg:   18px / line-height 1.5  — 강조 본문
xl:   20px / line-height 1.4  — 섹션 헤딩
2xl:  24px / line-height 1.3  — 페이지 타이틀
3xl:  30px / line-height 1.2  — 히어로 타이틀

모바일 퍼스트 앱이기 때문에 기본 폰트 크기를 16px로 유지합니다. 이보다 작으면 모바일 화면에서 가독성이 급격히 떨어집니다. 한국어는 영문보다 글자 밀도가 높아 line-height에 특히 신경 써야 합니다.

컴포넌트 철학

13개 기본 UI 컴포넌트에서 74개 이상으로 확장된 썸블링의 컴포넌트 시스템은 몇 가지 원칙 위에 서 있습니다.

Border-radius 12px의 통일. 모든 카드, 버튼, 인풋 필드는 border-radius: 12px을 사용합니다. 둥근 모서리는 친근함과 현대적인 느낌을 동시에 전달합니다. 일부 요소(배지, 태그)는 border-radius: 9999px(완전 원형)을 씁니다. 단, 테이블이나 코드 블록처럼 구조적인 요소는 직각을 유지합니다.

그림자 대신 배경색 차이로 계층 표현. 라이트 테마에서는 박스 섀도우로 카드를 배경에서 띄웁니다. 다크 테마에서 같은 방식을 쓰면 그림자가 제대로 보이지 않거나 인공적으로 느껴집니다. 썸블링은 배경(#0F0E17)과 카드(#232136)의 색상 차이로 계층을 표현합니다. 필요할 때만 아주 미묘한 inset 그림자(box-shadow: inset 0 1px 0 rgba(255,255,255,0.05))를 사용합니다.

상태 명확성. 버튼의 hover, active, disabled, loading 상태가 명확하게 시각적으로 구분되어야 합니다. 다크 테마에서 disabled 상태는 투명도(opacity: 0.4)로 표현하되, 색상 자체는 유지합니다. 색상을 완전히 바꿔버리면 어떤 버튼인지 맥락을 잃습니다.

Framer Motion으로 전환 의미 부여. 애니메이션은 장식이 아닙니다. 매칭 카드를 오른쪽으로 드래그할 때의 회전과 초록 빛 오버레이는 “수락”의 의미를 강화합니다. 소울 테스트 질문이 전환될 때의 페이드는 새로운 질문으로 집중을 유도합니다. 매칭 성공 파티클은 감정의 절정을 시각화합니다. 모든 전환에 의도가 있어야 합니다.

flowchart TD
    subgraph Tokens["디자인 토큰"]
        C[색상 16종] --- T[타입 스케일 7단계] --- R[Border Radius 12px]
    end
    subgraph Base["기본 컴포넌트 13종"]
        B1[Button] --- B2[Input] --- B3[Card]
        B4[Badge] --- B5[Modal] --- B6[Toast]
    end
    subgraph Domain["도메인 컴포넌트 74+"]
        D1[MatchCard] --- D2[SoulScoreGauge]
        D3[OceanRadarChart] --- D4[ChatBubble]
    end
    Tokens --> Base --> Domain

접근성: 다크 테마의 함정

다크 테마는 접근성 측면에서 주의가 필요합니다. 어두운 배경에 밝은 텍스트가 올라가는 구조에서 두 가지 함정이 있습니다.

과도한 대비. 순수 흰색 텍스트(#FFFFFF)를 순수 검정 배경(#000000)에 올리면 명도 대비가 너무 강해 난독증이 있는 사용자에게 텍스트가 “떠다니는” 느낌을 줄 수 있습니다. WCAG는 최소 4.5:1을 요구하지만, 최대치가 있지는 않습니다. 썸블링의 오프화이트(#FFFFFE)와 배경(#0F0E17) 조합은 대비가 충분하면서도 과하지 않습니다.

보조 텍스트 대비. #94A1B2와 #0F0E17의 명도 대비는 4.7:1로 WCAG AA 기준(4.5:1)을 간신히 넘습니다. 보조 텍스트를 더 많이 줄이거나 더 작게 쓰면 기준을 위반할 수 있습니다. 컴포넌트 개발 시 Figma의 Stark 플러그인과 Chrome DevTools의 접근성 패널로 매번 확인합니다.

색맹 고려. 매칭 수락/거절 UI에서 초록/빨강 색상 단독으로 의미를 전달하지 않습니다. 아이콘(체크마크/X)과 함께 사용합니다. 색상만으로 상태를 구분하는 설계는 적록색맹 사용자에게 접근이 불가능합니다.

디자인 시스템의 현재

74개 컴포넌트, 16가지 색상 토큰, 7단계 타입 스케일로 구성된 썸블링의 디자인 시스템은 지금도 성장 중입니다. Tailwind CSS 4의 CSS 변수 기반 테마 시스템 덕분에 컬러 토큰을 한 곳에서 관리하고 모든 컴포넌트에 자동으로 반영합니다.

디자인 시스템을 만드는 것과 유지하는 것은 다른 일입니다. 컴포넌트가 늘어날수록 일관성을 유지하는 것이 점점 어려워집니다. 그래서 새 컴포넌트를 추가할 때마다 “기존 시스템으로 만들 수 없는가?”를 먼저 묻습니다. 컴포넌트가 많은 것보다 적고 강한 것이 낫습니다.

감성은 세부에서 나옵니다. #0F0E17과 #232136의 미묘한 차이, #FF6B9D를 아껴 쓰는 결정, 12px 모서리의 일관성 — 이 작은 것들이 쌓여서 사용자가 앱을 열었을 때 느끼는 “왠지 기분 좋은” 경험을 만듭니다.