`(`{typography.body3}`/`{colors.text-tertiary}`)로 구성된다 [src:24][src:screenshot:input.png]. 전화·금액·날짜·시퀀스 빌트인 포매터와 React-Hook-Form을 지원한다 [src:24]. 세 variant 모두 focus 시 보더가 `{colors.blue-200}`로 바뀐다 [src:24].
```tsx
```
### input-filled
filled variant는 `{rounded.radius-350}`(14px) + `{colors.gray-100}` 배경 + 1px 투명 보더이며, focus-within 시 보더가 `{colors.blue-200}`로 나타난다 [src:24].
```tsx
```
### input-outlined
outlined variant는 흰 배경 + 1px `{colors.divider-regular}` 보더이며, focus-within 시 `{colors.blue-200}`로 강조된다 — filled와 radius·padding(L12/R8)을 공유하되 표면만 다르다 [src:24].
```tsx
```
### input-underline
underline variant는 하단 보더만 두고 평소 opacity 0, focus-within 시 opacity 100 + `{colors.blue-200}`로 드러난다 [src:24]. 좌우 padding과 라운딩이 없어 가장 가벼운 표면이다 [src:24].
```tsx
```
### text-area
멀티라인 입력이다 — 필드 `
`가 `flex-col`로 textarea + 글자수 카운터를 수직 배치하며, 최소 높이 64px(내용 따라 auto-grow), `{rounded.radius-350}`, `{colors.gray-100}` 배경, 1px `{colors.divider-regular}` 보더, 내부 gap 12px다 [src:25][src:screenshot:textarea.png]. 카운터 `
`는 `{typography.body3}`/`{colors.text-tertiary}`로 "0/200" 형식이며, 커스텀 포매터를 지원한다 [src:25].
```tsx
```
### top-app-bar
상단 앱 바이며 최소 높이 52px, 흰 배경이다 [src:1][src:27]. 컴파운드 파트는 `BasicBackButton`, `Title`(general/scroll 타입), `TrailingButtonSlot`(액션 최대 3개), 그리고 `fetch` URL의 진행도를 추적하는 헤드리스 `LoadingBar`로 구성된다 [src:1]. 홈 화면 상단의 뒤로가기 화살표·타이틀·오버플로 메뉴가 이 패턴이며, `BasicBackButton`은 네이티브 `window.onClickNavigation` 브리지를 호출한다 [src:1][src:screenshot:home.jpg].
```tsx
SOCAR
{/* max 3 */}
```
### bottom-sheet
바텀시트는 4개 detent(tip / half / full / max)를 가지며 — freeform 높이는 허용하지 않는다 — 드래그로 열고 닫는다 [src:1][src:30]. 패널 상단 코너는 `{rounded.radius-600}`(24px), 딤 오버레이는 `{colors.dimmed-regular}`, 부양 변형은 `shadow-sheet`를 더한다 [src:30]. 푸터의 ActionButton은 `flex-1 min-w-[120px]`로 가로 분할된다 [src:30].
```tsx
{/* content */}
```
### date-time-picker
캘린더 기반 날짜·기간 피커(DatePicker)와 드래그 휠 시간 피커(TimePicker, 46px 세그먼트)다 [src:1][src:28][src:29]. DatePicker는 흰 컨테이너에 `{typography.heading2}` 월 헤더 + 요일 행 + 32px 일자 셀(focus-visible 2px `{colors.gray-800}` 링)을 두고, 기간 하이라이트는 `{colors.gray-200}` 밴드로 시작은 좌측 24px·끝은 우측 24px 라운딩(`{rounded.radius-600}`)된다 [src:28]. TimePicker 세그먼트는 `{colors.gray-100}` 배경에 좌/우 `{rounded.radius-250}`(10px) 라운딩이다 [src:29]. 홈 화면의 대여/반납 날짜 카드("대여 / 반납", "최대 범위 10일")가 이 패턴을 입력으로 받는다 [src:screenshot:home.jpg].
```tsx
```
### alert
명령형으로 여는 모달 다이얼로그다 — `Alert.open()`이 Promise를 반환하며, variant는 Default / Dialog / Basic / Sequence / Portal이다 [src:1][src:3]. 딤 오버레이는 `{colors.dimmed-regular}`, 중앙 패널은 둥근 흰 표면에 drop shadow + 타이틀(최대 2줄) + ActionButton으로 구성된다 [src:3]. 부분 스펙 컴포넌트라 variant별 정확한 동작은 doc 페이지와 함께 확인해야 한다 [src:3].
```tsx
const ok = await Alert.open({ variant: "dialog", title: "예약을 취소할까요?" });
```
### snackbar
화면 하단에 뜨는 일시적 토스트이며 어두운 둥근 컨테이너에 텍스트 + 선택적 액션/아이콘을 담고 일정 시간 후 자동으로 사라진다 [src:1][src:31]. 성공 상태는 느낌표가 아니라 체크 아이콘으로 표시한다 — 차분한 확신을 유지하는 규칙이다 [src:31][src:1].
```tsx
예약이 취소되었습니다
```
### segmented-control
탭형 토글이며 컨테이너는 `{rounded.radius-150}`~`{rounded.radius-200}`(6–8px) 계열, 세그먼트가 배지/카운트(`9+`)를 가질 수 있고 5개까지 관찰된다 [src:18]. 부분 스펙 컴포넌트라 세그먼트 단위 정밀 값은 doc 페이지·스크린샷과 함께 확인해야 한다 [src:18].
```tsx
```
### tab
상단 고정 탭 내비게이션이며 sticky 바는 1px 하단 보더(`{colors.border-regular}`) + `{colors.gray-100}` 배경 + padding-x 16px다 [src:26]. 탭 항목 ``는 30px 높이·`{typography.title2}`이며 active 텍스트 `{colors.text-primary}` / inactive `{colors.text-secondary}`, press 시 `scale(0.94)`다 [src:26]. 2px 슬라이딩 인디케이터 바는 `{rounded.radius-200}`에 `{colors.gray-800}` 색으로 선택 탭을 따라 슬라이드한다 [src:26].
```tsx
{/* tab items */}
```
### carousel
슬라이드 캐러셀이며 트랙 + 원형 nav 버튼(32px, IconButton 동형, press 리플 포함) + 페이지 인디케이터로 구성된다 [src:32]. 인디케이터 도트는 5×12px pill이며 활성은 `{colors.primary-regular}`(blue-500), 비활성은 `{colors.border-regular}`(gray-200)다 — 또는 "n / m" `{typography.body2}` 카운터로 대체할 수 있다 [src:32]. `loop`·자동재생·`onIndexChange` 옵션을 가진다 [src:32].
```tsx
{/* slides */}
```
### accent-tip
강조 툴팁(컨텍스트 안내 말풍선)이다 — portal로 렌더되는 버블이 `{rounded.radius-250}`(10px), padding 6/12px, 흰 `{typography.body3}` 텍스트(짧으면 `{typography.body4}`), `shadow-tip`(`0 2px 4px`)을 가진다 [src:33][src:screenshot:tips-accenttip.png]. 배경색은 커스텀 가능하며(기본 `{colors.black}`, 옵션으로 purple/cyan 틴트), top/bottom/left/right 방향 배치와 `Always`/자동 소멸 모드, TextButton형 트리거를 지원한다 [src:33].
```tsx
위치 변경
```
### info-tip
정보 툴팁이며 구조는 `{component.accent-tip}`과 동형이다 — 같은 `{rounded.radius-250}`(10px), 같은 6/12px padding, 같은 흰 `{typography.body3}`/`{typography.body4}` 텍스트, 같은 `shadow-tip`을 쓴다 [src:34][src:screenshot:tips-infotip.png]. 차이는 트리거 카피 맥락으로, "무엇을 의미하나요?" 같은 24px 높이 TextButton 트리거가 정보 설명 버블을 연다 [src:34].
```tsx
무엇을 의미하나요?
```
### haptic
비시각 유틸리티로, 웹뷰 햅틱 피드백을 구성한다 [src:1][src:35]. `HapticConfig` 객체(`disable` bool, `eventType` pointerdown/pointerup, `type`)를 받으며, 버튼류의 `hapticConfig` prop으로 연결된다(기본값 ActionButton `REGULAR`, IconButton/TextButton `WEAK`, Alert `ALERT_WARNING`) [src:35]. 햅틱은 1급 시민으로, 네이티브 iOS/Android 웹뷰 안에서 동작한다 [src:35][src:1].
```tsx
```
## Do's and Don'ts
**Do** raw 색상 스케일을 표면에 직접 흩뿌리지 말고, `{colors.primary-regular}`, `{colors.text-primary}`, `{colors.background-regular}`, `{colors.notification-red}` 같은 시맨틱 토큰으로 의도를 먼저 표현한다 [src:4][src:1].
**Do** 표면 분리는 그림자보다 1px 디바이더(`{colors.divider-regular}`)와 `{colors.background-regular}` 워시로 먼저 해결한다 — SOCAR Frame의 깊이 언어는 절제가 기본값이다 [src:1][src:5].
**Do** 단일 채도 블루(`{colors.primary-regular}`)와 단일 Pretendard Variable 패밀리만 쓰고, 그라데이션과 이모지를 배제한다 — 아이콘은 SOCAR 커스텀 아이콘 폰트(`icon-*-fill`/`icon-*-line`)를 1차로 쓰고 미공개 환경에서만 Lucide로 대체하며, `►`·`→`·`★` 같은 유니코드 의사 아이콘으로 대체하지 않는다 [src:9][src:7].
**Do** 숫자는 bold로, 그 단위 라벨은 regular로 분리해 가격·시간·거리를 한눈에 읽히게 한다 — 시스템 전반의 반복 컨벤션이다 [src:8][src:5].
**Do** CTA 카피는 동사로 시작하고 마침표·느낌표 없이, 한국어 정중체(`-요`/`합니다`)로 주어를 생략해 쓴다(예: `예약하기`, `자세히 보기`, `다음에`, `취소`) [src:9][src:11].
**Do** 모든 인터랙티브 표면에 press feedback을 건다 — `scale(0.92)` + `{colors.pressed-dark-regular}` 리플이 표준이며, 텍스트 인접 행(chip/checkbox/radio)은 94–96%로 약하게 둔다 [src:1].
**Do** ActionButton은 `styleType`·`variant`·`size`를 명시해 구현하고, 한 화면의 primary slot은 하나만 둔다 [src:14][src:1].
**Do** 한 손·야외 조작을 전제로, 핵심 정보의 대비를 높게 유지하고 탭 타깃을 넉넉히 잡는다 — 릴리스 체크리스트의 "한 손 조작이 가능합니까?", "야외 환경에서도 핵심 정보가 식별됩니까?"가 설계 게이트다 [src:11][src:36].
**Do** 지도 UI에서 픽업과 반납 위치는 `{colors.location-rental}`과 `{colors.location-return}`로 구분한다 — 쏘카존 모델을 색으로 인코딩한 도메인 토큰이다 [src:4][src:2].
**Don't** 공개된 컴포넌트 목록에 없는 HeroBanner, PromoCard 같은 이름을 SOCAR Frame 컴포넌트처럼 만들지 않는다 [src:1][src:5].
**Don't** 다크 모드 토큰을 추정해서 만들지 않는다 — SOCAR Frame 2.0은 라이트 모드 전용이며 공개된 다크 팔레트가 없다 [src:1][src:4].
**Don't** "혁신적", "차세대" 같은 마케팅 수사로 UI 카피를 채우지 않는다 — UX 원칙이 "쉬운 언어로 작성되어 있습니까?"와 3초 테스트를 게이트로 두며, 안전·가독성이 시각적 완성도보다 앞선다(우선순위 Safety > Essentials > Confidence > Quality > Consistency > Innovation) [src:11][src:37].
**Don't** 강한 드롭섀도로 표면을 부양시키지 않는다 — 그림자 토큰은 모두 미세하며, 과한 elevation은 시스템 톤과 충돌한다 [src:1].
**Don't** 사용자에게 `당신`·`저희`·`우리`를 쓰지 않는다 — 사용자 소유물은 `내 …`(`내 쿠폰`, `내 위치`)로, 브랜드는 3인칭 `쏘카`로 칭하며, 성공 상태도 `걱정하지 마세요!` 대신 결과를 먼저 알리는 차분한 카피(`취소 수수료 3,000원이 발생합니다.`)를 쓴다 [src:1].
**Don't** 쏘카의 차량공유 도메인(대여·반납 예약 흐름, `{colors.location-rental}`/`{colors.location-return}`로 인코딩한 쏘카존 지도 모델, 대여/반납 날짜 범위 선택)을 성격이 다른 제품에 그대로 이식하지 않는다 — 차용할 것은 시각 언어(단일 채도 블루 primary·Pretendard Variable 위계·넉넉한 라운드와 pill 칩·미세 elevation + 1px 헤어라인·active 92% scale + ripple 피드백)이지 쏘카의 모빌리티 서비스 개념이 아니다 [src:4][src:2].
## Responsive Behavior
| Context | Key Changes |
| --- | --- |
| Baseline viewport | 시스템은 375px 모바일 웹뷰를 기준 컨텍스트로 본다 — `webview-unselectable`/`webview-` 클래스가 반복되며, 컴포넌트 스펙의 computed px 값은 이 폭을 전제로 측정된다 [src:1][src:9]. |
| Published breakpoint system | 공개 조사 범위에서 명시적 breakpoint 토큰 시스템은 surfaced되지 않았다 (no published breakpoint system surfaced); 제품 토큰은 미디어 쿼리 breakpoint를 갖지 않으며, 데스크톱↔모바일 collapse는 제품 구현 쪽에서 별도 정의해야 한다 [src:1]. |
| Top navigation | `{component.top-app-bar}`는 최소 높이 52px로 고정되며 `TrailingButtonSlot`은 액션을 최대 3개로 제한한다 — 좁은 화면에서 상단 액션이 넘치지 않도록 슬롯 수가 강제된다 [src:1][src:27]. |
| Touch target | UX 원칙이 한 손·야외 조작을 게이트로 두므로 탭 타깃은 넉넉히 확보해야 한다 — ActionButton 높이는 32/40/46/56px, Chip 36–40px, Checkbox/Radio 행 48px, TimePicker 세그먼트 46px이며, 핵심 행동 버튼은 large(56px)를 우선한다 [src:5][src:11]. |
| Bottom-fixed action | 하단 고정 액션 영역이 표준 레이아웃이다 — 흰 가격 요약 plate 위에 단일 large ActionButton(fill/primary)을 두는 패턴이 반복된다 [src:1][src:5]. |
| Sheet 기반 내비게이션 | `{component.bottom-sheet}`는 4개 detent(tip/half/full/max)와 드래그 제스처로 좁은 화면의 단계적 노출을 담당한다 — 상단 복합 메뉴보다 하단 시트를 우선 고려한다 [src:1][src:30]. |
| Hover | hover 상태는 사실상 존재하지 않는다 — 모바일 우선 시스템이라 press가 모든 피드백을 담당한다 [src:1]. |
| Imagery | 차량·위치 썸네일은 항상 radius-300/400 카드 안에 마스킹되며, 좁은 폭에서도 full-bleed로 깔지 않는다 [src:1]. |
| Webview-hybrid 패턴 | 컴포넌트는 네이티브 iOS/Android 웹뷰에 임베드되며, `{component.haptic}`과 `BasicBackButton`의 `window.onClickNavigation` 브리지가 네이티브 동작을 연결한다 [src:1][src:35]. |
## Known Gaps
- **다크 모드 미공개.** SOCAR Frame 2.0은 라이트 모드 전용이며, 모든 표면·그림자 토큰의 다크 대응값이 공개되지 않았다 — 다크 테마가 필요하면 다운스트림에서 별도 정의해야 한다 [src:1][src:4].
- **명시적 breakpoint 시스템 부재.** 375px 모바일 폭을 기준 컨텍스트로 두지만, 제품 토큰에 데스크톱 레이아웃 분기를 위한 미디어 쿼리 breakpoint는 surfaced되지 않았다 — 문서 사이트의 데스크톱 레이아웃은 제품 토큰 세트가 아니다 [src:1].
- **부분 스펙 컴포넌트.** 코퍼스는 19개 컴포넌트를 완전 build-grade로, 5개(SelectionBox · SegmentedControl · TopAppBar · Alert · Snackbar)를 부분 스펙으로 문서화한다 — 데모 래퍼 중첩 또는 포털/트랜션트 렌더링 탓에 이들의 전체 variant·선택 보더·표시 시간 등 일부 computed 값은 doc 페이지·스크린샷과 함께 재구성해야 한다 [src:5][src:18][src:3].
- **OKLCH 변환값.** 모든 색상은 공개 hex 토큰을 OKLCH로 변환한 것이며, 원본 시스템은 hex로 게시한다 — 미세한 변환 오차가 있을 수 있다 [src:4].
## References
1. https://socarframe.socar.kr/
2. https://socar.kr/
3. https://socarframe.socar.kr/development/components/Alert
4. https://socarframe.socar.kr/development/foundation/Colors
5. https://socarframe.socar.kr/development/components
6. https://socarframe.socar.kr/development/foundation/Spacing
7. https://socarframe.socar.kr/development/foundation/Icons
8. https://socarframe.socar.kr/development/foundation/Typography
9. https://socarframe.socar.kr/development/principle
10. https://socarframe.socar.kr/ux-principles/overview
11. https://socarframe.socar.kr/ux-principles
12. https://socarframe.socar.kr/ux-principles/wow-moment
13. https://socarframe.socar.kr/development/foundation
14. https://socarframe.socar.kr/development/components/Buttons/ActionButton
15. https://socarframe.socar.kr/development/components/Buttons/IconButton
16. https://socarframe.socar.kr/development/components/Buttons/TextButton
17. https://socarframe.socar.kr/development/components/Accordion
18. https://socarframe.socar.kr/development/components/SegmentedControl
19. https://socarframe.socar.kr/development/components/Chip
20. https://socarframe.socar.kr/development/components/Checkbox
21. https://socarframe.socar.kr/development/components/Radio
22. https://socarframe.socar.kr/development/components/SelectionBox
23. https://socarframe.socar.kr/development/components/Skeleton
24. https://socarframe.socar.kr/development/components/Input
25. https://socarframe.socar.kr/development/components/TextArea
26. https://socarframe.socar.kr/development/components/Tab
27. https://socarframe.socar.kr/development/components/TopAppBar
28. https://socarframe.socar.kr/development/components/DatePicker
29. https://socarframe.socar.kr/development/components/TimePicker
30. https://socarframe.socar.kr/development/components/BottomSheet
31. https://socarframe.socar.kr/development/components/Snackbar
32. https://socarframe.socar.kr/development/components/Pattern/Carousel
33. https://socarframe.socar.kr/development/components/Tips/AccentTip
34. https://socarframe.socar.kr/development/components/Tips/InfoTip
35. https://socarframe.socar.kr/development/components/Haptic
36. https://socarframe.socar.kr/ux-principles/release-checklist
37. https://socarframe.socar.kr/ux-principles/trade-off-rules