Sunki Kim 개발기 — 134장의 사진을 천천히 보게 만드는 법

Sunki Kim은 김선기 사진작가의 자연과 구름, 빛과 도시 풍경을 주제별로 감상하는 포트폴리오 웹사이트입니다. 현재 134장의 사진을 10개 주제로 정리하되, 기능이 작품보다 앞서지 않고 한 장을 오래 바라볼 수 있는 흐름을 만드는 것이 목표였습니다.

사진보다 먼저 분류와 탐색을 설계했습니다#

2026년 2월 5일 작성된 구현 계획에는 작품 수와 주제, 한국어·영어, 모바일 탐색과 라이트박스가 먼저 정의되어 있습니다. Git의 첫 구현 이력은 다음 날인 2월 6일부터 남아 있습니다. 첫 화면에서는 대표 작품으로 분위기를 보여 주고, 공개 갤러리에서는 주제를 기준으로만 좁혀 볼 수 있게 했습니다. 카메라와 촬영일은 작품 데이터와 설명 패널에 남기되 별도 필터로 제공하지 않습니다. 사진을 누르면 주변 장식을 줄인 큰 화면과 촬영 정보를 함께 보여 줍니다.

작품과 저장 방식을 분리했습니다#

사진, 주제, 카메라 정보를 화면 컴포넌트에 직접 넣지 않고 독립된 데이터 구조로 만들었습니다. 처음에는 정적 JSON으로 빠르게 읽되, 나중에는 같은 화면이 별도 콘텐츠 저장소도 읽을 수 있도록 경계를 나눴습니다. 이 덕분에 작품 제목이나 설명을 고치는 일과 갤러리 UI를 바꾸는 일이 서로 얽히지 않습니다. 한국어와 영어도 같은 작품 ID를 공유해 언어를 바꿔도 보던 맥락을 유지합니다. 데이터가 비어 있거나 촬영 정보 일부가 없을 때도 전체 갤러리가 멈추지 않고, 있는 정보만 자연스럽게 표시하도록 모델의 빈값 처리도 따로 두었습니다.

움직임은 사진을 기다리게 하면 안 됐습니다#

초기 화면은 스크롤 애니메이션의 관찰 범위 때문에 첫 로딩이 멈춘 듯 보이는 문제가 있었습니다. 진입 조건을 바로잡고, 첫 제목 애니메이션 일부는 가벼운 CSS로 옮겼습니다. 큰 이미지는 화면 크기에 맞춰 불러오고, 라이트박스의 이전·다음·닫기 동작은 키보드와 모바일에서도 쓸 수 있게 다듬었습니다. 촬영일과 장소는 작품 설명 패널에 필요한 만큼만 노출했습니다. 넓은 화면에서 썸네일 사이에 생기던 세로선과 첫 화면의 hydration 지연도 별도 커밋으로 바로잡았습니다.

지금은#

공식 포트폴리오로 공개 운영 중입니다. 이후 콘텐츠 관리 구조와 검색 정보, 이미지 성능을 정리했고 모바일에서 갤러리를 넘기는 감각도 계속 조정했습니다. 구현 계획의 완료 표기만으로 모든 목표가 검증됐다고 보지는 않았고, 이 글에는 실제 코드와 Git에서 확인되는 기능만 담았습니다. 앞으로도 새 기능보다 작품을 찾고 크게 보고 다시 돌아오는 기본 동선을 먼저 지키려 합니다.