AI 코딩 에이전트가 웹 디자인을 순서대로 하게 만드는 스킬. 레퍼런스 조사부터 셀프 감사까지 여섯 단계 + npx 설치 CLI.
https://designpaca.chanpaca.net
af3a08397e
"스크롤할 때 이미지가 고정되어 원경처럼 보이는 게 패럴랙스의 꽃"이라는
지적이 맞았다. 느리게 같이 움직이는 것으로는 그 인상이 안 나온다 —
속도만 다를 뿐 방향이 같기 때문이다.
고정 배경
background-attachment: fixed 는 iOS Safari 가 GPU 메모리 때문에
throttle 해서 스크롤 중 배경이 튄다. 쓰지 않았다.
섹션에 clip-path: inset(0) 을 걸어 position: fixed 의 컨테이닝 블록으로
만들었다. 배경이 화면에 멈춘 채 그 섹션 안에서만 보인다.
실측: 스크롤 1000px 구간에서 viewportTop 이 계속 0.
대가 둘을 받아들였다
조상에 transform/filter/mask 를 못 쓴다 — 페이드 마스크를 포기했다
prefers-reduced-motion 에서는 absolute 로 되돌린다
전부 고정하지는 않았다. 종이는 손에 닿는 거리라 원경으로 두면 거짓말이다
재료·설치·프리플라이트 fixed 원경
사례 drift 두 결과물이 흐르는 자리
조판 drift 종이는 가깝다
게이트 씬을 파이프라인으로
히어로에서는 의미를 판독기가 자막으로 설명해야 했다. 그림이 스스로
말하지 못한다는 뜻이다. 옆에 여섯 단계가 적힌 자리로 옮기니 자막이
필요 없어졌다 — 판을 통과하면 그 단계가 켜진다.
캔버스는 sticky, 진행도는 섹션에서 읽는다.
travel 을 섹션 높이로 잡았더니 캔버스가 사라진 뒤에도 진행이 남아
6단계 중 3단계에서 멈췄다. (섹션 높이 - 뷰포트 높이)로 고쳤다.
캔버스 위 텍스트 대비 14.2:1.
스킬
motion.md 패럴랙스의 원형은 고정 · clip-path 기법과 그 대가
sticky 캔버스의 진행도 계산
three.md 씬의 의미는 옆의 콘텐츠가 반응할 때 성립한다.
자막이 필요하면 배치를 의심해라
|
||
|---|---|---|
| .changeset | ||
| .forgejo/workflows | ||
| apps/site | ||
| build/ci | ||
| docs | ||
| packages | ||
| research | ||
| .gitignore | ||
| .npmrc | ||
| designpaca-en.html | ||
| designpaca-ko.html | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| tsconfig.base.json | ||
designpaca — 모노레포
웹 디자인 파이프라인 스킬과 그 설치 CLI.
사용자용 문서는 packages/cli/README.md 를 봐라 — npm 페이지에 그대로 실린다.
npx designpaca
구조
packages/
skill/ @designpaca/skill — SKILL.md 와 references/. 이 저장소의 실질 가치
core/ @designpaca/core — 설치 엔진: 타깃 어댑터, 매니페스트, 드리프트 감지
cli/ designpaca — npx 진입점 + 온보딩 TUI. 유일하게 npm 에 배포되는 패키지
apps/
site/ @designpaca/site — 소개 페이지 (Astro → Cloudflare Pages)
build/ci/ — CI 스크립트 (Node 검증, npm 배포, 릴리스 업로드, 스킬 검사)
research/ — 스킬의 근거 자료. 약 250개 웹 소스 조사 결과
docs/DEPLOYMENT_PLAN.md — 배포·릴리스 운영 절차
core 와 skill 은 private 이다. CLI 빌드 시 core 는 번들에, skill 은 dist/skill/ 로 복사된다.
사용자는 npx designpaca 한 번으로 전부 받는다.
개발
pnpm install
pnpm build # 스킬 번들 + CLI 빌드
pnpm test # core 14 + cli 6
pnpm typecheck
pnpm dev:site # 소개 페이지 로컬
CLI 를 실제 경로로 테스트
npx 가 겪는 경로를 그대로 재현하려면 tarball 로 확인한다.
pnpm build
cd packages/cli && npm pack
npx ./designpaca-0.1.0.tgz --help
설치 왕복을 안전하게 시험하려면 홈 디렉터리를 바꿔라.
HOME=/tmp/dp USERPROFILE=/tmp/dp node packages/cli/dist/index.js install -t claude-code -s user -y
스킬 문서를 고쳤다면
node build/ci/lint-skill.mjs packages/skill
프론트매터 필수 필드, description 길이, 본문이 가리키는 참조 문서의 존재, 참조되지 않는 죽은 문서를 검사한다. CI 가 같은 것을 돌린다.
릴리스
pnpm changeset # 변경 기록
pnpm version # 버전 확정 (fixed 그룹이라 세 패키지가 함께 움직인다)
git tag v0.1.0 && git push origin main --tags
태그 푸시가 Forgejo Actions 를 발동시킨다: 검사 → 테스트 → 빌드 → npmjs 배포 + 사설 레지스트리 미러 → draft 릴리스 → Cloudflare Pages.
시크릿 등록과 러너 전제는 docs/DEPLOYMENT_PLAN.md 에 있다.
라이선스
MIT