몰입되는 전시 웹사이트 디자인하기
스무 번째 人(in)spiration | DX팀
Plus 人(in)spiration – 플러스엑스의 '일' 그리고 '사람'이야기
더하기를 기울여 곱하기로 변화하듯 플러스엑스에는 다양한 사람이 모여 함께 일합니다.
변화하는 시대에 다양한 경험을 새롭게 조합해 나가며 늘 최선의 결과를 만들어 내는 플러스엑스.
그 사람들의 이야기를 만나보세요.
인터랙션으로 몰입감 높은 웹사이트 디자인
DX 팀 UI Designer 이수연
작년 11월에 시작한 <데이비드 호크니: Bigger & Closer (not smaller & further away)>는 데이비드 호크니의 첫 미디어아트 전시로, 광활한 전시장이 호크니의 그림으로 가득 찬 경이로운 경험을 선사합니다. 이 전시는 작년 가을에 문을 연 '라이트룸 서울'에서 열리고 있습니다. 라이트룸 서울은 압도적인 규모와 최첨단 프로젝터, 음향 시스템으로 생생한 전시 경험을 선사하는 전시장입니다.
라이트룸 서울은 '예술과 기술이 만나 전에 없던 경험을 전달한다.'는 브랜드 지향점을 전달하고자 플러스엑스에게 웹사이트 제작을 의뢰했습니다. 여러 브랜드의 버추얼 쇼룸을 만든 이력이 있는 플러스엑스의 DX팀은 이번 프로젝트에서는 '몰입'이라는 가치에 집중했습니다. 과연 DX팀이 만든 몰입감이 높은 웹사이트는 어떤 모습일까요? 또 그들이 생각하는 몰입감이 높은 웹사이트란 무엇일까요? DX팀의 이수연 디자이너에게 그 답을 들어봤습니다.
이번에 만날 멤버는 DX팀의 이수연 UI 디자이너입니다.Q. 개발자가 주축을 이룬 DX팀의 첫 번째 디자이너라고 들었어요. 어떻게 DX팀의 UI 디자이너로 합류하셨나요?
이수연 안녕하세요. 저는 지난 8월, DX팀의 UI 디자이너로 입사한 이수연입니다. 이전부터 인터랙티브 디자인에 큰 관심이 있었고, 플러스엑스의 포트폴리오를 자주 살펴보던 중에 DX팀에서 UI 디자이너 채용 공고를 발견하여 지원하게 되었습니다. DX팀이 제작한 쇼룸 웹사이트와 인터랙티브 웹사이트를 보며 재미있는 프로젝트에 참여할 기회를 얻을 수 있을 것 같아 기대되었습니다. DX팀은 크리에이티브한 분위기를 지향하고 있어서 현재 제 직무에 만족하며 업무하고 있습니다.
Q. DX팀에서 디자이너로 일하는 장점은 무엇인가요?
이수연 가장 큰 장점은 개발자와의 긴밀한 협업을 통해 크리에이티브한 프로젝트를 진행할 수 있다는 점이에요. 플러스엑스 DX팀은 단순히 개발팀이라기보다는 크리에이티브 공동체라는 생각이 들어요. 퍼블리셔, 프론트엔드, 백엔드 개발자들의 디자인 감도가 굉장히 높고 시야가 다방면으로 굉장히 넓고요. 이런 다양한 시각과 역량을 바탕으로 브랜드를 더 잘 표현하고 사용자 경험을 향상시키기 위한 고민을 깊게 나누며 프로젝트를 진행하고 있어요. 최근에는 AI를 다루는 디자이너와 개발자들도 팀에 합류하여 제 시야도 점점 확장되고 있다는 걸 느껴요.
Q. 라이트룸 서울 웹사이트 프로젝트에 참여하셨는데 어땠나요?
이수연 라이트룸 서울 웹사이트 제작 프로젝트는 제가 입사한 후의 첫 컨설팅 프로젝트였어요. 라이트룸 영국에서 기획한 전시를 라이트룸 서울이 독점 계약을 맺은 것이라, 한국을 대표하는 웹사이트로 만들어야 했기 때문에 부담이 많이 되었습니다. 클라이언트와의 원활한 소통을 위해 인터랙션 프로토타입을 제작하며 소통했는데, 라이트룸 서울 측에서 크게 만족했던 기억이 나요. 그 덕분에 향후 프로젝트 계약까지 성사되었다고 들었습니다.
Q. 최근 작업한 라이트룸 서울 웹사이트의 디자인 목표는 무엇이었나요?
이수연 라이트룸 서울은 전시장 5면에서 영상이 재생되는, 압도적인 스케일을 자랑하는 곳이에요. 그래서 전시장의 특징을 웹사이트에서 간접 체험할 수 있게 만드는 것이 첫 번째 목표였습니다. 그리고 라이트룸 서울이 어떤 전시를 하는 공간인지 보여주고, 인터랙션으로 사용자가 정보탐색 과정에서 흥미를 느끼고 콘텐츠를 능동적으로 소비하도록 디자인했습니다.
Q. 어떤 인터렉션을 활용했나요?
이수연 라이트룸 서울은 입체적이고 다채로운 색상, 무빙 이미지를 활용하여 전시를 진행하는 곳이에요. 이러한 압도적인 미디어 전시를 표현하기 위해 몰입되고 확장성을 가진 인터렉션을 활용했습니다. 이미지를 확장하는 트렌지션으로 사용자가 이미지에 들어가는 것처럼 느끼도록 했고요. 3D 맵핑과 스와이퍼 인터랙션으로 콘텐츠를 제공했습니다. 또, 스케일이 큰 이미지와 타이포그래피를 활용하여 라이트룸 서울의 압도적인 분위기를 전달하려고 했습니다.
Q. 라이트룸 서울의 공간적 특징이 웹사이트 디자인에도 영향을 미쳤나요?
이수연 관람객은 전시장 5면에 재생되는 미디어아트를 보면서 마치 영상 속에 들어온 듯한 기분을 느낍니다. 이런 특별한 전시 경험이 웹사이트 사용자에게도 전달되길 바랐어요. 그래서 전시장을 시각화한 큐브를 X, Y, Z 축으로 다양하게 볼 수 있는 인터렉션을 제작했습니다. 그리고 사용자와의 상호작용을 유도하고 공간감을 보여주기 위해 3D 맵핑 기술을 사용하여 마우스의 움직임에 따라 전시장이 움직이는 인터랙션을 제작했습니다.
Q. 웹사이트 메인 화면에서는 스크롤로 전체 페이지를 둘러볼 수 있더라고요.
이수연 메인 화면이 서브 페이지로 들어가는 게이트 역할을 하기를 바랐어요. 그래서 스크롤 외 다른 액션을 유도하지 않고 팸플릿을 보는 것처럼 스토리 라인이 느껴지도록 디자인했습니다. 이 과정에서 사용자 이탈률을 줄이기 위해 스크롤할 때마다 인터랙션이 계속 등장하도록 구상했어요.
Q. 전시 웹사이트에서 중요한 건 예매 페이지인데, 이 페이지로의 유도는 어떻게 계획했나요?
이수연 라이트룸 서울 웹사이트의 궁극적인 목표는 전시 예약을 이끄는 것이었어요. 그래서 사용자가 어느 페이지로 이동해도 예약 사이트로 넘어갈 수 있게 내비게이션과 푸터에 버튼을 배치했습니다. 그리고 푸터에 'WE INVITE YOU'라는 타이포그래피를 두어 세련된 무드를 조성하면서 예약 사이트로 유도하도록 디자인했어요.
서브 페이지에선 에디토리얼 디자인으로 보기 쉽고 깔끔하게 정보를 구성했습니다.Q. 각 페이지에서는 어떤 감성과 메시지를 전달하려고 했나요?
이수연 메인 페이지에선 라이트룸 서울의 정보와 브랜드 가치를 전달하고 콘텐츠 내용을 요약해서 사용자의 흥미를 이끌려고 했어요. 라이트룸 서울의 무드를 전달하고 사용자가 몰입할 수 있도록 화면을 어둡게 하고 타이포그래피를 과감하게 사용했습니다. 서브 페이지에서는 예비 관람객이 전시장과 전시에 관한 구체적인 정보를 쉽게 인지할 수 있도록 했어요. 정보를 명확하게 전달하고 가독성을 높이기 위해 배경을 밝게 하고 정돈된 레이아웃으로 디자인했습니다. 특히 여백에 신경 썼어요.
미디어아트의 화려함을 보여주기 위해 메인 화면의 배경은 어둡게 디자인했습니다.Q. 웹사이트에서 제일 눈에 띄는 건 파티클 애니메이션이었어요. 개인적으로 라이트룸 서울 웹사이트를 대표하는 중요한 그래픽 요소라고 생각해요.
이수연 라이트룸 서울 로고의 점을 활용한 파티클 애니메이션은 이재훈 대표님의 아이디어였어요. 로고의 그래픽 요소를 사용하면 웹사이트의 아이덴티티가 잘 드러날 것 같다고 하셨거든요. 그래서 라이트룸 서울의 4가지 특징 - immersive(몰입하는), Large-Scale(대규모의), Overwhelming(압도적인), Innovative(혁신적인)을 파티클 애니메이션으로 표현했습니다. 각 파티클의 형태는 스크롤에 따라 달라지는데요. 이 인터렉션은 DX팀의 프론트엔드 개발자 분이 제작하셨어요.
Q. 라이트룸 서울과 웹사이트의 중요한 개념은 '몰입'이었어요. 몰입감이 있는 웹사이트란 어떤 웹사이트인가요?
이수연 콘텐츠와 사용자가 상호작용하면서 정보를 습득하도록 도와주는 웹사이트요. 일반적으로 웹사이트에선 스크롤하면서 무심코 정보를 지나치게 되거든요. 사용자의 스크롤에 따라 애니메이션과 인터랙션을 보여주면 몰입도가 더 높아지기 때문에 이번 프로젝트에선 인터랙션을 고심하며 작업했습니다. 저희가 고민한 만큼 사용자들도 웹사이트 내 콘텐츠에 집중하고, 라이트룸 서울을 궁금해했으면 좋겠어요. 그리고 웹사이트를 통해 라이트룸 서울이라는 공간이 감각적이고 트렌디한 전시 문화를 이끄는 브랜드로 인식되었으면 합니다.
Q. DX팀에서 이루고 싶은 계획이 있나요?
이수연 먼저 현재 역량을 더욱 발전시키면서 더 다양한 프로젝트에 참여하여 디자인 경험을 다양하게 쌓고 싶어요. 디지털 트렌드와 기술 변화를 주시하면서 인터랙티브한 디자인과 사용자 경험을 촉진하는 역할을 하고 싶고요. 또, AI와 같은 새로운 기술을 활용하여 브랜드와 사용자에게 더 가치 있는 솔루션을 제공하고 싶어요.
Plus 人(in)nspiration 릴레이 인터뷰는
앞으로도 계속 플러스엑스 브런치를 통해 발행됩니다.
