오디오클립 디자인 분석
장 자크 상페와 협업을 진행한 네이버
네이버 오디오클립은 다양한 오디오 콘텐츠를 제공하는 포괄적인 스트리밍 플랫폼이다. 사용자들은 이곳에서 강연, 어학, 육아 관련 콘텐츠부터 오디오북, 오디오 드라마, ASMR에 이르기까지 폭넓은 주제의 오디오 콘텐츠를 청취하고 공유할 수 있다.
2018년부터 시작된 오디오클립은 음원 청취뿐만 아니라 사용자가 직접 콘텐츠를 업로드하고 공유하는 기능을 제공하여, 창작자와 청취자 모두에게 다양한 기회를 열어준다.
오디오클립은 바쁜 현대인들에게 시간과 장소의 제약 없이 다양한 지식과 문화를 접할 수 있는 기회를 제공한다. 독서나 비디오 시청과 달리, 오디오 콘텐츠는 이동 중이거나 다른 일을 하면서도 즐길 수 있어, 효율적인 시간 활용이 가능하다.
또한, 오디오클립은 창작자와 청취자 간의 직접적인 소통을 가능하게 하여 디지털 커뮤니티 구축에 기여한다. 창작자들은 자신의 콘텐츠를 통해 청취자들과 교류하고, 그들의 반응을 실시간으로 받아들이며 콘텐츠를 개선할 수 있다. 이러한 상호작용은 오디오 콘텐츠의 질을 향상하고, 청취자들의 만족도를 높인다.
종합적으로 볼 때, 오디오클립은 디지털 콘텐츠 소비의 새로운 방향을 제시하며, 지식과 문화의 접근성을 넓히는 동시에 창작자와 청취자 모두에게 가치 있는 경험을 제공한다. 이는 현대 사회에서 오디오 콘텐츠의 중요성을 강조하며, 그 역할을 지속적으로 확장시키고 있다.
그렇다면, 오디오클립의 서비스 디자인이 사용자들이 오디오 콘텐츠를 소비하기에 얼마나 용이하며, 시간과 장소의 제약 없이 오디오를 통해 지식을 함양하기 좋게 설계되어 있는지 살펴보자.
출처: 플레이스토어, 오디오클립 스크린샷UIUX 디자인을 살펴보기에 앞서 오디오 클립의 서비스 로고를 보면 귀여운 일러스트 캐릭터가 네이버의 브랜드 컬러가 적용된 헤드폰을 착용한 모습을 볼 수 있다. 어떻게 이런 로고가 탄생하게 되었을까?
오디오클립 서비스 본질
오디오클립의 서비스 본질은 다음과 같다.
'가슴 따뜻하고 편안한 느낌을 주는 서비스'
빠르게 보고 빠르게 하라지는 콘텐츠가 넘쳐나는 오늘날 차가운 모바일 세상에서, 자기만의 공간에서 온전히 집중해서 듣고 함께 공감하는, 가슴 따뜻하고 편안한 느낌을 주는 서비스가 되고자 했던 오디오클립.
출처: https://post.naver.com/viewer/postView.nhn?volumeNo=7231935&memberNo=34653588서비스의 본질을 표현하기 위해 프랑스 작가 '장 자크 상페'의 '꼬마 니콜라'에 영감을 받아 서비스 로고를 창조했다. 1950년대의 꼬마 니콜라는 장난기 어린 시선으로 인간의 삶과 일상의 소소한 행복을 전달하는 캐릭터로, 오디오 클립 서비스의 본질을 로고에 잘 녹여내어 표현하는 데 매우 적합했다.
꼬마 니콜라에게 네이버 서비스 컬리인 초록색을 헤드폰에 씌움으로써 듣는 콘텐츠의 속성을 강조하고, 브랜드 아이덴티티를 부여한 점이 매우 인상 깊었으며, 이런 일러스트들이 온보딩 및 서비스 여러 접점에 적용된 모습을 확인할 수 있었다.
해당 서비스의 일러스트들은 사용성을 최우선으로 고려하여, 홈, 플레이리스트, 재생 스크린과 같은 핵심 기능에서는 일러스트를 배제했다. 반면, 온보딩, 카테고리 선택, 예외 케이스 등에서 일러스트를 적절하게 활용함으로써 서비스의 아이덴티티와 심미성을 균형 있게 배분했다. 이러한 접근은 사용자 경험을 향상하면서도 서비스의 독특한 매력을 유지하는 데 중요한 역할을 한다.
출처: https://post.naver.com/viewer/postView.nhn?volumeNo=7231935&memberNo=34653588오디오클립 메인 홈
오디오클립은 메인 홈에서 다양한 콘텐츠를 적절한 컴포넌트로 정보 제공하고 있다
01. 독서 콘텐츠: 책 형상의 직사각형 컨테이너 사용, 제목과 금액 정보에 강조.
02. 일반 콘텐츠: 정사각형 컨테이너를 사용한 안정적 레이아웃으로 정보 전달.
03. 라이브 콘텐츠: 원형 컨테이너와 'live' 칩으로 다른 컴포넌트와의 차별화, 클릭 유도 설계.
04. 개인 맞춤 플레이: 하트 버튼, 플레이 버튼, 전체 보기 등으로 사용자 상호작용 유도.
05. 프로모션 및 네이버 바이브 콘텐츠: 운영 배너로 정보 전달.
전체적으로 다양한 컴포넌트가 사용되었어도 혼란을 야기하지 않고 명확한 위계질서와 헤드라인 텍스트로 콘텐츠들 간의 구분이 명확하게 이뤄져 정보 탐색에 용이했다. 하지만 실제 클론 디자인을 진행한 결과 섹션 간의 간격이 매우 협소함을 알아낼 수 있었다.
섹션 간 스페이싱은 일관성을 위해 24px로 설정되어 있으나, 많은 정보와 다양한 컴포넌트들 사이의 간격이 좁게 설계되어 있어 디자인이 다소 답답하게 느껴질 수 있다. 이로 인해 오랜 시간 정보를 탐색하면 사용자는 피로감을 느끼고 집중도가 저하되는 경험을 할 수 있다.
섹션 간의 간격을 늘리는 것은 섹션별로 다른 그룹임을 명확히 인지시킬 수 있는 중요한 디자인 전략이다. 이러한 조정은 각 섹션의 구분을 더욱 명확하게 하고, 여백을 부여하여 전체적인 디자인의 답답함을 해소하는 데 기여한다. 이는 사용자의 시각적 피로를 줄이고 전체적인 사용자 경험을 개선하는 효과적인 방법이 될 수 있다.
오디오클립 플레이 스크린
오디오클립의 플레이 스크린은 심플함이 눈에 띈다. 헤더와 상단 부분은 직관적인 아이콘들과 함께 차별화된 폰트를 사용하여 콘텐츠의 제목을 돋보이게 강조하고 있으며, 하단 부분은 오디오 재생과 관련된 기능들을 사용자가 편리하게 이용할 수 있도록 구성된 버튼들로 구성되어 있다. 또 오디오 콘텐츠 썸네일에 맞춰 BG 색상의 변화는 콘텐츠에 몰입도를 높여주고 있다. 이러한 디자인은 사용자 경험을 우선시하면서도 시각적으로 매력적인 환경을 제공한다.
독서나 비디오 시청과 달리, 오디오 콘텐츠는 이동 중이거나 다른 일을 하면서도 즐길 수 있는 점을 고려해
오디오클립의 사용자 인터페이스는 특히 이동 중에도 사용하기 쉽게 설계되었다. 상단에 위치한 자동차 아이콘을 누르면, 운전 중인 사용자들을 위한 편의성이 강조된 모드로 전환된다.
이 모드에서는 필수 버튼의 크기가 커져 운전하면서도 쉽게 클릭할 수 있도록 되어 있어, 안전과 사용 편의성을 동시에 고려한 디자인을 확인할 수 있다. 이는 사용자 경험의 다양성과 편의를 중시하는 오디오클립의 세심한 접근을 반영한다.
다양한 네이버 서비스와의 연계
오디오클립은 네이버의 생태계를 반영하여 여러 접점에서 네이버의 서비스와 연동되어 있다. 댓글 기능에서는 네이버의 파파고 서비스를 통해 다양한 언어로 번역이 가능하며, '공유하기' 기능을 사용할 때는 네이버의 여러 다른 서비스와의 공유가 용이하게 설계되어 있다. 이러한 설계는 사용자 간의 상호작용, 콘텐츠 공유 및 확산을 편리하게 만들어, 효과적인 사용자 경험을 제공한다.
하지만 여기서 댓글 기능의 스크린은 기존 오디오클립의 컴포넌트들과 조화를 이루지 못하고 따로 분리된 느낌이 든다. (BG 컬러, 등록 버튼의 컬러 및 Radius 값 등)
이에 대한 추측은 네이버 오디오클립이 하이브리드 앱 형식을 사용하고 있기 때문일 수 있다. 상단과 하단 영역은 앱의 뷰를 형성하고 전체적인 디자인이 조화롭게 설계되었지만, 댓글 기능의 경우 웹에서 보여지는 뷰를 활용하고 있어 오디오클립의 다른 디자인과는 약간의 차이가 있을 것이라는 생각이 든다.
하이브리드 앱 형식을 사용하는 경우, 웹에서 사용하는 HTML/CSS/JavaScript를 가져와서 수정이 용이하다는 장점이 있다. 그러나 이러한 접근은 네트워크에 종속되어, 연결이 원활하지 않을 경우 서비스 속도에 영향을 미칠 수 있다. 또한, 앞서 언급된 바와 같이 디자인의 일관성 문제로 인해 사용자 경험이 저하될 가능성이 있다. 이는 하이브리드 앱이 가진 특성상 고려해야 할 중요한 요소들이다.
현대 생활의 바쁜 리듬 속에서, 사람들은 점점 더 유연하고 편리한 콘텐츠 소비 방식을 선호하게 되었다. 오디오클립은 이러한 수요에 부응하여, 사용자들이 언제 어디서나 다양한 오디오 콘텐츠를 소비할 수 있는 플랫폼을 제공한다.
시각적인 영상 콘텐츠가 밑도 끝도 없이 나오는 요즘, 가끔은 오디오클립을 통해 청각 콘텐츠를 활용해 지식을 함양하고 다양한 콘텐츠를 즐겨보면 어떨까
참고자료
