be343cdab5
design-taste-frontend, high-end-visual-design, redesign-existing-projects 를 로드해 리디자인 모드로 진행했다. 이전 페이지는 디자인 스킬을 파는 자리가 문서처럼 생겼다는 지적을 받았다. Design Read - redesign-overhaul / 개발자 대상 / 정밀기기 언어 - DESIGN_VARIANCE 8 · MOTION_INTENSITY 6 · VISUAL_DENSITY 3 방향 - 다크 잉크 바탕에 three.js 셰이더 광원. 유리 패널이 그 위에 뜬다 - 리퀴드 글래스는 이 브리프에서 장식이 아니라 제품 시연이다. SVG 필터와 three.js 의 결합 그 자체이기 때문이다 - 밝은 밴드는 조판 섹션 하나뿐. 한글이 종이 위에 있어야 하는 자리다 제품 증명 - 히어로 배경에 셰이더(초기 번들 밖, 첫 페인트 후 지연 로드) - 재료 섹션에 SVG 필터 3종을 실제로 먹인 타일: 그레인, 굴절, 듀오톤 - 도그푸딩 산출물 2개를 실제 스크린샷으로. 가짜 목업이 아니다 감사에서 걸려 고친 것 - backdrop-filter 에 SVG 를 얹으면 Chrome 이 선언 전체를 버린다. CSS.supports 는 참을 주면서 computed 는 none 이 된다 - main 에서 그리드 클래스가 빠져 subgrid 가 붕괴, 가로 444px 오버플로 - 진입 연출이 두 번 콘텐츠를 삼켰다. opacity 를 버리고 transform 만 남겼다 - eyebrow 4개, 제목 em-dash 2건 수치는 불리해진 것도 그대로 싣는다 - 반투명 패널 1개 -> 29개. 유리가 주제가 됐으므로 - three.js 185KB(gzip). 데모라서 JS 예산을 올렸고 그 사실을 페이지에 적었다
2 lines
No EOL
31 KiB
HTML
2 lines
No EOL
31 KiB
HTML
<!DOCTYPE html><html lang="ko" data-astro-cid-5hce7sga> <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>designpaca — 웹 디자인 파이프라인 스킬</title><meta name="description" content="AI 코딩 에이전트에게 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계. Claude Code · Codex · Cursor · Windsurf 에 한 줄로 설치한다."><link rel="canonical" href="https://designpaca.chanpaca.net/"><link rel="alternate" hreflang="ko" href="https://designpaca.chanpaca.net/"><link rel="alternate" hreflang="en" href="https://designpaca.chanpaca.net/en/"><link rel="alternate" hreflang="x-default" href="https://designpaca.chanpaca.net/"><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" media="print" onload="this.media='all'"><meta property="og:title" content="designpaca — 웹 디자인 파이프라인 스킬"><meta property="og:description" content="AI 코딩 에이전트에게 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계. Claude Code · Codex · Cursor · Windsurf 에 한 줄로 설치한다."><meta property="og:type" content="website"><meta name="color-scheme" content="light dark"><style>:root{--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--mono-size: .9375em;--surface: #FAF9F6;--surface-raised: #F2F0EA;--surface-inverse: #14161A;--ink: #16181C;--ink-muted: #5A5F66;--ink-inverse: #E9E7E2;--ink-muted-inverse: #9AA0A6;--line: #DFDCD4;--line-inverse: #2A2E34;--line-strong: var(--ink-muted);--accent: #0E6B63;--accent-ink: #FFFFFF;--accent-inverse: #3FA89D;--accent-ink-inverse: #0B1A18;--radius-sm: 3px;--radius-md: 6px;--space-1: .25rem;--space-2: .5rem;--space-3: 1rem;--space-4: 1.5rem;--space-5: 2.5rem;--space-6: 4rem;--space-7: 6rem;--space-8: 8rem;--dur-instant: .1s;--dur-quick: .2s;--dur-normal: .32s;--dur-slow: .6s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in: cubic-bezier(.64, 0, .78, 0);--ease-soft: cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:dark){:root{--surface: #14161A;--surface-raised: #1C1F24;--surface-inverse: #FAF9F6;--ink: #E9E7E2;--ink-muted: #9AA0A6;--ink-inverse: #16181C;--ink-muted-inverse: #5A5F66;--line: #2A2E34;--line-inverse: #DFDCD4;--line-strong: var(--ink-muted);--accent: #3FA89D;--accent-ink: #0B1A18;--accent-inverse: #0E6B63;--accent-ink-inverse: #FFFFFF}}[lang=ko]{--font-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;--step-0: 1.0625rem;--step-1: 1.328rem;--step-2: 1.66rem;--step-3: 2.076rem;--step-4: 2.595rem;--display: clamp(2.595rem, 1.6rem + 4.2vw, 4.25rem);--leading-tight: 1.15;--leading-normal: 1.7;--measure: 33em;--tracking-display: -.01em;--tracking-body: 0;--tracking-label: .08em;word-break:keep-all;overflow-wrap:break-word}[lang=en]{--font-sans: "Switzer", system-ui, -apple-system, sans-serif;--step-0: 1rem;--step-1: 1.25rem;--step-2: 1.5625rem;--step-3: 1.953rem;--step-4: 2.441rem;--display: clamp(2.441rem, 1.5rem + 4vw, 4rem);--leading-tight: 1.1;--leading-normal: 1.55;--measure: 65ch;--tracking-display: -.025em;--tracking-body: 0;--tracking-label: .08em}.band-inverse{--surface: var(--surface-inverse);--ink: var(--ink-inverse);--ink-muted: var(--ink-muted-inverse);--line: var(--line-inverse);--accent: var(--accent-inverse);--accent-ink: var(--accent-ink-inverse);background:var(--surface);color:var(--ink);padding-block:var(--space-8)}*,*:before,*:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:var(--step-0);line-height:var(--leading-normal);letter-spacing:var(--tracking-body);font-synthesis-weight:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}[lang=ko] body,[lang=ko] p,[lang=ko] li,[lang=ko] h1,[lang=ko] h2,[lang=ko] h3{word-break:keep-all;overflow-wrap:break-word}.page{display:grid;grid-template-columns:[full-start] minmax(var(--space-4),1fr) [wide-start] minmax(0,var(--space-8)) [main-start] minmax(0,var(--measure)) [main-end] minmax(0,var(--space-8)) [wide-end] minmax(var(--space-4),1fr) [full-end]}.page>*{grid-column:main}.page>.wide{grid-column:wide}.page>.full{grid-column:full}.section{display:grid;grid-template-columns:subgrid;grid-column:full;padding-block:var(--space-7)}.section>*{grid-column:main}.section>.wide{grid-column:wide}h1,h2,h3{margin:0;line-height:var(--leading-tight);letter-spacing:var(--tracking-display);font-weight:600;text-wrap:balance}h1{font-size:var(--display);font-weight:620}h2{font-size:var(--step-3)}h3{font-size:var(--step-1)}p{margin:0 0 var(--space-3);text-wrap:pretty}p:last-child{margin-bottom:0}.lead{font-size:var(--step-1);color:var(--ink-muted)}.eyebrow{font-size:var(--step-0);letter-spacing:var(--tracking-label);color:var(--ink-muted);font-weight:500;margin:0 0 var(--space-3)}code,kbd,samp,pre{font-family:var(--font-mono);font-size:var(--mono-size)}a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:from-font;transition:color var(--dur-instant) var(--ease-out)}a:hover{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--radius-sm)}hr{border:0;border-top:1px solid var(--line);margin-block:var(--space-6)}table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}th,td{text-align:left;padding:var(--space-2) var(--space-3) var(--space-2) 0;border-bottom:1px solid var(--line);vertical-align:baseline}th{font-weight:500;color:var(--ink-muted);font-size:var(--step-0);letter-spacing:var(--tracking-label)}.table-scroll{overflow-x:auto;min-width:0}.page>*,.section>*{min-width:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.muted{color:var(--ink-muted)}.mono{font-family:var(--font-mono);font-size:var(--mono-size)}.skip[data-astro-cid-5hce7sga]{position:absolute;left:var(--space-3);top:calc(var(--space-3) * -4);padding:var(--space-2) var(--space-3);background:var(--accent);color:var(--accent-ink);border-radius:var(--radius-sm);z-index:10;transition:transform var(--dur-quick) var(--ease-out)}.skip[data-astro-cid-5hce7sga]:focus{transform:translateY(calc(var(--space-3) * 5))}.site-header[data-astro-cid-5hce7sga]{padding-block:var(--space-4)}.site-header[data-astro-cid-5hce7sga]>[data-astro-cid-5hce7sga]{grid-column:main}.site-header[data-astro-cid-5hce7sga]{align-items:baseline}.wordmark[data-astro-cid-5hce7sga]{font-weight:600;letter-spacing:-.01em;text-decoration:none}.site-header[data-astro-cid-5hce7sga] nav[data-astro-cid-5hce7sga]{justify-self:end;grid-row:1;grid-column:main;font-size:var(--step-0);color:var(--ink-muted)}.site-footer[data-astro-cid-5hce7sga]{padding-block:var(--space-6);border-top:1px solid var(--line);color:var(--ink-muted)}.cmd[data-astro-cid-f2mrhd7z]{display:flex;min-width:0;align-items:stretch;gap:0;border:1px solid var(--line-strong);border-radius:var(--radius-sm);overflow:hidden;max-width:34em}.cmd-text[data-astro-cid-f2mrhd7z]{flex:1 1 0;min-width:0;padding:var(--space-3);overflow-x:auto;white-space:nowrap}.cmd-copy[data-astro-cid-f2mrhd7z]{flex:0 0 auto;min-width:5.5em;min-height:44px;white-space:nowrap;padding-inline:var(--space-3);border:0;border-left:1px solid var(--line-strong);background:var(--accent);color:var(--accent-ink);font:inherit;font-size:var(--step-0);cursor:pointer;transition:opacity var(--dur-instant) var(--ease-out)}.cmd-copy[data-astro-cid-f2mrhd7z]:hover{opacity:.88}.cmd-note[data-astro-cid-f2mrhd7z]{margin-top:var(--space-2);font-size:var(--step-0)}.hero[data-astro-cid-bbe6dxrz]{display:grid;grid-template-columns:subgrid}.hero-inner[data-astro-cid-bbe6dxrz]{grid-column:main}.hero-lead[data-astro-cid-bbe6dxrz]{max-width:30em;margin-block:var(--space-4) var(--space-5)}.hero-links[data-astro-cid-bbe6dxrz]{display:flex;gap:var(--space-4);margin-top:var(--space-4);font-size:var(--step-0);color:var(--ink-muted)}.pipeline-lead[data-astro-cid-u4jjhbhg]{margin-bottom:var(--space-6)}.brief[data-astro-cid-u4jjhbhg]{border:1px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-4);margin-bottom:var(--space-2)}.brief-label[data-astro-cid-u4jjhbhg]{display:block;font-size:var(--step-0);letter-spacing:var(--tracking-label);color:var(--ink-muted);margin-bottom:var(--space-2)}.brief-text[data-astro-cid-u4jjhbhg]{margin:0;font-size:var(--step-1)}.spine[data-astro-cid-u4jjhbhg]{list-style:none;margin:0;padding:0 0 0 var(--space-5);position:relative}.spine[data-astro-cid-u4jjhbhg]:before{content:"";position:absolute;left:5px;top:var(--space-4);bottom:var(--space-4);width:1px;background:var(--line-strong)}.stop[data-astro-cid-u4jjhbhg]{position:relative;padding-block:var(--space-4)}.stop[data-astro-cid-u4jjhbhg]+.stop[data-astro-cid-u4jjhbhg]{border-top:1px solid var(--line)}.stop[data-astro-cid-u4jjhbhg]:before{content:"";position:absolute;left:calc(var(--space-5) * -1);top:calc(var(--space-4) + .55em);width:11px;height:11px;border-radius:var(--radius-sm);background:var(--surface);border:3px solid var(--accent);box-sizing:border-box}.stop-name[data-astro-cid-u4jjhbhg]{font-size:var(--step-1);margin-bottom:var(--space-2)}.stop-does[data-astro-cid-u4jjhbhg]{color:var(--ink-muted);margin-bottom:var(--space-3)}.stop-becomes[data-astro-cid-u4jjhbhg]{margin:0;padding-left:var(--space-3);border-left:2px solid var(--accent)}.stop-becomes[data-astro-cid-u4jjhbhg].mono{font-family:var(--font-mono);font-size:var(--mono-size);overflow-wrap:anywhere}.after[data-astro-cid-u4jjhbhg]{margin-top:var(--space-5)}.metrics-lead[data-astro-cid-te4qcdxs]{margin-bottom:var(--space-5)}.metric-value[data-astro-cid-te4qcdxs]{white-space:nowrap}.metric-note[data-astro-cid-te4qcdxs]{font-size:var(--step-0)}.caveat[data-astro-cid-te4qcdxs]{margin-top:var(--space-4);font-size:var(--step-0)}th[data-astro-cid-te4qcdxs][scope=row]{font-weight:400;color:var(--ink);letter-spacing:0}.pf-lead[data-astro-cid-jpbodcnf]{margin-bottom:var(--space-5)}.log[data-astro-cid-jpbodcnf]{margin:0;padding:0;list-style:none}.entry[data-astro-cid-jpbodcnf]{padding-block:var(--space-3);border-top:1px solid var(--line)}.entry[data-astro-cid-jpbodcnf]:last-child{border-bottom:1px solid var(--line)}.caught[data-astro-cid-jpbodcnf]{margin:0 0 var(--space-1)}.fixed[data-astro-cid-jpbodcnf]{margin:0;font-size:var(--step-0)}.pf-note[data-astro-cid-jpbodcnf]{margin-top:var(--space-4);font-size:var(--step-0)}.type-lead[data-astro-cid-blyuyqza]{margin-bottom:var(--space-4)}.type-body[data-astro-cid-blyuyqza]{margin-bottom:var(--space-5)}.demo[data-astro-cid-blyuyqza]{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));margin-bottom:var(--space-5)}.demo-col[data-astro-cid-blyuyqza]{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3)}.demo-label[data-astro-cid-blyuyqza]{font-size:var(--mono-size);letter-spacing:var(--tracking-label);margin-bottom:var(--space-2)}.demo-text[data-astro-cid-blyuyqza]{margin:0;max-width:13em;line-height:1.7}.demo-default[data-astro-cid-blyuyqza]{word-break:break-all}.demo-keepall[data-astro-cid-blyuyqza]{word-break:keep-all;overflow-wrap:break-word}.type-rules[data-astro-cid-blyuyqza]{margin:0;padding:0;list-style:none}.type-rules[data-astro-cid-blyuyqza] li[data-astro-cid-blyuyqza]{padding-block:var(--space-2);border-top:1px solid var(--line);color:var(--ink-muted)}.type-rules[data-astro-cid-blyuyqza] li[data-astro-cid-blyuyqza]:last-child{border-bottom:1px solid var(--line)}.rules-lead[data-astro-cid-64rxrvhn]{margin-bottom:var(--space-5)}.rules[data-astro-cid-64rxrvhn]{margin:0}.rule[data-astro-cid-64rxrvhn]{padding-block:var(--space-4);border-top:1px solid var(--line)}.rule[data-astro-cid-64rxrvhn]:last-child{border-bottom:1px solid var(--line)}dt[data-astro-cid-64rxrvhn]{font-weight:560;margin-bottom:var(--space-1)}dd[data-astro-cid-64rxrvhn]{margin:0;color:var(--ink-muted)}.install[data-astro-cid-ryjlwm3k]{display:grid;grid-template-columns:subgrid}.install-inner[data-astro-cid-ryjlwm3k]{grid-column:main}.install-lead[data-astro-cid-ryjlwm3k]{margin-block:var(--space-3) var(--space-5)}.targets[data-astro-cid-ryjlwm3k]{margin-top:var(--space-6)}.targets[data-astro-cid-ryjlwm3k] th[data-astro-cid-ryjlwm3k][scope=row]{font-weight:400;color:var(--ink);letter-spacing:0}.cmds[data-astro-cid-ryjlwm3k]{margin:var(--space-5) 0 0}.cmd-row[data-astro-cid-ryjlwm3k]{padding-block:var(--space-3);border-top:1px solid var(--line)}.cmd-row[data-astro-cid-ryjlwm3k]:last-child{border-bottom:1px solid var(--line)}dt[data-astro-cid-ryjlwm3k]{margin-bottom:var(--space-1)}dd[data-astro-cid-ryjlwm3k]{margin:0;font-size:var(--step-0)}
|
|
</style></head> <body data-astro-cid-5hce7sga> <a class="skip" href="#main" data-astro-cid-5hce7sga>본문으로 건너뛰기</a> <header class="page site-header" data-astro-cid-5hce7sga> <a class="wordmark" href="/" data-astro-cid-5hce7sga>designpaca</a> <nav aria-label="언어" data-astro-cid-5hce7sga> <a href="/en/" hreflang="en" lang="en" data-astro-cid-5hce7sga> English </a> </nav> </header> <main id="main" class="page" data-astro-cid-5hce7sga> <section class="full band-inverse hero" data-astro-cid-bbe6dxrz> <div class="hero-inner" data-astro-cid-bbe6dxrz> <h1 data-astro-cid-bbe6dxrz>designpaca</h1> <p class="lead hero-lead" data-astro-cid-bbe6dxrz>에이전트에게 “예쁘게 만들어줘”라고 하면 자기가 아는 기본값을 쏟아낸다. 못 만들어서가 아니라 결정을 안 해서다. 이 스킬은 그 결정을 순서대로 강제한다.</p> <div class="cmd" data-astro-cid-f2mrhd7z> <code class="cmd-text" data-astro-cid-f2mrhd7z>npx designpaca</code> <button type="button" class="cmd-copy" data-copy="npx designpaca" data-copied="복사됨" data-astro-cid-f2mrhd7z> 복사 </button> </div> <p class="cmd-note muted" data-astro-cid-f2mrhd7z>Node 20.11+ · 설치 대상을 감지해 골라준다</p> <script type="module">document.querySelectorAll(".cmd-copy").forEach(e=>{e.addEventListener("click",async()=>{const n=e.dataset.copy??"",a=e.dataset.copied??"OK",i=e.textContent;try{await navigator.clipboard.writeText(n)}catch{const t=document.createRange(),o=e.previousElementSibling;if(o){t.selectNodeContents(o);const c=getSelection();c?.removeAllRanges(),c?.addRange(t)}return}e.textContent=a,e.setAttribute("aria-live","polite"),setTimeout(()=>{e.textContent=i},1600)})});</script> <p class="hero-links" data-astro-cid-bbe6dxrz> <a href="https://git.chanpaca.net/yunchan/designpaca" data-astro-cid-bbe6dxrz>저장소</a><a href="https://www.npmjs.com/package/designpaca" data-astro-cid-bbe6dxrz>npm</a> </p> </div> </section> <section class="section" aria-labelledby="pipeline-h" data-astro-cid-u4jjhbhg> <p class="eyebrow" data-astro-cid-u4jjhbhg>여섯 단계</p> <h2 id="pipeline-h" data-astro-cid-u4jjhbhg>브리프 한 줄이 검증된 페이지가 될 때까지</h2> <p class="lead pipeline-lead" data-astro-cid-u4jjhbhg>각 단계에는 통과 조건이 있다. 통과하지 못하면 다음으로 가지 않는다. 아래는 실제로 이 스킬을 돌려 만든 커피 로스터리 랜딩에서 같은 브리프가 단계마다 무엇으로 변했는지다.</p> <div class="brief" data-astro-cid-u4jjhbhg> <span class="brief-label" data-astro-cid-u4jjhbhg>들어온 브리프</span> <p class="brief-text" data-astro-cid-u4jjhbhg>수제 커피 로스터리의 원두 정기구독 랜딩 만들어줘</p> </div> <ol role="list" class="spine" data-astro-cid-u4jjhbhg> <li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>브리프 게이트</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>무엇을·누구에게·제약을 세 줄로 압축한다. 규모를 판정해 경로를 고른다.</p> <p class="stop-becomes" data-astro-cid-u4jjhbhg>누구에게: 홈카페 3년차 이상. 산미와 로스팅 프로파일을 구분한다</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>레퍼런스 조사</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>실제로 존재하는 사이트 3개를 서로 다른 층위에서 고른다. 구조·톤·디테일.</p> <p class="stop-becomes" data-astro-cid-u4jjhbhg>R2 = 독립 문학 출판사. 커피 업계 밖에서 톤을 가져온다</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>방향 결정</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>레퍼런스를 하나의 축으로 합성한다. 감수할 리스크를 하나 고른다.</p> <p class="stop-becomes" data-astro-cid-u4jjhbhg>감상은 이름에만, 화면에는 수치만</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>디자인 토큰</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>코드를 쓰기 전에 숫자를 정한다. 성능 예산도 여기서 확정한다.</p> <p class="stop-becomes mono" data-astro-cid-u4jjhbhg>--measure: 33em / --leading-normal: 1.7 / JS 예산 0KB</p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>구현</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>레이아웃 → 재질 → 입체 → 모션 순서로. 이펙트를 다 꺼도 완성돼 있어야 한다.</p> <p class="stop-becomes mono" data-astro-cid-u4jjhbhg><h1>산미 8.5 · 바디 6.0 · 로스팅 라이트</h1></p> </li><li class="stop" data-astro-cid-u4jjhbhg> <h3 class="stop-name" data-astro-cid-u4jjhbhg>프리플라이트</h3> <p class="stop-does" data-astro-cid-u4jjhbhg>자기 결과물을 남의 것처럼 본다. 게이트 12개는 전부 '아니오'여야 한다.</p> <p class="stop-becomes mono" data-astro-cid-u4jjhbhg>게이트 12/12 통과 · 슬롭 지문 0건 · 320px 오버플로 31px → 수정</p> </li> </ol> <p class="after muted" data-astro-cid-u4jjhbhg>여섯 단계 끝에 남는 것은 페이지 하나와 design.md 하나다. 다음 사람이 그 파일을 읽고 같은 결정을 이어간다.</p> </section> <section class="section" aria-labelledby="metrics-h" data-astro-cid-te4qcdxs> <p class="eyebrow" data-astro-cid-te4qcdxs>이 페이지의 수치</p> <h2 id="metrics-h" data-astro-cid-te4qcdxs>카피만 고쳐서는 슬롭이 없어지지 않는다</h2> <p class="lead metrics-lead" data-astro-cid-te4qcdxs>문장을 다듬는 것으로 해결되는 것은 문장뿐이다. radius 어휘 수, 반투명 패널 개수, 타입 단계 수는 그대로 남는다. 그래서 이 페이지 자신의 형태 수치를 공개한다. 결과가 나쁘게 나와도 그대로 싣는다.</p> <div class="table-scroll" data-astro-cid-te4qcdxs> <table data-astro-cid-te4qcdxs> <tbody data-astro-cid-te4qcdxs> <tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>radius 어휘 수</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>2종</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>3px · 6px. 그 외 값을 쓰지 않는다</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>반투명 패널(backdrop-filter)</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>0개</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>실기기 FPS를 15~30% 깎는다</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>타입 스케일 단계</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>5단계</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>디스플레이 1개는 스케일 밖에 따로 정의</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>폰트 패밀리</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>2개</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>본문 1 + 코드용 모노 1. 언어판마다 자기 것만 받는다</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>강조색</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>1개</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>딥 틸. 라이트·다크는 같은 색의 대응값이다</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>히어로까지 JS</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>314B</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>gzip. 예산 50KB의 0.6%. 복사 버튼 하나뿐이다</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>슬롭 지문 grep</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>0건</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>9개 패턴 검사</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>하드 게이트</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>12/12</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>12개 전부 검사. 4개는 320px 실렌더로 측정했다</td> </tr><tr data-astro-cid-te4qcdxs> <th scope="row" data-astro-cid-te4qcdxs>첫 인터랙션</th> <td class="metric-value mono" data-astro-cid-te4qcdxs>—</td> <td class="metric-note muted" data-astro-cid-te4qcdxs>미측정. 프로덕션 배포 후 Lighthouse 로 잰다</td> </tr> </tbody> </table> </div> <p class="caveat muted" data-astro-cid-te4qcdxs>값은 프로덕션 빌드에서 측정한다. 아직 측정하지 않은 항목은 비워둔다 — 지어낸 숫자보다 구멍이 정직하다.</p> </section> <section class="section" aria-labelledby="preflight-h" data-astro-cid-jpbodcnf> <h2 id="preflight-h" data-astro-cid-jpbodcnf>이 페이지를 만들며 실제로 걸린 것</h2> <p class="lead pf-lead" data-astro-cid-jpbodcnf>남을 검사한 결과가 아니라 자신을 검사한 결과다.</p> <ul class="log" data-astro-cid-jpbodcnf> <li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>eyebrow 라벨이 6개 — 카운트 규칙 상한은 ceil(섹션 7 / 3) = 3개</p> <p class="fixed muted" data-astro-cid-jpbodcnf>세 섹션만 남기고 나머지는 헤드라인만으로 구분했다. 라벨이 없어도 섹션은 읽힌다</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>스크롤 리빌에 clip-path 를 쓰려 했다 — 하드 게이트 8은 transform·opacity 만 허용한다</p> <p class="fixed muted" data-astro-cid-jpbodcnf>덮개를 translateX 로 미는 방식으로 바꿨다. 보이는 결과는 같고, clip-path 보간 제약도 함께 사라졌다</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>구분선 색의 대비가 1.30:1 — 장식선으로는 괜찮지만 입력 테두리로 쓰면 WCAG 1.4.11(3:1) 위반</p> <p class="fixed muted" data-astro-cid-jpbodcnf>6.11:1 짜리 별칭을 하나 더 두고 용도를 갈랐다. 새 색을 만든 게 아니라 팔레트 수는 그대로다</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>본문 컬럼이 960px — 우리가 정한 한 줄 길이(561px)를 넘는다</p> <p class="fixed muted" data-astro-cid-jpbodcnf>그리드의 본문 폭을 --measure 로 바꿨다. 스킬 문서의 예시 코드도 같이 고쳤다</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>320px 에서 가로로 13px 넘쳤다 — 표를 overflow 컨테이너로 감쌌는데도</p> <p class="fixed muted" data-astro-cid-jpbodcnf>grid item 의 기본 min-width 는 auto 라 콘텐츠가 부모를 밀어낸다. min-width:0 을 걸어야 overflow-x 가 실제로 작동한다</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>다크 밴드 안 버튼의 대비가 2.88:1 — 기준은 4.5:1</p> <p class="fixed muted" data-astro-cid-jpbodcnf>밴드가 강조색만 반전시키고 그 위 글자색은 흰색 그대로였다. 반전 대응 토큰을 하나 더 두고 함께 바꿨다</p> </li><li class="entry" data-astro-cid-jpbodcnf> <p class="caught" data-astro-cid-jpbodcnf>스크롤을 끝까지 내려도 파이프라인 6단계 중 뒤 3개가 opacity 0 으로 남았다 — 이 페이지의 본체가 절반 사라졌다</p> <p class="fixed muted" data-astro-cid-jpbodcnf>animation-range 의 cover 22% 에 페이지 하단 요소는 영영 도달하지 못한다. 이펙트를 끄면 보이지만 켜면 사라지는 것은 폴백이 있는 것과 다르다. 연출을 뺐다</p> </li> </ul> <p class="pf-note muted" data-astro-cid-jpbodcnf>일곱 건 모두 만들면서 걸린 것이고, 걸린 뒤에 고쳤다. 마지막 셋은 정적 검사로는 안 잡히고 320px 실렌더에서만 나왔다.</p> </section> <section class="section" aria-labelledby="type-h" data-astro-cid-blyuyqza> <p class="eyebrow" data-astro-cid-blyuyqza>한글 조판</p> <h2 id="type-h" data-astro-cid-blyuyqza>라틴 기준으로 만든 도구는 한글에서 멈춘다</h2> <p class="lead type-lead" data-astro-cid-blyuyqza>영어권 디자인 도구는 한글 조판 규칙을 갖고 있지 않다. 9~11px 텍스트는 라틴에서 라벨이지만 한글에서는 읽을 수 없다. line-height 1.5는 라틴에서 표준이지만 한글에서는 답답하다.</p> <p class="type-body" data-astro-cid-blyuyqza>가장 자주 깨지는 것은 줄바꿈이다. 기본값은 단어 중간에서 줄을 끊는다. 아래 두 문단은 같은 글자, 같은 폭, 같은 폰트다. 차이는 word-break 한 줄뿐이다.</p> <div class="demo" data-astro-cid-blyuyqza> <div class="demo-col" data-astro-cid-blyuyqza> <p class="demo-label muted mono" data-astro-cid-blyuyqza>기본값</p> <p lang="ko" class="demo-text demo-default" data-astro-cid-blyuyqza>원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.</p> </div> <div class="demo-col" data-astro-cid-blyuyqza> <p class="demo-label muted mono" data-astro-cid-blyuyqza>keep-all</p> <p lang="ko" class="demo-text demo-keepall" data-astro-cid-blyuyqza>원두의 산미와 바디를 구분하는 사람에게 필요한 것은 형용사가 아니라 수치다.</p> </div> </div> <ul class="type-rules" data-astro-cid-blyuyqza> <li data-astro-cid-blyuyqza>word-break: keep-all — 없으면 단어가 아무 데서나 잘린다</li><li data-astro-cid-blyuyqza>line-height 1.6~1.8 — 라틴보다 넉넉하게</li><li data-astro-cid-blyuyqza>음수 자간 금지 — 한글은 이미 고정폭에 가까워 즉시 뭉개진다</li><li data-astro-cid-blyuyqza>한 줄 25~40자 — 라틴 기준 65~75자를 그대로 쓰면 너무 길다</li><li data-astro-cid-blyuyqza>한글 폰트를 지정하지 않는 것 자체가 완성도 미달 신호다</li> </ul> </section> <section class="section" aria-labelledby="rules-h" data-astro-cid-64rxrvhn> <h2 id="rules-h" data-astro-cid-64rxrvhn>규칙마다 왜 그런지 적혀 있다</h2> <p class="lead rules-lead" data-astro-cid-64rxrvhn>근거 없는 금지는 지켜지지 않는다. 사용자가 명시적으로 요구하면 규칙보다 그쪽이 이긴다.</p> <dl class="rules" data-astro-cid-64rxrvhn> <div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>레퍼런스 없이 시작하지 않는다</dt> <dd data-astro-cid-64rxrvhn>머릿속 기본값에서 출발하면 결과는 그 카테고리의 평균이 된다.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>강조색은 하나다</dt> <dd data-astro-cid-64rxrvhn>두 개가 필요하다고 느끼면 위계 설계가 실패한 것이다.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>대담함은 한 곳에만</dt> <dd data-astro-cid-64rxrvhn>두 곳에서 소리치면 둘 다 죽는다.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>화려함은 4순위다</dt> <dd data-astro-cid-64rxrvhn>심사 배점이 Design 40 / Usability 30 / Creativity 20 / Content 10이다.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>지어낸 수치를 쓰지 않는다</dt> <dd data-astro-cid-64rxrvhn>숫자 모양의 구멍은 정직하고, 지어낸 숫자는 신뢰를 깎는다.</dd> </div><div class="rule" data-astro-cid-64rxrvhn> <dt data-astro-cid-64rxrvhn>이펙트를 다 꺼도 완성돼 있어야 한다</dt> <dd data-astro-cid-64rxrvhn>그 상태가 모든 폴백의 기반이다. 무너지면 이펙트가 구조를 대신하고 있는 것이다.</dd> </div> </dl> </section> <section class="full band-inverse install" aria-labelledby="install-h" data-astro-cid-ryjlwm3k> <div class="install-inner" data-astro-cid-ryjlwm3k> <h2 id="install-h" data-astro-cid-ryjlwm3k>한 줄이면 된다</h2> <p class="lead install-lead" data-astro-cid-ryjlwm3k>설치 대상을 감지해 기본 선택해준다. 스킬 파일을 직접 고쳤다면 업데이트가 그 파일을 건드리지 않는다.</p> <div class="cmd" data-astro-cid-f2mrhd7z> <code class="cmd-text" data-astro-cid-f2mrhd7z>npx designpaca</code> <button type="button" class="cmd-copy" data-copy="npx designpaca" data-copied="복사됨" data-astro-cid-f2mrhd7z> 복사 </button> </div> <div class="table-scroll targets" data-astro-cid-ryjlwm3k> <table data-astro-cid-ryjlwm3k> <tbody data-astro-cid-ryjlwm3k> <tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Claude Code</th> <td class="mono" data-astro-cid-ryjlwm3k>~/.claude/skills/designpaca/</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Codex CLI</th> <td class="mono" data-astro-cid-ryjlwm3k>~/.codex/skills/designpaca/</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Cursor</th> <td class="mono" data-astro-cid-ryjlwm3k>.cursor/rules/designpaca.mdc</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>Windsurf</th> <td class="mono" data-astro-cid-ryjlwm3k>.windsurf/rules/designpaca.md</td> </tr><tr data-astro-cid-ryjlwm3k> <th scope="row" data-astro-cid-ryjlwm3k>AGENTS.md</th> <td class="mono" data-astro-cid-ryjlwm3k>블록 주입 — 에이전트 무관</td> </tr> </tbody> </table> </div> <dl class="cmds" data-astro-cid-ryjlwm3k> <div class="cmd-row" data-astro-cid-ryjlwm3k> <dt class="mono" data-astro-cid-ryjlwm3k>npx designpaca update</dt> <dd class="muted" data-astro-cid-ryjlwm3k>최신 스킬로 갱신. 직접 고친 파일은 건너뛴다</dd> </div><div class="cmd-row" data-astro-cid-ryjlwm3k> <dt class="mono" data-astro-cid-ryjlwm3k>npx designpaca doctor</dt> <dd class="muted" data-astro-cid-ryjlwm3k>설치 상태와 드리프트 진단</dd> </div><div class="cmd-row" data-astro-cid-ryjlwm3k> <dt class="mono" data-astro-cid-ryjlwm3k>npx designpaca uninstall</dt> <dd class="muted" data-astro-cid-ryjlwm3k>매니페스트 기반 정확한 제거</dd> </div> </dl> </div> </section> </main> <footer class="page site-footer" data-astro-cid-5hce7sga> <p>이 페이지는 designpaca 로 만들어졌다.</p> <p class="mono"> <a href="https://git.chanpaca.net/yunchan/designpaca">git.chanpaca.net/yunchan/designpaca</a> · MIT </p> </footer> </body></html> |