SOCAR Frame 2.0 · 쏘카프레임
복잡함을 덜어내고 이동의 본질에 집중하는 화면.
쏘카의 디자인 시스템은 채도 높은 단일 브랜드 블루와 푸른 기가 도는 회색 램프 위에서 작동합니다. 표면은 그림자가 아니라 1px 디바이더와 배경 워시로 나뉘고, 한 손·야외 조작을 전제로 핵심 정보의 대비를 높게 유지합니다.
역삼역 쏘카존 · 도보 3분
언제, 어디서 빌릴까요?
24개 컴포넌트가 쏘카 제품의 실제 흐름 위에서 보여야 한다.
ActionButton 위계부터 Accordion · Checkbox · Radio · SelectionBox · Input · TextArea · Skeleton · Tips까지 — 비시각 Haptic을 포함한 전체 세트를 화면 우선순위에 맞춰 배치했다. 브랜드 블루는 한 화면의 1차 행동에만 쓴다.
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
Badge 기본 배경은 notification-red이며 옵션으로 1px 흰 보더를 둔다. IconButton은 완전 원형 정사각 비율로 모빌리티 아이콘 세트를 담는다.
Chip & Tag pill · label
Chip — selectable pill (radius 50px)
Tag — non-interactive label (radius 6px)
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
상태색은 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
선택 카드는 14px 반경, 선택 상태는 primary-regular 보더 + blue-50 배경에 1px inset 링을 입힌다. fieldset + legend로 묶는다.
Input & TextArea filled · outlined · underline
세 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
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
3-up
컨테이너는 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 표면 위에 흰 텍스트로 야외에서도 식별되게 하며, 성공은 느낌표가 아니라 체크 아이콘으로 차분한 확신을 유지한다.
구현 메모는 토큰 이름과 컴포넌트 위계를 함께 남긴다.
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