로컬 미리보기부터 Cloudflare Pages까지: 중국어판 AI Pose Gallery 배포

프로젝트 소개

AI Pose Gallery 중국어판은 AI 드로잉, 3D 창작 및 사진 참고를 위한 정적 인체 포즈 갤러리입니다. 이 프로젝트에는 288개 그룹, 1439장의 다각도 참고 이미지가 수록되어 있으며, 원 사이트의 일본어 메타데이터를 중국어로 완전히 번역했습니다.

저장소에는 1439개의 JPG 썸네일과 1439개의 PNG 원본, 총 2878개의 이미지 파일이 함께 보관되어 있습니다. 프런트엔드는 종속성 없는 단일 페이지 애플리케이션으로, 프레임워크를 설치하거나 빌드 도구를 실행하지 않고도 사용할 수 있습니다.

온라인 데모에서 실제 동작을 확인하거나, GitHub 저장소에서 전체 프로젝트를 받을 수 있습니다.

갤러리에는 성인용 포즈 참고 자료가 포함되어 있으며, 일부 분류명에는 성행위 관련 용어가 포함되어 있습니다. 콘텐츠는 예술 창작, 동작 참고 및 프런트엔드 기술 학습 용도로만 사용되며, 미성년자는 접근하지 마세요.

주요 기능

검색 및 조합 필터

갤러리는 네 가지 체계로 콘텐츠를 구성하며, 각 체계의 이미지 수와 포즈 그룹 수를 표시합니다. 검색창에서는 포즈 이름, 번호, ID 및 분류 키워드를 검색할 수 있고, / 키를 누르면 검색창에 빠르게 포커스를 맞출 수 있습니다.

• 네 가지 포즈 체계 탭
• 26개 동작 분류
• 정면, 사선 측면, 측면, 위쪽 및 아래쪽의 다섯 가지 시점
• 체계, 분류 및 시점 조합 필터
• 필터 조건 한 번에 초기화

그룹별 및 개별 이미지 탐색

페이지에서는 포즈별 그룹 보기와 개별 이미지 보기 두 가지 모드를 제공합니다. 그룹 카드에는 동일한 포즈의 여러 각도 썸네일이 표시되며, 썸네일에 마우스를 올리거나 클릭하면 카드의 대표 이미지를 전환할 수 있습니다.

라이트박스를 열면 먼저 300×400 썸네일을 표시한 뒤 900×1200 PNG 원본을 불러옵니다. 라이트박스에서는 PNG 다운로드, 레코드 ID 복사 및 새 창에서 이미지 열기를 지원합니다.

• ← 및 →: 현재 포즈의 각도 전환
• ↑ 및 ↓: 포즈 전환
• Esc: 라이트박스 닫기
• 모바일에서 좌우로 밀기: 이미지 전환

반응형 레이아웃

데스크톱에서는 여러 열의 그리드를 사용하고, 모바일에서는 두 열의 그리드를 사용합니다. 모바일 기기에서는 필터 패널을 펼치거나 접을 수 있어 작은 화면에서도 편리하게 탐색할 수 있습니다.

데이터 규모 및 구조

1439개의 레코드는 네 가지 체계에 분포합니다.

• 전신 1인・표준계: 365개
• 전신 1인・섹시계: 399개
• 상반신 1인: 400개
• 2인 포옹: 275개

프런트엔드는 실제로 data/pose-zh.json을 읽습니다. 각 레코드에는 고유 ID, 체계, 포즈 번호, 분류, 포즈 이름, 각도, 썸네일 경로, 원본 경로 및 검색 문자열이 포함됩니다.

{
  "id": "full_sexy_P001_front",
  "体系": "全身单人・性感系",
  "姿势编号": "P001",
  "分类": "站姿",
  "姿势名称": "S形站姿・胯部侧顶",
  "角度": "正面",
  "缩略图": "thumbs/…jpg",
  "原图": "img/…png",
  "检索": "用于前端模糊搜索的拼接串"
}

data/pose.json에는 원래의 일본어 필드와 데이터가 보존되어 있어 번역 교정이나 데이터 재반영에 사용할 수 있습니다. data/translations.csv에는 일본어와 중국어를 대조한 323개의 레코드가 제공됩니다.

프로젝트 받기

Git과 Python 3을 준비한 뒤 저장소를 복제하고 프로젝트 디렉터리로 이동합니다.

git clone https://github.com/anhao/ai-pose-gallery-zh.git
cd ai-pose-gallery-zh

프로젝트에는 npm 또는 Python 종속성 설치 단계가 없습니다. 핵심 페이지는 index.html에 있으며, 데이터와 이미지는 저장소의 해당 디렉터리에 이미 보관되어 있습니다.

주요 디렉터리

• index.html: 종속성 없는 단일 페이지 갤러리
• data/: 일본어 데이터, 중국어 데이터, 분류 및 번역 대조표
• thumbs/: 1439개의 300×400 JPG 썸네일
• img/: 1439개의 900×1200 PNG 원본 이미지
• scripts/: 다운로드, 번역 반영, 검증 및 배포 스크립트
• _headers: Cloudflare Pages 캐시 정책
• robots.txt 및 sitemap.xml: 검색 엔진 설정

로컬에서 갤러리 실행

페이지는 fetch를 통해 JSON 데이터를 불러오므로 index.html을 직접 두 번 클릭해서는 안 됩니다. 로컬 파일 프로토콜을 사용하면 브라우저가 보안 정책에 따라 요청을 차단합니다.

저장소 루트 디렉터리에서 Python HTTP 서버를 시작합니다.

python3 -m http.server 8000

그런 다음 다음 주소를 엽니다.

http://127.0.0.1:8000

페이지가 로드되면 다음 순서로 기본 조작을 익힐 수 있습니다.

1. 상단 탭에서 포즈 체계를 선택합니다.
2. 동작 분류와 하나 이상의 시점을 선택합니다.
3. 검색창에 포즈 이름, 번호, ID 또는 분류 키워드를 입력합니다.
4. 그룹 보기와 개별 이미지 보기 사이를 전환합니다.
5. 카드를 클릭해 라이트박스를 열고 키보드 또는 터치 제스처로 탐색합니다.
6. 라이트박스에서 PNG 원본을 다운로드하거나 레코드 ID를 복사합니다.

이미지 및 번역 데이터 유지 관리

이미지 다시 다운로드

저장소에서는 병렬 다운로드 스크립트를 제공합니다. 이미 존재하는 파일은 자동으로 건너뛰므로 명령을 반복 실행할 수 있으며, 중단된 다운로드의 재개와 자동 재시도를 지원합니다.

python3 scripts/download.py

기본 병렬 작업 수는 48입니다. 병렬 작업 수를 조정하려면 WORKERS를 설정할 수 있습니다.

WORKERS=64 python3 scripts/download.py

중국어 번역 업데이트

번역 사전은 scripts/i18n.py에 있습니다. 번역문을 수정한 후 반영 스크립트를 실행해 중국어 데이터를 다시 생성합니다.

python3 scripts/apply_translation.py

생성된 결과는 프런트엔드에서 읽습니다. 업데이트 후에는 data/pose-zh.json의 체계, 분류, 포즈 이름, 각도 및 검색 필드가 예상대로인지 확인하는 것이 좋습니다.

이미지 무결성 검증

검증 스크립트는 2878개 파일의 존재 여부, 파일 크기 및 이미지 헤더를 검사합니다.

python3 scripts/verify.py

자료를 다시 다운로드하거나 디렉터리를 이동하거나 정식으로 배포하기 전에 검증을 실행하면 운영 환경에서 이미지가 누락되거나 손상되는 위험을 줄일 수 있습니다.

Cloudflare Pages에 배포

이 프로젝트는 순수 정적 사이트이므로 GitHub에 연결한 뒤 Cloudflare Pages에서 자동으로 배포하는 방식을 권장합니다.

1. Cloudflare Dashboard에 로그인합니다.
2. Workers & Pages로 이동한 뒤 Create, Pages, Connect to Git을 차례로 선택합니다.
3. 프로젝트 저장소를 선택하고 프로덕션 브랜치를 main으로 설정합니다.
4. Framework preset을 None으로 설정합니다.
5. Build command를 bash scripts/build.sh로 설정합니다.
6. Build output directory를 dist로 설정합니다.
7. 저장하고 배포하면 일반적으로 약 2~5분 후 https://<project>.pages.dev 주소를 사용할 수 있습니다.

이후 프로덕션 브랜치에 git push할 때마다 Cloudflare Pages가 자동으로 다시 빌드하고 배포합니다.

Build output directory를 저장소 루트로 직접 설정하지 마세요. 루트 디렉터리의 .git에는 수백 MB의 데이터가 포함될 수 있으며, Cloudflare가 그 안의 pack 파일을 스캔할 때 25 MiB 단일 파일 제한에 걸릴 수 있습니다. scripts/build.sh는 사이트에 필요한 파일만 dist로 복사합니다.

저장소의 가장 큰 단일 파일은 약 917 KB이며, 배포 디렉터리에는 약 2883개의 파일이 있습니다. 이는 Cloudflare Pages의 단일 파일 25 MiB 이하, 한 번의 배포당 20000개 이하 파일 제한을 충족합니다.

명령줄로 배포

GitHub에 연결하지 않는 경우에도 먼저 배포 디렉터리를 생성한 다음 Wrangler로 업로드할 수 있습니다.

bash scripts/build.sh
npx wrangler pages deploy dist --project-name ai-pose-gallery-zh

_headers에는 img/ 및 thumbs/에 대해 1년간의 강력한 캐시가 설정되어 있어 변경되지 않은 이미지를 브라우저가 반복 요청하는 것을 방지합니다.

고급 설정 권장 사항

정식 도메인 변경

저장소의 절대 주소는 기본적으로 https://ai-pose-gallery.anhao.app/를 가리킵니다. Fork한 후 자체 도메인에 배포하려면 다음 위치도 함께 수정해야 합니다.

• index.html의 canonical 주소
• Open Graph의 og:* 주소
• Twitter Card의 twitter:* 설정
• JSON-LD 구조화 데이터의 사이트 주소
• robots.txt의 sitemap 주소
• sitemap.xml의 홈페이지 주소

이 주소들을 일관되게 업데이트하면 사용자 지정 도메인과 pages.dev 도메인이 검색 엔진에서 중복 페이지로 간주되는 것을 방지할 수 있습니다.

SEO 의미 유지

페이지에는 독립적인 description, keywords, author, Open Graph, Twitter Card와 WebSite 및 ImageGallery JSON-LD 데이터가 이미 설정되어 있습니다. 프런트엔드를 수정할 때는 단일 주 제목, 명확한 섹션 제목, 포즈 이름과 시점을 포함한 이미지 대체 텍스트를 계속 유지해야 합니다.

썸네일은 지연 로딩을 사용하며, 라이트박스에서는 작은 이미지를 먼저 표시한 뒤 원본을 요청합니다. 페이지 기능을 확장할 때도 이 로딩 순서를 유지하여 900×1200 PNG를 동시에 요청함으로써 첫 화면 속도가 저하되지 않도록 하는 것이 좋습니다.

데이터 수정 시 필드 일관성 유지

검색, 필터, 그룹화 및 각도 전환은 모두 pose-zh.json의 필드에 의존합니다. 레코드를 수동으로 편집할 때는 id의 고유성, 이미지 상대 경로, 체계 이름, 분류, 포즈 번호 및 각도 이름에 특히 주의하고, 수정 후 검증 스크립트를 실행해야 합니다.

저작권 및 사용 범위

이미지와 원본 데이터의 저작권은 원작자인 ギア에게 있습니다. 저장소 유지 관리자는 이러한 자료에 대한 권리를 주장하지 않으며, 이 프로젝트는 원작의 상업적 사용을 허가하는 것이 아닙니다.

scripts/ 및 index.html의 코드는 MIT 라이선스를 따르지만, 이 라이선스는 img/, thumbs/ 및 data/에 포함된 이미지와 원본 데이터를 포함하지 않습니다. 자료를 재배포하거나 사용하기 전에 해당 용도가 관련 저작권 요건을 충족하는지 확인해야 합니다.

요약

AI Pose Gallery 중국어 버전은 데이터를 완전히 중국어로 현지화하고, 로컬 이미지 리소스와 반응형 프런트엔드를 하나의 종속성 없는 정적 프로젝트에 통합했습니다. Python HTTP 서버를 통해 로컬에서 미리 볼 수 있으며, 내장 스크립트를 사용해 리소스를 다시 다운로드하고 번역을 업데이트하며 자료를 검증할 수 있습니다. 그런 다음 Cloudflare Pages로 빠르게 배포할 수 있습니다. 자체 버전을 배포할 때는 도메인과 관련된 SEO 설정을 조정하고 프로젝트의 콘텐츠 안내와 저작권 범위를 준수해야 합니다.