How to Turn Trip Photos and Metadata into a Self-Contained HTML Story

개요

이 가이드는 여행 사진과 메타데이터를 활용하여 서버나 인터넷 연결 없이 독립적으로 열 수 있는 자체 포함형 HTML 스토리를 만드는 방법을 설명합니다.

주요 내용

- 목표: 제목, 여행 날짜, 소개, 요약, 챕터, 간단한 경로, 시간순 사진, 캡처 시간, 좌표, 캡션, 압축된 이미지를 모두 포함하는 travel-story.html 파일을 생성합니다.
- 기반 데이터: EXIF 메타데이터(캡처 시간, 카메라 모델, 위치 정보 등)를 활용하며, GPS 좌표가 없는 경우에도 처리합니다.
- 프로세스:
1. 안전한 작업 공간 준비: 원본 사진을 수정하지 않고 프로젝트 디렉토리를 만들고 작업 복사본을 사용합니다. Python 및 Pillow 라이브러리를 설치합니다.
2. 사진 메타데이터 검사: ExifTool을 사용하여 캡처 시간, 위치, 카메라 모델, 방향, 중복 파일 등을 확인하고, 필요한 경우 카메라 시간 오프셋을 조정합니다.
3. 편집 데이터 생성: captions.csv 파일을 생성하여 각 사진의 포함 여부, 챕터, 제목, 캡션을 정의합니다. 챕터는 날짜뿐만 아니라 의미 있는 변화에 따라 구분합니다.
4. 경로 재구성: GPS 태그가 지정된 사진의 시간순 순서를 기반으로 보수적으로 경로를 재구성합니다. 비정상적인 이동 거리를 감지하고, 좌표가 없는 이미지는 주변 정보에 따라 처리합니다.
5. HTML 생성기 구축: Python 스크립트(build_story.py)를 작성하여 사진을 처리하고 HTML 파일을 생성합니다. 이미지는 Base64로 인코딩된 Data URI로 HTML에 직접 포함됩니다.
6. 빌드 실행 및 편집: 스크립트를 실행하고, 생성된 HTML 파일(travel-story.html)을 열어 콘텐츠를 검토합니다. captions.csv 파일을 수정하여 사진 선택, 캡션 등을 반복적으로 편집합니다.
7. 이식성, 정확성, 크기 검증: 네트워크 연결 없이 파일이 올바르게 열리는지, 이미지가 제대로 포함되었는지, 파일 크기가 적절한지, HTML 구조가 유효한지, 사실 정보가 원본과 일치하는지 등을 확인합니다.
- 일반적인 실패 사례: 캡처 시간 누락, 세로 사진의 방향 문제, 대륙을 가로지르는 경로 표시, 카메라 순서 오류, 파일명 불일치, HEIC 파일 처리 문제, 파일 크기 과대 등을 해결하는 방법을 제시합니다.

시사점

이 방법론은 여행의 기록을 시각적으로 풍부하고 서사적인 형태로 보존하며, 서버나 인터넷 없이도 독립적으로 공유하고 접근할 수 있는 실용적인 HTML 스토리로 전환할 수 있게 합니다.