택타일 소프트 프로덕트

# Tactile Soft Product — web 디자인 팩

## 이 스타일의 정체성
화면을 만질 수 있을 것 같은 촉각적 UI다. 포근한 따뜻한 그레이지 배경 위에 둥근 카드가 부드러운 다중 그림자로 살짝 떠 있고, 호버하면 미세하게 더 들리며 스냅한 마이크로인터랙션이 손맛을 준다. 색은 차분한 세이지 민트와 따뜻한 클레이 코랄 두 톤만 강조로 쓴다 — 보라·인디고는 단 한 곳도 없다. 큼직한 라운드 입력 필드와 칩으로 실제 제품 UI 컴포넌트를 전시한다.

## 색
- 배경: 따뜻한 그레이지 `#f1efec`. 절대 순백·청회색을 쓰지 않는다 — 베이지 기운이 들어간 중성.
- 표면(카드): 오프화이트 `#faf9f7`. 배경보다 살짝 밝아 떠 보인다.
- 텍스트: 본문 `#3a3733`(웜 잉크), 보조 텍스트 `#8a857d`. 본문 대비 4.5:1 이상.
- 강조 2개만:
  - 세이지 민트 `#6fae9b` — 1차 CTA·활성 상태·체크.
  - 클레이 코랄 `#e08a6a` — 2차 강조·알림 점·선택된 칩.
- 보더: `#e4e0da`(그레이지보다 한 단계 진한 톤). 헤어라인 1px.
- 금지색: 보라 `#7c3aed` 계열, 네온, 청회색 `#64748b` 계열. 베이지·웜 중성 축에서 벗어나지 않는다.

## 타이포그래피
- 폰트: 디스플레이·본문 모두 `Plus Jakarta Sans`(Google Fonts), 대체 `system-ui, sans-serif`. 친근한 지오메트릭 산세리프.
- 헤드라인: `clamp(2rem, 4vw, 3.25rem)`, weight 700, letter-spacing `-0.02em`, line-height 1.15.
- 서브헤드: `1.25rem`, weight 600, line-height 1.4.
- 본문: `1.0625rem`, weight 400, line-height 1.65, 측정 폭 60~68ch.
- 라벨/칩 텍스트: `0.875rem`, weight 600, letter-spacing `0`.
- 버튼 텍스트: `0.9375rem`, weight 600.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 1080px, 중앙 정렬. 좌우 패딩 `clamp(20px, 4vw, 48px)`.
- 섹션 수직 리듬: 섹션 간 간격 `clamp(72px, 9vw, 128px)`.
- 그리드: 12열, gap 24px. 카드 섹션은 데스크탑 3열, 768~1024px 2열, 768px 미만 1열.
- 브레이크포인트: 1024px / 768px / 480px.
- 헤더: 고정, 높이 72px, 배경 `rgba(241,239,236,0.85)` + `backdrop-filter: blur(8px)`. 로고 좌측, 메뉴 중앙, 우측에 알약형 1차 CTA.
- 히어로는 중앙 정렬 — 헤드라인+서브카피 위, 그 아래 둥근 입력 필드 1개와 1차 CTA를 가로로 묶은 "검색바형" 블록을 카드 위에 얹는다.

## 형태 / 질감
- 카드: radius 20px. 보더 없음 또는 1px `#e4e0da`. 핵심은 다중 소프트 그림자 —
  `box-shadow: 0 1px 2px rgba(58,55,51,0.04), 0 8px 24px rgba(58,55,51,0.06), 0 2px 6px rgba(58,55,51,0.05)`.
  단일 균일 그림자가 아니라 가까운/먼 그림자를 겹쳐 부드러운 입체감을 낸다.
- 입력 필드: radius 14px, 높이 52px, 배경 `#faf9f7`, 보더 1.5px `#e4e0da`. 포커스 시 보더 `#6fae9b` + 외곽 `0 0 0 4px rgba(111,174,155,0.16)`.
- 칩/태그: radius 999px(완전 알약), 패딩 8px 16px, 배경 `#faf9f7` 보더 1px `#e4e0da`. 선택 시 배경 `#6fae9b` 텍스트 흰색.
- 1차 버튼: radius 14px, 배경 `#6fae9b`, 텍스트 `#faf9f7`, 패딩 14px 24px, 그림자 `0 6px 16px rgba(111,174,155,0.28)`.
- 아이콘: 2px stroke 라인 아이콘, radius가 있는 둥근 끝(round linecap). 채워진 글리프 금지.

## 모션 (웹)
- 카드 호버: `transform: translateY(-4px)` + 그림자 강화(`0 16px 36px rgba(58,55,51,0.1)` 추가). duration 180ms, easing `cubic-bezier(0.34,1.56,0.64,1)`(살짝 오버슈트하는 스냅).
- 버튼 누름(active): `transform: scale(0.97)`, duration 90ms ease-out — 눌리는 촉감.
- 칩 선택: 배경색 전환 140ms ease-out + 미세 `scale(1.04)` 펄스 후 복귀.
- 입력 포커스: 외곽 글로우 링 fade-in 160ms ease-out.
- 스크롤 등장: 카드가 `opacity 0→1` + `translateY(16px→0)`, 200ms ease-out, 행마다 60ms 스태거.
- `prefers-reduced-motion: reduce`이면 transform 모션 제거, 색·그림자 전환만 즉시 적용.

## 하지 말 것
- 보라/인디고 그라디언트 절대 금지 — Claude 기본 미감과 겹치는 1순위 회귀점이다. 배경·카드·버튼 어디에도 보라 톤 금지.
- 그라디언트 텍스트·그라디언트 버튼 금지. 강조는 평면 단색 민트/코랄만.
- 클레이모피즘처럼 과장된 두툼한 3D 압출·뉴모픽 인셋 그림자 금지 — 그림자는 바깥쪽 소프트 멀티 섀도만, 절제해서.
- 모든 카드에 동일한 단일 그림자를 복붙하지 말 것 — 명세된 다중 그림자 레시피를 쓴다.
- 순백(`#ffffff`)·청회색 중성 금지. 베이지 기운의 웜 그레이지를 유지한다.
- 이모지로 빈 공간을 채우지 말 것 — 2px 라인 아이콘을 쓴다.
- 섹션마다 동일한 3카드 그리드를 반복하지 말 것 — 입력바·칩 행·피처 카드·증언 등 컴포넌트를 다양화한다.

## 적용 예
- **히어로:** `#f1efec` 배경 중앙 정렬. 헤드라인+한 줄 서브카피 아래, `#faf9f7` 카드 위에 둥근 입력 필드 1개와 민트 1차 CTA를 가로로 묶은 검색바 블록. 카드는 다중 소프트 그림자로 부유.
- **카드:** radius 20px 오프화이트 카드 — 상단에 2px 라인 아이콘, 제목, 본문 2줄, 하단에 알약 칩 2개. 호버 시 4px 상승 + 그림자 강화, 오버슈트 스냅.
- **푸터:** `#faf9f7` 표면(배경보다 밝게), radius 24px로 위 모서리만 둥글게. 좌측 로고+카피, 우측 3열 링크. 분할선 1px `#e4e0da`. 색 반전 없음 — 톤을 유지한다.