웹사이트 UI 분석 ① 2024 광주비엔날레
비엔날레 웹사이트 탐험 노트
관심 있는 비엔날레 웹사이트부터 정보를 살피며 방문 계획을 세우다가 흥미로운 발견을 했다. 각 사이트마다고유한 전시 기획 방향과 콘셉트를 명확하게 드러내고 있어, 이를 비교하며 살펴보는 재미가 쏠쏠했다. 비슷한 시기에 열리는 다양한 비엔날레 웹사이트를 한눈에 볼 수 있다는 점은 웹 디자이너이자 개발자로서 큰 장점이었다. 이를 통해 영감은 물론 다양한 웹 기획 접근 방식을 관찰할 수 있었다.
이 과정에서 단순히 웹사이트를 둘러보는 것에서 그치지 않고, 이번 기회에 제대로 분석하고 정리해 봐야겠다는 생각이 들었다. 웹사이트는 전시 못지않게 기획 의도와 방향을 잘 드러내는 중요한 매체이기 때문에, 이를 꼼꼼히 분석하고 정리해 보는 것이 필요하다고 느꼈다. 비엔날레 웹사이트의 UI를 통해 현재 웹 디자인 트렌드를 탐험하고, 이러한 인터페이스 디자인 트렌드가 웹 사이트 작업에 어떤 영감을 줄 수 있는지 살펴보려고 한다.
비엔날레
'비엔날레'는 2년마다 열리는 대규모 국제 문화 행사로, 이탈리아어로 '2년마다'라는 뜻을 가지고 있다. 이 행사는 현대 미술, 건축, 영화 등 다양한 분야에서 최신 경향과 실험적인 작품을 선보이는 장으로, 세계 각국의 예술가들과 관람객들이 한자리에 모이는 문화적 축제이다.
비엔날레의 역사는 1895년 이탈리아 베니스에서 시작되었으며, 이후 전 세계로 확산되어 현재는 수많은 도시에서 고유의 특색을 살린 비엔날레가 개최되고 있다. 한국에서는 1995년부터 시작된 광주비엔날레가 대표적이며, 세계적으로 주목받는 문화 행사로 자리 잡았다.
이러한 비엔날레의 특성상, 각 행사의 웹사이트는 단순한 정보 제공을 넘어 행사의 정체성과 주제를 효과적으로 전달해야 하는 중요한 역할을 맡고 있어, 비엔날레 웹사이트는 웹 디자인 트렌드를 반영하면서도, 각 행사의 고유한 특성을 살리는 창의적인 UI 설계가 요구된다.
이러한 맥락에서 비엔날레의 주제와 개최 도시의 특성, 참여 작가들의 작품을 어떻게 디지털 공간에서 효과적으로 표현하는지를 살펴보는 것은, 디자인 감각을 한층 더 높이는데 도움이 될 것이다.
제15회 광주비엔날레 : 판소리 - 모두의 울림
우리나라 최초의 비엔날레인 광주 비엔날레의 창설 취지는 깊은 의미를 담고 있다. 그 핵심은 "광주의 민주적 시민 정신과 예술적 전통을 바탕으로 건강한 민족정신을 존중하며, 지구촌 시대 세계화의 일원이자 문화 생산의 중심축으로서의 역할 수행"이다. 이는 단순히 광주를 국제적인 예술 중심지로 만드는 것을 넘어, 광주의 역사적, 문화적 가치를 예술로 승화시키고자 하는 지역 정체성과 민주정신의 표현이다.
2024년, 30주년을 맞은 제15회 광주 비엔날레는 "판소리-모두의 울림"이라는 주제로 개최된다. '관계미학' 이론으로 유명한 니콜라 부리오가 예술감독을 맡아 더욱 주목받고 있다. 이번 비엔날레는 본 전시와 함께 광주 비엔날레 파빌리온이 유기적으로 연결되어, 다양한 주체가 참여하는 다층적인 동시대 미술의 흐름을 보여준다.
이번 비엔날레의 특징 중 하나는 도시 곳곳을 전시 공간으로 활용한다는 점이다. 5·18민주화운동 기록관, 5·18기념문화센터 등 광주의 역사적 장소뿐만 아니라, 일상적 공간과 양림동 등지에서 31개의 도시 파빌리온 전시가 열리는데, 올해는 처음으로 광주 파빌리온이 별도로 운영되어 지역성을 더욱 강조한다.
또한, 제15회 비엔날레와 비엔날레 파빌리온은 각각 독립된 웹사이트로 운영된다. 이는 각 전시의 독자성을 강조하면서도, 상호 연계된 정보를 제공함으로써 관람객에게 더욱 풍부한 경험을 선사하려는 의도로 보인다. 광주비엔날레는 공식 사이트를 중심으로, 각 회차별 비엔날레 사이트가 연결되는 구조를 사용하고 있다.
출처. 15gwangjubiennale.com광주비엔날레 웹사이트는 사용자 경험(UX)을 최우선으로 고려한 현대적 인터페이스 디자인을 채택하고 있다. 메인 페이지에서는 주제, 기간, 행사명을 히어로 섹션(hero section)에 배치하여 시각적 임팩트를 극대화하고 있으며, 스크롤 기반의 인터랙션을 통해 키 비주얼을 점진적으로 노출하는 방식으로 사용자 인게이지먼트를 유도한다.
또한 반응형 웹 디자인(RWD) 방식으로 제작했다. 이는 모바일 퍼스트 전략에 부합하는 선택으로, 다양한 뷰포트(viewport)에서의 최적화된 사용자 경험을 제공한다. 이를 통해 디바이스 간 일관된 UI를 유지하면서도 모바일 사용자의 가독성을 향상시키고, 크로스 플랫폼 호환성을 확보하여 유지보수 효율을 증대시켰다. 이러한 웹 디자인 트렌드를 잘 반영한 점도 주목할 만하다.
정보 구조 측면에서는 사용자의 멘탈 모델을 고려한 직관적인 내비게이션 구조를 채택했다. '전시 장소', '참여 작가', '행사', '관람 안내', '후원사' 등의 글로벌 내비게이션은 사용자의 태스크 플로우를 원활하게 지원한다. 또한 다국어 지원을 위한 로컬라이제이션 전략으로 별도의 영문 페이지를 구축하여 글로벌 접근성을 향상시켰다.
'전시 장소'와 '참여 작가' 상세 페이지 - 왼쪽은 모바일 환경, 오른쪽은 PC / 출처: 15회 광주비엔날레 웹사이트'전시 장소' 페이지는 사용자의 컨텍스트를 고려한 UX 설계가 돋보인다. 9개 전시 장소를 지하철역 기준의 아이콘으로 시각화하여 인지적 부하를 줄이고, 각 전시 장소 위치는 카카오 모빌리티와의 협력을 통해 사용자에게 편리한 이동 서비스를 제공한다.
'참여 작가' 페이지의 UI 컴포넌트는 사용성을 극대화했다. 기본 정렬은 국문 가나다순이지만, 토글 기능을 통해 영문 사이트 이동 없이도 국문/영문 정렬 전환이 가능하도록 설계되었고, 페이지 리로드 없이 동적으로 콘텐츠를 갱신하여 사용자 경험을 향상시켰다.
작가 상세 페이지는 콘텐츠 계층구조(content hierarchy)를 효과적으로 구현했다. 타이포그래피의 변화를 통해 작품 설명, 캡션, 작가 정보 간의 시각적 구분을 명확히 하여 정보의 스캐너빌리티(scannability)를 높였다. 외부 링크를 통한 작가 웹사이트 연결은 정보 생태계를 확장하는 전략으로 볼 수 있다. 또한 '아티스트 목록으로 돌아가기' CTA(Call-to-Action) 버튼은 사용자의 웹사이트 내 이동을 원활하게 한다. 세부 페이지에서 푸터를 제거한 미니멀 디자인 접근은 콘텐츠에 대한 사용자의 집중도를 높이는 전략이 인상적이다.
'행사' 페이지에서 프로그램 유형별 필터를 제공하지만, 상세 정보는 비엔날레 공식 웹사이트로 연결되도록 유도하고 있었고, 후원사 로고를 과감하게 배치하여 잘 드러나게 한 디자인도 인상적이었다. 광주비엔날레 웹사이트는 최신 UI/UX 트렌드를 적극 반영하면서도 사용자 중심 디자인 철학을 일관되게 적용했다고 평가할 수 있다.
광주비엔날레 파빌리온
광주비엔날레 파빌리온은 국내외 미술 및 문화 기관과의 네트워크 확장을 목표로 2018년, 3개 기관의 참여로 시작되어, 이후 2023년에는 9개 기관이 참여했으며, 2024년 제15회 광주비엔날레에서는 그 규모가 더욱 확대되었다. 30여 개 국가, 도시, 기관 등 다양한 창의적 예술 주체들이 참여하는 이번 비엔날레에서는 양림동과 동명동 일대를 비롯한 광주 전역에 31개의 파빌리온이 설치되었다.
광주비엔날레 파빌리온 웹사이트는 비엔날레의 네트워크 확장 전략을 디지털 플랫폼에 효과적으로 구현하였다. 먼저, 인터페이스 디자인에서는 비엔날레 포스터의 키 비주얼을 활용한 시각적 일관성을 유지하고 있다. 랜딩 페이지에서는 31개 참여 주체 리스트를 좌우 분할 레이아웃으로 배치하고, 텍스트에 페이드 인/아웃 애니메이션을 적용하여 동적 타이포그래피를 구현했다.
출처. gwangjubiennalepavilion.org
정보 구조 측면에서도 플랫 구조를 채택하여 각 파빌리온에 대한 직접적인 접근성을 높였다. 글로벌 내비게이션에서 '소개', '연락처', '장소'를 제외한 모든 항목을 파빌리온 링크로 구성한 것은 사용자의 정보 탐색 행동을 고려한 설계로 해석된다.
다국어 지원 전략에서는 '소개' 페이지에 국문과 영문을 병기하는 방식을 채택했다. 이는 콘텐츠의 양이 적을 경우 효과적인 로컬라이제이션 방법이다. 모바일 환경에서는 언어 전환 토글을 헤더에 배치하여 반응형 디자인의 원칙을 준수했다.
색상 활용에 있어서는 동적 배경색 변화와 이에 연동된 헤더 색상 변화를 통해 시각적 흥미를 유발하고 있다. 특히 헤더와 푸터에 적용된 그라데이션 처리는 텍스트의 가독성과 디자인적 완성도를 동시에 고려한 접근으로 보인다.
'파빌리온' 페이지의 정보 설계도 주목할 만하다. 이 페이지는 큐레이터, 참여 작가, 작품 사진, 파빌리온 위치, 크레딧 등 방대한 콘텐츠를 효과적으로 구조화했다. 정보 구조 측면에서 스티키 내비게이션을 채택한 점이 돋보인다. 이는 스크롤 깊이와 무관하게 주요 내비게이션 요소를 항상 사용자의 뷰포트 내에 유지시켜, 정보 접근성을 크게 향상시킨다. 이러한 패턴은 롱-스크롤 디자인에서 사용자의 콘텐츠 탐색 효율을 높이는 데 효과적이다.
특히 모바일 환경에서의 최적화 전략이 돋보인다. 제한된 스크린 real estate를 고려하여 화살표 UI를 통한 캐러셀 내비게이션을 구현했다. 이는 모바일 사용자의 엄지영역(thumb-friendly zone)을 고려한 설계로, 한 손 조작 시의 사용성을 크게 개선한다. 이러한 접근은 모바일 퍼스트 디자인 철학을 잘 반영한 사례로 볼 수 있다.
*엄지영역(thumb-friendly zone) 은 모바일 UI 디자인에서 중요한 개념으로, 스마트폰을 한 손으로 사용할 때 엄지손가락이 쉽게 닿을 수 있는 화면 영역을 의미한다. 일반적으로 화면의 하단 중앙부터 대각선으로 반대편 상단 모서리까지의 영역이 이에 해당한다.
Steven Hoober - Design for Fingers, Touch, and People
'장소' 페이지의 경우, 디바이스별 최적화 전략이 돋보인다. 데스크톱에서는 인터랙티브 맵과 모달 창을 활용한 반면, 모바일에서는 내비게이션 기반의 UX를 제공하여 각 환경에 최적화된 사용자 경험을 구현했다.
광주 비엔날레는 30년간 많은 노하우가 집약된 만큼 비엔날레 웹사이트 구성에도 경험치가 드러났다. 광주 비엔날레 공식 웹사이트는 최신 UI/UX 트렌드를 반영하고 있다. '다크 모드 디자인'의 적용은 시각적 피로도 감소와 배터리 효율성 증대 등 사용자 중심 설계의 일환으로 볼 수 있다. 광주비엔날레와 파빌리온 웹사이트는 최신 웹 디자인 기법과 사용자 중심 설계 원칙을 효과적으로 적용한 사례로 볼 수 있다.
웹사이트. www.dekhe.kr
인스타그램. @dekhe.kr
