세션 — AI 스터디 발표용 개발성과 포트폴리오 페이지 (2026-09-04(금) KST)

[페페] 「오늘 새로운 AI스터디에 참석해서 개발성과에 대해 서로 간략히 대화할 예정이다. 내 시스템에서 카테고리별로 분류해서 정리해줘」 → 이어서 「웹디자인 에이전트 상의해서 HTML 파일로 만들어서 devplan 페이지 올려줘. 사이드 메뉴 및 항목별 예시 캡쳐 추가, 연결되는 장이 많은 항목은 슬라이딩 적용」.

만든 것

페이지 = C:\dev\devplan\dev-portfolio.html (http://localhost:8799/dev-portfolio.html · 원격 100.108.234.45:8799)
캡처 = C:\dev\devplan\media\dev-portfolio\*.jpg 52장(웹경로 /media/dev-portfolio/)
원본 정리본 = C:\dev\_docs\ai-study-portfolio-2026-09-04.md(마크다운 · 페이지의 텍스트 출처)
구성 = 7개 카테고리(PFS · 오토캐드/CAD · 인스타 · AI운영 도구 · 업무 자동화 · 웹서비스 · 게임R&D) + 발표 추천 5

캡처를 어떻게 모았나 (재현 가능)

스크립트(전부 `C:\dev\devplan\`)	하는 일
`_shots_pfs.py`	PFS 테스트 서버 로그인 → 19개 메뉴 순회 캡처(읽기 전용, 저장 버튼 안 누름)
`_shots_pfs_demo.py`	PNCAD·네스팅은 빈 화면이라 데모 상태를 만들어 캡처(모달 닫고 카탈로그 배치 / 샘플→자재 자동등록→네스팅 실행)
`_shots_nest2.py`	네스팅 「도면(시트별 배치도)」 펼쳐 배치도 캡처
`_shots_web.py`	devplan 페이지 6종 + rollcalculator·calcucalcu 공개 사이트
`_shots_collect.py`	기존 산출물(인스타 카드·CAD·게임·poin-site 등) 23장을 폭 1600 JPEG 로 수집
`_shots_shrink.py`	2880px PNG → 폭 1920 JPEG(7.8MB → 5.4MB), PNG 삭제

🔑PFS 캡처는 테스트 서버(pfs-test)에서 찍었다 — 운영 데이터 노출을 줄이려는 것. 그래도 화면에는 실제 현장명·거래처명이 그대로 보인다(예: 발주서 정리). 발표에서 회사명 노출이 곤란하면 그 캡처만 빼거나 블러가 필요하다 → 페페 판단.

디자인 — web-designer 처방 반영

허브 쉘(apply_shell.py) 미적용 — 쉘의 .hub-side(170px, 프로젝트 이동용 고정 9링크)와 이 페이지의 섹션 네비가 둘 다 왼쪽에 서면 발표 화면 폭을 갉아먹는다. 선례 = ai-study-plan.html(쉘 미적용). 파일 맨 위에 「쉘 미적용 유지」 주석을 박았다 → 나중에 습관적으로 apply_shell.py --all 을 돌리면 사이드바가 2개 겹친다(대상에서 뺄 것).
좌측 섹션 네비 240px sticky(md 이상) / md 미만은 offcanvas + 좌측 상단 햄버거(우상단 88px 은 qahelper 가 덮는다). 하이라이트 = 부트스트랩 네이티브 ScrollSpy(rootMargin:'0px 0px -60%').
PFS만 표 + 캐러셀 분리 — 메뉴↔기능은 1:1 구조 데이터라 표가 맞고, 표 행마다 이미지를 넣으면 표가 안 읽힌다. 나머지 6개 카테고리는 카드 그리드(minmax(300px,1fr) + align-items:start — 캡처 없는 카드가 늘어나지 않게).
캡처 프레임 = aspect-ratio:16/10 + object-fit:contain(cover 로 자르면 정작 보여줄 버튼·컬럼이 날아간다). 세로 캡처(인스타 카드)는 로드 후 naturalHeight > naturalWidth*1.1 이면 .tall(3/4) 로 자동 전환.
슬라이딩 = CSS scroll-snap + 버튼 몇 줄(라이브러리 0). 터치 스와이프·모멘텀이 공짜로 따라오고 JS 가 죽어도 가로 스크롤로 열람된다. 1장 = 캐러셀 안 씀 · 2~5장 = 점 인디케이터 · 6장 이상 = 「N / 전체」 카운터(점 6개 이상은 오터치).
타이포 = h1 32 / h2 24 / h3 17 / 본문 15 / 표 14 / 캡션 13px(하한). 발표 화면 기준으로 devplan 관행(14px)보다 한 단계 크게.

검증

실측 C:\dev\devplan\_verify_portfolio.py — 26/26 ALL PASS (콘솔에러 0 · 404 0 · 섹션 8 · 사이드바 8+하위 5 · 전 캡처 URL 52개 200 · 캐러셀 이동/복귀 · 인디케이터 규칙 · ScrollSpy active · sticky · 라이트박스 열림/ESC · computed style 폰트 13px 미만 0 · 가로 스크롤 0 @1920/1440/1024/768/390 · 폰 offcanvas).
정적 check_font.py FAIL 0 · check_theme.py FAIL 0 WARN 0.
허브 등록 = projects.json(cat=study, status=live) + project_state.json(stage 5, approval done) → build_hub.py 재생성, 카드 70건 검증 통과.

함정 — 이번에 실제로 밟은 것

🔴offcanvas-md 사이드바에 position:sticky 를 주면 폰에서 화면 밖으로 안 빠진다 — 내 규칙이 부트스트랩 뒤에 선언돼 .offcanvas{position:fixed} 를 이겼고, 390px 에서 가로 스크롤 288px 이 생겼다. ⛒sticky·width 는 @media (min-width:768px) 안으로.
🔴부트스트랩 ScrollSpy 의 threshold 는 배열이다 — threshold: 0.1 을 주면 콘솔에 타입 에러가 나고 스파이가 통째로 죽는다 (하이라이트가 영영 안 붙는데 화면은 멀쩡해 보인다). 옵션을 빼거나 [0.1].
⚠loading="lazy" 이미지는 가로 캐러셀 밖 슬라이드가 로드 안 된 채로 남는다 → naturalWidth==0 을 「깨짐」으로 판정하면 오탐. 판정은 complete && naturalWidth==0 으로 좁히고, 전체 URL 은 fetch(HEAD) 로 따로 200 확인.
⚠qahelper 가 주입하는 UI 는 12px — 실측 폰트 검사에서 우리 요소가 아닌 qa-* 가 FAIL 로 잡힌다(검사에서 제외할 것).

남은 것 / 페페 판단

⏳실데이터 노출 — 발표 자리에서 거래처·현장명을 보여도 되는지(빼거나 블러 처리 가능).
⏳오토캐드 플러그인 실행 화면이 약하다 — acad-tread·autocad-plot 은 캡처 자산이 0이라 도면 화면·목업으로 채웠다. 진짜 플러그인 UI 를 넣으려면 AutoCAD 를 띄워 수동 캡처가 필요하다.
🔜web-designer 제안 미적용 = ①Space/PageDown 로 카테고리 넘기는 「발표 모드」 ②카드마다 상세 devplan 페이지 바로가기 링크.