1. 초기 점검 화면의 설정 버튼을 누르고 demo 체크를 해제합니다.
2. 이미지 설정에 image/photo01.webp 같은 경로나 image/001.webp ~ 100.webp 같은 범위를 입력하고 추가를 누릅니다. 또는 PC 이미지 선택으로 파일을 추가합니다.
3. 목록에서 경로 수정·위아래 이동·삭제가 가능합니다. JSON을 직접 편집했다면 JSON 코드 적용버튼을 누르세요.
4. 적용을 누르면 설정을 현재 브라우저에 저장하고 이미지를 다시 점검합니다. 점검 중에는 완료될 때까지 기다린 뒤 적용하세요.

이미지 최근 기록 보기에서는 적용한 비어 있지 않은 이미지 목록을 최대 10개까지 보관합니다. 기록 불러오기는 이미지 목록만 바꾸므로, 내용을 확인한 뒤 적용을 눌러 확정하세요. 목록의 편집 순서와 달리 실제 확대 재생 순서는 라운드마다 무작위로 정해집니다.

config.js의 window.APP_CONFIG에서 아래 두 항목을 수정하고 나머지 설정은 유지합니다.

// window.APP_CONFIG 객체 안의 demo와 images 항목
  "demo": false,
  "images": [
    "image/photo01.webp",
    "image/photo02.jpg",
    "image/001.webp ~ 100.webp",
    { "src": "image/101.webp ~ 120.webp", "alt": "행사 사진" }
  ],

경로는 루트 index.html 기준입니다. 파일명·대소문자·확장자를 맞춰 주세요. 범위는 시작과 끝을 모두 포함하며, 001처럼 앞자리 0이 있으면 자리수를 유지합니다. 양 끝은 같은 폴더와 확장자를 사용해야 합니다. 동일한 이미지 주소가 중복 등록되면 한 번만 사용합니다.

1. 이전에 설정 내보내기 (json)로 저장한 설정 파일을 준비합니다.
2. 초기 점검 화면에서 설정을 열고 설정 불러오기를 눌러 파일을 선택합니다. JSON 내용의 .json 또는 .txt 파일을 지원하며, 최대 크기는 4MB입니다.
3. 불러온 설정을 확인합니다.
4. 불러오기만으로는 적용되지 않습니다. 내용을 확인한 뒤 적용하기를 눌러 반영하세요.

• 설정 창의 적용은 현재 브라우저에 저장하며 config.js 파일에는 반영되지 않습니다. 같은 브라우저·같은 실행 위치에서 저장값을 사용합니다.
• 브라우저 저장값은 저장 당시의 config.js 설정값과 현재 값이 같을 때 복원됩니다. config.js의 설정값을 바꾸면 이전 브라우저 저장값보다 새 파일 설정을 우선합니다.
• 설정 내보내기 (json)는 현재 입력값을 config.json으로 다운로드합니다.
• 설정 불러오기는 JSON 내용의 .json 또는 .txt 파일을 지원합니다.(최대 4MB) 내용을 확인한 뒤 적용하세요. config.js 파일을 직접 불러오는 기능은 아닙니다.
• 초기화 (config.js)는 브라우저의 설정 저장값을 지우고 현재 페이지에서 읽은 config.js 원본을 다시 적용합니다. 테마와 이미지 최근 기록은 별도로 관리됩니다.

한 번의 확대에는 같은 방향의 이미지만 모아 표시합니다. 세로·정사각형 이미지는 visibleCount를 기준으로, 가로 이미지는 화면과 사진 비율에 따라 2장 또는 4장 배치를 자동 선택합니다. 남은 이미지 수가 적으면 가능한 수만 표시합니다.

확대할 이미지는 라운드마다 무작위로 섞고, 모두 한 번씩 선택한 뒤 다음 라운드로 넘어갑니다. 한 확대 화면에는 같은 이미지가 중복되지 않습니다. 배경의 반복 타일은 이 계산에서 제외됩니다.

window.SVG_SETTINGS = {
  useGeneratedSvg: true,
  useNumberedDesign: false
};

• useGeneratedSvg: true — SVG를 동적으로 생성합니다. 별도의 SVG 파일은 필요 없습니다.
• useGeneratedSvg: 'true-save' — 생성한 SVG를 화면에서 사용하면서 파일 다운로드도 요청합니다. 기본 설정에서는 demo-01.svg부터 demo-20.svg까지입니다. 다운로드는 페이지당 한 번 요청하며, 브라우저의 여러 파일 다운로드 허용이 필요할 수 있습니다.
• useGeneratedSvg: false — image/svg/의 개별 파일을 사용합니다. 다운로드한 파일은 이 폴더에 직접 옮겨야 합니다. 웹 페이지가 프로젝트 폴더에 자동 저장하지는 않습니다.
• useNumberedDesign: true — 동적 생성 시 흰 배경·검은 숫자 디자인을 사용합니다. false는 추상 도형·우측 상단 번호 디자인입니다. 이미 저장된 개별 SVG의 디자인은 바뀌지 않습니다.

생성 개수는 config.js의 Demoserocount(세로)와 Demogarocount(가로)로 정합니다. 한 방향을 0으로 제외할 수 있지만, 동적 생성 데모의 합계는 1 이상이어야 합니다. 개별 파일 목록은 페이지를 열 때 config.js의 두 개수 합으로 만들어지므로, 파일 모드의 개수를 바꿀 때는 config.js를 수정한 뒤 새로고침하세요.

설정과 데모 코드는 JavaScript 파일로 연결되어 있어 index.html을 더블클릭하는 file:// 환경에서도 실행할 수 있습니다. 브라우저별 파일 접근·저장 제약이 있다면 로컬 웹 서버를 사용하세요.

Python이 설치된 PC에서 프로젝트 루트 폴더를 열고 다음 명령을 실행한 뒤 http://localhost:8000/index.html에 접속합니다.

python -m http.server 8000

Python이 없다면 공식 다운로드 페이지에서 설치할 수 있습니다. 단순히 이미지 보드를 직접 여는 경우에는 설치할 필요가 없습니다.