# NUUM — 전용 디자인 시스템
2026-09-12. 구현 전 작성. [BRIEF.md](BRIEF.md), [REFERENCES.md](REFERENCES.md), [LOGO.md](LOGO.md)와 연결한다.

## 첫 인상
아침의 세안대에서 느껴지는 맑은 공기. 옅은 물빛 용기 세 개가 하나의 라인으로 보인다. 사진의 촉감과 실제 선택 흐름이 브랜드를 설명한다.

## 색의 역할
| 이름 | 값 | 사용 |
| --- | --- | --- |
| Chalk | #f7f8f5 | 본문 바탕, 넓은 여백 |
| Deep water | #173e43 | 로고/본문/선택 동작 |
| Cloud blue | #c8e2e6 | 제품과 캠페인의 주요 면 |
| Pool | #89b9c3 | 루틴의 그래픽과 선택 표시 |
| Skin | #e6c6b4 | 텍스처 사진 안의 작은 온기 |
| Line | #c7d2cf | 상품 정보와 필요한 경계 |
선명한 색을 큰 장식에 흩뿌리지 않는다. 따뜻한 피부와 차가운 패키지의 관계가 색의 대비다. 피부색은 CSS 장식이 아니라 사진 안에서만 사용한다.

## 타이포와 로고
NUUM 워드마크는 둥근 어깨와 같은 폭의 U 두 개가 중심인 직접 작성한 단순 벡터 레터링. 임의 꽃 심벌을 덧붙이지 않는다.
한글 SUIT 450/550, 영문 Albert Sans 450/600. 큰 영문 슬로건용 세리프를 쓰지 않는다.
H1 52px/1.25(모바일 34px), H2 38px/1.28(모바일 29px), 제품명 23px, 본문 15px/1.75, 보조 12px. 제목은 2줄 이내, 사진 위 본문은 2문장 이내.

## 사진 편집
- 캠페인 가로 사진: 실제 조명처럼 보이는 옅은 물빛 배경. 세 패키지는 중앙 오른쪽 60%, 왼쪽에는 짧은 문구를 놓을 여백. 꽃, 수면에 뜬 석재, 임의 금속 드로퍼를 제외.
- 세 제품 단품: 동일 조명과 패키지, 각각 다른 용기를 정면 가까이 촬영. 정사각 사진 전체를 보여줘 이름과 라벨을 보존.
- 리추얼 근접 사진: 피부 위 흰 크림 한 번의 자국. 피부결이 자연스럽고 과도한 광택 보정 없음.
- 모바일 캠페인: 인위적으로 중앙 확대해 제품을 자르지 않는다. 제품 이미지를 위에 두고 문구를 아래의 물빛 면에 이어 붙인다.

## 화면 구성
```
짧은 상단 안내
탐색  /              nuum               /  선택 목록
-------------------------------------------------
같은 제품군의 넓은 캠페인 사진
짧은 카피                  세 패키지
-------------------------------------------------
매일, 세 가지.                 제품 종류 필터
  Daily wash     Daily milk     Cloud cream
  큰 정사각 사진 / 제형 / 용량 / 가격 / 선택
-------------------------------------------------
물빛 넓은 리추얼 면
  아침 ↔ 저녁        제품 순서와 움직이는 연결선
  제형 근접 사진      구성 설명 / 구성 담기
-------------------------------------------------
적게 더하는 방식  +  큰 텍스처 이미지의 비대칭 지면
브랜드 워드마크 / 이용 안내 / 템플릿 고지
```
상품은 실제 비교 대상이라 3열을 사용한다. 브랜드 이야기와 루틴까지 같은 카드를 반복하지 않는다. 상세는 큰 제품 이미지와 사양이 나란한 대화상자, 선택 목록은 오른쪽 서랍이다. 페이지 이동 없이 일관된 제품을 따라간다.

## 모션 설계
첫 진입의 캠페인 사진은 2.4초 동안 1.035→1배로 정리되고 정지. 제목은 글자별 날림을 쓰지 않는다.
상품 이미지 위에 올리면 350ms에 용기 전체가 1.025배 가까워진다. 사진을 3D라고 소개하지 않는다.
아침/저녁 변경은 연결선의 경로와 실제 제품 순서/구성이 함께 바뀐다. 600ms 선 그리기와 280ms 위치 이동. 반복 배경 장식 금지.
상세 220ms, 선택 서랍 280ms. 닫기와 Escape 시 이전 버튼으로 초점 복원. 전역 모션 중지와 reduced-motion을 지원한다.

## 사용성과 상태
제품 필터는 결과 개수를 알린다. 상품명/사진/용량/가격을 하나의 데이터에서 사용한다. 동일 상품을 다시 담으면 수량 증가. 삭제/빈 목록/합계/선택 확인이 작동한다. 선택 확인은 외부 주문을 만들지 않는다는 설명을 그 시점에 보여준다.
390/768/1440px에서 화면의 순서와 사진 크롭을 직접 확인한다. 키보드, 44px 터치 영역, 화면 낭독기 명칭, 정지 상태를 검수한다.

## 사전 비평과 수정
기존 '베이지 세리프 + 우측 갈색 용기 + 아래 단품' 안은 다른 브랜드와 교환 가능하여 폐기.
새 안도 물빛 팔레트만으로 차별화했다고 판단하지 않는다. 패키지 세 개의 실제 일치, 캠페인에서 제품 비교로 내려오는 사진의 거리 변화, AM/PM 구성의 조작을 함께 구현한다.
현재 문서는 설계안이다. 실제 화면 검토와 변경 기록은 REVIEW.md에 남긴 뒤 완료 여부를 판단한다.