Yun Chan 8808c672dc designpaca 초기 구현 — 스킬 · 설치 CLI · 배포 파이프라인

웹 디자인 파이프라인 스킬과 이를 5개 에이전트에 설치하는 CLI 를 담은 모노레포.

스킬 (packages/skill)
- SKILL.md 261줄 + 참조 문서 16개 3,349줄. progressive disclosure 로
  본문은 절차와 인덱스만, 지식은 references/ 로 분리
- 0~6단계 파이프라인. 규모에 따라 전체·연장·국소 세 경로로 분기
- 하드 게이트 12개는 grep·카운트로 검증 가능한 것만. 취향 판단은 제외
- 미학 프리셋 5종, AI 슬롭 지문 목록, 한글 조판 규칙,
  SVG 필터·three.js·인터랙티브 모션·HTML-in-Canvas 실전 지침

설치 CLI (packages/cli, packages/core)
- npx designpaca 온보딩 TUI. Claude Code · Codex · Cursor · Windsurf · AGENTS.md
- 매니페스트에 설치 시점 해시를 기록해 사용자가 고친 파일은 update 가 건너뛴다
- 타깃별로 본문의 references/ 경로를 실제 설치 위치로 재작성
- AGENTS.md 는 항상 로드되므로 본문 대신 303자 포인터만 주입
- Windsurf 는 12,000자 상한 초과 시 설치를 차단

배포 (build/ci, .forgejo/workflows)
- 태그 v* → 검사·테스트·빌드 → npmjs 배포 + Forgejo 레지스트리 미러
  → draft 릴리스 → Cloudflare Pages. 재실행 멱등

근거 (research/)
- 약 250개 웹 소스 조사 결과와 도그푸딩 검증 2건. 스킬의 모든 수치는 여기서 나온다

테스트 22개 통과 (core 16 · cli 6)

2026-08-20 10:48:00 +09:00

5.4 KiB

Raw Blame History

layout — 레이아웃과 타이포그래피

4-1 단계에서 읽는다. 이 단계가 끝나면 아무 이펙트 없이도 완성된 페이지여야 한다. 그것이 이후 모든 폴백의 기반이다.

1. 그리드를 먼저 정한다

하나의 그리드에서 모든 것이 나온다

.page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--space-4), 1fr)
    [wide-start] minmax(0, 12rem)
    [main-start] minmax(0, 60rem) [main-end]
    minmax(0, 12rem) [wide-end]
    minmax(var(--space-4), 1fr) [full-end];
}
.page > * { grid-column: main; }
.page > .wide { grid-column: wide; }
.page > .full { grid-column: full; }

이 한 번의 정의로 본문 폭 · 넓은 블록 · 전체 폭이 전부 정렬된다. 섹션마다 max-width 와 padding 을 다시 쓰면 반드시 어긋난다.

비대칭을 두려워하지 마라

12열 중앙 정렬은 안전하고 잊힌다. 실제로 기억되는 레이아웃은 의도적으로 한쪽으로 몰려 있다. 다만 비대칭에도 규칙이 있어야 한다 — 아무 데나 놓는 것은 비대칭이 아니라 사고다.

텍스트 블록을 그리드의 2/3 지점에서 끊고 나머지를 비워두기
이미지를 화면 밖으로 흘려보내기(full 을 넘어 margin-inline: calc(var(--space-4) * -1))
제목과 본문의 시작선을 일부러 어긋내기 — 단, 같은 어긋남을 페이지 전체에서 반복할 때만

벤토 그리드 주의

벤토(크기가 다른 카드들의 격자)는 더 이상 차별화가 아니라 새 기본값이다. 효과는 있지만(스크롤 깊이 증가) 표준화가 끝나서 "고민 안 했음"의 신호로 읽힌다. 쓰려면 최소한 다음 중 하나는 해라:

카드 경계를 없애고 여백만으로 구획
그리드에서 한 칸을 의도적으로 비우기
카드 하나만 규칙을 깨고 밖으로 나가기

2. 시선 흐름

사람은 페이지를 읽지 않고 훑는다. 훑는 경로를 설계하는 것이 레이아웃의 본체다.

첫 화면에서 세 가지만 — 무엇인지 / 왜 좋은지 / 다음 행동. 넷 이상이면 아무것도 안 읽힌다
위계는 크기가 아니라 대비로 만든다 — 크기·굵기·색·여백 중 둘 이상을 동시에 바꿔야 위계가 보인다. 크기만 조금 키우는 것은 위계가 아니다
시선을 한 번은 멈춰라 — 전부 같은 리듬으로 흐르면 아무것도 강조되지 않는다. 섹션 하나는 리듬을 깨야 한다
스크롤은 보상이어야 한다 — 다음 화면에 무언가 새로운 것이 있어야 한다. 같은 카드 그리드가 세 번 반복되면 거기서 이탈한다

3. 타이포그래피

토큰은 3단계에서 정했다. 여기서는 적용이다.

위계는 3단계면 충분하다

디스플레이 / 섹션 제목 / 본문. h4, h5, h6 까지 시각적으로 구분하려 들면 위계가 무너진다. 필요하면 웨이트나 색으로 구분해라, 새 크기를 만들지 말고.

본문이 주인공이다

헤드라인은 눈에 띄기 쉽다. 본문이 읽히는지가 실력이다.

한 줄 길이(--measure)를 반드시 적용해라. 전체 폭 본문은 읽을 수 없다
문단 간격은 줄간격의 1.5배 이상. 들여쓰기와 문단 간격을 동시에 쓰지 마라
링크는 색만으로 구분하지 마라(밑줄 또는 다른 신호 병행)

한글이 들어가면

references/antipatterns.md 의 한글 조판 섹션을 읽어라. 요약:

word-break: keep-all — 없으면 단어가 아무 데서나 잘린다
line-height 1.6~1.8 (라틴보다 넉넉하게)
음수 자간 금지
한 줄 25~40자
라틴 폰트를 폴백 스택 앞에 둔다 (숫자·영문이 한글 폰트로 렌더되면 조악해진다)
한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호다

4. 반응형

브레이크포인트가 아니라 콘텐츠에서 시작한다

/* 나쁨: 기기 크기를 가정 */
@media (min-width: 768px) { }

/* 좋음: 콘텐츠가 깨지는 지점 */
.cards { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

auto-fit + minmax 로 해결되는 것을 미디어쿼리로 만들지 마라. 미디어쿼리는 레이아웃 구조 자체가 바뀔 때만 쓴다.

모바일에서 먼저 확인해라

데스크톱에서 아름다운 것이 모바일에서 무너지는 것이 기본이고, 그 반대는 드물다. 특히:

큰 타이포는 모바일에서 반드시 줄여라 (clamp 의 최소값)
가로 스크롤이 생기는 요소를 찾아라 (overflow-x: hidden 으로 덮지 말고 원인을 고쳐라)
터치 타깃 44×44px 이상
호버로만 접근되는 기능을 만들지 마라

5. 이 단계의 통과 조건

CSS/HTML만으로 페이지가 완성됐다. JS를 꺼도 읽힌다
모든 값이 3단계 토큰에서 나온다. 하드코딩된 px/색이 없다
첫 화면에 메시지가 셋 이하다
본문에 --measure 가 적용됐다
모바일 폭 320px(iPhone SE 세로)에서 가로 스크롤이 없다
키보드 Tab 만으로 모든 인터랙티브 요소에 도달한다. 포커스 링이 보인다
한글이 있다면 조판 규칙이 적용됐다

근거: research/references/02-methodology.md, 03-trends-2026.md, 04-ai-slop-signatures.md (조사일 2026-08-20)

5.4 KiB Raw Blame History Unescape Escape