gallery.jihun.io

배경과 목적

사진을 취미로 즐기며 직접 촬영한 결과물을 전시하기 위해 만든 갤러리입니다. 처음에는 스토리지에 업로드한 파일을 불러오는 단순한 구조였지만, 사진 수가 늘어나면서 촬영 정보와 분류 체계를 함께 관리할 수 있는 서비스로 리뉴얼했습니다.

담당 범위

서비스 기획과 화면 설계부터 Next.js 프론트엔드, Node.js 백엔드, PostgreSQL 데이터 모델, 이미지 스토리지와 배포 자동화까지 전체를 구성했습니다.

핵심 기술적 결정

사진 파일과 메타데이터 관리

관리자 페이지에서 사진을 업로드하면 카메라와 렌즈, 촬영 설정, GPS 좌표 등의 EXIF 데이터를 자동으로 추출하도록 구현했습니다. 원본과 썸네일은 Cloudflare R2에 저장하고 카테고리, 태그와 촬영 정보는 PostgreSQL에 기록해 파일과 검색 가능한 데이터를 분리했습니다. 데이터 접근 계층에는 Prisma를 사용했습니다.

목록의 맥락을 유지하는 상세 화면

사진을 선택할 때 목록 페이지에서 완전히 벗어나지 않고 감상 흐름을 이어갈 수 있도록 Next.js Parallel Routes를 이용한 모달 기반 상세 화면을 구성했습니다. 큰 사진과 촬영 정보를 보여주는 동시에 하단에서 다른 사진으로 이동할 수 있게 했습니다.

촬영 위치 표현

EXIF에 GPS 좌표가 포함된 사진은 Apple MapKit과 연결해 촬영 위치를 지도에서 확인할 수 있도록 했습니다. 사진 자체뿐 아니라 촬영 당시의 맥락도 함께 남기는 정보 구조를 목표로 했습니다.

배포와 운영 자동화

애플리케이션과 PostgreSQL 실행 환경을 Docker 컨테이너로 구성하고, GitHub Actions를 통해 변경 사항을 배포하는 흐름을 만들었습니다. 정적 화면을 공개하는 데 그치지 않고 사진을 지속적으로 추가하고 관리할 수 있는 서비스로 운영할 수 있도록 구성했습니다.

결과

사진 업로드부터 EXIF 추출, 분류, 저장, 탐색과 상세 감상까지 하나의 흐름으로 연결했습니다. 공개된 gallery.jihun.io와 GitHub 저장소에서 결과물과 코드를 확인할 수 있습니다.

회고

사진 갤러리는 이미지를 보기 좋게 배열하는 일뿐 아니라 원본 파일, 파생 이미지, 메타데이터와 탐색 상태를 함께 다루는 시스템이었습니다. 개인적인 창작물을 직접 운영하는 서비스를 통해 콘텐츠 관리와 제품 운영을 하나의 개발 범위로 경험했습니다.