{{ t.brand }} {{ t.sub }}
{{ scene.room }} {{ scene.part }}
{{ t.emptyRoom }}
{{ sceneCounter }}
{{ t.route }} {{ t.routeHint }}
{{ t.tray }}
{{ zoom.title }} {{ t.zoomHint }}
{{ zoomPct }}
{{ zoom.no }}
{{ t.compareOpen }}
{{ c.no }}
{{ c.room }} {{ c.no }}
operation guide

동방예술관 운영 안내

유물 사진을 전시실에 놓고, 파일을 손으로 고치고, 깃허브에 올려 공개하는 과정을 순서대로 적었습니다. 프로그램을 다룬 적이 없어도 사진을 폴더에 넣고 목록에 한 줄 적는 일이 전부입니다.

01

파일이 놓인 자리

전시관은 아래 네 덩어리로 이루어져 있습니다. 이 폴더 전체를 그대로 옮기면 어느 컴퓨터에서나 같이 열립니다.

동방예술관/
├─ 동방예술관.dc.html     ← 전시관 본문 (이 파일만 고치면 됩니다)
├─ support.js             ← 화면을 그려 주는 부품 (건드리지 않습니다)
├─ ds/styles.css          ← 글꼴·색 규칙 (건드리지 않습니다)
└─ assets/art/            ← 유물 사진이 모여 있는 폴더
   ├─ 1.jpg
   ├─ 3.jpg
   └─ …
02

유물 사진 준비

파일 이름은 도록 번호로 맞춥니다. 도록 12번 유물이면 12.jpg입니다. 지금처럼 흰 배경으로 촬영된 사진이면 배경을 따로 지우지 않아도 전시실 벽 색으로 자연스럽게 사라집니다. 세로 2000픽셀 이상이면 확대 보기에서 세부가 살아납니다. 확장자는 소문자 .jpg로 통일하는 편이 안전합니다.

03

유물 한 점을 전시실에 놓기

사진을 assets/art/에 넣고, 본문 파일에서 const ROOMS를 찾아 해당 전시실의 items에 한 줄을 더합니다. id는 파일 이름의 숫자, s는 좌대 위에서 차지할 높이 비율입니다.

{ k: "불상", z: "佛像", items: [
    { id: 1,   s: 0.96 },
    { id: 3,   s: 1.00 },
    { id: 112, s: 0.70 }     ← 새로 넣은 112.jpg
] },

저장하고 브라우저를 새로 고치면 바로 보입니다. 한 장면에는 네 점까지 놓이고, 다섯 점이 넘으면 같은 전시실이 1/2, 2/2 장면으로 자동으로 나뉘어 화살표로 이어집니다. 즉 238점을 다 넣어도 목록만 길어질 뿐 구조는 그대로입니다. 복사해 넣을 문장 보기(유물 한 줄·새 전시실 덩어리)는 index.html 안의 const ROOMS 바로 위 주석에도 적어 두었습니다.

04

전시실 늘리기와 이름 바꾸기

알려 주신 일곱 갈래(도자기류·불상·청동·옥유물·벽화·토기·기타)를 전시실로 세워 두었습니다. 벽화실과 기타실은 사진이 오면 채워지도록 비워 둔 상태입니다. 전시실을 새로 만들려면 ROOMS 목록에 한 덩어리를 더하면 됩니다. k는 한국어 이름, z는 중국어 이름이고, 순서가 곧 제1실·제2실 순서입니다.

{ k: "석조", z: "石造", items: [
    { id: 205, s: 0.9 }
] },
05

크기 비율 s 정하기

사진마다 촬영 거리가 달라 그대로 놓으면 옥패가 불상보다 커 보입니다. s는 좌대 위 높이를 0.3~1.0 사이로 조절하는 값입니다. 한 장면에서 가장 큰 유물을 1.0으로 두고 나머지를 눈으로 맞추면 충분합니다. 유물별 실측 높이(cm)가 정리되면 그 값으로 실제 비례를 자동 계산하도록 바꿀 수 있습니다.

06

내 컴퓨터에서 고치고 확인하기

파일을 그냥 두 번 눌러 열면(file://) 브라우저가 사진과 글꼴 읽기를 막는 경우가 있습니다. 작은 웹서버를 띄워서 여는 것이 정석이고, 명령 한 줄이면 됩니다. 폴더 안에서 터미널(윈도우: 명령 프롬프트)을 열고,

macOS / Linux :  python3 -m http.server 8000
Windows        :  py -m http.server 8000

브라우저 주소창 :  http://localhost:8000/index.html

본문 파일을 메모장이나 VS Code로 열어 고친 뒤 저장하고, 브라우저에서 새로 고침(⌘R / F5)하면 바로 반영됩니다. VS Code를 쓰신다면 Live Server 확장을 설치해 파일을 우클릭 → Open with Live Server 를 누르는 편이 더 간단합니다. 저장할 때마다 화면이 저절로 갱신됩니다. 고치기 전에 폴더를 한 벌 복사해 두면 되돌리기가 쉽습니다.

07

깃허브에 올려 공개하기

깃허브는 파일을 올려 두면 주소를 만들어 주는 곳입니다. 명령어를 몰라도 화면에서 끌어다 놓기만 하면 됩니다.

① 깃허브 계정을 만들고 New repository 로 저장소를 하나 만듭니다. 이름은 영문으로 dongbang-museum 처럼, 공개(Public)로 둡니다. ② 올리기 전에 본문 파일 이름을 index.html 로 바꿉니다. 첫 화면으로 자동 인식되고, 주소에 한글이 섞이지 않습니다. 내용은 그대로 두면 됩니다. ③ 저장소 화면의 Add file → Upload files 에 index.html, support.js, ds 폴더, assets 폴더를 함께 끌어다 놓고 Commit changes 를 누릅니다. 폴더 구조가 유지되어야 사진이 보입니다. ④ Settings → Pages 에서 Source 를 Deploy from a branch, Branch 를 main / (root) 로 두고 저장합니다. ⑤ 2~3분 뒤 https://아이디.github.io/dongbang-museum/ 주소가 열립니다. 이 주소를 후원 안내나 도록에 함께 적어 두시면 됩니다.

이후 유물을 추가할 때도 같은 자리에 사진을 올리고 index.html 을 다시 올리면 주소는 그대로 유지됩니다. 사진 용량이 크면 한 번에 100개 이내로 나누어 올리는 편이 안전합니다.

08

도록 238점과 맞추기

지금은 전문가 촬영본 가운데 19점만 올라가 있습니다. 파일 이름을 도록 번호로 맞추어 두면, 사진이 준비되는 대로 한 줄씩 더해 도록과 화면이 같은 번호로 대응합니다. 진위 검사가 끝나 분류나 명칭이 확정되면 그때 유물명과 해설을 얹으면 됩니다. 검사 전이라 지금은 번호만 표기하고 있습니다.

막히면 이 순서로
사진이 안 보인다 파일 이름의 숫자와 id 값이 같은지, assets/art/ 안에 들어 있는지 확인합니다.
화면이 하얗게 뜬다 목록에서 쉼표나 중괄호가 빠진 경우가 대부분입니다. 고치기 전 복사본으로 되돌리세요.
글꼴이 달라 보인다 인터넷 연결이 필요한 글꼴을 씁니다. 오프라인 전시가 필요하면 알려 주세요.
{{ t.introTitle }} {{ introCounter }}
{{ introCounter }}