2026-09-18(금) — 디자인 레퍼런스 콜렉션 신설

기록: [코디] · 지시 = [페페]

지시 원문 요지

「디자인 레퍼런스를 확장시키자. 현재 부트스트랩 자료는 하위페이지로 이동하고 상위 관리페이지를 devplan 에 연결한다. 참고용 레퍼런스를 카테고리별로 링크를 모으고, 각 링크를 해당하는 컨셉으로 디자인 반영한 카드로 콜렉션을 만든다 — 카드만 봐도 어떤 컨셉인지 알게. 분류는 색·모션효과 여부·아이콘 등 웹 디자이너 에이전트 조언을 받는다. 웹페이지·어플·상세페이지 등 시각 디자인 어느 분야든 참고할 자료로 구성. 전부 다운로드는 안 한다 → ①카드를 해당 컨셉 스타일로 디자인 ②카드 상세페이지에 참조링크 + 샘플 디자인 임베드.」

그릴링 답 ([페페] 3건, 전부 코디 추천안)

상담

• web-designer 에이전트 — 분류 7축 확정 · 토큰 스키마에 backdropBlur·cardBackdrop 추가 요구(없으면 글래스모피즘이 미니멀과 똑같이 보인다) · iframe 전면 배제 권고 · 씨앗 27개 목록 · 폰트 프리셋 분리 권고(안 하면 카드 100개가 전부 devplan 기본 폰트로 보인다).
• 코덱스 — ①iframe 실패는 JS 로 신뢰성 있게 감지 불가 → 캡처 기본 + 안내문 ②CSS 변수는 카드 루트에 스코프 + 값 허용목록 검증 ③봇 차단 사이트는 우회하지 말고 플레이스홀더.

산출물

구조

• 카드 = 토큰 렌더. refs.json 의 tokens(bg·bg2·ink·muted·accent·accent2·radius·borderWidth·borderColor·shadow·blur·backdrop·font·headFont·weight·tracking·motion)를 카드 루트에 CSS 변수로 꽂아 같은 뼈대가 사조별로 다르게 보인다. 카드 손CSS 는 0건.
• 모션 프리셋 6종 = none·lift·glow·press·shove·ripple → 호버 반응까지 그 사이트를 흉내낸다.
• 폰트 프리셋 6종 = kr-native·sans-modern·serif-editorial·display-bold·mono-tech·condensed. 전부 윈도우 기본 탑재 폰트 조합 — 웹폰트 다운로드 0.
• 상세 = 해시 라우트(#/ref/<id>). 캡처 갤러리(라이트박스) + 팔레트 클릭복사 + 7축 분류 + 토큰표 + 원본 링크. embed:"try" 항목만 iframe 절이 붙는다.
• 캡처 유무는 매니페스트 없이 img onload/onerror 로 판정 — 없으면 「캡처가 아직 없다 + 굽는 명령」 안내.

검증

• capture_refs.py --check = 34항목 문제 0건
• Playwright 실기 = 카드 34 · 커머스 필터 8 · 커머스+에디토리얼 2 · 초기화 34 · 상세(토스) 팔레트 6·토큰 17행 · 콘솔에러 0
• 캡처 유무 분기 = 있는 항목(mobbin) 2장 노출 / 없는 항목(wconcept) 안내문 노출 / embed:"try"(glassmorphism) iframe 1
• check_font.py FAIL 0 · check_theme.py FAIL 0 · stylesheet 4줄 순서 정상 · 390px 가로넘침 0
• build_hub.py = 109 프로젝트, design-refs 2026-09-18 등록

추가 지시 (같은 날) — 응용프로그램 스킨 + 색 순환

[페페] 「응용프로그램 스킨용 컨셉카드도 추가로 더 생성해줘. 또는 같은 출처에서 여러 색상이 나오는 거면 카드가 1초마다 페이드 되면서 색상이 변하게 해줘.」 → 둘 다 했다(앱 스킨은 대부분 라이트/다크 한 쌍이라 자연히 순환 대상이 된다).

추가된 것

• 분류축 확장 — medium 에 appskin(응용프로그램 스킨) · style_school 에 fluent(플루언트·윈도우) · typography 에 mono(모노스페이스).
• 응용프로그램 스킨 15종 = Catppuccin(4벌) · Tokyo Night(3) · Gruvbox(4) · Solarized(2) · Rosé Pine(3) · Nord(3) · Dracula(4) · One Dark/Light(2) · VS Code 기본(3) · Fluent 2 윈도우11(2) · Ant Design(2) · Tailwind 팔레트(6) · Obsidian(2) · Discord(3) · macOS 시스템색(2).
• variants[] 스키마 — name + 덮어쓸 색 키만. 2개 미만이면 --check FAIL, tokens 에 없는 키를 쓰면 FAIL.
• 총계 = 레퍼런스 49개 · 색 변형 45개(15곳) · 캡처 68장 4.9MB.

구현 요점

• 페이드는 CSS 변수가 아니라 «그 변수를 쓰는 속성»에 transition 을 건다 — .cc{transition:…,background-color .5s,color .5s,border-color .5s}. 변수를 바꾸면 소비 속성이 부드럽게 넘어간다(변수 자체 애니메이션은 @property 등록이 필요한데 그럴 이유가 없다).
• 팔레트 스와치를 인라인 hex 에서 var(--cc-*) 로 바꿔 카드와 같이 페이드하게 했다(그 김에 빠져 있던 --cc-accent2 를 변수 목록에 추가).
• 순환은 setInterval 1개가 매 틱에 .cc[data-ref] 를 다시 찾아 돌린다 — 목록이 필터로 갈려도 따라온다. prefers-reduced-motion·탭 숨김·상세화면에선 멈춘다.
• 상세페이지에 🎚️ 색 변형 N벌 절 — 변형별 6색 스와치(클릭복사).
• 🔑카드 설명을 --cc-muted → --cc-ink 로 바꿨다. 다크 에디터 테마 muted(Tokyo Night #565f89, Dracula #6272a4)가 13px 본문에서 대비 3:1 언저리라 안 읽혔다. ink 는 그 테마의 본문색이라 컨셉 재현도 안 깨진다.

검증

• capture_refs.py --check = 49항목 문제 0건(variants 검사 포함)
• C:\dev\devplan\_verify_design_refs.py = 실패 0건 — 카드 49 · 순환카드 15 · appskin 필터 15/49 · Catppuccin 이 1초마다 Mocha→Macchiato→Frappé→Latte 로 이름·배경색 동시 전환(4종 관측) · background-color 트랜지션 확인 · 상세 변형행 4·스와치 24 · 변형 없는 항목엔 절 없음 · 390px 넘침 0 · 콘솔에러 0
• 캡처 = 15/15 성공, FAIL 0(누계 68장) · check_font·check_theme FAIL 0

추가 지시 2 (같은 날) — 3초 + 헤더 조종판

[페페] 「순환은 3초로 바꿔주고 상단 고정헤더에 순환 속도 게이지를 달아줘. 일시정지 버튼도 같이.」

• 기본 주기 1초 → 3초. 상단 고정헤더(hub-nav, sticky)에 조종판을 붙였다 — ⏸ 일시정지 토글 + 순환 슬라이더(1~10초) + 현재값(3초) + 헤더 하단 3px 진행 게이지(다음 전환까지 차오른다, 정지하면 흐려지고 멈춘다).
• 설정은 localStorage(drefs.cycle.sec / drefs.cycle.paused)에 남아 새로고침해도 유지.
• 타이머 = 50ms 틱 하나. 진행 게이지 폭만 갱신하고 주기가 차면 카드를 넘긴다 — 속도 변경·정지·재개가 전부 같은 루프 안에서 해결된다.
• prefers-reduced-motion 은 끄는 게 아니라 「멈춘 채 시작」 으로 바꿨다(페페가 켜면 된다).
• 변형 없는 콜렉션이면 조종판은 hidden.

함정 2건 (실측)

• 🔴네비바에 color:#fff 를 쓰면 check_theme.py 가 FAIL — 테라코타 네비 위 흰 글자가 맞는데도 토큰이 아니라서 걸린다. var(--on-accent) 로 쓴다(배경·테두리의 rgba(255,255,255,.x) 는 안 걸린다).
• 🔴390px 에서 헤더가 넘쳤다(scrollWidth 401). 버튼 라벨을 <span class="cyc-t"> 로 감싸 ≤560px 에서 숨기고 아이콘만 남기고, 슬라이더 56px·우측여백 48px 로 줄여 390 으로 맞췄다(우상단은 qahelper 토글 자리라 비워야 한다).

검증

C:\dev\devplan\_verify_design_refs.py 실패 0건 — 헤더 게이지 보임 · 기본 3초 · 기본 재생중 · 게이지 조작 1초 반영 · 이름/배경색 4종·5종 순환 관측 · 진행 게이지 폭 720px · 일시정지 누르면 4회 관측 내내 Frappé 고정 · 재생 복귀 · 새로고침 후 주기 유지 · 390px 넘침 0 · 콘솔에러 0 · check_font·check_theme FAIL 0

남은 것

• 캡처 굽기 = 백그라운드 진행 중(34항목 × 1~2장). 봇 차단(Cloudflare·로그인벽) 사이트는 실패 → 그 카드는 안내문으로 뜬다. 실패 목록은 C:\dev\design-refs\_capture.log.
• 토큰 색값은 코디 근사치다. 캡처를 보고 틀린 것만 refs.json 에서 고친다.