2026-08-03 세션 — design-refs 신설: Bootstrap 자산 적재 + devplan 뷰어 페이지 — 기록: [코디]
논의·대안
[페페] 지시 = "getbootstrap.com 무료 소스를 받아 dev 전체의 웹구성 기본 디자인 레퍼런스를 구축하고, 앞으로 bootstrap 외에도 다양한 디자인 소스를 받아 우리 자산으로 정리한다. 소스를 받고 devplan에서 내가 살펴볼 수 있게 UI 샘플 페이지를 구축해라. 이후 gptbutler 목업 샘플도 이어서 진행할 예정."
착수 전 그릴링 1문 = 자산을 어떤 단위로 관리할까. 이 결정이 폴더·카탈로그·페이지 구조를 다 가르기 때문이다.
- ①신규 최상위 C:\dev\design-refs\ 정식 신설(카탈로그 + devplan 카드/페이지 + user_brief 시드) — 추천
- ②devplan 하위 assets/vendor/에만 — 가볍지만 devplan 리포가 비대해지고 devplan 밖 프로젝트가 참조하기 어색
- ③tools/ 하위 — tools는 실행 도구 폴더라 "읽는 자산"과 성격이 다름
→ [페페] ①선택. 소스가 계속 늘어난다는 전제에서 "폴더 추가 + 카탈로그 1항목"이면 끝나는 틀이 필요했다.
수급 범위는 오프라인으로 완결되는 것으로 잡았다 — CDN 링크만 적어두면 사무실 PC·오프라인에서 안 열리므로 자산이 아니다. Bootstrap은 GitHub 릴리스에서 dist(컴파일 CSS/JS)·examples(공식 예제)·소스 tag zip에서 scss만, Icons는 릴리스 zip 전량(SVG 2078 + 웹폰트)을 받았다. 라이선스는 둘 다 MIT라 상업적 사용에 제약이 없고, 각 폴더에 업스트림 LICENSE를 그대로 뒀다. 유료 테마·NC 라이선스는 애초에 후보에서 뺐다.
서빙 경로에서 예상 못 한 벽을 만났다. devplan 정적 서버(8799 app.py, BASE=C:\dev\devplan)는 자기 루트 밖을 못 보므로 C:\dev\design-refs를 정션(mklink /J)으로 붙였는데 404가 났다. 같은 깊이의 실디렉터리는 200이고, 새로 띄운 Python 3.12 http.server는 같은 정션을 200으로 서빙했다 → 정션 자체가 아니라 그 서버 프로세스의 권한 문제다. 이어서 app.py에 /design-refs/* → 마스터 매핑 라우트(경로 탈출 방어 포함)를 넣고 재시작하려 했더니 프로세스가 상승권한이라 같은 계정인데도 taskkill이 "액세스 거부" — 코디가 재시작할 수 없다는 게 확정됐다(예약작업 devplan-dashboard는 delix·Limited로 등록돼 있지만 실행 중인 프로세스는 그 경로가 아니었다).
→ 결론 = 게시(publish) 복사. 브라우저가 실제로 요청하는 것만(dist·examples·아이콘 폰트/CSS/JSON·catalog.json) devplan\design-refs\로 복사한다. app.py 라우트는 되돌리지 않고 남겼다 — 서버가 언젠가 재시작되면 그쪽이 우선 적용되는데 상대 경로 구조가 같아 페이지는 어느 쪽이든 그대로 뜬다(충돌이 아니라 이중화). SCSS·소스맵·SVG 낱개는 게시하지 않는다(아이콘은 웹폰트 CSS로 전부 렌더된다).
예제 35종(비RTL) 분류와 뷰어 페이지는 워크플로 6에이전트로 돌렸다 — 분류 4(각 9종씩, HTML을 직접 열어 실제 클래스명 확인) + 페이지 설계 1 + 적대검증 1. 분류는 slug·한국어 이름·분류·설명·실제 컴포넌트·페페 작업 기준 용도(devplan 대시보드 / PFS 업무화면 / 계산기 사이트 / 랜딩)까지 채웠다.
페이지의 핵심 요구는 "소스가 늘어도 페이지를 안 고친다"였다 → catalog.json을 fetch해 그리는 구조로 못박았다. 숫자(소스·예제·아이콘 수)를 화면에 하드코딩하지 않는 것도 같은 규칙이다(devplan의 "건수 드리프트" 교훈).
결정
- 위치·구조 확정 — 마스터
C:\dev\design-refs\(업스트림 구조 그대로 + LICENSE +_raw\원본 zip), 산출물catalog.json, 스크립트 2개(build_catalog.py생성 /publish_devplan.py게시), 창구devplan/design-refs.html. - 라이선스 원칙 — 상업적 사용 자유로운 것만(MIT·Apache·CC-BY). 유료 테마·NC는 받지 않는다.
- 수치는 실측 — 파일 수·용량·아이콘 수를
build_catalog.py가 walk해서 채운다. 수기 표기 금지. - 소스 추가 4단계 — 폴더 해제 →
SOURCES1항목 →build_catalog.py→publish_devplan.py. 페이지는 손대지 않는다. - devplan 페이지에 부트스트랩 CSS를 링크하지 않는다 — 테라코타 웜톤을 덮어써 테마 게이트가 FAIL한다. 예제는 iframe 안에서만(아이콘 CSS는 색 선언이 없어 링크 안전, FAIL 0 실측).
산출물·커밋
C:\dev\design-refs\신설 —README.md·build_catalog.py·publish_devplan.py·catalog.json·bootstrap-examples.json(35종 분류) ·_raw\(zip 4개) ·bootstrap-5.3.8\(dist 44 · examples 92 · scss 102 · LICENSE) ·bootstrap-icons-1.13.1\(SVG 2078 + 웹폰트). 자산 2,320개 / 15.4MB.C:\dev\devplan\design-refs.html신설 — 카탈로그 구동 뷰어(요약 바 · 소스 카드 · 예제 브라우저 iframe 라이브 프리뷰 + 뷰포트 375/768/100% 전환 + 경로 복사 + 해시 라우팅 · 아이콘 브라우저 2,078개 검색 · 사용법 · 소스 추가 절차).C:\dev\devplan\app.py—/design-refs/*매핑 라우트 추가(translate_path오버라이드,..·구분자 조각 차단).C:\dev\devplan\projects.json— 카드 1건(infra/live) →build_hub.py재빌드(36개).- user_brief
projects/design-refs/{handoff,rules}.md신설 + 이 세션문서.
다음
- [페페] 페이지를 훑고 다음에 받을 소스 지목(Tailwind CSS · Flowbite · daisyUI · Heroicons · Lucide 등). 절차는 rules §2 4단계.
- 이후 gptbutler 진행판 목업 샘플 작업으로 이어감(페페 예고).
- 기존 프로젝트에서 조각을 실제로 가져다 쓸 때 출처 예제를 한 줄씩 남기면 다음 화면이 빨라진다.
관계
- 주제 그룹: webdev
- 관련 문서:
design-refs-handoff,design-refs-rules,devplan-rules,gptbutler-handoff