release: v0.11.0
This commit is contained in:
parent
3c39a1731d
commit
45ba92ea82
45 changed files with 1459 additions and 1887 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
2단계에서 읽는다. **하나를 고르고, 왜 그것인지 한 줄로 적는다.**
|
||||
|
||||
프리셋은 템플릿이 아니라 **결정의 출발점**이다. 그대로 쓰면 그 프리셋의 평균이 나온다.
|
||||
프리셋은 템플릿이 아니라 **결정의 출발점**이다. 값·폰트·효과 목록은 가설이며, 브리프·콘텐츠·실제 렌더 검증으로 조정한다. 단 각 프리셋이 정한 정체성 계약(예: editorial의 세리프 주역, dense 화면의 비교 가능성)은 바꾸려면 다른 프리셋 또는 새 방향을 정의한다.
|
||||
1단계 레퍼런스 R2(다른 업종의 톤)를 여기에 섞어야 이 브리프만의 것이 된다.
|
||||
|
||||
| 프리셋 | 한 줄 | 언제 |
|
||||
|
|
@ -14,4 +14,4 @@
|
|||
| [quiet-commerce](quiet-commerce.md) | 읽히는 커머스 | 전환이 목적인 B2C. 상품 수가 적고 사양이 설득의 주체 |
|
||||
|
||||
**어느 것도 맞지 않으면 새로 정의해라.** 브리프가 프리셋보다 우선한다.
|
||||
새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/실패)는 그대로 채워야 한다.
|
||||
새로 정의할 때도 이 문서들의 항목 구조(타이포/색/간격/재질/모션/실패/검증)는 채운다. 실제 적용 조건과 검증은 `../style-playbook.md`를 따른다.
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
> 한 문장: **기억되는 것이 목적일 때.** 규칙을 알고 나서 깬다.
|
||||
|
||||
벤토 그리드가 표준화되자 그 반작용으로 부상한 방향이다. 2026년 현재 **실제로 작동하는 차별화 수단**이다.
|
||||
규칙적 격자에 비대칭·겹침·예상 밖의 리듬을 의도적으로 더하는 방향이다. 이것이 2026년에 보편적으로 더 효과적이라는 실증 주장은 하지 않는다.
|
||||
|
||||
## 언제 고르나
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
## 결정
|
||||
|
||||
### 타이포그래피
|
||||
- 산세 + **모노스페이스 병용**. 수치·ID·코드는 반드시 모노
|
||||
- 산세를 본문 출발점으로 두고, 정렬이 중요한 수치·ID·코드에는 tabular figure 또는 모노를 검토한다. 모든 수치·ID에 모노가 필수인 것은 아니다.
|
||||
- 비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
|
||||
- 숫자는 **tabular-nums** 를 켜라 (`font-variant-numeric: tabular-nums`). 수치가 흔들리면 계기판이 아니다
|
||||
|
||||
|
|
@ -26,8 +26,7 @@
|
|||
| 수치·코드 | JetBrains Mono, IBM Plex Mono | + Pretendard |
|
||||
|
||||
### 색
|
||||
- **순수 검정을 쓰지 마라.** `#0d0d0f`~`#14130f` 대역. 순흑은 대비가 과해 눈이 아프다
|
||||
- 텍스트도 순백 금지. `#e8e4dc`~`#e6e6e9`
|
||||
- 순수 검정/흰색과 근접색을 모두 후보로 두고, 실제 기기·주변광·장시간 읽기에서 대비와 눈부심을 확인한다. `#0d0d0f`~`#14130f`, `#e8e4dc`~`#e6e6e9`는 출발값 예시다.
|
||||
- 표면 단계를 3개로: `--surface`(가장 어두움) / `--surface-raised` / `--line`
|
||||
- 강조색은 **밝고 채도 높게, 아주 좁게.** 어두운 배경에서는 작은 면적으로도 충분히 강하다
|
||||
- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다
|
||||
|
|
@ -49,9 +48,9 @@
|
|||
|
||||
## 흔한 실패
|
||||
|
||||
1. **순수 검정 + 순수 흰색** → 눈이 아프고 아마추어
|
||||
1. **배경·텍스트 대비를 기기에서 확인하지 않음** → 순수색과 근접색 모두 조건에 따라 눈부심·번짐·브랜드 인상을 만들 수 있다
|
||||
2. **네온 보라/파랑 강조** → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
|
||||
3. **다크만 만들고 라이트를 안 만듦** → 토큰으로 짰으면 라이트도 나온다. 다크 전용은 사용자 선택권을 뺏는 것
|
||||
3. **테마 결정을 설명하지 않음** → 다크 전용일 수 있지만 대상 환경·브랜드·접근성·운영 이유를 기록하고, 지원하는 테마는 역할 토큰과 실제 상태를 완성한다
|
||||
4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
|
||||
5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라
|
||||
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
## 결정
|
||||
|
||||
### 타이포그래피
|
||||
- **세리프를 주역으로.** 디스플레이와 본문 중 최소 하나는 세리프
|
||||
- 세리프 또는 고대비 산세를 주역 후보로 둔다. 대상 언어의 glyph·작은 크기·긴 읽기에서 더 잘 작동하는 쪽을 선택한다.
|
||||
- 비율 **1.333~1.618** — 헤드라인과 본문의 차이를 크게 벌린다
|
||||
- 본문 `--measure` 를 반드시 좁게. 라틴 60~68자, 한글 25~35자
|
||||
- 본문 `--measure`는 상대적으로 좁은 값에서 시작하고, 라틴 60~68자·한글 25~35자는 후보 범위로만 쓴다. 글꼴·언어·확대 상태의 실제 문단으로 확정한다.
|
||||
- 웨이트는 2개면 충분(Regular + 하나). 굵기로 소리치지 않는다
|
||||
|
||||
| 슬롯 | 무료 | 유료 | 한글 |
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
| 본문 | Spectral, Lora | Söhne, Tiempos | 마루 부리 / 리디바탕 |
|
||||
|
||||
### 색
|
||||
- 배경은 **순백이 아니다.** 종이 쪽으로 살짝 따뜻하게 (`#fbfaf8`, `#f7f5f0`)
|
||||
- 잉크도 순흑이 아니다 (`#1a1917`, `#211f1c`)
|
||||
- 강조색은 **하나, 작게.** 링크·인용부호·페이지 번호 정도. 면적을 넓히면 잡지가 아니라 전단지가 된다
|
||||
- 종이 같은 따뜻한 배경과 순백 모두를 콘텐츠·이미지·브랜드 대비로 비교한다. `#fbfaf8`, `#f7f5f0`은 출발값 후보일 뿐이다.
|
||||
- 잉크는 순흑과 근접색을 실제 대비·주변 이미지·긴 읽기에서 비교한다.
|
||||
- 강조 역할이 필요하면 **한 색을 작게** 쓴다. 강조색이 없어도 되며, 링크·인용·페이지 번호의 구분은 대비·밑줄·위치로도 만들 수 있다.
|
||||
|
||||
### 간격
|
||||
- **여백이 콘텐츠다.** 섹션 간격을 본문 간격의 5~6배까지 벌려도 된다
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
- 이미지는 본문 폭을 넘어가게(`wide`/`full`) 두어 리듬을 만든다
|
||||
|
||||
### 재질 (`svg-filters.md`)
|
||||
- **필름 그레인**이 이 프리셋의 기본 재질. `feTurbulence fractalNoise` 를 아주 약하게(opacity 0.03~0.06)
|
||||
- 필름 그레인은 인쇄·사진 재질이 브리프에 맞을 때만 후보로 둔다. 효과 없이도 editorial 리듬이 성립해야 한다.
|
||||
- 인쇄물의 질감: 이미지에 미세한 듀오톤 또는 그라디언트 맵
|
||||
- 유리·네온·글로우는 이 프리셋에 어울리지 않는다
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
### 타이포그래피
|
||||
- 디스플레이 **세리프 1** + 본문 **산세리프 1**. 세리프가 톤을, 산세리프가 가독성을 맡는다
|
||||
- 비율 **1.333**, 최대÷본문 **4배 이상**. 비율만으로 안 나오면 디스플레이를 스케일 밖에 따로 정의한다(`tokens.md` §1)
|
||||
- 비율 1.333과 강한 display 대비에서 시작하고, 문구 길이·제품 증거·모바일 줄 수로 확정한다. 최대÷본문 4배 같은 고정 비율은 요구사항이 아니다.
|
||||
- 단계 **4~5개**. 커머스 레퍼런스는 흔히 10단계인데 그대로 베끼면 "통제 실패"에 걸린다
|
||||
- 웨이트 2개
|
||||
|
||||
|
|
@ -33,12 +33,12 @@
|
|||
### 색
|
||||
- 배경은 순백이 아니라 **오프화이트**. 단 **크림·베이지는 피해라** — "크림 = 고급"은 보라를 대체한 신종 슬롭이다. 크림을 쓰려면 브리프와 연결할 근거를 대라
|
||||
- 잉크도 순흑이 아니다
|
||||
- **강조색 하나, 면적 5% 미만.** 좋은 커머스 레퍼런스는 강조색을 CTA 한 곳과 링크에만 쓴다
|
||||
- 강조 역할이 필요하면 한 색으로 시작하고, 실제 상태색·링크·CTA를 포함한 화면에서 경쟁 여부를 검증한다. 5% 면적 같은 값은 보편 품질 기준이 아니다.
|
||||
- hue 2개 (중립 + 강조)
|
||||
|
||||
### 간격
|
||||
- 8px 그리드, 여백 값 5종
|
||||
- **섹션 간 : 요소 간 = 1:5.** 커머스는 섹션이 많아 간격이 좁으면 즉시 뭉개진다
|
||||
- 섹션과 요소 간격의 차이가 정보 묶음을 읽히게 하는지 본다. 1:5는 예시 가설이며, 상품 수·콘텐츠 길이·화면 폭에서 조정한다.
|
||||
- 비대칭을 쓴다 — 본문을 그리드 왼쪽에 두고 오른쪽 여백에 사양·수치를 흘린다
|
||||
- `--measure` 는 좁게. 한글 25~35자
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
## 결정
|
||||
|
||||
### 타이포그래피
|
||||
- **그로테스크 산세 하나로 끝낸다.** 두 번째 폰트를 넣고 싶으면 모노스페이스(라벨·코드용)까지만
|
||||
- 그로테스크 산세 하나에서 시작하고, 필요한 경우 라벨·코드 역할에 모노를 추가한다. 언어 범위나 실제 위계가 추가 패밀리를 요구하면 전송량과 렌더 근거를 남긴다.
|
||||
- 비율 **1.200~1.250** — 위계 차이를 작게. 대신 웨이트와 색으로 구분
|
||||
- 정렬은 왼쪽. 가운데 정렬은 히어로 한 곳까지만
|
||||
- **Inter 를 기본값으로 쓰지 마라.** Switzer, Satoshi, DM Sans 가 거의 언제나 낫다
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
| 라벨·코드 | JetBrains Mono, IBM Plex Mono | — | Pretendard + JetBrains Mono |
|
||||
|
||||
### 색
|
||||
- 무채색 90% + 강조색 하나
|
||||
- 무채색 비중이 큰 팔레트에서 시작하고, 강조 역할이 필요하면 한 색으로 시작해 실제 상태색·링크·CTA의 경쟁을 검증한다
|
||||
- 배경/카드/경계선의 명도 차이를 **아주 작게**. 그림자 대신 1px 경계선
|
||||
- 강조색은 채도를 낮춰라. 형광에 가까운 색은 이 프리셋에서 즉시 싸구려가 된다
|
||||
- **보라~파랑 그라디언트 절대 금지** (검출률 1위 슬롭 지문)
|
||||
|
|
@ -30,12 +30,12 @@
|
|||
### 간격
|
||||
- 4/8 배수 그리드를 **엄격하게** 지킨다. 여기서만큼은 예외를 만들지 마라
|
||||
- 정렬선이 전부 맞아야 한다. 이 프리셋의 품질은 정렬에서 나온다
|
||||
- 섹션 간격은 본문의 4배
|
||||
- 섹션과 본문의 간격 대비는 시작값으로 크게 두되, 콘텐츠 그룹과 좁은 폭에서 실제 리듬을 보고 확정한다.
|
||||
|
||||
### 재질 (`svg-filters.md`)
|
||||
- **재질을 거의 쓰지 않는다.** 이 프리셋의 표면은 평평한 종이다
|
||||
- 굳이 쓴다면 아주 약한 그레인 하나까지
|
||||
- 글래스모피즘 금지 — 실기기에서 FPS 15~30% 하락하고, 이 프리셋의 정직함과 어긋난다
|
||||
- 유리 효과는 이 프리셋의 평면적 언어와 충돌하기 쉽다. 채택하려면 계층상 이유와 저사양 기기의 성능·대비·reduced-transparency 대안을 검증한다. 고정 FPS 하락 수치를 일반화하지 않는다.
|
||||
|
||||
### 모션 (`motion.md`)
|
||||
- 상태 변화 위주(`--dur-instant`, `--dur-quick`). 등장 애니메이션은 최소화
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue