design-refs — 웹 디자인 레퍼런스 자산 (handoff)

C:\dev 전체가 참고하는 웹 UI 디자인 소스 보관소. 프로젝트가 아니라 자산이다(코드가 아니라 재료). 보는 창구 = devplan /design-refs.html(http://localhost:8799/design-refs.html · 원격 100.108.234.45:8799). 마스터 = C:\dev\design-refs\ · 규칙 = projects/design-refs/rules.md · 사용법 원문 = C:\dev\design-refs\README.md

🆕 NOW (2026-09-18) — 스크롤 연출 · 동적 텍스트 조사 ✅ (같은 날 두 번째 지시)

[페페] 지시 = 「아트조이 프레젠테이션 기대효과는 구현됐다. 다만 신규제작이라 그래픽 완성도가 떨어진다. 어제 준 참고 링크처럼 실제 스크롤 무빙 효과를 HTML 적용한 사이트를 조사해 디자인 레퍼런스에 추가해라. 특히 프레젠테이션 · 회사소개에 쓰인 것. 그 기술을 그대로 카피할 수 있으면 제일 좋고, 안 되면 프리셋 · 라이브러리를 찾아 모아라. 실제 있는 자료를 재활용해 품질을 높인다. 색상 제한 없다. 텍스트도 파편화 등 동적이 되면 좋겠다. 글씨체 · 색 · 크기 등 컨셉은 참고에 따라 완전 재편성한다. 2D 뿐 아니라 3D 포함. 대량 말고 스크롤 진행 기준 10개 컨셉 정도」
산출 3벌 = ①레퍼런스 사이트 13곳 → refs.json(49 → 62개, 캡처 14장 전부 성공) ②자산문서 · 데이터 · 라이브 데모 C:\dev\design-refs\scroll-motion-2026-09\{README.md,concepts.json,demo.html} ③devplan 페이지 /scroll-concepts.html(허브 카드 scroll-concepts 등록 완료) · 실기검증 C:\dev\devplan\_verify_scroll_concepts.py 23/23 OK
🔑기술스택을 «실측»했다 — WebSearch 로는 절대 못 얻는다. WebFetch 는 JS 를 안 돌려 script 태그가 통째로 사라진다(서브에이전트 보고의 절반이 「미확인」이었다). 실브라우저로 열어 ①window 전역 ②리소스 실제 파일명 ③canvas 컨텍스트 ④body.overflow+scrollHeight(휠 가로채는지) ⑤[class*=word/char] span 수를 직접 읽었다. 프로브 = scratchpad\probe_sites.py 패턴.
🔑가장 중요한 발견 = lusion 급 체감은 three.js 때문이 아니다. 토스 새로운차원(WebGL 0 · Lottie+ScrollMagic) · 라이트십(모션 라이브러리 0 · SVG 마스크)이 같은 인상을 낸다. 차이는 타이포 크기 · 한 화면 한 메시지 · 전환 타이밍이다. → 3D 는 08 확장 챕터 한 곳으로 족하다.
라이브러리 3종 적재(오프라인 자립) = animejs-4.5.0(MIT · splitText 가 Intl.Segmenter 라 한글 어절 안전 — GSAP SplitText 의 유일한 대체재) · three-0.186.0(MIT · module.min 392KB) · ogl-1.0.11(Unlicense · 133KB).
⛔라이선스로 걸러낸 것 = GSAP(Webflow 조항 · 기존 결정) · ScrollReveal 4.0.9 = GPL-3.0 · Animate.css 4.1.1 = Hippocratic-2.1(3.x 만 MIT) · Hover.css 2.2.0+ 상업 유료 · Blotter.js 미유지보수. 「당연히 MIT 겠거니」가 사고다.
컨셉 10개는 전부 «굴려 보는» 라이브 데모다 — 읽는 자료가 아니라 스크롤하면 실제로 움직인다. demo.html 함수 하나 = 컨셉 하나라 그대로 떼어 deck\src\ 에 붙인다. 전부 진행률 p 의 순수함수(되감아도 같은 그림 = 미팅 중 앞뒤 이동 대비).
🔗같은 날 [페페] 지적 = 「artjoy-presentation.html 에 최신 샘플 페이지 링크가 없다. 모든 작업에서 페이지별 링크 연결을 잘 안 한다. 나는 항상 devplan 에서 페이지를 살펴보니 관련 페이지는 상하위 관계를 파악해 이어 달라」 → 공용 링크띠 신설 C:\dev\devplan\assets\pagelinks.js. 페이지 상단에 「관련 페이지」 띠(↑상위 · ↓하위 · ·형제 · ▶실물)를 자동으로 그린다. TREE 에 한 줄만 적으면 역방향은 코드가 만든다(부모 kids → 자식 up 자동 · also 는 양쪽) — 손으로 양쪽에 붙이던 걸 없앴다. 적용 6쪽(artjoy · artjoy-presentation · ax-business-catalog · design-refs · design-refs-assets · scroll-concepts) · 검증 C:\dev\devplan\_verify_pagelinks.py 35/35 OK(띠 존재 · 상하위 방향 · 링크 전부 200). 규칙 = C:\dev\CLAUDE.md §3 + C:\dev\seedchain\rules\workflow.md.
🎤같은 날 [페페] 지시 = 「스크롤로 내가 전환 속도를 조절해야 하니 발표가 세련되지 못하다. 전환 시퀀스를 미리 분리하고 재생속도를 설정, 나는 마우스 좌우 클릭으로 이전·다음을 한 번에」 → 샘플 덱에 발표 모드 신설. 좌클릭 = 다음 · 우클릭 = 이전(기본 메뉴 차단) · →␣←Home End · Esc = 자유 스크롤. 전환 스텝 23개(섹션별 data-steps = 연출 단계 수) · 재생속도 슬라이더 300~2400ms(기본 900 · localStorage 기억) · 하단 유리 조종판(스텝 번호 · 챕터명 · 속도 · 「자유」). 검증 C:\dev\devplan\_verify_present_mode.py 14/14 OK.
🔴함정 = html{scroll-behavior:smooth} 와 자체 트윈은 같이 못 쓴다 — 브라우저 smooth 가 우리 scrollTo 를 다시 보간해 목적지를 지나친다 → auto 로 바꿔야 스텝이 정확히 선다. 휠·터치가 들어오면 트윈을 즉시 놓는다(사람 우선).
🔴같은 날 [페페] 확정 = 「색상은 전면 교체. Glassmorphism 레퍼런스로 간다」 + 「배경 #7b5cff + #ff7ac6 조합 그라디언트」(콜렉션 카드의 핑크 계열) → A/B/C 3안 폐기(근거만 dropped:true 로 보존). 같이 지시 = 「샘플용으로 연출 컨셉 10개 모두 넣은 것으로 해라. 내용 반복해도 되니 있는 내용으로. 빠르게 효과가 실제로 어떻게 보이는지 확인할 것」 → 샘플 덱 신설 C:\dev\design-refs\scroll-motion-2026-09\sample-deck.html(문서높이 ≈20,000px · 9챕터 실제 문구 · 컨셉 10 전부 = 전역 2(긴항해·속도반응) + 챕터 8 · 의존성 = anime.js 로컬 하나). 검증 C:\dev\devplan\_verify_sample_deck.py 11/11 OK · 페이지 32/32 OK.
🔴실물로 만들며 잡은 함정 3개 = ①흰 오버레이가 배경을 희석하면 흰 글자가 묻힌다(실측 배경이 rgb(184,132,239) 까지 밝아져 커버 제목 실종 → 하이라이트 .34→.16 + 딥 비네트 + 블롭 알파 .82→.55) ②유리를 겹쳐 쌓으면 뒤 레이어 글자가 뭉갠다 → 겹치는 면은 backdrop-filter 빼고 불투명 흰 면 ③3D 분해가 «위로» 뻗어 제목을 덮는다 → transform-origin:50% 100% + 각도 완화.
🔴스크럽 진행률 버그(같은 패턴을 또 쓸 자리다) — 섹션 스크럽 길이를 offsetHeight - innerHeight 로만 잡으면 높이가 딱 1화면인 섹션은 그 값이 0 이라 p 가 곧바로 1 로 튄다(커버 제목이 «사라진 상태»로 그려졌다). 0 이면 offsetHeight 로 폴백한다.
🔴같은 날 [페페] 지적 = 「팔레트 후보가 페이지에 안 보인다」 — 3안을 시드 문서에만 적고 페이지엔 안 넣었었다. 페페는 허브 페이지로 본다 — 문서에만 적으면 없는 것이다. 고침 = /scroll-concepts.html 에 팔레트 3안 미리보기 절 신설(같은 챕터 한 장면을 팔레트만 바꿔 그린 iframe 3개 + 스와치 + 스펙표). 색값은 concepts.json 의 palettes[] 가 단일 출처(페이지에 hex 를 안 박아 테마 게이트 통과). 데모 = demo.html?c=palette&p=a|b|c. 재검증 32/32 OK.
⏳[페페] 몫 = ①/scroll-concepts.html 훑고 채택할 컨셉 지목(추천 조합 = 1 긴항해 + 4 전후와이프 + 7 숫자조립 + 9 카피시퀀스, 8 파편화는 오프닝·클로징만) ②팔레트 재편성 3안 중 택1(web-designer 안 = A 옵시디언 다크+금브라스 / B 페이퍼 라이트+블루 / C 그래파이트 미드톤+주황 — 원문은 projects/artjoy/presentation-v1.md)
세션 원문 = projects/artjoy/presentation-v1.md §v3 조사 절

🆕 NOW (2026-09-18) — 레퍼런스 콜렉션으로 확장 ✅

[페페] 지시 = 「부트스트랩 자료는 하위페이지로, 상위 관리페이지를 devplan 에 연결. 참고 레퍼런스를 카테고리별로 모으고 각 링크를 해당 컨셉으로 디자인한 카드로 콜렉션 — 카드만 봐도 컨셉을 알게. 분류는 웹 디자이너 에이전트 조언. 웹·앱·상세페이지 전 분야. 전부 다운로드는 안 하니 ①카드를 컨셉 스타일로 ②상세에 참조링크 + 샘플 임베드」
페이지 두 장으로 갈렸다 — 상위 /design-refs.html(컨셉 카드 콜렉션 · refs.json) / 하위 /design-refs-assets.html(부트스트랩·아이콘 카탈로그 · catalog.json, 옛 내용 그대로). 허브 카드는 상위 하나(design-refs).
레퍼런스 49개 · 분류 7축(매체·스타일사조·색무드·모션·타이포·밀도·아이콘). 한국 커머스·앱 10개 포함(무신사·오늘의집·마켓컬리·29CM·W컨셉·쿠팡·지그재그·토스·배민·당근).
🆕응용프로그램 스킨 15종 추가(같은 날 [페페] 추가 지시) — Catppuccin·Tokyo Night·Gruvbox·Solarized·Rosé Pine·Nord·Dracula·One Dark/Light·VS Code 기본·Fluent 2(윈도우11)·Ant Design·Tailwind 팔레트·Obsidian·Discord·macOS 시스템색. 매체축에 appskin, 사조축에 fluent, 타이포축에 mono 추가.
🆕한 출처에 색이 여러 벌이면 카드가 페이드 순환(variants[], 45개 변형/15곳). 예 = Catppuccin Mocha→Macchiato→Frappé→Latte. 상세페이지엔 변형 전량이 스와치 표로 깔린다.
🆕상단 고정헤더 조종판 — ⏸ 일시정지 + 순환 슬라이더(1~10초, 기본 3초) + 헤더 하단 진행 게이지. 설정은 localStorage 에 남는다. 실기검증기 = C:\dev\devplan\_verify_design_refs.py.
카드 = 토큰 렌더(손CSS 0건). tokens 17키를 카드 루트 CSS 변수로 꽂는다. 모션 프리셋 6종으로 호버 반응까지 흉내. 폰트 프리셋 6종은 전부 윈도우 기본 탑재 조합 = 웹폰트 다운로드 0.
상세 = 해시 라우트(#/ref/<id>) — 캡처 갤러리(라이트박스) + 팔레트 클릭복사 + 7축 분류 + 토큰표 + 원본 링크. 캡처 유무는 매니페스트 없이 img onload/onerror 로 판정.
추가 절차 = C:\dev\design-refs\refs.json 1항목 → python C:/dev/design-refs/capture_refs.py <id> → --check. 상세 = rules.md 🆕.
⏳[페페] 몫 = ①페이지 훑고 빼거나 더할 레퍼런스 지목 ②캡처가 로컬 열람 전용 전제 — devplan 을 밖으로 열 생각이 있는지.
⏳[코디] 몫 = 캡처 실패(봇 차단·로그인벽) 목록 정리 + 캡처 보고 토큰 색값 보정(지금 값은 근사치).
세션 원문 = session-2026-09-18-design-ref-collection.md

🔶 루트 NOW 이관 — 진행·미결 (2026-08-19 대청소, 페페 지시)

루트 HANDOFF.md를 pncad 만 남기고 비웠다. 아래는 그때 옮겨온 원문(문구 무변경).

🆕design-refs 26.8.3 신규 — 웹 디자인 레퍼런스 자산(페페 지시, 자산이지 프로젝트 아님). 마스터 C:\dev\design-refs\(최상위 신설 = 그릴링 확정), 창구 devplan /design-refs.html. 1차 적재 = Bootstrap 5.3.8(dist·예제 41종·scss) + Icons 1.13.1(SVG 2078+웹폰트), 둘 다 MIT·2,320개 15.4MB. 예제 35종 한국어 분류(용도까지: devplan 대시보드/PFS 업무화면/계산기/랜딩). 페이지는 catalog.json fetch 구동 = 소스 늘어도 안 고침, 예제는 iframe 라이브 프리뷰(뷰포트 전환·경로복사)·아이콘 2078 검색. 소스 추가 = 폴더+SOURCES 1항목+스크립트 2개. 🔑devplan 8799 서버 = 상승권한이라 코디 재시작 불가 + 정션 못 넘음(실측 404) → 게시(복사) 방식, app.py 라우트는 이중화로 남김. ⚠devplan 페이지에 부트스트랩 CSS 링크 금지(테마 게이트 FAIL). ⏳페페 몫 = 페이지 훑고 다음 소스 지목(Tailwind·Flowbite·daisyUI 등) → 이후 gptbutler 목업 샘플. → projects/design-refs/{handoff,rules}.md

🆕 NOW (2026-08-03) — 1차 적재 완료, 바로 쓸 수 있음

[페페] 발단 = "getbootstrap.com 무료 소스를 받아 dev 전체의 웹구성 기본 디자인 레퍼런스를 구축하고, 앞으로 다른 디자인 소스도 계속 자산으로 정리한다. devplan에서 내가 살펴볼 수 있게 UI 샘플 페이지도."
[페페] 구조 확정(그릴링 1문) = 신규 최상위 C:\dev\design-refs\ 정식 신설. devplan 하위·tools 하위 안 됨 — "dev 전체 레퍼런스"라는 성격에 맞춰 소스가 늘어도 같은 틀로 받는다.
1차 적재 = Bootstrap 5.3.8(MIT) + Bootstrap Icons 1.13.1(MIT). 자산 2,320개 / 15.4MB.
dist(컴파일 CSS/JS 44) · examples 41종(비RTL 35 + RTL 6) · scss(소스 102) · 아이콘 SVG 2,078 + 웹폰트.
예제 35종을 한국어로 분류(서브에이전트가 HTML을 직접 열어 확인) — 분류/설명/실제 컴포넌트/페페 작업 기준 용도(devplan 대시보드·PFS 업무화면·계산기 사이트·랜딩)까지. 내비게이션 9 · 레이아웃 8 · 페이지 템플릿 6 · 컴포넌트 모음 5 · 폼·커머스 4 · 참고표 3.
뷰어 페이지는 catalog.json을 fetch해서 그린다 → 소스가 늘어도 페이지를 안 고친다(핵심 요구). 예제는 iframe 라이브 프리뷰(뷰포트 375/768/100% 전환·새 탭·경로 복사), 아이콘은 웹폰트로 2,078개 검색.
⏳페페 몫 = 페이지 열어서 훑어보고 "다음에 받을 소스" 지목(Tailwind·Flowbite·daisyUI 등). 이후 gptbutler 목업 샘플 작업으로 이어감.

확정 (재논의 금지)

항목	확정
위치	`C:\dev\design-refs\` 최상위. 업스트림 폴더 구조 그대로 + `LICENSE` 동봉
라이선스	상업적 사용 자유로운 것만(MIT·Apache·CC-BY). 유료 테마·NC(비상업)는 받지 않는다
카탈로그	`catalog.json` = 산출물(`build_catalog.py`가 생성). 파일 수·용량·아이콘 수는 실측해서 채운다(수기 금지)
웹 게시	`publish_devplan.py`로 브라우저가 요청하는 것만 `devplan\design-refs\`에 복사. SCSS·소스맵·SVG 낱개는 게시 안 함
페이지	카탈로그 구동. 새 소스 = 폴더 + `SOURCES` 1항목 + 두 스크립트 실행이면 끝
원본 zip	`_raw\`에 보관(재현·재해제용)

🔑 함정 (실측 확정 — 재조사 금지)

devplan 8799 서버는 코디가 재시작할 수 없다 — 프로세스(pythonw)가 상승권한이라 같은 계정인데도 taskkill이 "액세스 거부". 예약작업 devplan-dashboard(delix·Limited)와 별개로 떠 있다. → app.py를 고쳐도 즉시 반영되지 않는다.
그 서버는 정션(mklink /J)을 못 넘어간다 — 실측: 같은 깊이의 실디렉터리 200 / 정션 404(devplan 안에 만든 정션도 동일). 새로 띄운 Python 3.12 http.server는 정상 200 → 서버 프로세스 권한 문제. → devplan 밖 자산은 "게시(복사)"로 붙인다. app.py에는 /design-refs/* → C:\dev\design-refs 매핑 라우트를 넣어뒀고(경로 탈출 방어 포함), 서버가 언젠가 재시작되면 그쪽이 우선 적용된다. 상대 경로 구조가 같아 페이지는 어느 쪽이든 그대로 뜬다.
devplan 페이지에 부트스트랩 CSS를 링크하면 테마 게이트가 FAIL한다(테라코타 웜톤을 부트스트랩 팔레트가 덮어씀) → 예제는 iframe 안에서만. 아이콘 CSS는 색 선언이 없어 링크해도 안전(실측 FAIL 0).
서브에이전트가 반환한 HTML에 JSON 이스케이프가 한 겹 더 씌워질 수 있다 — 파일에 실개행 0 + 리터럴 \n 642개 + \\ 31개로 저장돼 화면에 \n이 그대로 찍히고 JS가 Invalid or unexpected token으로 죽었다. → 조립 후 실개행 수를 먼저 세고, 0이면 한 겹 벗긴다(json.loads('"'+본문의 " 이스케이프+'"')).

소스 추가 후보(페페 지목 대기) = Tailwind CSS · Flowbite · daisyUI · Heroicons · Lucide 등. 절차는 rules.md대로 4단계.
기존 프로젝트(rollcalculator·PFS·devplan)에서 실제로 조각을 가져다 쓸 때 어떤 예제를 베꼈는지 기록해두면 다음 화면이 빨라진다.

불변 핵심

자산이지 프로젝트가 아니다 — 여기 코드를 짜지 않는다. 받고·정리하고·보여주는 것까지가 범위.
카탈로그가 단일 출처 — 페이지·수치는 전부 catalog.json에서 나온다. 화면에 숫자를 하드코딩하지 않는다.
게시본은 산출물 — devplan\design-refs\를 직접 편집하지 않는다(다음 publish에 덮어쓴다).
관련: devplan(뷰어 페이지·허브 카드) · gptbutler(진행판 목업 — 이 자산을 쓸 다음 후보) · rollcalculator(공개 사이트 UI)