프로젝트 개요와 브랜딩 맥락
이번 리뷰는 365mc가 선보인 ‘허파고리즘 사진전’ 디지털 경험을 대상으로 합니다. 전시가 전달하고자 하는 메시지는 건강·라이프스타일과 감성 기록 사이의 접점에 있으며, 웹 인터페이스는 이를 시각적 리듬과 스크롤 서사로 풀어내려는 의도가 명확합니다. 첫 화면에서 핵심 카피가 공간을 장악하고, 이어지는 시퀀스는 작품 이미지를 중심으로 조명·여백·타이포 대비를 통해 몰입감을 확보합니다. 특히 주목할 점은 이미지에 의존하는 전시 콘텐츠 특성상 네비게이션 밀도를 과도하게 높이지 않고, ‘작품 감상’이라는 사용자의 1차 목적에 초점을 고정한다는 전략입니다. 이 접근은 정보 과잉을 피하면서도 브랜드 톤을 정교하게 유지하는 데 유리합니다. 다만 작품/작가/세부설명/구매/이벤트 연동 등 다양한 사용자 의도를 한 화면에서 지원해야 할 때, 계층형 정보 구조와 맥락 전환 피드백을 정교하게 설계하지 않으면 탐색의 피로도가 커질 수 있습니다. 본 리뷰에서는 이러한 균형점을 기준으로 화면 단위 UX 가이드를 제안합니다.
또한 본 리뷰는 실무 적용을 위해 구체적인 인터랙션과 컴포넌트 수준의 권장안을 포함합니다. 예를 들어, 하이라이트 키워드를 텍스트 배지로 강조하거나, 설명 박스를 통해 핵심 정보를 빠르게 파악하도록 돕는 정보 카드 패턴, 그리고 전시 흐름을 끊지 않는 고정형 TOC와 같은 보조 내비게이션을 제안합니다. 결론적으로, 이 페이지는 감상 중심의 경험과 정보 탐색의 효율성을 동시에 달성해야 하며, 본문 내에서 상호작용의 농도를 구간별로 조절하는 것이 관건입니다.
UX/UI 구성과 인터랙션
히어로 섹션은 고해상도 작품 이미지와 명료한 카피로 시작해 관심을 즉시 포획합니다. 본문은 카드·그리드·세로 시퀀스의 세 가지 패턴을 혼합하되, 스크롤 진도에 맞춘 단계적 노출로 인지 부하를 제어하는 방식이 적합합니다. 추천하는 상호작용은 다음과 같습니다. 첫째, 캡션의 정보 밀도를 1차 요약 + 자세히로 구분해 모바일에서도 부담 없이 읽히도록 구성합니다. 둘째, 썸네일 목록은 키보드 포커스와 스크린리더 레이블을 갖춘 탭 가능한 카드로 제공해 접근성과 조작성 모두를 확보합니다. 셋째, 이미지 뷰어는 ‘닫기’·‘이전/다음’·‘확대’·‘다운로드’의 우선순위를 명확히 하고, 포인터/키보드/터치 제스처를 통합 지원합니다.
타이포그래피는 헤드라인 대비와 본문 가독성 사이의 균형이 중요합니다. H 계열은 700~800 굵기를, 본문은 400~500 범위를 추천하며, 줄간격은 1.65~1.8로 유지합니다. 버튼은 시각적으로 과도하게 튀지 않도록 하되, 강조 버튼·보조 버튼의 역할과 계층을 분명히 해야 흐름이 단순해집니다. 더불어, 빈 공간을 적극적으로 사용해 이미지에 호흡을 부여하고, 카드 경계는 연한 보더와 그림자로 가볍게 띄워 위계를 명확히 합니다. 마지막으로, 콘텐츠 전환 시 페이드·스케일의 미세 애니메이션을 사용하면 감상의 몰입감을 유지하면서도 현재 위치를 잃지 않게 돕습니다.
정보구조(IA)와 접근성
전시 페이지의 정보구조는 ‘작품 감상 → 작가/컨셉 이해 → 참여/공유’의 순환을 상정하는 것이 자연스럽습니다. TOC는 상단 우측 고정형으로 두고, 구간 진입 시 링크 상태를 동적으로 활성화하여 현재 위치를 명확히 표시합니다. 목록/상세의 왕복이 잦은 맥락에서는 브레드크럼보다 섹션 앵커가 효율적이며, 페이지 내 이동 후 포커스를 헤딩에 이관하는 키보드 UX를 제공해야 합니다. 대체 텍스트는 작품 의도를 요약하는 1문장 규칙을 적용하고, 링크/버튼에는 역할과 목적이 분명한 레이블을 부여합니다. 색 대비는 WCAG AA(일반 텍스트 4.5:1, 굵은 3:1) 기준을 기본으로 하고, 키보드 포커스 링은 최소 2px 이상으로 충분히 도드라지게 유지합니다.
모달·라이트박스가 있을 경우, 오버레이 진입 시 포커스를 내부로 가두고 닫힘 후에는 트리거로 포커스를 복귀시키는 포커스 트랩을 적용해야 합니다. 이미지 그룹은 리스트/그룹 역할 속성을 통해 스크린리더에 의미를 전달하고, 단축키 안내를 도움말 토글로 제공하면 학습 곡선을 낮출 수 있습니다. 모든 내비게이션 구성요소는 ‘포인터 타깃 44×44px’ 가이드에 맞춰 터치 환경에서도 오류 없이 조작되도록 합니다.
성능 최적화와 SEO
전시는 이미지 비중이 높기 때문에 성능 관리가 곧 UX 품질을 좌우합니다. 첫 화면 LCP 후보(히어로 이미지)는 적절한 크기의 WebP/AVIF 파생본을 제공하되, 원본은 보존하고 지연 로딩을 전역 기본값으로 둡니다. 이미지 치수 속성을 명시해 CLS를 억제하고, 폰트는 가변 폰트 1~2종으로 통일해 네트워크 비용을 줄이는 것이 효과적입니다. SEO 관점에서는 의미 있는 헤딩 계층(H1 단일, 섹션별 H2)과 풍부한 본문 길이가 중요하며, 메타/오픈그래프 태그·정규 URL을 일관되게 설정해야 합니다. 또한 구조화 데이터(아티클/브레드크럼)를 병행하면 검색 노출 품질이 개선됩니다.
스크립트는 필요한 범위에 한해 지연 실행하거나, 인터섹션 옵저버 기반으로 조건부 초기화하여 메인 스레드 점유를 최소화합니다. 이미지 프리패치/프리로드는 스크롤 진입 직전 구간에 한정하고, 사용하지 않는 CSS는 빌드 타임 제거를 권장합니다. 마지막으로, 공유 미리보기 품질을 위해 OG/Twitter 이미지의 비율과 안전 영역을 통일해 콘텐츠 일관성을 높입니다.
총평과 적용 가이드
‘허파고리즘 사진전’ 페이지는 이미지 중심 경험을 깔끔하게 전달하는 데 강점이 있습니다. 추천하는 개선 방향은 다음과 같습니다. ① 감상 우선의 화면 리듬을 유지하되, 정보 밀도가 높아지는 구간에서만 보조 내비게이션을 활성화합니다. ② 텍스트 캡션과 메타 정보를 요약/전체로 분리해 이동 중에도 부담 없이 읽히도록 합니다. ③ 접근성 기준을 충족하는 포커스/대비/레이블 정책을 전역으로 통일합니다. ④ LCP, CLS, TBT 지표를 중심으로 이미지 파이프라인과 스크립트 초기화를 단순화합니다. 이를 통해 전시는 감상 몰입도와 탐색 완결성을 동시에 확보할 수 있습니다.