by
Mar 03. 2020
페스티벌 홈페이지의 UX/UI가 중요한 이유
[페스티벌 디자인 1] 월디페 웹사이트가 변하고 있다
얼마 전 아는 동생이 월디페에 같이 가고 싶다고 하여 현재 티켓값과 구매처를 알아보러 월디페(월드디제이페스티벌, wdjf) 웹사이트에 들어갔었다.
들어가서 티켓 관련 정보들을 얼른 캡쳐해 보내주고는, 예상과 달리 그 웹사이트에서 한참을 나오지 못하고 있었다.
이유는 다름 아닌 월디페 웹페이지의 확 달라진 UX/UI 때문.
언제부터 달라졌는지는 모르겠다. 하지만 분명 전에 비해 굉장히 세련되게 변한 느낌을 받을 수 있었다.
웹 디자인, 프론트엔드 영역에 많은 관심을 갖고 공부하기 시작한 터라, 월디페 웹페이지의 변화는 흥미롭게 다가올 수 밖에 없었고, 이 참에 페이지를 정독해보기로 마음먹었다.
보통 이제까지 페스티벌 페이지들을 보면 정보를 얻는 데에 상당한 불편함을 느낄 수 밖에 없는 구조였다.
페스티벌에 대한 정보 등을 얻기 위해서 공식 홈페이지가 아닌 공식 SNS 계정을 ‘당연한 듯’ 방문했던 데에는 웹 디자인적 요소의 영향이 컸다. SNS 채널들이야 그런 디자인 요소가 배제된 채로 애초에 인스타그램이면 인스타그램, 페이스북이면 페이스북, 각 채널에 게시된 포스트 하나 정도에 그쳤지만, 웹페이지는 오히려 정보를 제공받는 데에 방해를 받는 듯한 느낌이었다.
“뭔가 재미없고 투박하게 생겨서 여기서 굳이 찾아보기 꺼려지는 느낌이랄까?”
UX/UI 디자인이 괜히 몇 년 전부터 핵심 요소로 떠올랐을까. 웹페이지가 소비자에게 처음 전달하는 이미지는 그 브랜드 이미지에 지대한 영향을 미친다. 소비자가 얻고자 하는 바를 얼마나 편리하게, 얼마나 쉽게, 얼마나 깔끔하게 해결할 수 있는지는 브랜드 평판 자체를 결정짓는다.
넷플릭스의 UI에 감탄하며 ‘구독해놓고 막상 영화를 많이 보지도 않는 부류의 사람들이’ 매번 넷플릭스 앱에 들어가 손가락으로 슬라이드를 계속하며 영화를 고르기만 하는 현상
카카오뱅크가 귀여운 카드 디자인과 함께 앱이 등장하자마자 어마어마한 이용자를 끌어모은 현상.
서울시의 따릉이가 많은 이용객에도 불구, 매번 “대대적인 앱 UX 디자인 업데이트를 해달라”는 민원으로부터 자유롭지 못한 점
공공기관의 앱이나 사이트는 모두가 깔기 싫어하고, 모두가 들어가기 싫은 느낌을 받는 점.
이 모두 그놈의 UX/UI 때문인 것이다.
페스티벌 씬에서 관객들 사이에 로열티 높은 매니아 소비층을 형성하고 있는 BEPC 측이 발빠르게 월디페 사이트의 웹 디자인을 개편하였다.
솔직히 언제 바뀌었는지 정확히 모른다.
이전 디자인에 대한 기억이 크게 남아있지 않아 완벽한 비교를 하기도 어렵다.
분명한 것은 현재의 월디페 페이지가 ‘개선’되었다는 점이다.
페스티벌 웹페이지에 방문하는 관객들은 어떤 마음으로 올까?
힙함 혹은 멋, 재미 혹은 흥미로움, 이런 가치들을 추구하는 이들이 페스티벌에 많은 관심을 갖고 있고, 페스티벌 사이트에도 주로 방문한다.
이들이 얻고자 하는 ‘정보’ 이전에, 이들이 페스티벌을 대할 때 중시하는 ‘가치’가 선행한다.
페스티벌의 공식 웹이 속된 말로 구리거나, 아니면 웹 디자인의 좋은 예시로 쓰일 만큼 잘 구성되었거나, 그 여부가 단적으로 매출에 직접적, 단기적인 영향을 주지는 않을 것이다. 하지만 해가 지날수록 관객들 사이에서 특정 페스티벌의 주최사가 어디인지에 대해 점점 많은 관심이 쏠리고, 일회성 페스티벌이 아닌 지속성 있는 페스티벌이 매년 열리고 생겨나는 상황. 이러한 현상 속에 각 페스티벌마다 브랜드 이미지 구축을 중요시해야함은 너무도 당연하다. 장기적인 성장, 충성도 높은 고객들의 확보에 브랜드 이미지는 절대적으로 중요하다. 그 브랜드 이미지 구축에 가장 중요한 것은 아마도 페스티벌의 전반적인 컨셉 등을 포함한 페스티벌의 기획이겠지만, 타 산업군과 마찬가지로 ‘디자인’의 요소도 더욱 강조될 필요가 있다.
첫 페이지에 들어가면, World DJ Festival(WDJF) 라는 큰 타이틀 로고와 함께 Lineup과 Ticket이라는 파란 컨트롤 버튼이 보인다.
심플하다. 심플하면서 목적적합해서 좋다.
페스티벌에 관심을 갖고 사이트를 방문한 소비자들에게 가장 중요한 것은 결국 라인업에 대한 정보들과 티켓 구매에 대한 정보일테니 말이다.
이 두 가지 요소를 앞세운 점은 굉장히 혁신적인 변화이고 고무적이다.
컨트롤 버튼을 중앙에 확 드러낸 것, 두 가지의 요소만 강조시킨 점은 좋지만 아쉬운 점은 버튼의 크기와 디자인이다.
눈에 ‘띄지만’, 눈에 ‘확 들어오지는’ 않는다.
애매함에서는 힙한 멋을 줄 수 없다고 생각한다. 차라리 작은 컨트롤 버튼이 아니라 아예 웹 페이지의 첫 화면을 간소화시켜 라인업 혹은 티켓구매 상세페이지를 이분화시켜보면 어땠을까 하는 생각도 들었다. 폭죽 터지는 월디페 무대 사진이 환상적이긴 하지만, 그럼에도 너무 많은 여백이 남은 느낌이었기 때문이다.
디자인 요소를 넣지는 않았지만 느낌만 살리는 차원에서 간단하게 만들어보았다. 이런 화면은 어떨까? 하는 마음으로
월디페 웹페이지의 변화 중 가장 인상적이었던 점은 첫 화면에서 조금 아래로 스크롤을 내리면 나타나는 라인업 소개 화면이다. 아직 Alison Wonderland, Medvza, Monstercat, Q-Dance, Madeon 등 극히 일부의 라인업만 공개된 상태. (물론 극히 일부이지만 그자체로 엄청난 라인업!)
pc, 태블릿 화면에서는 카드 디자인 형태로 아티스트 이미지가 나열되어 있고, 모바일 화면에서는 아래로 스크롤을 내릴 때마다 공개된 아티스트 하나하나가 보인다.
아티스트 이미지를 클릭하면 아티스트에 대한 매거진 아티클처럼 상세한 소개, 사운드클라우드, 스포티파이, 인스타그램, 유튜브 등 아티스트 개개인의 아카이브 관련 링크 등이 바로 나타난다. 이번에 새로 공개된 아티스트에 대해 자세히 알고 싶은 관객들을 위한 아주 소비자-친화적인 접근이다. 타 페스티벌 사이트들을 보면 대부분 라인업 소개 페이지에 라인업 포스터 한 장을 첨부해놓는게 일반적이고, 한 명 한 명 소개를 하더라도 직접 라인업 탭으로 들어가서 보는 번거로운 프로세스 끝에 간략한 설명 뿐인 구조다. 첫 홈에서 바로 라인업 공개 정보로, 그것도 아티스트 관련 많은 링크들과 신뢰성 있는 소개까지.
월디페는 어쩌면 페스티벌 페이지로서 가장 필요한 라인업 소개를 가장 직관적으로 담은 셈이다.
물론 이와 관련해서도 아쉬움은 있다. 라인업 아티스트 소개 부분에서라기보다 이와 연속적으로 나타나는 정보 덩어리인 NEWS 부분에 대한 아쉬움이다.
첫 홈에서 너무 많은 정보를 굳이 나타낼 필요는 없다. 특히나 바로 위 라인업 소개 부분에서 클릭 한번 하면 아티스트들마다 언제 공개되었는지에 대한 정보가 나타나는 상황에서 굳이 NEWS를 하단에 더 배치하여 같은 정보를 반복해서 보여줄 필요가 있나 싶다.
친절하기는 하나, 불필요하다 느꼈다.
게다가, NEWS 정보가 나타난 방식도 라인업과 마찬가지로 카드형 디자인. 아티스트 소개도 카드형으로 되어 있는데, 연이어 정방형 카드 디자인으로 반복 정보가 제공된다면 소비자 입장에서는 이 UX가 매력적으로 다가오기 힘들다. NEWS 탭의 정보를 홈, 라인업 정보 하단에 배치하려면 차라리 줄줄이 리스트형으로 하는 것은 어땠을까 싶다.
추가적으로 두가지 더.
카운트다운 화면. 좋은데 아쉽다.INFO에 들어가면 카운트다운이 나온다. 흥미롭다. 페스티벌을 기다리며 느끼는 설렘이 증폭되기도 하고.
그럼에도 뭔가 투박해보이는 둥근 모서리의 블록 버튼들은 아쉽다. 심지어 모바일에서는 이따금씩 카운트다운이 제대로 표시가 안되거나 웹 자체가 로드가 안되는 경우도 나타났다. 간략히 확인해보니 jQuery로 사이트를 개발했음을 확인할 수 있었는데, 대개 jQuery 기반 사이트들에서 자주 나타나는 현상이기에 이 점을 확인하고는 더 알아볼 것이 없었다.
(jQuery 기반 개발은 익스플로러, 크롬, 파이어폭스, 사파리 등에 상관없이 쉽게 개발할 수 있다는 장점이 있는 반면, 이런 식의 로드 오류가 자주 발생한다.)
마지막, 메뉴 탭은 일반적인 사이트처럼 상단에 고정시켜두지 않고 좌측에 메뉴를 나타내는 아이콘을 배치하여, 클릭했을 때 메뉴가 전 화면을 덮도록 만들었다.
스마트폰으로 들어간 모바일 레이아웃 상에서는 이 UX가 굉장히 좋다. 아무래도 데스크탑이나 태블릿보다는 모바일로 많은 사람들이 접할 것을 예상하고 모바일 기기에 친화적인 웹 디자인을 한 것으로 보인다.
스마트폰 화면에서 메뉴를 다 덮으니 가시성도 높아지고 다른 요소들에 방해받지않아 좋았다. 다만 태블릿이나 pc로 사이트에 들어갈 때도 메뉴 아이콘을 눌렀을 때 전체화면에 메뉴가 뜬 점은 개선이 필요해보였다.
큰 화면에서는 메뉴가 적당히 좌측 일부에 슬라이드되어 나타난다면 훨씬 깔끔하지 않았을까.
월디페를 제작하는 BEPC의 일원은 아니지만, 월디페와 BEPC의 행보를 응원하는 팬심 가득한 한 사람으로서 쓰고 보니 아쉬운 점들을 생각보다 많이 서술한 듯하다.
많은 기대와 관심을 갖고 있는 페스티벌과 그 주최사가 국내 페스티벌 씬을 이끌어가는 주도적인 역할을 해주길 바라는 애정 가득한 마음으로 받아들여졌으면 한다.
월디페의 D-100이 깨졌다. 다가올 월디페의 성공적인 개최를 응원한다.
