SOCAR (쏘카)
지도 위 파란 쏘카존 핀과 대여 시간 한 줄로 끝내는 카셰어링 예약
Brand DNA
브랜드 DNA
- 브랜드명: SOCAR (쏘카)
- 한 줄 정체성: 지도에서 가까운 쏘카존을 골라 필요한 시간만큼 차를 빌리는 한국 대표 카셰어링·모빌리티 플랫폼
- 공식 디자인 철학: 사내 디자인 시스템 이름은 「SOCAR FRAME」. 2019년 4분기에 착수해 2020년 1분기에 컬러·타이포·아이콘 기초를 마쳤고, 처음부터 다크 모드를 염두에 둔 목적 기반(시멘틱) 컬러를 필수로 삼았다. 2026년 「FRAME 2.0」에서는 컴포넌트 라이브러리를 넘어 규칙(토큰·상태·예외 처리)·Figma↔코드 연동·릴리즈 검증까지 「굴러가는 시스템」으로 넓혔다.
- 시그니처 요소 1개: 차분한 회색 지도 위에 쏘카 블루(#0078FF) 핀이 쏘카존을 찍고, 아래 바텀시트가 「대여 시간 한 줄 + 차량 카드 + 파란 대여 버튼」으로 결정을 마무리하는 구조
Tone & Mood
톤 & 무드
- 핵심 키워드 3개: 산뜻, 명료, 믿음
- 무드 설명: 한 가지 선명한 블루만 행동색으로 쓰고, 나머지는 푸른 기가 도는 쿨 그레이(#F2F3F8~#141A24)로 정리한다. 지도·시간·가격처럼 숫자가 많은 화면을 다루기 때문에 장식보다 정보 위계가 먼저 보이게 한다. 차를 남과 나눠 쓰는 서비스라 「지금 이 차를 믿고 타도 된다」는 안정감을 흰 카드와 얕은 그림자로 만든다.
- 비주얼 스타일: 모던 미니멀
- 밀도(Density): Comfortable — 지도 위 바텀시트에 차량 카드를 여러 장 쌓되, 대여 버튼·시간 선택 같은 결정 요소는 48px 이상 터치 영역을 준다
- 모서리 성향: Round (12~16px) — 웹 실측에서 버튼 12px, 카드·시트 16px 가 가장 많다
- 평면성: Subtle — 카드·시트에 옅은 그림자, 지도 핀만 조금 더 띄운다
Color System
컬러 시스템 (CSS 변수)
:root {
/* Primary - SOCAR Blue (socar.kr 실측: blue-50~600·900, primary-heavy) */
--color-primary-50: #EBF5FF; /* 선택된 차량 카드 배경, 정보 면 */
--color-primary-100: #D6EBFF; /* 옅은 강조 면, 지도 물길 */
--color-primary-200: #99CEFF; /* 비활성 파란 버튼 */
--color-primary-300: #6BB5FF; /* 보조 아이콘 */
--color-primary-400: #3393FF; /* hover 밝은 쪽 */
--color-primary-500: #0078FF; /* 기본 = SOCAR Blue (primary-regular) */
--color-primary-600: #0069FF; /* 강한 텍스트·hover (primary-strong) */
--color-primary-700: #0052E0; /* pressed (primary-heavy) */
--color-primary-800: #0042C4; /* (추정) 보간값 */
--color-primary-900: #0033A9; /* 가장 짙은 블루 */
/* Secondary - 라이트 블루 액센트 (accent-lightblue 실측) */
--color-secondary-500: #00AEFF; /* 프로모션·전기차 강조 보조색 */
/* Neutral - 쿨 그레이 (gray-50~900 실측) */
--color-neutral-0: #FFFFFF;
--color-neutral-50: #F9F9FB;
--color-neutral-100: #F2F3F8; /* 섹션 배경 */
--color-neutral-200: #E5E8EF; /* 구분선 */
--color-neutral-300: #CBD1DC; /* 비활성 테두리·시트 손잡이 */
--color-neutral-400: #B4BBCB;
--color-neutral-500: #99A1B1; /* 플레이스홀더 */
--color-neutral-600: #697383; /* 캡션 */
--color-neutral-700: #4A5667;
--color-neutral-800: #354153; /* 본문 텍스트 (text-primary 실측) */
--color-neutral-900: #262F3C;
--color-neutral-950: #141A24; /* 제목 */
--color-neutral-1000: #000000;
/* Semantic */
--color-success-bg: #E6FEF0; /* green-50 */
--color-success-fg: #00A180; /* green-800, 흰 배경 대비용 */
--color-warning-bg: #FFF8E6; /* orange-50 */
--color-warning-fg: #FA7900; /* orange-600 */
--color-error-bg: #FFDBDF; /* red-100 */
--color-error-fg: #FF3A5B; /* red-500 */
--color-info-bg: #EBF5FF;
--color-info-fg: #0069FF;
/* Surface (배경 위계) — FRAME 의 background_base / background_elevated 개념 */
--bg-base: #FFFFFF; /* 라이트에서는 base 와 elevated 가 같은 흰색 */
--bg-subtle: #F2F3F8; /* 리스트 사이 구획, 지도 바탕 */
--bg-elevated: #FFFFFF; /* 카드·바텀시트 */
--bg-overlay: rgba(20, 26, 36, 0.48); /* 모달 딤 */
/* Text 위계 */
--text-strong: #141A24; /* 제목·가격 */
--text-primary: #354153; /* 본문 */
--text-secondary: #697383; /* 보조 */
--text-tertiary: #99A1B1; /* 캡션·플레이스홀더 */
--text-on-primary: #FFFFFF;
--text-disabled: #B4BBCB;
/* Border */
--border-default: #E5E8EF;
--border-subtle: #F2F3F8;
--border-strong: #CBD1DC;
--border-focus: #0078FF;
}> 참고: FRAME 다크 모드 연구(2020)에서 다크 배경은 순수 검정 대신 쿨 다크 그레이 #171B1C 로 정했다. 다만 앱이 쓰는 네이버 지도의 다크 대응이 선행 조건이라 당시 출시는 보류됐고, 이후 출시 여부는 공개 자료로 확인되지 않아 이 문서는 라이트 단일 테마로 기록한다.
Typography
타이포그래피
- 폰트 페어링:
- 한글: Pretendard (SIL OFL) — socar.kr 웹 실측. 앱은 iOS SF Pro·Apple SD Gothic Neo / Android 시스템 폰트 (추정)
- 영문: Pretendard 내장 라틴 (SIL OFL)
- 위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 40px / 800 / 1.25 / -0.03em (추정)
- H1: 28px / 800 / 1.3 / -0.02em (추정)
- H2: 22px / 700 / 1.35 / -0.02em (추정)
- H3: 18px / 700 / 1.4 / -0.01em (추정)
- Body Large: 16px / 500 / 1.55 / -0.01em
- Body: 15px / 400 / 1.55 / -0.01em
- Body Small: 13px / 400 / 1.5 / 0
- Caption: 12px / 500 / 1.4 / 0 — 도보 거리·연료 같은 보조 정보
- 숫자: 가격·시간은
font-variant-numeric: tabular-nums로 자리를 맞춘다 (웹 실측에 tabular-nums 사용)
Spacing
스페이싱
- Base unit: 4px
- 토큰: ``
css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;`` - Container: 모바일 좌우 20px (추정), 웹 max-width 1200px (추정)
Border Radius
Border Radius
--radius-none: 0;
--radius-sm: 6px; /* 배지·작은 칩 */
--radius-md: 12px; /* 버튼·입력 (웹 실측 파란 버튼 12px) */
--radius-lg: 16px; /* 카드·바텀시트 상단 */
--radius-xl: 24px; /* 큰 프로모션 카드 */
--radius-full: 9999px;/* 현재 위치 점·토글 */Shadow / Elevation
Shadow / Elevation
--shadow-none: none;
--shadow-sm: 0 1px 3px rgba(20, 26, 36, 0.08); /* 리스트 카드 */
--shadow-md: 0 4px 14px rgba(20, 26, 36, 0.10); /* 지도 위 검색 카드·핀 */
--shadow-lg: 0 -6px 20px rgba(20, 26, 36, 0.10); /* 지도 위 바텀시트 (위로 드리움) */
--shadow-xl: 0 16px 40px rgba(20, 26, 36, 0.18); /* 모달·풀스크린 다이얼로그 */FRAME 은 그림자를 시멘틱 컬러로 다루며, 다크 모드에서는 그림자 값을 비우고 배경 단계 차이로 층을 나눈다.
Iconography
Iconography
- 스타일: Outline 중심, 지도 핀·선택 상태만 Filled
- Stroke 굵기: 2px (24px 그리드 기준, 추정)
- 모서리 처리: Round
- 추천 라이브러리: Lucide (자체 아이콘 세트와 가장 가까운 대안)
Component Guide
컴포넌트 가이드
Button
.btn { font: 700 16px/1 Pretendard, -apple-system, sans-serif; letter-spacing: -0.01em;
border-radius: var(--radius-md); padding: 15px 20px; border: 0; min-height: 52px;
display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
transition: background var(--duration-fast) var(--ease-out); }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); }
.btn-primary:active { background: var(--color-primary-700); }
.btn-primary:disabled { background: var(--color-primary-200); cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }
.btn-primary.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #FFFFFF; border-radius: var(--radius-full); animation: spin 0.8s linear infinite; }
.btn-secondary { background: var(--color-primary-50); color: var(--color-primary-600); }
.btn-secondary:hover { background: var(--color-primary-100); }
.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid var(--border-default); }
.btn-ghost:hover { background: var(--bg-subtle); }
.btn-danger { background: var(--color-error-fg); color: #FFFFFF; }
.btn:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
@keyframes spin { to { transform: rotate(360deg); } }Input
.input { width: 100%; box-sizing: border-box; background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 14px 16px; font: 500 15px/1.4 Pretendard, sans-serif; color: var(--text-strong); }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: none; border-color: var(--border-focus); }
.input.is-error { border-color: var(--color-error-fg); }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
.time-field { display: flex; align-items: center; gap: 8px; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 12px 14px; font: 600 14px/1 Pretendard, sans-serif; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.time-field .duration { margin-left: auto; color: var(--color-primary-500); font-weight: 800; }Card (차량 카드 / 바텀시트)
.car-card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 14px 16px; display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; }
.car-card.is-selected { border: 1.5px solid var(--color-primary-500); background: var(--color-primary-50); } /* 강조형 */
.car-card--outlined { background: transparent; } /* Outlined */
.car-card .price { font: 800 16px/1 Pretendard, sans-serif; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.sheet { background: var(--bg-elevated); border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 8px 20px 20px; box-shadow: var(--shadow-lg); }
.sheet-handle { width: 36px; height: 4px; border-radius: 4px; background: var(--border-strong); margin: 0 auto 14px; }Badge / Tag
.badge { display: inline-flex; align-items: center; border-radius: var(--radius-sm); padding: 3px 6px; font: 700 11px/1.3 Pretendard, sans-serif; }
.badge-solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.badge-subtle { background: var(--color-primary-50); color: var(--color-primary-600); }
.badge-outline { border: 1px solid var(--border-strong); color: var(--text-secondary); }
.badge-ev { background: var(--color-success-bg); color: var(--color-success-fg); }Navigation (지도 위 검색 헤더 + 하단 탭)
.map-search { background: var(--bg-elevated); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 12px 14px; display: flex; align-items: center; gap: 10px; font: 700 15px/1 Pretendard, sans-serif; color: var(--text-strong); }
.zone-pin { background: var(--color-primary-500); color: var(--text-on-primary); border-radius: 10px; padding: 5px 9px; font: 800 12px/1 Pretendard, sans-serif; box-shadow: 0 4px 10px rgba(0, 82, 224, 0.35); }
.zone-pin.is-idle { background: var(--bg-elevated); color: var(--color-primary-500); box-shadow: var(--shadow-md); }
.tabbar { background: var(--bg-elevated); border-top: 1px solid var(--border-subtle); display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 0 8px; }
.tabbar .item { text-align: center; font: 600 11px/1.3 Pretendard, sans-serif; color: var(--text-tertiary); }
.tabbar .item.is-active { color: var(--text-strong); }Motion
Motion
--duration-fast: 120ms; /* 버튼 눌림·색 전환 */
--duration-base: 220ms; /* 핀 선택 확대 */
--duration-slow: 320ms; /* 바텀시트 올라오기 */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);(수치는 추정. 지도 이동과 겹치지 않도록 시트 모션은 짧고 한 방향으로만 움직인다.)
Anti-patterns
Anti-patterns
1. 지도 바탕을 채도 높은 색으로 칠하지 않기 — 지도는 쿨 그레이로 가라앉히고 블루는 쏘카존 핀과 대여 버튼에만 쓴다 2. 대여 시간·가격을 여러 줄에 흩지 않기 — 「언제부터 언제까지 · 몇 시간 · 얼마」를 한 줄 위계로 붙인다 3. 블루 외 다른 원색 CTA 만들지 않기 — 초록은 전기차·성공, 빨강은 오류·위험에만 한정 4. 옛 명도 이름(grey01, grey02)을 화면에 직접 꽂지 않기 — 반드시 background_base·text 같은 목적 기반 토큰을 거친다 5. 다크 배경에 순수 검정(#000) 쓰지 않기 — FRAME 은 브랜드색과 어울리는 쿨 다크 그레이(#171B1C)를 택했다