본문으로 건너뛰기

# designpaca

에이전트에게 “예쁘게 만들어줘”라고 하면 자기가 아는 기본값을 쏟아낸다. 못 만들어서가 아니라 결정을 안 해서다. 이 스킬은 그 결정을 순서대로 강제한다.

`npx designpaca`

Node 20.11+ · 설치 대상을 감지해 골라준다

저장소 npm

여섯 단계

## 브리프 한 줄이 검증된 페이지가 될 때까지

각 단계에는 통과 조건이 있다. 통과하지 못하면 다음으로 가지 않는다. 아래는 실제로 이 스킬을 돌려 만든 커피 로스터리 랜딩에서 같은 브리프가 단계마다 무엇으로 변했는지다.

들어온 브리프

수제 커피 로스터리의 원두 정기구독 랜딩 만들어줘

1. ### 브리프 게이트

   무엇을·누구에게·제약을 세 줄로 압축한다. 규모를 판정해 경로를 고른다.

   누구에게: 홈카페 3년차 이상. 산미와 로스팅 프로파일을 구분한다

2. ### 레퍼런스 조사

   실제로 존재하는 사이트 3개를 서로 다른 층위에서 고른다. 구조·톤·디테일.

   R2 = 독립 문학 출판사. 커피 업계 밖에서 톤을 가져온다

3. ### 방향 결정

   레퍼런스를 하나의 축으로 합성한다. 감수할 리스크를 하나 고른다.

   감상은 이름에만, 화면에는 수치만

4. ### 디자인 토큰

   코드를 쓰기 전에 숫자를 정한다. 성능 예산도 여기서 확정한다.

   --measure: 33em / --leading-normal: 1.7 / JS 예산 0KB

5. ### 구현

   레이아웃 → 재질 → 입체 → 모션 순서로. 이펙트를 다 꺼도 완성돼 있어야 한다.

   <h1>산미 8.5 · 바디 6.0 · 로스팅 라이트</h1>

6. ### 프리플라이트

   자기 결과물을 남의 것처럼 본다. 게이트 12개는 전부 '아니오'여야 한다.

   게이트 12/12 통과 · 슬롭 지문 0건 · 320px 오버플로 31px → 수정

여섯 단계 끝에 남는 것은 페이지 하나와 design.md 하나다. 다음 사람이 그 파일을 읽고 같은 결정을 이어간다.

이 페이지의 수치

## 카피만 고쳐서는 슬롭이 없어지지 않는다

문장을 다듬는 것으로 해결되는 것은 문장뿐이다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남는다. 그래서 이 페이지 자신의 형태 수치를 공개한다. 결과가 나쁘게 나와도 그대로 싣는다.

radius 어휘 수 | 2종 | 3px · 6px. 그 외 값을 쓰지 않는다
반투명 패널(backdrop-filter) | 0개 | 실기기 FPS를 15~30% 깎는다
타입 스케일 단계 | 5단계 | 디스플레이 1개는 스케일 밖에 따로 정의
폰트 패밀리 | 2개 | 본문 1 + 코드용 모노 1. 언어판마다 자기 것만 받는다
강조색 | 1개 | 딥 틸. 라이트·다크는 같은 색의 대응값이다
히어로까지 JS | 314B | gzip. 예산 50KB의 0.6%. 복사 버튼 하나뿐이다
슬롭 지문 grep | 0건 | 9개 패턴 검사
하드 게이트 | 12/12 | 12개 전부 검사. 4개는 320px 실렌더로 측정했다
첫 인터랙션 | — | 미측정. 프로덕션 배포 후 Lighthouse 로 잰다

값은 프로덕션 빌드에서 측정한다. 아직 측정하지 않은 항목은 비워둔다 — 지어낸 숫자보다 구멍이 정직하다.

## 이 페이지를 만들며 실제로 걸린 것

남을 검사한 결과가 아니라 자신을 검사한 결과다.

- eyebrow 라벨이 6개 — 카운트 규칙 상한은 ceil(섹션 7 / 3) = 3개

  세 섹션만 남기고 나머지는 헤드라인만으로 구분했다. 라벨이 없어도 섹션은 읽힌다

- 스크롤 리빌에 clip-path 를 쓰려 했다 — 하드 게이트 8은 transform·opacity 만 허용한다

  덮개를 translateX 로 미는 방식으로 바꿨다. 보이는 결과는 같고, clip-path 보간 제약도 함께 사라졌다

- 구분선 색의 대비가 1.30:1 — 장식선으로는 괜찮지만 입력 테두리로 쓰면 WCAG 1.4.11(3:1) 위반

  6.11:1 짜리 별칭을 하나 더 두고 용도를 갈랐다. 새 색을 만든 게 아니라 팔레트 수는 그대로다

- 본문 컬럼이 960px — 우리가 정한 한 줄 길이(561px)를 넘는다

  그리드의 본문 폭을 --measure 로 바꿨다. 스킬 문서의 예시 코드도 같이 고쳤다

- 320px 에서 가로로 13px 넘쳤다 — 표를 overflow 컨테이너로 감쌌는데도

  grid item 의 기본 min-width 는 auto 라 콘텐츠가 부모를 밀어낸다. min-width:0 을 걸어야 overflow-x 가 실제로 작동한다

- 다크 밴드 안 버튼의 대비가 2.88:1 — 기준은 4.5:1

  밴드가 강조색만 반전시키고 그 위 글자색은 흰색 그대로였다. 반전 대응 토큰을 하나 더 두고 함께 바꿨다

- 스크롤을 끝까지 내려도 파이프라인 6단계 중 뒤 3개가 opacity 0 으로 남았다 — 이 페이지의 본체가 절반 사라졌다

  animation-range 의 cover 22% 에 페이지 하단 요소는 영영 도달하지 못한다. 이펙트를 끄면 보이지만 켜면 사라지는 것은 폴백이 있는 것과 다르다. 연출을 뺐다

일곱 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 마지막 셋은 정적 검사로는 안 잡히고 320px 실렌더에서만 나왔다.

한글 조판

## 라틴 기준으로 만든 도구는 한글에서 멈춘다

영어권 디자인 도구는 한글 조판 규칙을 갖고 있지 않다. 9~11px 텍스트는 라틴에서 라벨이지만 한글에서는 읽을 수 없다. line-height 1.5는 라틴에서 표준이지만 한글에서는 답답하다.

가장 자주 깨지는 것은 줄바꿈이다. 기본값은 단어 중간에서 줄을 끊는다. 아래 두 문단은 같은 글자, 같은 폭, 같은 폰트다. 차이는 word-break 한 줄뿐이다.

기본값

원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.

keep-all

원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.

- word-break: keep-all — 없으면 단어가 아무 데서나 잘린다
- line-height 1.6~1.8 — 라틴보다 넉넉하게
- 음수 자간 금지 — 한글은 이미 고정폭에 가까워 즉시 뭉개진다
- 한 줄 25~40자 — 라틴 기준 65~75자를 그대로 쓰면 너무 길다
- 한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호다

## 규칙마다 왜 그런지 적혀 있다

근거 없는 금지는 지켜지지 않는다. 사용자가 명시적으로 요구하면 규칙보다 그쪽이 이긴다.

레퍼런스 없이 시작하지 않는다
  머릿속 기본값에서 출발하면 결과는 그 카테고리의 평균이 된다.
강조색은 하나다
  두 개가 필요하다고 느끼면 위계 설계가 실패한 것이다.
대담함은 한 곳에만
  두 곳에서 소리치면 둘 다 죽는다.
화려함은 4순위다
  심사 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10이다.
지어낸 수치를 쓰지 않는다
  숫자 모양의 구멍은 정직하고, 지어낸 숫자는 신뢰를 깎는다.
이펙트를 다 꺼도 완성돼 있어야 한다
  그 상태가 모든 폴백의 기반이다. 무너지면 이펙트가 구조를 대신하고 있는 것이다.

## 한 줄이면 된다

설치 대상을 감지해 기본 선택해준다. 스킬 파일을 직접 고쳤다면 업데이트가 그 파일을 건드리지 않는다.

`npx designpaca`

Claude Code | ~/.claude/skills/designpaca/
Codex CLI | ~/.codex/skills/designpaca/
Cursor | .cursor/rules/designpaca.mdc
Windsurf | .windsurf/rules/designpaca.md
AGENTS.md | 블록 주입 — 에이전트 무관

npx designpaca update
  최신 스킬로 갱신. 직접 고친 파일은 건너뛴다
npx designpaca doctor
  설치 상태와 드리프트 진단
npx designpaca uninstall
  매니페스트 기반 정확한 제거