designpaca
English
파이프라인사례수치설치 저장소 ↗

결정하지 않으면 기본값이 나온다

AI가 만든 티는 못 만들어서가 아니라 결정을 안 해서 납니다. 그 결정을 여섯 단계로 강제하는 스킬.

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 수정

SVG 필터

이미지 편집기를 열지 않고 고치는 네 가지

질감을 만드는 필터 데모는 많다. 손이 실제로 줄어드는 자리는 따로 있습니다. 아래 넷은 왼쪽이 매번 손으로 맞추던 것, 오른쪽이 같은 소재에 선언 하나만 얹은 것입니다. 아래 수치는 이 화면을 그대로 캡처해 잰 값이다.

  1. 글자 모양대로 생기는 스크림

    산미 8.5 · 로스팅 2일차
    그냥 얹음
    산미 8.5 · 로스팅 2일차
    filter: url(#scrim)

    사진 위 캡션이 대비를 못 넘깁니다. 사진마다 밝기가 달라 반투명 박스를 손으로 맞추게 됩니다.

    글자 알파를 부풀려 그 모양대로만 색을 채웁니다. 박스가 아니라 글자를 따라가므로 사진을 덜 가립니다.

    흰 글자 대비 1.70:1 → 4.79:1

  2. 색각 이상 시뮬레이션

    통과주의실패
    내가 보는 화면
    통과주의실패
    적록색약(2형)

    상태를 색으로만 구분하면 남성 12명 중 1명에게 같은 배지가 됩니다. 내 화면만 봐서는 못 잡는다.

    feColorMatrix 한 줄. 이것만은 linearRGB 로 둡니다 — 색각 변환은 물리적인 빛의 혼합이다.

    배지 셋의 최소 색거리 82 → 2 · 주의와 실패가 같은 색

  3. 떨어진 것이 하나로 뭉치기

    필터 없음 · 원 3개
    filter: url(#goo)

    조각이 녹아 붙는 표현에 캔버스나 물리 라이브러리를 켜게 됩니다. 로더와 메뉴 전환에서 반복됩니다.

    블러한 뒤 알파만 세워 잘라냅니다. 붙을지 말지는 취향이 아니라 간격과 블러 반경의 비율로 정해진다.

    덩어리 3개 → 1개 · JS 0줄

  4. 배경을 휘게 하는 오버레이

    산미 8.5
    backdrop-filter: blur
    산미 8.5
    blur + url(#lens)

    반투명 패널은 뒤를 흐리게만 만듭니다. 실제 유리는 빛을 휜다.

    변위 지도를 backdrop-filter 에 넘깁니다. 노이즈로 만들면 값이 중립으로 수렴해 아무 일도 안 일어납니다.

    가장자리에서 격자가 눌립니다 · Chromium 전용

한글 조판

라틴 기본값은 한글에서 세 군데가 깨진다

영어권 디자인 도구에는 한글 조판 규칙이 없습니다. 그래서 기본값을 그대로 쓰면 아래 셋이 동시에 무너집니다. 왼쪽이 기본값, 오른쪽이 이 스킬이 정한 값이다. 글자도 폭도 폰트도 같습니다.

줄바꿈

기본값

스페셜티커피의 로스팅프로파일을 구분하려면 산미와 바디를 수치로 봐야 합니다.

word-break: keep-all

스페셜티커피의 로스팅프로파일을 구분하려면 산미와 바디를 수치로 봐야 합니다.

기본값은 어절 한가운데를 끊는다. 왼쪽 마지막 줄을 보라 — 한 단어가 두 줄에 걸쳐 있습니다.

행간

line-height 1.45

스페셜티커피의 로스팅프로파일을 구분하려면 산미와 바디를 수치로 봐야 합니다.

line-height 1.75

스페셜티커피의 로스팅프로파일을 구분하려면 산미와 바디를 수치로 봐야 합니다.

라틴 표준 1.4~1.5 는 받침이 있는 글자에 좁습니다. 줄이 서로 붙어 보입니다.

크기

11px

스페셜티커피의 로스팅프로파일을 구분하려면 산미와 바디를 수치로 봐야 합니다.

15px

스페셜티커피의 로스팅프로파일을 구분하려면 산미와 바디를 수치로 봐야 합니다.

라틴에서 11px 은 라벨로 씁니다. 한글은 획이 많아 같은 크기에서 뭉갠다.

이 페이지의 수치

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

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

0.6% 히어로까지 JS 예산 50KB 중 실제로 쓴 비율
12/12 하드 게이트 정적 검사와 320px · 1440px 실렌더 양쪽
three.js 추가분
184KB
검사대가 화면에 들어올 때만 받습니다. 초기 번들에는 없습니다
슬롭 지문
0건
9개 패턴 grep
radius 어휘
2종
3px 과 14px. 알약 모양을 없앴습니다
반투명 패널
2개
29개까지 늘렸다가 걷어냈습니다. 유리는 무언가를 담는 액자에만 남겼습니다
타입 단계
6단계
토큰에 정의된 수. 디스플레이는 스케일 밖이고, 최대 글자는 본문의 5.6배
폰트 패밀리
2개
언어판마다 자기 것만 받습니다
강조색
1개
라이트와 다크는 같은 색의 대응값
첫 인터랙션
미측정
배포 후 Lighthouse 로 잽니다

값은 프로덕션 빌드에서 측정합니다. 아직 측정하지 않은 항목은 비워둡니다. 지어낸 숫자보다 구멍이 정직하다. 이 페이지는 제품 데모이므로 three.js 를 얹으며 JS 예산을 올렸다. 올렸다는 사실을 여기 적는 것이 규칙이다.

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

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

폰트가 교체되는 순간 글자 폭이 13% 튀고 있었습니다

웹폰트가 오기 전에는 시스템 폰트로 그려진다. 맑은 고딕은 Pretendard 보다 13% 넓어서 교체되는 순간 줄바꿈이 다시 잡힙니다. 폴백 폰트에 size-adjust 로 치수를 맞췄다. 실측 차이 0.0%. OS 마다 시스템 폰트가 다르므로 폴백도 따로 정의했습니다.

유리 카드를 29개 뿌렸습니다. 재질만 바뀌었을 뿐 구조는 카드 나열 그대로였습니다

우리 규칙이 '카드는 elevation 이 진짜 위계를 나를 때만'이라고 정해두고 있었습니다. 수치는 조판으로, 규칙은 어긋난 목록으로, 감사 기록은 로그로 바꿨습니다. 유리는 5개만 남았습니다.

“backdrop-filter 에 SVG 를 얹으면 Chrome 이 버린다” 고 적었는데 사실이 아니었습니다

한 번 실패하고 브라우저 탓으로 적어뒀다. 다시 재보니 Chrome 151 에서 computed 값이 none 이 아니라 url(#id) 로 살아 있고 배경도 실제로 굴절됩니다. 진짜 원인은 feImage 의 width/height 를 요소 크기와 맞추지 않은 것이었습니다 — backdrop-filter 는 필터 이미지를 자동으로 조정하지 않습니다. 한 번 실패한 것을 ‘안 되는 것’ 으로 적으면 그 문장이 다음 사람의 상한선이 됩니다.

가로로 444px 넘쳤습니다. 레이아웃 전체가 어긋나 있었습니다

main 에서 그리드 클래스가 빠져 있었습니다. subgrid 는 부모가 그리드일 때만 작동하므로 모든 섹션이 정렬선을 잃은 상태였습니다. 눈으로는 어색한 정도였고 폭을 재고서야 드러났다.

스크롤을 끝까지 내려도 파이프라인 6단계 중 뒤 3개가 안 보였습니다

scroll-driven animation 의 범위 끝에 페이지 하단 요소는 도달하지 못합니다. 이펙트를 끄면 보이고 켜면 사라지는 것은 폴백이 있는 것과 다르다. 한 번 보이면 유지되는 방식으로 바꿨습니다.

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

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

열세 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 사람이 잡은 것이 셋이다. 카드가 전형적이라는 말, 폰트를 제대로 다루지 못합니다는 말, 그리고 우리 스킬을 진짜로 쓴 게 맞냐는 말.

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

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

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

한 줄이면 된다

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

npx designpaca
  • Claude Code ~/.claude/skills/designpaca/
  • Codex CLI ~/.codex/skills/designpaca/
  • Antigravity .agents/skills/designpaca/
  • Cursor .cursor/rules/designpaca.mdc
  • Windsurf .windsurf/rules/designpaca.md
  • AGENTS.md 블록 주입. 에이전트 무관
npx designpaca update
최신 스킬로 갱신. 직접 고친 파일은 건너뜁니다
npx designpaca doctor
설치 상태와 드리프트 진단
npx designpaca uninstall
매니페스트 기반 정확한 제거