2026-09-12 세션 — 해달이 네이버 상세페이지 생성기 목업

기록: [코디] · 26.9.11(금) 저녁 ~ 26.9.12(토) 새벽 KST · 결정 원장 = C:\dev\devplan\danggeun\directives.json D027

논의·대안

• [페페] 해달이(웹디자이너)의 작업 = 네이버 스마트스토어 상품 상세페이지 제작. 상단 캐러셀 · 상세 이미지 · 영상 · 옵션 사진 · 하단 상품정보를 우측 카드 목록으로 넣고, 가운데는 카드별 슬라이드(상세 조정) + 스크롤 이어보기. 해달이 페이지에 링크 · 새 페이지 목업 · 그릴링부터. 엑셀 자료는 내일.
• 실물 수집: 네이버가 headless · Playwright 크롬 · curl(429) · WebFetch · 에뮬 컨텍스트를 전부 「서비스 접속 불가」로 막았다 → [페페] 「새 CDP 열어 작업」 → CDP 9347 신설(portgate claim · 런처 2종) · 실 크롬 기본 컨텍스트만 통과. __PRELOADED_STATE__ 는 빈 뼈대라 렌더 DOM · 스크린샷으로 구조를 떴다.
• 그릴링 3묶음 9문 — 동작 범위(정적 / 동작 프로토타입 / +내보내기) · 카드 종류 · 링크 노출 범위 · 샘플 이미지(자리표시 / 나노바나나) · 조정 깊이 · 미리보기 폭 · 저장(localStorage / +IndexedDB) · 샘플 주제 · 엑셀 연결 · 링크 위치 · 파일 · 허브.
• 계획 3단계 — Plan(fable) 구현계획 · 코덱스 리스크 5(고아 blob · 리사이즈/EXIF · 매칭 정규화 · 삭제 되돌리기 · 내보내기 미정) · web-designer 배치 처방. 충돌 조정 = 설정 패널은 아래(1600+ 에서만 옆 · 옵션 카드는 항상 아래) · 스크롤에서 카드 누르면 그 카드 슬라이드 편집 · 우측 320px · 폰 = 보기 전용.

결정

• 동작 프로토타입(카드 추가 · 삭제 · 숨김 · 드래그 순서 · 설정 즉시 반영 · 내 사진 넣기 · 자동 저장). 내보내기는 엑셀 · 피그마 흐름을 본 뒤.
• 카드 6종 = 대표 캐러셀 · 상세 이미지 · 영상(유튜브 주소 = 실제 embed) · 옵션 사진(열 2/3/4 · 라벨 항목 · 라벨 위치 · 표 편집) · 상품정보 표 · 텍스트. 옵션 사진만 깊게, 실사용 추가 요청은 해달이가.
• 폭 = 모바일 390 기본 · PC 860 전환. 저장 = 구성 localStorage · 넣은 사진 IndexedDB · 샘플로 되돌리기.
• 엑셀 = 옵션 표 붙여넣기(열 순서 옵션명 · 코드 · 사이즈 · 가격 — 임시) · 사진 여러 장 → 파일명 = 코드 행 자동 매칭. 실제 열 · 이름 규칙은 자료 확인 후.
• 링크 = 해달이 내부 페이지 상단 카드 1개(검토본 · 공개링크엔 안 나감). 아트조이 이미지 복사 금지 — 샘플은 나노바나나 12장(가상 명화그리기 키트 · 저작권 끝난 명화 도안).
• 계획은 페이지 안 「계획 · 결정」 절로 합침(계획 페이지 별도 없음) · 허브 카드 1장.

산출물·커밋

• 페이지 C:\dev\devplan\danggeun-haedali-detail.html(손으로 쓴 단일 앱 · 빌더 밖 · BS 5.3.8 + theme.css + qahelper).
• 샘플 C:\dev\devplan\media\danggeun\haedali-detail\(캐러셀 4 · 상세 3 · 옵션 4 · 영상 썸네일 1) — 생성 C:\dev\_bench\haedali-detail\gen_samples.py · 하단 흰 띠 보정 fix_band.py(2장).
• 링크 = C:\dev\devplan\danggeun\members.json 해달이 mockups + C:\dev\devplan\build_danggeun.py body_member(tabs 전용) + 자체검사 3줄.
• 허브 = C:\dev\devplan\projects.json danggeun-haedali-detail + project_state.json 항목.
• CDP 9347 = C:\dev\tools\cdp-profiles\launch_haedali.bat + launch_haedali_hidden.vbs · 장부 C:\dev\tools\portgate\PORTS.md.
• 검증 = C:\dev\_bench\haedali-detail\verify_mockup.py 41/41 · 빌더 [ALL PASS] · check_font / check_theme FAIL 0.

다음

• [페페] 목업 육안 검토 · 해달이 전달(공개본 링크) 여부 결정.
• 엑셀 자료가 오면 옵션 열 순서 · 이름 규칙(P1) · 파일명 매칭 규칙을 실물에 맞춘다.
• 내보내기 형식(긴 이미지 · 스마트에디터 붙여넣기용 HTML) 결정.

26.9.12 피드백 반영 · 공개(D028)

• [페페] 「좌측 사이드 = 항목 슬라이드 · 우측 = 메뉴 · 폴딩 토글 기본 펼침 · 슬라이드/스크롤 균형 · 공개링크 반영」.
• 3단 레이아웃(왼쪽 카드 설정 · 가운데 미리보기 · 오른쪽 카드 목록 · 양옆 접기 토글 상태 저장) · 실측 45/45.
• 공개 = publish_dg.py bake_mockup(인라인 · 토큰 접두 평면 파일 · mock_tokens.json) → https://poin-mini.tailc5d3c1.ts.net/dg/VAz5SFwveInguWWC.html · 해달이 공개 페이지 🧪 링크.

관계

• 주제 그룹: danggeun-ai-study
• 관련 문서: danggeun-ai-study handoff · rules(🆕 네이버 수집 함정)