UI 브리핑 : 10화 - 웹 서비스 비교분석하기 2
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
오늘은 저번주에 이어서 서비스 분석에 대한 이야기를 해볼겁니다. 사실 실무자라 하더라도 디자이너.라는 직함은 갖고있지만. 대부분의경우 분석에 대한 능력이 떨어지는 경우가 많은데요. 가장 큰 이유는 시각물의 구성원리나, 구조, 규격에대한 고민보다도 - 시각적인 아름다움에 대해서 추구하시는 분들이 많기 때문일 거라고 생각합니다.
정작 UI 디자이너는 시각적 완성도 이전엥 설계에 대해서 더 많은 부분을 파고들어야하는 사람들입니다. 기획적인 관점이나 서비스의 방향성. 편의성. 그리고 이로 인한 사용자들의 불편함 / 편리함을 가르게 될 수 있다는 것이죠. 그래서 저번주에는 비슷한 한가지 테마에 대한 내용을 기반으로 - 세가지 서비스를 비교해봤었습니다.
https://brunch.co.kr/@clay1987/150
한달 사용자가 약 280만명인 라프텔.이란 서비스와
한달 사용자가 약 55만명인 애니플러스라는 서비스.
http://www.aniplustv.com/#/default.asp?gCode=MA&sCode=000
한달 사용자가 27만 정도 되는 애니맥스라는 서비스. 총 세가지였죠
물론 해당 수치는 앱 사용자를 제외하고. 동일 도메인을 통한 접속 수치를 분석했던 것입니다. 다만 그것만 하더라도 규모의 차이나, 해당 서비스의 구조. 서비스 전략 등과 연결된 부분을 분석할 수 있죠.
약 한달에 20~50만명이 넘는다는건. 하루 적어도 6~7천명의 사용자가 유입이 된다는 것이고 일반적으로 블로그나 유튜브, 인스타 등을 운영해본 경험이있으신 분이라면. 그 숫자가 얼마나 대단한건지 아실수 있을겁니다. 왜 이런 숫자와 서비스 분야가 중요하냐면. 이런 '주요 서비스에 대한 접속숫자'만으로도 - 전체 시장의 크기를 가늠할 수 있기 때문입니다.
자, 그렇다면 간단하게. 27만, 55만 ,280만이라는 숫자적 차이는 어디에서 온걸까요? 사실 이걸 분석하는게 마케터나, 뛰어난 사업 분석자들의 몫이긴한데. 이번엔 제가 좀 단순화해서 이 내용을 이야기드리겠습니다.
확인한 바에 따르면 27만의 애니맥스 (파란색)은 - 가장 늦게 출발한 해외서비스의 국내 로컬라이징 서비스입니다. 그래서 상대적으로 인지도가 낮은 편이지만. 유튜브에 애니메이션 단편을 잘라서 -공격적으로 컨텐츠를 노출 / 회원을 모집하고있죠.
https://www.youtube.com/channel/UCoRvzCqBhPi2LPOzpqrHY3A
실제로 다른 두 사이트들에 비해 유튜브 구독자수 / 영상 갯수가 크게 차이가 났습니다.
앱서비스는 상태가 엉망이고. 개발자가 제대로 붙어서 지원되고있지않다는걸 생각하면 기대하긴 어렵지만. 실제 사용자들이 판단하는 '컨텐츠'에대한 만족도는 높은편이라고 하더군요.
http://www.aniplustv.com/#/default.asp?gCode=MA&sCode=000
그에 반해 55만명의 애니플러스 (주황)은 사실 - 숫자의 함정이 있습니다. 단순 스트리밍 사이트가 아니라. 커뮤니티성 사이트에 - 상품 구매를 위한 샵 개념이 들어가기 때문에. 해당 트래픽이 포함된 수치입니다. 물론 애니맥스 (파란색)에 비해서 훨씬 나은 UI구성과, 깔끔한 디자인. 프로모션페이지에도 디자이너의 손이 닿은게 명확해보이는 화면들이 많더군요.
또한 해당 서비스는 단순히 애니메이션에 머물지않고. 게임과, 문화컨텐츠 전반으로 방향을 넓혀가고있는 상황이었습니다.
http://gamefocus.co.kr/detail.php?number=91170
해당 뉴스는 AGF라고해서. 애니메이션 / 게임 매니아들을 위한 페스티발같은 거라고하네요.
https://www.youtube.com/channel/UCciFL1bEM7JxsFX4W2HzqnA
해당 서비스 역시도 유튜브에서 강점을 보이고있었는데. 애니맥스 (파란색)에 비해서 자체적인 계약을 통해 / 컨텐츠 차별화 + 매니아층이 많은 애니메이션의 독점 컨텐츠를 제공한다는거. 그런게 큰 차이점이었습니다. 이건 마치 다른 서비스들도 마찬가지로. 경쟁사에 비해 - 더 나은 독점권을 갖기위해. 신규 아이템 개발 / 기술개발하는것과 마찬가지죠.
애니플러스는 위의 세 회사들중 가장 오래된 곳이고, 한달에 55만 정도의 접속률은. 충분히 그럴만 하다고 생각합니다. 게다가 이 서비스 역시 앱서비스 지원이 좀 미비해서. 대부분 모바일웹 / 웹에서 접속해서 보는 형태인듯했구요.
자, 그렇다면 마지막으로 라프텔.(보라) 이라는 신생 서비스를 보면... 왜 얘네는 기존의 강자인 애니플러스 (주황)의 다섯배가 넘는 규모를 갖게됐을까요? 일단은 가장 큰 차이는 - 신생업체라 컨텐츠 계약도 많지않고. 보유 아이템도 그리 희귀하지않은데도. 하루 기준 일정 회차를 무료로 / 광고를 보고 시청 가능하게 했다는 점입니다.
말그대로 무료전략으로 사람을 끌어모았다는건데요. 그외에도 UI적 관점에서는. '빠른 가입'을 가능하게하는 / 단계별 끊어놓기.를 지원했다는게 큽니다.
라프텔 (보라)의 회원가입 화면입니다. 세 서비스들 중에 유일하게 구글 로그인을 지원하고. 메일 / 이름 정도면 가입이 바로 가능합니다. 사실 오늘 이야기드릴 핵심중 하나가 바로 이런 '단순화된 / 사용자 편의를 위해 단계를 나누는 회원가입 구조입니다.
애니플러스 (주황)과 애니맥스 (파랑)은 둘 모두 아이핀 / 혹은 휴대폰 본인인증 내용을 전면에 내세웠습니다. 우리가 알고있는 - 본인인증 개념이 맨 첫페이지에 나와있어서. 사용자들에게 큰 짜증을 불러일으키죠.
두 서비스에비해 라프텔은 본인인증 필요없이 - 바로 가입이 가능하고. 이후 단계에 - 10일 무료이용권을 얻기위해서 - 사용자 본인인증을 추가로 / 선택적으로 하게 만듭니다. (사실 본인인증과 관련 인증 서비스에대한 UI는 또 다른 요소로. 나중에 다시한번 이야기를 드리게될겁니다. )
대부분의 경우 SNS로 회원가입을 하게만드는 시스템들중에 서비스 UX 단계 자체는 전혀 간편하지않은 경우가 많은데요. SNS의 계정에서 땡겨오는 정보가 ID / 이메일주소 정도 뿐이고. 혹은 그마저도 없는 경우가 많아서. 사실상 신규 가입내용을 모두 새로 기입해야하는 경우가 많기때문입니다. 말그대로 ID 정도가 자동입력될 뿐. 이외에는 따로따로 사용자가 입력을 해서 넘겨줘야하는 경우가 많죠.
그러나 라프텔 (보라색)은 기존 계정만 있으면 정말 필요한 내용만 체크하고 바로 회원가입이 완료됩니다.
그리고서 이벤트 팝업 형식으로 본인인증 관련 정보를 노출시키죠. 사실 이런 형태를 비슷한 사례로 socar (쏘카)가 있는데요. 복잡다단한 단계를 간소화시키기위해서. 기존의 다른 업체들에비해. 더 단순한 회원가입 flow를 제공하고. 단계별로 필요정보를 입력하게한 사례입니다. 이걸 단계별로 지정하느냐. 마느냐가 사실상 사용자의 초반 진입률을 3~40%이상 바꿔놓는답니다.
자, 그럼 위의 내용을 잠시 정리해보면 -
1. 애니맥스 (파란색 / 27만)
후발주자지만 컨텐츠 보유력 / 공격적인 유튜브 채널 공략 / 개발지원은 엉망 / 앱서비스도 수준이 낮음 / 그럼에도 불구하고 사용자는 꾸준히 느는중
2. 애니플러스 (주황색 / 55만)
기존의 강자인 만큼 독점 컨텐츠가 많음 / 유튜브나 타 채널들도 균일하게 유지중 / 개발지원은 좋은편이나, 앱서비스 관리가 제대로 되고있지 않음 / 커뮤니티와 제품판매, 애니메이션 시청 - 세가지가 모두 모여있는 형태
3. 라프텔 (보라색 / 280만)
신규 업체이고, 독점 컨텐츠가 많지 않음 / 부족한 컨텐츠는 제한적 무료 스트리밍으로 극복 / 숨겨져있던 라이트한 사용자층을 공략 / 유튜브보다 다른 SNS채널들에 열띤 공략중 / UI와 기획적 설계 부분이 타 서비스에 비해 훨씬 간결, 편리함
-
라프텔은 작년에 카카오쪽에 20억 투자를 받아서, 사용자수 / 컨텐츠 규모는 더 커질 전망이군요.
다음으로 볼 부분은 스트리밍 서비스의 핵심인 영상 플레이어에대한 부분입니다.
라프텔
라프텔의 작품 설명 / 영상화면입니다. 기존에도 이야기했듯이. 라프텔은 전체페이지가 모두 반응형웹 기반입니다. 또한 단순 목록 나열식 정보가아니라. 줄거리. 연관 에피소드 / 추천식 연관 작품 등이 그 다음을 이어주죠. 리뷰와 줄거리를 확인하고. 감상 후 - 평가 / 혹은 다른 작품 감상으로 이어지기 쉬운 구조입니다.
애니맥스
애니맥스 (파랑)의 작품 설명 / 영상 화면입니다. 일단 반응형웹을 지원하지않고. 사이트 레이아웃도 기괴한 편입니다. 게다가 이벤트 배너들이 시각적으로 - 컨텐츠에 대한 집중을 방해하는 형태죠. 너무 많은 기본정보탭 / 거의 무료 프레임워크 UI 테마같은 수준의 UI 요소들이. 시각적 완성도를 낮추고있습니다.
무거운 규격에비해 내용이 그렇게 중요하지도않은 편이고, 스크린샷 역시도 시나리오를 이해하기에 편리하지않고요.
게다가 뒤에깔리는 기본 배경에 약 2.5~3메가인데다 기본 서버도 로딩이 느려서. 광랜 기준으로도 페이지 로딩이 상당히 오래걸립니다.
물론 모바일웹 도메인에서는 좀더 단순해지긴합니다마는 이 역시도 속도가 좋지않은 편이고. 라프텔에 비해 사용성이 높지않은 구조로 되어있죠. 사용자가 추가로 탐색이 가능한 - 관련 작품같은 컨텐츠도 제공하지 않구요. 사용자가 스스로 다른 컨텐츠를 찾아서 움직여야하는 구조입니다.
애니플러스
애니플러스 (주황)의 목록/ 플레이어 화면입니다. 애니플러스는 PC 도메인과 / 모바일 도메인을 따로 나눠두어서 접속시에 최적 사이트 도메인으로 옮겨지게 설계된 형태입니다. 좌측의 두 화면이 모바일 화면 (반응형)이고
우측이 PC 화면입니다.
애니맥스 (파랑)에 비하면 훨씬 디자인 규격적 완성도는 높지만. 모든게 탭 형태로 정리된 구조이기에. 한눈에 전체 컨텐츠를 확인하는데에는 무리가 있습니다. 게다가 모바일 기준으로도 정보가 너무 상세한 편이죠.
메뉴 목록
1. vod / 회차 목록
2. 스틸컷
3. 등장인물 정보
4. 작품리뷰
UI적 규격은 깔끔해보이지만. 정작 컨텐츠나. 내용이 사용자에게 크게 편리하지도않습니다. 복잡할 뿐이죠.
다만 해당 서비스는 단순 스트리밍 사이트가아니라. 포탈급으로 되어있습니다. 그래서 스트리밍 / 쇼핑 / 커뮤니티 세가지를 모두 담고있는 사이트이다보니. 매우 큰 맘 먹고 리뉴얼하지않는 이상은 - 해결이 힘든 부분이기도 하네요.
PC상에서 사용시. 영상 네비게이션이 영상 플레이어상에 하나. 하단의 빨간 바 형태로 또 하나가 뜨는. 기괴한 현상도 발견했구요. 실제 체크해본바. 라프텔 (보라)쪽이 가장 간결 / 사용성이 높고 / 다른 서비스로의 연결이 편리했습니다.
당연한 얘기지만 2018. 2019년의 이슈중 하나는 신규 서비스는 모바일 퍼스트. 모바일 규격이 더 우선시됩니다.
https://brunch.co.kr/@clay1987/98
모바일 규격이 우선시되다보니. 라프텔(보라) 서비스처럼 모바일 규격을 우선시하고. 일부 정보를 PC에 맞게 재배치하는 수준의 설계가 더 선호받게되죠.
라프텔 (보라)의 결제창입니다. 좌측의 두 화면이 모바일 수준으로 크기를 줄인 화면이고. 우측이 PC 비례인데요. 중요창의경우 팝업 형태로둬서. 모바일 규격을 우선시하고. PC를 '모바일 화면 규격의 팝업창'으로 처리를 한걸 확인하실 수 있습니다.
세세하게는 다른 화면에서도. 매우 크기가 큰 버튼들이라던가. 모바일 규격에서의 알림과. PC 규격에서의 알림
이벤트 페이지 역시도 모바일 규격에 우선시 하다보니 PC가 규격적으로 텅 비어보이는 현상을 여러 화면에서 확인하실 수 있습니다. 동일한 이벤트 배너도 모바일 / PC용으로 두개씩 제작해서 - 처리했구요
작품 목록 역시도 - 카테고리를 묶어서 상단에 올려놓고 . PC에서는 좌측에 풀어놓는 형태가되었죠. 이런식으로 중요한 내용을 우선적으로 표기하고. 일부를 압축적으로 정리하여 - 반응형웹을 한 도메인으로 만드는 설계는 앞으로도 유행할 구조입니다.
그리고 이런 설계를 위해서 사용되는것이 기존에 이야기드렸던 - 부트스트랩같은 프레임워크인데요. UI 디자이너의 역할이 - 보기좋고 예쁜 화면을 만드는 역할을 넘어서야한다는 이야기이기도합니다. 여러 해상도에서 동일하게 제공될수있는. 최적의 UX를 가진 설계를 하되. 그 설계를 프레임워크나. 기존의 개발환경에 맞는 방식으로 개발을 할 수 있도록 준비하는것. 그게 앞으로의 UI 디자이너들이 해야할 역할이 되어가고있습니다.
사실, 이미 알고계신 분들도 계시겠지만. '이런 복잡한 기능들을 분석하고 일관성있는 구조를 만든다는건. 절대 쉬운 일이 아닙니다. 단순히 한 서비스만 분석해서는 절대로 '이게 더 낫다'라고 말할 수가 없는 것이죠.
https://brunch.co.kr/@jeannejieunlee/16
해당 페이지는 현대카드 앱에서 일하고있는 분으로 추정되는 디자이너의 - 카드앱 UX 분석글입니다. 사실 저분도 '자기가 아는'것들이 있다보니 상세하게 어떤게 다르고, 뭐가더좋다라는 말을 언급하질 않습니다. 다만 중요한건. 다른 경쟁사들의 구조를 계속 들여다보면서. 어떤 구조를 선택했고. 뭐가 더 편리한지. 어떤게 더 나은 구조인지를 계속해서 연구 / 고민한다는 것이죠.
사실 제가 오늘 설명드린 부분은 설계.와 좋은 서비스 만들기라는 큰 영역에서 아주 작은 일부일 뿐입니다. 국내에만 해도 여러 서비스들. 경쟁사들이 있는 분야들이 있죠. 예로 통신사인 LG u+ / KT / SKT - 공식 홈페이지. 혹은 영화관의 메가박스 / CGV / 롯데시네마. 음악 서비스의 벅스뮤직 / 멜론 / 네이버 바이브 / 카카오 뮤직 등등. - 앞으로도 여러 설계분석 / 구조에대한 내용은 이야기드리겠지만. 실제로 여러분이 스크린샷을 찍고. 정리하고. 반응형 웹 확인하고. 해당 업계의 '수준과 기대치'를 알아나가는거.그런 과정이 없다면 - 설계실력은 절대 늘지 않습니다.
재미있고 즐거운 과정이 아니라고 느끼실만한건 저도 이해합니다마는... 그런 '불편함'을 기반으로 더 나은 경험을 할 수 있게. 분석을 해야하는게 UI 디자이너들의 숙명이고. 우리가 받는 연봉의 이유이기도합니다. 차후에는 이런 구조들도 점차 '규격화, 모듈화' 되겠지만. 향후 몇년까지는 이런 규격들을 분석하고. 더 나은 설계를 통해 -신규 사용자들의 유입량 / 사용성을 개선하는게. UI 디자이너의 핵심 역량이 될 전망입니다. 그러니 직접 스크린샷 찍고. 정리하고하시면서 - 뭐가 더 나은지. 어떤게 다른지를 꼭 체험해보셨으면합니다.
서비스 분석 과정에서 모아진 스크린샷은 항상 다른 서비스를 만들때 참고하는 자체적인 자료가되고. 그걸 정리하는 일 역시도. 더 나은 설계를 위한 '기반지식'이 됩니다.
아마 설계 레벨로 넘어가시면. 굉장히 보실게 많아서 - 많이 어려우실겁니다. '이게좋아요. 이거보세요'라고 딱 짤라 말하기가 애매한 순간이 오거든요.
- 4:3 / 16:9 해상도 대비 체크해야하고.
- 이후에 반응형 웹 체크해야하고.
- 서비스 규격 ux flow 편리하게 되어있는지 체크해야하고.
- 세부 UI규격들이 완성도가 높은지. 아닌지 체크해야하고.
- 해당 서비스가 사업적으로 다른 서비스에비해 얼마나 수준이 높은지.
- 메인 전략으로 삼고있는 컨텐츠 / 아이템이 무엇인지도 체크해야합니다.
거의 준 논문급의 정보정리가 필요하죠. 그래서 가장 추천드리는 방식은. 제가 했덧 것처럼. 그나마 좀 쉬운 서비스들을 여러 기준점대로 정리해보시는겁니다.
나중에는 구글 클라우드 플랫폼 / 네이버 클라우드 플랫폼 / 아마존 웹서비스 플랫폼 / 애주어 (마이크로소프트) 클라우드 플랫폼 처럼 복잡하고, 전문적인 구조에 대한 분석 역시 진행할텐데...그런것들에 비해서는 이건 아주 쉬운 형식입니다. 그러니 부디. 오늘 이야기드린 내용을 흘려넘기지마시고. 꼭 한번 이상은. 가벼운 서비스라도 좋으니 - 직접 분석하고. 정리하는 과정을 겪어보셨으면합니다.
오늘의 내용을 정리하면 다음과 같습니다.
1. UI는 혼자서 존재할 수 없다. 항상 서비스의 방향성과 업계 현황을 어느정도 알아야 더 나은 설계가 가능하다.
2. 더 좋은 UI의 설계라는건. 항상 상대적이다. 그러니 비슷한 목적으로 만들어진 여러 서비스를 비교분석해보아야한다.
3. 회원가입과 같은 UX 플로우 / 단순 비디오 플레이어규격같은 개별 UI까지. 더 나은 방식을 체험하고, 그걸 자료화해두자. 그리고 그보다 더 나은 방식이 있는지. 업계 최신의 서비스와 비교해보자.
4. 2019년 이후에는 모바일 퍼스트와 반응형 웹 지원은 거의 필수적인 상황이다. 모바일 웹과 PC 웹의 규격을 동시에 지원할 레이아웃 배치방법을 꼭 알아두자.
5. 반응형웹과 모바일 퍼스트에 발맞추어 웹 프레임워크를 통한 UI 설계의 중요성이 더욱더 올라가고있다. 부트스트랩, 자바스크립트 프레임워크 등에 대한 - UI 규격들을 꼭 공부해두자
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
