시각 상세 페이지 템플릿 생성
기본 제공: 상품별 편집 가능한 롱 이미지
- 상세 페이지 템플릿은 기본적으로 편집 가능한 롱 이미지 PSD 규칙을 사용합니다. 입력된 각 상품에 대해 해당 상품의 내용이 적용된 독립적인 롱 이미지를 하나씩 출력하여 상품별로 보관합니다.
- 현재 기본 템플릿은
샤오산행풍감동바지-최종.psb(790 × 40000 px)를 사용하며, 전체 캔버스를 유지할 경우 PSB로 제공합니다. 작업에서 이전 마스터 파일을 명시적으로 지정할 수 있습니다. 상품 번호, 소재, 사이즈 범위 및 표는 원래의 문자별 폰트 규칙을 따릅니다. - 상품 이미지와 모델/배경 이미지는 각각 교체 가능한 임베디드 스마트 객체를 사용합니다. 상품 텍스트, 색상 이름 및 표 셀은 Photoshop 기본 텍스트 레이어를 사용합니다. 새 마스터 파일의 S3 사이즈 선택, S4 빠른 사이즈 선택, S5 피팅 보고서는 실제 행렬 수에 따라 그리드를 조정하며, 마스터 파일의 각 영역 제목, 색상, 모듈 위치 및 고정 디자인을 유지합니다.
- 사용자가 JPG 모듈을 명시적으로 요청할 경우 아래 JPG 프로세스를 사용합니다. 사용자가 JPG도 함께 요청할 경우 필요에 따라 추가로 내보냅니다.
상품별 템플릿 적용
- 입력 루트 디렉토리 내의 모든 상품을 파악하고, PSD/PSB 마스터 파일과 실제 레이어를 대조합니다. 고정 디자인과 상품별 교체 내용을 구분합니다.
- 각 상품에 대해 작업 JSON과 개별 출력 경로를 준비합니다. 상품 텍스트, 사이즈 표, 빠른 사이즈 선택, 기존 피팅 보고서, 상품 이미지, 모델/배경 이미지 및 기타 상품별로 변경되는 모듈을 바인딩합니다. 기존 상품 JSON을 데이터 소스로 재사용할 수 있습니다.
scripts/build_editable_long_psd.py스크립트를 사용하여 상품별로 JSX를 생성한 후 Photoshop을 통해 실행합니다. 마스터 파일 슬롯이 일치하지 않거나 해당 상품의 소재가 누락된 경우 상품 번호, 모듈 및 누락 항목을 나열합니다. 이전 상품의 동적 콘텐츠, 병합된 JPG 또는 완료되지 않은 마스터 파일 복사본은 해당 상품의 최종 결과물로 제공해서는 안 됩니다.- 각 출력 PSD를 다시 열어 상품 번호, 표시되는 콘텐츠, 텍스트 및 표의 편집 가능 여부를 확인하고, 상품 이미지와 배경 이미지가 스마트 객체 콘텐츠를 개별적으로 열 수 있으며 외부 링크에 의존하지 않는지 확인합니다. 상품별 최종 결과물 경로와 완료되지 않은 항목을 나열합니다.
환경 준비
처음 사용하기 전에 스킬의 scripts/ 디렉토리에서 Python 환경을 초기화하세요:
cd scripts
uv sync
uv가 설치되지 않은 경우 먼저 다음을 실행하세요:
- macOS/Linux:
curl -LsSf https://astral.sh/uv/install.sh | sh - Windows:
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
초기화가 완료되면 반드시 .venv 내의 Python을 사용하여 도구 스크립트를 실행하세요.
입력 구조
상품 소재 구조는 일반적으로 다음과 같습니다:
<input-root>/
<product-folder>/
product_data.json
제품정보.jpg|png
사이즈선택.png|jpg|jpeg
빠른사이즈선택.png|jpg|jpeg
투명이미지/
<색상명>.png
모델이미지/
1.jpg
2.jpg
3.jpg
내장 템플릿 디렉토리는 다음과 같습니다:
template/
템플릿 구조는 일반적으로 다음과 같습니다:
template/
01제품정보.jpg
02투명이미지.jpg
03사이즈선택.jpg
04추천사이즈.jpg
05빠른사이즈선택.jpg
모델이미지1.jpg
모델이미지2.jpg
모델이미지2오버레이.png
모델이미지3.jpg
실행 흐름
- 먼저 입력 루트 디렉토리와 출력 루트 디렉토리를 확인합니다. 기본적으로 스킬 내장
template/및assets/를 사용합니다. - 상품에 아직 구조화된 데이터가 없는 경우, 먼저 GPT 자체의 이미지 인식 기능을 사용하여
제품정보,사이즈선택,빠른사이즈선택세 가지 이미지를 읽고, 상품별로 병합하여 JSON을 생성한 후scripts/output/product_data/<상품폴더명>-product_data-<타임스탬프>.json에 저장합니다. - 이미지 테이블 데이터 변환 규칙을 읽고 상품 JSON을 검증하며, 불확실한 내용은
warnings에 기록하고, 허위로 생성하지 않습니다. - 렌더링 스크립트를 실행하기 전에 먼저 상품에 모델 이미지 소재가 있는지 스캔합니다. 읽을 수 있는 모델 이미지가 있으면 반드시 먼저 AI 심미적 선택/크롭을 사용하여 사용 가능한 각 모델 이미지에 대해 원본 이미지의 픽셀 좌표를 출력하고
scripts/output/visual_model_selection/visual_model_selection-<타임스탬프>.json에 저장합니다. - 범용 배치 처리 스크립트를 실행하며, 상품명이나 상품 데이터를 하드코딩하지 않습니다. 이번 실행에서 AI 좌표 JSON이 생성된 경우 반드시
--visual-model-selection "<좌표json경로>"를 명시적으로 전달해야 하며, 스크립트의 자동 폴백 또는 자동 데이터 대기에 의존하지 않습니다. - 각 상품에 대해 별도의 출력 하위 폴더를 생성하며, 하위 폴더명은 원래 상품 폴더명을 유지합니다.
- 최종 이미지만
--output-root/<상품폴더명>/에 출력하고, 배치 처리 보고서는scripts/output/report/render_report-<타임스탬프>.json에 통합 출력합니다. - 사용자가 "계층 파일", "PSD", "Photoshop 2차 조정" 또는 디자이너 복구/수정 결과물을 요청하는 경우
scripts/create_layered_psd_package.py를 대신 사용합니다. 이 스크립트는 JPG, PSD 목록 및 Photoshop JSX 어셈블리 스크립트를 동시에 생성합니다. - 출력 후 시각적 검사 및 크기 검사를 수행하며, 특히 흰색 테두리, 녹색 선 잔여, 표 잔상, 텍스트 오정렬, 투명 이미지 크기 불규칙 및 모델 이미지 크롭을 확인합니다.
- 보고서를 읽어 좌표가 있는 모든 모델 이미지의
mode가visual_model_selection인지 확인합니다.cover_crop으로 폴백된 경우 좌표 누락, 좌표 무효, 원본 파일 없음 또는 현재 환경에서 신뢰할 수 있는 시각적 판단이 불가능한지 각각 설명해야 합니다.
Photoshop 계층 파일 흐름
사용자가 디자이너가 2차 조정할 수 있는 파일이 필요한 경우 Photoshop 계층 파일 흐름을 사용합니다:
cd scripts
uv run python create_layered_psd_package.py `
--input-root "<input-root>" `
--output-root "<output-root>"
스크립트는 <output-root>/_photoshop_layered/에 다음을 생성합니다:
layered_psd_manifest.json
build_layered_psd.jsx
그런 다음 Photoshop을 호출하여 PSD를 생성합니다:
powershell -ExecutionPolicy Bypass -File run_photoshop_jsx.ps1 `
-JsxPath "<output-root>/_photoshop_layered/build_layered_psd.jsx"
PSD는 다음에 출력됩니다:
<output-root>/<상품폴더명>/_psd/
계층 규칙:
- 템플릿 배경은 별도로
00 템플릿 배경으로 지정됩니다. - 동적으로 교체되는 콘텐츠는 켜고 끌 수 있는 별도의 레이어로 구성됩니다(예: 상품 투명 이미지, 모델 사진, 표 레이어, 데이터 영역 배경색).
- 각 PSD에는 기본적으로 숨겨진
99 완성품 참조(숨김)레이어가 포함되어 디자이너가 대조 확인할 수 있습니다. - 표와 복잡한 혼합 텍스트는 픽셀 레이어로 시각적 일관성을 유지합니다. 제품 정보와 색상명은 가능한 한 Photoshop 텍스트 레이어로 생성되어 2차 미세 조정이 용이합니다.
- 기존 JPG/소재를 기반으로 PSD만 재구성하고 JPG를 다시 렌더링하지 않으려면
--skip-jpg-render를 추가할 수 있습니다.
필독 세부 규칙
작업에 따라 해당 reference를 읽으세요:
- 배치 작업을 처리하기 전에 배치 실행 규칙을 읽으세요.
- 고정 폰트 리소스를 알아야 하는 경우 내장 리소스 규칙을 읽으세요.
- 템플릿 리소스를 알아보거나 교체해야 하는 경우 내장 템플릿 리소스 규칙을 읽으세요.
- 이미지/표 소재에서 데이터를 가져와야 하는 경우 이미지 테이블 데이터 변환 규칙을 읽으세요.
- 텍스트를 그리거나 폰트 문제가 발생하는 경우 폰트 및 텍스트 규칙을 읽으세요.
01제품정보.jpg를 처리할 때 제품 정보 규칙을 읽으세요.02투명이미지.jpg를 처리할 때 투명 이미지 규칙을 읽으세요.03사이즈선택.jpg또는05빠른사이즈선택.jpg를 처리할 때 표 규칙을 읽으세요.모델이미지1.jpg,모델이미지2.jpg,모델이미지3.jpg를 처리할 때 모델 이미지 규칙을 읽으세요.- AI 주관적 심미적 크롭 좌표를 사용해야 하는 경우 스마트 모델 이미지 크롭 규칙을 읽으세요.
- 스크립트를 사용하거나 유지 관리할 때 스크립트 설명을 읽으세요.
- PSD 계층 파일을 출력하거나 Photoshop을 제어해야 하는 경우 Photoshop 계층 파일 규칙을 읽으세요.
현재 스크립트
scripts/detail_template_replacer_2000.py
scripts/main.py
scripts/create_layered_psd_package.py
scripts/run_photoshop_jsx.ps1
scripts/create_product_data_template.py
scripts/validate_product_data.py
실행
예제 명령어:
cd scripts
uv run python main.py `
--input-root "<input-root>" `
--output-root "<output-root>"
이번 실행에 모델 이미지 소재가 있는 경우 먼저 visual_model_selection-<타임스탬프>.json을 생성한 후 좌표 파일을 명시적으로 전달하세요:
cd scripts
uv run python main.py `
--input-root "<input-root>" `
--output-root "<output-root>" `
--visual-model-selection "output/visual_model_selection/visual_model_selection-<타임스탬프>.json"
외부 데이터 디렉토리나 외부 템플릿 디렉토리를 사용하는 경우:
cd scripts
uv run python main.py `
--input-root "<input-root>" `
--output-root "<output-root>" `
--data-dir "<data-dir>" `
--template-dir "<custom-template-dir>" `
--visual-model-selection "<visual_model_selection-json>"
검수 기준
- 모든 입력 상품 폴더는 처리되거나 그 이유가 보고되어야 합니다.
- 모든 출력 이미지의 너비는 790px이어야 합니다.
- 템플릿의 고정 텍스트, 배경, 녹색 블록, 로고, 장식선, 오버레이 레이어는 동적 드로잉으로 파괴되어서는 안 됩니다.
- 상품 데이터는
product_data.json또는 이에 상응하는 구조화된 파일에서 가져와야 하며, Python에 하드코딩되어서는 안 됩니다. - 빈 값은 비워두고 기본값을 추가하지 않으며 추정하지 않습니다.
- 흰색 테두리, 녹색 선 잔여, 표 잔상, 녹색 헤더 흰색 세로선이 나타나서는 안 됩니다.
- 동일한 유형의 텍스트는 글자 크기와 굵기가 일관되어야 하며, 혼합 숫자가 위아래로 불규칙하게 움직여서는 안 됩니다.
- 투명 이미지의 동일 페이지 내 상품 시각적 크기가 일관되어야 하며, 색상명이 상품에 가깝고 동일 기준선에 있어야 합니다.
- 모델 이미지의 주체가 변형되지 않아야 하며, 머리와 몸통의 완전성을 우선적으로 보장해야 합니다.
- 모델 이미지 소재가 포함된 배치 처리는 먼저 AI 좌표 JSON을 생성한 후 스크립트를 실행해야 합니다. 보고서에서 해당 모델 이미지는
visual_model_selection으로 표시되어야 하며, AI 좌표를 사용할 수 없는 이유가 명시적으로 설명되지 않은 경우 예외입니다.