---
id: fashion-cosme-design
service: @cosme
website: https://www.cosme.net
category: fashion
document: design.md
source_prompt: fashion-cosme-representative
language: ko
generated: 2026-07-18
---

# @cosme design.md

> 패션·뷰티 서비스의 디자인 시스템, 화면 구조, 컴포넌트 상태, 접근성 기준을 바로 복사해 프로젝트 디자인 기준으로 쓰기 위한 문서다. 참고 서비스 @cosme에서는 정보 구조만 활용하며 로고, 고유 문구, 이미지, 화면 배치는 복제하지 않는다.

## 사용 목적

이 문서는 사이트나 앱을 만들기 전에 디자인 방향을 고정하는 **디자인 전용 기준서**다. AI 빌더, 디자이너, 프론트엔드 개발자에게 그대로 전달해 초기 화면 설계와 UI 구현의 기준으로 사용할 수 있다.

- 참고 서비스: [@cosme](https://www.cosme.net)
- 서비스 계열: 패션·뷰티
- 화면 패턴: 서비스 화면
- 핵심 목표: 스타일 탐색과 상품 구매
- 핵심 객체: 스타일·상품·사이즈
- 디자인 리스크: 핏 불확실성·정품 신뢰·반품

## 디자인 브리프

@cosme 계열의 공개 서비스에서 참고할 점은 스타일 탐색과 상품 구매 목표를 지원하는 정보 우선순위와 사용자의 판단 흐름이다. 새 제품은 독립적인 브랜드로 설계하고, 스타일·상품·사이즈의 현재 상태와 다음 행동을 사용자가 3초 안에 이해하게 한다.

- 첫 화면은 사용자가 지금 할 수 있는 가장 중요한 행동 1개와 보조 행동 2개까지만 강조한다.
- 핏 불확실성·정품 신뢰·반품에 해당하는 정보는 숨기지 않고 결정 직전에 다시 확인하게 한다.
- 목록, 카드, 상세, 확인, 완료 상태가 같은 토큰과 컴포넌트 규칙을 공유해야 한다.
- 시각적 장식보다 실제 데이터, 상태, 에러 복구 경로를 우선한다.

## 공개 인터페이스 디자인 분석

- 분석 기준: 공개 첫 화면과 대표 작업 흐름에서 반복되는 시각·구조 패턴이다. 서비스 업데이트에 따라 달라질 수 있으므로 실사이트 캡처로 최종 확인한다.
- 화면 원형: 검색 우선 리테일
- 톤 & 매너: 타이포그래피 중심의 편집적
- 정보 밀도: 보통
- 색채 전략: 잉크 중심의 제한된 강조색 (#EF3F78)
- 탐색 구조: 가벼운 상단 탐색
- 구조 순서: 강한 헤드라인 → 섹션 탐색 → 카드형 콘텐츠 → 구독/구매
- 재사용할 패턴: 대표 미디어 · 스타일 그리드 · 사이즈 가이드 · 비교 카드 · 고정 핵심 행동
- 독립 적용 규칙: 순서와 판단 원칙만 참고하고, 로고·카피·이미지·아이콘·고유 화면 배치는 복제하지 않는다.

## 화면 구조

### 1. 첫 화면

- 목적: 핵심 작업을 빠르게 이해하고 반복 행동을 안정적으로 수행하게 한다.
- 상단 영역: 서비스명, 핵심 검색/입력/탐색 행동, 사용자 상태를 배치한다.
- 본문 영역: 내비게이션, 요약 카드, 목록, 상세 패널, 주요 CTA 같은 컴포넌트로 우선순위가 높은 정보부터 배치한다.
- 하단 또는 보조 영역: 도움말, 정책, 최근 활동, 추천 또는 다음 행동을 둔다.

### 2. 목록과 탐색

- 카드는 제목, 핵심 메타, 상태, 주요 행동을 같은 순서로 보여준다.
- 필터는 최대 5개 우선 노출하고 나머지는 고급 필터로 접는다.
- 정렬 기준이 결과를 크게 바꾸는 경우 현재 정렬 값을 항상 표시한다.
- 빈 결과는 조건 초기화, 추천 조건, 수동 입력 대안을 함께 제공한다.

### 3. 상세와 결정

- 상세 화면은 요약, 근거, 위험/제약, 주요 CTA 순서로 구성한다.
- 금액, 시간, 권한, 개인정보, 취소 조건처럼 되돌리기 어려운 정보는 CTA 근처에 반복한다.
- 완료 후에는 다음 행동, 기록 위치, 되돌리기 가능 여부를 명확히 알려준다.

## 디자인 토큰

```css
:root {
  --color-primary: #EF3F78;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #EF3F7822;
  --color-danger: #DC2626;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-line: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --font-sans: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}
```

## 타이포그래피

- H1: 32~44px, 한 화면의 목적을 한 문장으로 말한다.
- H2: 22~28px, 섹션의 작업 단위를 표현한다.
- Body: 15~16px, 실제 한국어 문장 길이에서 줄 간격 1.6 이상을 유지한다.
- Caption: 12~13px, 메타 정보와 보조 설명에만 사용한다.
- 숫자와 상태값은 tabular number가 가능한 글꼴 설정을 사용한다.

## 컴포넌트 명세

### 내비게이션

- 현재 위치, 되돌아갈 경로, 주요 작업 진입점을 항상 보여준다.
- 모바일에서는 하단 고정 내비게이션 또는 상단 접힘 메뉴 중 하나만 사용한다.

### 카드

- 제목, 핵심 메타, 상태, CTA 순서를 고정한다.
- 카드 전체 클릭과 내부 버튼 클릭이 충돌하지 않게 한다.
- 선택 상태는 배경색만이 아니라 테두리와 텍스트 상태로도 구분한다.

### 폼과 입력

- 라벨은 placeholder에 의존하지 않는다.
- 필수/선택, 형식, 오류 메시지를 입력 전부터 예측 가능하게 둔다.
- 오류 문구는 원인, 수정 방법, 보존된 입력값을 함께 알려준다.

### 버튼

- primary는 화면당 1개를 원칙으로 한다.
- destructive 행동은 즉시 실행하지 않고 확인 단계나 undo를 제공한다.
- disabled 버튼은 왜 비활성인지 보조 문구로 설명한다.

## 상태 설계

- Loading: 스켈레톤은 최종 레이아웃과 같은 크기로 제공해 레이아웃 이동을 막는다.
- Empty: 사용자가 다음에 할 수 있는 생성, 검색 초기화, 예시 보기 행동을 제공한다.
- Error: 재시도, 다른 경로, 고객지원 또는 수동 처리 방법을 함께 제공한다.
- Partial data: 일부 데이터만 최신이 아닐 때 마지막 갱신 시간과 영향 범위를 표시한다.
- Success: 완료 결과, 다음 행동, 기록 위치를 한 화면에서 확인하게 한다.
- Permission: 권한 요청 이유와 관리자에게 요청할 정보를 제공한다.

## 반응형 기준

- 360px: 단일 열, 핵심 CTA 우선, 보조 메타는 접힘 영역으로 이동한다.
- 768px: 목록과 상세를 순차 탐색으로 유지하되 필터를 상단 고정 영역에 둔다.
- 1280px: 목록+상세 또는 사이드바+본문 구조를 사용해 반복 작업 속도를 높인다.
- 고정 높이 카드에는 aspect-ratio, min-height, line-clamp를 사용해 텍스트 넘침을 막는다.

## 접근성 기준

- 모든 인터랙션은 키보드만으로 도달하고 실행할 수 있어야 한다.
- focus-visible은 배경과 3:1 이상 대비가 나야 한다.
- 터치 타깃은 최소 44px를 유지한다.
- 색상만으로 상태를 전달하지 말고 아이콘, 텍스트, aria 속성을 함께 사용한다.
- 모션은 prefers-reduced-motion에서 제거하거나 즉시 완료 상태로 대체한다.

## UX 라이팅

- CTA는 "확인", "다음" 대신 사용자의 결과를 말한다.
- 오류는 사용자를 탓하지 않고 수정 가능한 행동을 제시한다.
- 핏 불확실성·정품 신뢰·반품 관련 문구는 짧고 직접적으로 쓰며 숨은 조건을 만들지 않는다.
- 전문 용어가 필요한 경우 첫 등장에 쉬운 설명을 붙인다.

## AI 빌더에 붙여 넣는 디자인 지시문

```text
아래 design.md를 기준으로 패션·뷰티 제품 화면을 설계해줘.
참고 대상: @cosme. 브랜드 자산, 고유 문구, 이미지, 화면 배치를 복제하지 않는다.
화면 패턴은 서비스 화면이며 핵심 목표는 스타일 탐색과 상품 구매이다.
스타일·상품·사이즈의 상태와 다음 행동이 3초 안에 이해되도록 정보 위계를 만든다.
핏 불확실성·정품 신뢰·반품에 관한 예방, 설명, 복구 경로를 화면 안에 포함한다.
360px, 768px, 1280px 반응형과 loading, empty, error, partial-data, success, permission 상태를 모두 설계한다.
디자인 토큰, 컴포넌트 목록, 접근성 기준, UX 라이팅 예시, 완료 체크리스트를 결과에 포함한다.
```

## 완료 체크리스트

- [ ] 첫 화면에서 핵심 행동 1개가 가장 먼저 보인다.
- [ ] 스타일·상품·사이즈의 상태, 관계, 다음 행동이 명확하다.
- [ ] 핏 불확실성·정품 신뢰·반품에 관한 설명과 복구 경로가 있다.
- [ ] 모든 핵심 컴포넌트에 loading, empty, error, success 상태가 있다.
- [ ] 360px, 768px, 1280px에서 텍스트와 버튼이 겹치지 않는다.
- [ ] 키보드 포커스, 스크린리더 이름, 터치 타깃, 대비 기준을 검수했다.
- [ ] @cosme의 로고, 고유 카피, 이미지, 픽셀 레이아웃을 복제하지 않았다.