Gwangju Museum of Art - UX/UI Review
ART · MUSEUM

광주시립미술관

·UX/UI Review

도시의 예술 생태계를 연결하는 문화기관 웹 경험을 관람·참여·연구의 3축으로 분석하고, 전시 탐색과 교육 프로그램 전환을 높이는 정보 구조/디자인 전략을 제안합니다.

The Blue Canvas 살펴보기
광주시립미술관 웹사이트 메인 화면 시각

프로젝트 개요

광주시립미술관은 지역 미술사의 맥락을 기록하고 세계 동시대 미술을 연결하는 핵심 문화거점입니다. 웹사이트는 방문객에게는 전시·교육·소장품 정보를 빠르게 제공하고, 연구자에게는 신뢰 가능한 데이터 허브로 작동해야 합니다. 현재 정보 구조는 메인 내비게이션을 중심으로 ‘전시/교육/미술관 소개/소장품/소식’ 등으로 나뉘며, 카드형 목록과 상세 페이지의 일관성이 비교적 잘 유지됩니다. 다만 모바일에서의 1열 스크롤 길이, 프로그램 신청 흐름의 단계 노출, 검색/필터의 우선순위 등은 개선 여지가 보입니다. 본 리뷰는 IA(Information Architecture), UX/UI, 접근성/성능, SEO 관점에서 개선 기회를 도출하고, 문화기관 특성에 맞춘 실천 가능한 체크리스트를 제시합니다.

핵심 한 줄

‘전시 관람 계획 → 프로그램 참여 → 소장품 탐색’으로 이어지는 여정을 끊김 없이 연결하는 정보 구조와 모듈형 UI가 전환을 만듭니다.

브랜드/콘셉트 해석

미술관의 정체성은 ‘공공성’과 ‘큐레이션 역량’, 그리고 ‘지역성과 세계성의 교차’에 있습니다. 웹 표현에서 이는 절제된 타이포그래피, 여백 중심의 레이아웃, 작품 이미지의 몰입형 배치로 드러납니다. 상단 히어로 영역의 대비 컬러와 그리드 리듬이 명확하며, 콘텐츠 영역에서는 캡션·출처·작가 정보가 구조화되어 신뢰감을 줍니다. 다만 전시·컬렉션 썸네일이 같은 카드 컴포넌트를 공유할 때, 메타 정보(기간/장소/카테고리)의 서체 계층이 겹쳐 가독성을 낮출 수 있어 ‘기간(강조) → 제목 → 장소 → 카테고리’ 순으로 시각적 우선순위를 부여하는 개선이 권장됩니다. 접근성 측면에서 링크 대비(AAA)는 유지되나, 포커스 인디케이터의 가시성 향상과 스크린리더용 보조 텍스트 추가가 더해지면 브랜드의 공공성이 인터랙션 단계까지 일관되게 확장됩니다.

UX/UI 분석

메인 화면은 ‘현재 열리는 전시’와 ‘다가오는 프로그램’의 발견 가능성을 높이는 카드형 그리드가 유효합니다. 추천은 1차(전시), 2차(교육), 3차(뉴스/공지)로 명확히 단계화하고, 모바일에서는 첫 화면에서 전시 3장, 프로그램 2장, 공지 1장을 노출하는 식으로 정보의 비중을 조정하는 것이 좋습니다. 전시 상세는 ‘작품 이미지 → 전시 개요 → 관람 정보 → 관련 프로그램/소장품 추천’의 흐름을 권장합니다. 이때 ‘관람 정보’ 내부에 CTA(방문 예약/관람 시간/오시는 길)를 모듈화해 재사용하면 유지보수가 쉬워집니다. 프로그램 신청은 단계 노출이 중요합니다. 1) 일정 선택, 2) 신청서 작성, 3) 약관 동의, 4) 완료의 4단계를 상단 단계 표시줄로 안내하고, 각 단계의 평균 소요 시간을 명시하면 이탈이 줄어듭니다. 컬렉션 탐색에서는 작품명/작가/제작연도/매체/주제 태그로 필터 구성을 단순화하고, 최근 본 작품/관심 작품을 로컬 스토리지에 보관해 ‘다시 보기’ 경험을 제공하면 체류 시간이 늘어납니다.

UI 가이드

카드 썸네일 3:2 비율 고정, 메타 라벨 색상 통일(전시: indigo, 교육: teal, 공지: gray), 주요 CTA는 상·중·하 동일 문구를 유지해 사용자의 ‘학습된 예측’을 돕습니다.

IA·SEO 관점의 구조 제안

정보 아키텍처는 ‘탐색(Discover) → 이해(Learn) → 참여(Act)’ 3단계를 기준으로 설계합니다. 1) 탐색: 메인, 전시/교육 목록, 컬렉션 허브. 2) 이해: 전시 상세, 프로그램 상세, 작가/작품 상세. 3) 참여: 관람 안내, 예약/신청, 후원/멤버십. 각 페이지의 H1은 고유하고, H2에서는 ‘무엇/언제/어디서’가 먼저 제시되며, JSON-LD 구조화 데이터(Artwork/Exhibition/Event)를 적용해 검색 가시성을 확보합니다. URL은 소문자-하이픈 규칙으로 일관화하고, 메타 타이틀은 ‘콘텐츠명 | 광주시립미술관’ 패턴을 사용합니다. 이미지 ALT와 캡션에는 작품명/작가/연도/매체 등 필수 메타를 포함시켜 검색·접근성을 동시에 충족합니다. 내부 링크는 전시 ↔ 작가, 전시 ↔ 관련 프로그램, 프로그램 ↔ 교육 후기처럼 상호 참조를 늘려 크롤러가 깊이 들어오도록 유도합니다.

검색 체크리스트

robots.txt 허용 범위 점검, XML 사이트맵 자동 갱신, Open Graph/Twitter 카드 메타 일관화, Canonical 지정, 404/리다이렉트 정책 문서화는 필수입니다.

성능·접근성

핵심 웹 지표(LCP, CLS, INP)를 기준으로 이미지 지연 로딩과 크기 지정, 폰트 서브셋 최적화, CSS/JS 병합·지연 실행을 적용하면 체감 속도가 개선됩니다. 이미지의 경우 목록은 800px, 상세는 1600px 가변 소스로 제공하고, webp/avif를 우선 사용하되 원본 유지 정책으로 레거시 브라우저 호환성을 확보합니다. 접근성 측면에서는 키보드 포커스가 모든 인터랙티브 요소에 순서대로 이동하는지, 스킵 링크가 동작하는지, 명도 대비가 4.5:1 이상인지 정기 점검합니다. 또한 라이브 영역(알림/신청 완료)은 ARIA 속성으로 보조기기에 전달되어야 하며, 폼 검증 오류는 색상 외 아이콘/텍스트로 함께 안내합니다. 분석 스크립트는 gtag 하나로 통일하고, 메타 픽셀 등은 GTM 안에서 컨센트 모드와 함께 제어하면 성능 저하를 줄일 수 있습니다.

The Blue Canvas 제안

The Blue Canvas는 문화기관 웹/모바일 구축과 운영에서 콘텐츠 편집권과 전환율의 균형을 중시합니다. 전시·교육·소장품을 모듈형 블록으로 관리하여 빠르게 편집·재배치할 수 있고, 예약/신청/후원 같은 액션 버튼을 상황별로 자동 배치해 이탈을 줄입니다. 또한 IA 워크숍(핵심 사용자 여정 도출 → 메뉴/URL 설계 → 메타데이터 사전 정의)과 SEO 세팅(JSON-LD, 사이트맵, 카테고리 택소노미)을 함께 제공하여 론칭 직후에도 검색 유입을 확보하도록 돕습니다.

운영 단계에서는 분기별 퍼포먼스 리포트와 컴포넌트 개선 로드맵을 제안합니다. 예를 들어 전시 상세 하단의 ‘관련 프로그램’ 추천 블록 CTR이 낮다면, 카드를 2열에서 1열 스와이프로 전환하고 썸네일 비율을 3:2로 통일해 시각 피로를 줄이는 식의 실험을 빠르게 반복합니다.

총평

광주시립미술관 웹사이트는 공공 문화기관의 정체성을 잃지 않으면서도 사용자 중심의 탐색·참여 경험을 제공하고 있습니다. 본 리뷰의 제안(내비게이션 우선순위 조정, 전시/프로그램 상세 모듈화, 컬렉션 필터 단순화, 성능·접근성 점검 체계화, 구조화 데이터 적용 등)을 단계적으로 적용한다면, 관람 전환과 체류 시간, 재방문율을 동시에 끌어올릴 수 있을 것입니다. 특히 ‘탐색 → 이해 → 참여’ 3단계 흐름과 상호 참조 링크 설계는 검색 가시성과 사용성 모두를 강화하는 핵심 전략으로 작동합니다.