크라우니 웹스킨 이미지 실사화 파이프라인 (추출·주입)

개요

crowny-webskin 30종 스킨의 index.html에 내장된 data-ai-prompt="..." 자리에, 외부에서 생성한 AI 이미지를 나중에 끼워 넣을 수 있도록 지시서 추출기 + 이미지 주입기 2도구를 구축. 이미지 생성 자체는 범위 밖(외부) — 이 파이프라인은 추출·주입만 담당.

무엇을 했는지

1. 이미지지시서 추출 (도구/이미지지시서.한선)

• 스킨 30 디렉토리를 파일목록()으로 순회(숫자 프리픽스 필터), 각 index.html에서 data-ai-prompt="..." 값을 네이티브 포함()/부분() 스캔으로 전량 추출.
• 64KB 근접(≥65000자) 파일은 버퍼파일읽기+개행 라인단위 폴백(CIF벡터.한선 선례 패턴 재사용) — 이번 30개는 모두 58946B 이하라 실제로는 직접 읽기() 경로만 탔음.
• PSV 라인은 덧쓰기()로 즉시 기록(대량 concat 금지, 문자열풀 480k 함정 회피). | 포함 시 ¦ 치환(현재 데이터엔 0건).
• 결과: 총 292행, 스킨 30종 전체. 최다 21-키즈플레이(21건), 최소 22-트러스트부동산(0건 — 이 스킨엔 data-ai-prompt 없음).
• 컴파일: ./hanseonc_high 도구/이미지지시서.한선 > 도구/이미지지시서.toau — 1871 큐브, 에러 0. 실행 결과 292건 = 파이썬 정규식 검증치와 정확히 일치.

2. 이미지 주입기 (도구/이미지주입.js + 동반 도구/이미지주입.한선)

• JS: node 이미지주입.js <slug> <이미지디렉토리>. 이미지 파일명 규약 <순번>.<jpg|jpeg|png|webp>(이미지지시서.psv 순번과 1:1).
• 동작: data-ai-prompt="의 n번째 등장 위치를 감싸는 태그를 찾아 인라인 style에 background-image:url('data:...;base64,...');background-size:cover;background-position:center를 upsert. 기존 style 있으면 병합(기존 background-image/-size/-position만 제거 후 재삽입), 없으면 태그명 뒤에 삽입.
• 단일 패스 처리: 전체 occurrence 위치를 먼저 수집 후 한 번에 문자열 재조립(위치 밀림 버그 회피).
• 원본은 <slug>/index.html.bak-preimg로 1회만 백업(존재하면 스킵) — 재실행해도 안전(멱등, 중복 주입 없음 실측 확인).
• 동반 .한선: "주입 대상 판정" 로직 미러 — 순번 파싱(순번추출), 확장자 화이트리스트(확장자허용인가: jpg/jpeg/png/webp), 크기 경고(크기경고인가: 500KB=512000B 초과 시 경고, 거절 아님). 가져오기 "문자열.한선" 사용(찾기/찾기뒤/소문자).
• 컴파일: 3567 큐브, 에러 0. 자체검증 5/5 통과 (정상 jpg/대소문자 WEBP+크기경고/jpeg, 순번없음 거절, 확장자미허용 거절).

3. 실주입 테스트 (02-라이프향기, 실사 과일 사진)

• 소스: /Users/ef/Downloads/07서지원_카페24_RIPE/images/ (카페24 실제 납품 사진 — 과일/프래그런스 톤이 라이프향기 스킨과 부합).
• /tmp/img-test/에 detail-fig-pear.jpg→0.jpg(419KB, PSV 0번 "무화과·배 향수병" 프롬프트와 정확히 매치), hero1.jpg→1.jpg(351KB), hero2.jpg→2.jpg(409KB) 준비.
• 1차 주입: 48,221B → 1,620,964B (+1.57MB, 3장 base64 인라인). data:image/jpeg;base64 3건 확인, 기존 SVG 노이즈 배경(무관한 CSS)까지 포함해 background-image 총 4건.
• 2차 재실행(멱등성 검증): 백업 스킵 로그 확인, background-image 여전히 4건(중복 없음), 태그0 내부 background-image 등장 1회만(교체 upsert 정상).
• 서빙 반영: curl http://127.0.0.1:9889/skins/02-라이프향기/ → HTTP 200, data:image grep count 4 (라이브 파일시스템 즉시 반영, 정적 서빙 경로라 재기동 불요).
• 원복: index.html.bak-preimg → index.html로 mv. 원복 후 48,221B(원본과 바이트 동일), background-image 1건(SVG만), 백업 파일 잔존 없음. 서빙 재확인 HTTP 200 / 48,221B / data:image 1건 — 판매본은 플레이스홀더 상태로 완전 복귀.

4. 학습

• crownycode-brain.sh learn "웹스킨이미지지시서추출" 도구/이미지지시서.한선
• crownycode-brain.sh learn "웹스킨이미지주입판정" 도구/이미지주입.한선

관련 파일 경로

• /Users/ef/crowny-webskin/도구/이미지지시서.한선 / .toau
• /Users/ef/crowny-webskin/이미지지시서.psv (292행, slug|순번|프롬프트)
• /Users/ef/crowny-webskin/도구/이미지주입.js
• /Users/ef/crowny-webskin/도구/이미지주입.한선 / .toau
• 테스트 소스: /Users/ef/Downloads/07서지원_카페24_RIPE/images/
• 테스트 스테이징(임시): /tmp/img-test/

잔여 이슈

• 이미지 생성기 자체는 이번 범위 밖 — AI 이미지가 준비되면 <순번>.<확장자> 규약으로 디렉토리에 넣고 이미지주입.js만 실행하면 됨.
• 30스킨 292곳 전부에 실사 채우려면 스킨당 반복 실행 필요(현재는 slug 1개씩 수동 호출 — 배치 래퍼는 미구현, 필요시 쉘 루프나 .한선 배치 스크립트 추가 가능).
• 이미지 1장 500KB 초과 시 "경고 후 진행"만 하고 리사이즈/압축은 하지 않음 — 대형 원본을 그대로 base64 인라인하면 index.html이 수 MB로 커짐(이번 테스트도 48KB→1.6MB). 판매본 최종 배포 전 압축 파이프라인 검토 여지.