SOCAR Frame 2.0 · 쏘카프레임

복잡함을 덜어내고 이동의 본질에 집중하는 화면.

쏘카의 디자인 시스템은 채도 높은 단일 브랜드 블루와 푸른 기가 도는 회색 램프 위에서 작동합니다. 표면은 그림자가 아니라 1px 디바이더와 배경 워시로 나뉘고, 한 손·야외 조작을 전제로 핵심 정보의 대비를 높게 유지합니다.

카셰어링 · 10분 단위 전국 5,000여 쏘카존 Pretendard Variable 24개 컴포넌트 · 라이트 전용

SOCAR

역삼역 쏘카존 · 도보 3분

언제, 어디서 빌릴까요?

대여 5월 24일 (토) 오전 10:00

반납 5월 25일 (일) 오후 6:00

P R

대여존 반납존

전체 경/소형 중형 SUV

⛟

전기차 10% 할인

아이오닉 5 역삼역 4번 출구 쏘카존 12,400원 / 시간

예약이 임시 저장되었습니다 되돌리기

01 Components

24개 컴포넌트가 쏘카 제품의 실제 흐름 위에서 보여야 한다.

ActionButton 위계부터 Accordion · Checkbox · Radio · SelectionBox · Input · TextArea · Skeleton · Tips까지 — 비시각 Haptic을 포함한 전체 세트를 화면 우선순위에 맞춰 배치했다. 라이트 전용 시스템이라 다크 셸 위에서도 컴포넌트 표면은 라이트 값을 유지한다.

ActionButton fill · outlined · state

Fill — primary / secondary / tertiary

Outlined — primary / secondary

State — pressed (92%) / loading / disabled

TextButton — primary / secondary / underline

시그니처 press feedback — 인터랙티브 표면은 :active에서 92%로 축소되고, 진한 fill 위에는 pressed-dark-regular, 중립 표면에는 pressed-regular 리플이 함께 뜬다. hapticConfig prop으로 웹뷰 햅틱(기본 ActionButton REGULAR)을 연결한다.

IconButton & Badge circle · content · dot

IconButton — full circle, sm / md / lg

Badge — content / dot

◔ 9+ ✉ 3 ⚑

Badge 기본 배경은 notification-red이며 옵션으로 1px 흰 보더를 둔다. IconButton은 완전 원형 정사각 비율로 모빌리티 아이콘 세트를 담는다.

Chip & Tag pill · label

Chip — selectable pill (radius 50px)

전체 경/소형 중형 SUV 전기 수입

Tag — non-interactive label (radius 6px)

쏘카세이브 전기차 10% 할인

Chip 선택 상태는 information-weak 배경 + 1px primary-regular 보더 + primary-regular 텍스트로 표시한다.

TopAppBar & Tab navigation

TopAppBar — min height 52px (max 3 trailing)

예약 내역

Tab — 2px sliding indicator (gray-800)

이용 중 예정 지난 이용

Accordion collapsible · radius-150

기본 요금과 시간당 요금을 합산해 계산합니다. 보험 옵션에 따라 금액이 달라질 수 있습니다.

컨테이너는 6px 반경 + 1px gray-100 보더, 셰브론은 펼침 시 180° 회전한다. single / multiple / manual 모드를 지원한다.

Status weak surface

i예약 확정까지 결제만 남았습니다

✓차량 잠금이 해제되었습니다

!반납 시간 30분 전입니다

×결제 수단을 확인해 주세요

상태색은 information · positive · caution · negative를 각각 weak·regular·strong 3단계로 분리한다.

Checkbox & Radio 20px · circular

옵션 선택

자차 손해 보험 부속품 보장 운전자 추가 일일 한도 해제

결제 수단

카카오페이 토스 신용 / 체크카드 쏘카크레딧 사용

행은 48px, 컨트롤은 20×20 원형(2px gray-500). 체크 상태는 primary-strong 채움, disabled+checked는 gray-300으로 강등한다. Radio는 안쪽 dot으로만 차이를 둔다.

SelectionBox radius-350 card · single

보험 선택

기본 자기부담금 추천

사고 시 본인 부담 30만원

+0원

기본 포함

완전 면책

사고 시 본인 부담 0원

+8,000 / 일

안심 옵션

선택 카드는 14px 반경, 선택 상태는 primary-regular 보더 + blue-50 배경에 1px inset 링을 입힌다. fieldset + legend로 묶는다.

Input & TextArea filled · outlined · underline

이름

홍길동 ×

filled · 기본

휴대폰 번호

010-1234-5678

outlined · focus 보더 blue-200

이메일

name@socar.kr

underline · 폼 안에서 가볍게

요청 사항

차량 인수 전에 차량 사진을 확인하고 싶어요. 28/200

세 variant 모두 focus 시 보더가 blue-200로 바뀐다 — filled gray-100 배경, outlined 흰 배경 + 1px 보더, underline 하단 보더만. TextArea는 auto-grow + "0/200" 카운터다.

Skeleton wave shimmer

rect(기본 radius-300) · circle · card(radius-400 + 1px 보더 + shadow-sm) — card 변형은 시스템에서 유일하게 그림자를 갖는 카드다.

BottomSheet detent · 24px

대여를 시작할까요?

확정 행동만 하단 시트에 모읍니다. 상단 코너 24px, 딤은 dimmed-regular입니다.

Alert dialog · imperative

예약을 취소하시겠어요?

취소 수수료 3,000원이 발생합니다. 취소 후에는 복구할 수 없어요.

Date / Time range · wheel

‹ 5월 ›

일월화수목금토 2829301234 567891011 24252627282930

오전AM / PM

10시

00분 · 10단위

DatePicker 기간 하이라이트는 gray-200 밴드, 끝점은 radius-600 캡. TimePicker 세그먼트는 46px·radius-250.

Carousel track · pill dots

쏘카패스 주말 특가 전기차

‹

›

활성 도트는 primary-regular(5×12px pill), 비활성은 border-regular다. 원형 nav 버튼은 32px IconButton 동형이다.

SegmentedControl toggle · count

2-up · count badge

단기 대여 쏘카플랜 N

3-up

전체 진행 중 완료 9+

컨테이너는 6–8px 반경, 세그먼트는 카운트 배지를 가질 수 있고 5개까지 관찰된다.

Tips accent · info

AccentTip · purple

최대 30% 할인 중

InfoTip · dark

면책금은 사고 시 본인 부담 한도입니다

두 팁은 동형이다 — radius-250(10px), 6/12px padding, 흰 body3 텍스트, shadow-tip. AccentTip은 기본 black(옵션 purple/cyan), InfoTip은 "무엇을 의미하나요?" 트리거를 연다.

Snackbar transient bottom toast

✓ 쿠폰이 적용되었어요 실행 취소

쏘카존 위치를 클립보드에 복사했습니다 지도 열기

화면 하단에 잠깐 떠 자동으로 사라지는 일시적 토스트다 — 진한 gray-1000 표면 위에 흰 텍스트로 야외에서도 식별되게 하며, 성공은 느낌표가 아니라 체크 아이콘으로 차분한 확신을 유지한다.

02 Foundation

차가운 단일 블루와 푸른 회색 램프가 시스템의 온도를 고정한다.

아래 색상은 design.md의 OKLCH 토큰을 그대로 렌더링한 기준 보드다. SOCAR Frame 2.0은 라이트 모드 전용이므로, 이 팔레트는 다크 프리뷰 셸 안에서도 동일한 라이트 값을 유지한다.

Colors exact OKLCH · light-only

Brand / primary

primary-regularoklch(0.620 0.219 257)

primary-strongoklch(0.586 0.236 261)

primary-heavyoklch(0.526 0.224 263)

service-businessoklch(0.395 0.197 266)

Blue ramp — brand axis

blue-50oklch(0.962 0.022 248)

blue-100oklch(0.917 0.040 240)

blue-200oklch(0.789 0.111 234)

blue-500oklch(0.620 0.219 257)

Neutral grays — blue-tinted ramp

gray-50oklch(0.984 0.002 286)

gray-100oklch(0.967 0.004 271)

gray-200oklch(0.927 0.009 264)

gray-300oklch(0.851 0.018 264)

gray-400oklch(0.781 0.027 267)

gray-500oklch(0.687 0.035 265)

gray-600oklch(0.519 0.039 263)

gray-700oklch(0.405 0.036 264)

gray-800oklch(0.331 0.034 264)

gray-900oklch(0.268 0.030 263)

gray-1000oklch(0.211 0.026 261)

whiteoklch(1.000 0.000 0)

Semantic — text

text-strongoklch(0.211 0.026 261)

text-primaryoklch(0.331 0.034 264)

text-secondaryoklch(0.519 0.039 263)

text-tertiaryoklch(0.687 0.035 265)

text-disabledoklch(0.781 0.027 267)

Semantic — surface / structure

background-regularoklch(0.967 0.004 271)

border-regularoklch(0.927 0.009 264)

border-weakoklch(0.967 0.004 271)

divider-regularoklch(0.927 0.009 264)

Semantic — overlay (translucent)

dimmed-regularoklch(0.211 0.026 261 / 0.44)

pressed-regularoklch(0.211 0.026 261 / 0.06)

pressed-dark-regularoklch(0.000 0.000 0 / 0.08)

Semantic — status

information-weakoklch(0.962 0.022 248)

information-regularoklch(0.620 0.219 257)

information-strongoklch(0.586 0.236 261)

positive-weakoklch(0.974 0.043 158)

positive-regularoklch(0.745 0.176 162)

positive-strongoklch(0.706 0.165 163)

caution-weakoklch(0.978 0.030 92)

caution-regularoklch(0.741 0.166 56)

negative-weakoklch(0.957 0.025 14)

negative-regularoklch(0.649 0.219 19)

negative-strongoklch(0.594 0.249 21)

notification-redoklch(0.649 0.219 19)

Semantic — accent (one step per hue)

accent-redoklch(0.649 0.219 19)

accent-orangeoklch(0.741 0.166 56)

accent-greenoklch(0.745 0.176 162)

accent-lightblueoklch(0.681 0.156 232)

accent-purpleoklch(0.617 0.214 295)

accent-redorangeoklch(0.683 0.205 41)

accent-indigooklch(0.572 0.234 268)

accent-magentaoklch(0.640 0.245 7)

accent-limeoklch(0.794 0.214 130)

accent-cyanoklch(0.733 0.137 207)

Semantic — mobility domain

location-rentaloklch(0.620 0.219 257)

location-returnoklch(0.487 0.260 268)

Typography Pretendard Variable

display1
40 / 700 디자인 시스템

heading1
26 / 700 가장 쏘카다운

heading3
22 / 700 언제 빌릴까요?

title1
18 / 600 예약 내역 화면 제목

body2
16 / 400 한국어 본문 샘플 — 기본 텍스트

body4
13 / 400 보조 본문과 카드 설명 문장

caption2
12 / 500 캡션 · 라벨 텍스트

caption4
10 / 400 마이크로 메타데이터

Display·Heading은 700, Title은 600, Body는 400. 숫자는 bold·단위 라벨은 regular로 분리한다. 한글은 Apple SD Gothic Neo · Noto Sans KR로 폴백한다.

Spacing 1 unit = 4px

spacing-1004px

spacing-2008px

spacing-30012px

spacing-40016px

spacing-60024px

spacing-80032px

spacing-100040px

작은 구간(1·2·4·5·6px)은 촘촘하게, 그 위는 4px 케이던스. 화면 단위 간격은 spacing-400 이상을 기준으로 삼는다.

Rounded radius scale

100 · 4px 200 · 8px 350 · 14px 400 · 16px 600 · 24px circle

버튼 8–14px, 카드·스켈레톤 카드 16px, 바텀시트 상단 24px, 칩·배지는 완전 pill, 입력·SelectionBox 14px. 기하적이되 모서리는 일관되게 부드럽다.

Elevation & Depth shadows are scarce

1px divider 기본 표면 분리 — 디바이더 + background-regular 워시

shadow-sm 0 1px 2px · 스켈레톤 카드 변형

shadow-tip 0 2px 4px · 툴팁 버블

shadow-sheet 0 0 20px · 바텀시트 강도

SOCAR Frame의 깊이 언어는 절제가 기본값이다 — 표면 분리는 그림자보다 1px 디바이더와 배경 워시로 먼저 해결하고, 그림자 토큰(sm · tip · sheet)은 모두 미세하게 유지한다.

03 Implementation

구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.

SOCAR Frame 2.0은 React 18 + Tailwind v3(tw- 프리픽스) + framer-motion 라이브러리이며, @socar-inc/socar-frame-components로 배포되고 foundation을 peer로 둔다.

ActionButton
  styleType="fill"     // fill | outlined
  variant="primary"   // primary | secondary | tertiary
  size="large"        // large 56 → xSmall 32
  hapticConfig={{ type: "REGULAR" }}

Form
  Input variant="filled"  // filled|outlined|underline
  focus="blue-200"        // focus-within border
  TextArea maxLength=200   // auto-grow + counter
  Checkbox / Radio / SelectionBox = fieldset

Surface
  brand="primary-regular"   // 한 화면 1차 액션만
  text="text-primary"       // 본문 기본
  card="divider-first"      // 강한 드롭섀도 금지
  map="location-rental / return"

Theme
  mode="light-only"      // 다크 토큰은 추정 금지
  press="active:scale-92%" // + ripple
  tip="shadow-tip"        // AccentTip | InfoTip
  motion="duration-100/150" // ease-standard