UI 브리핑 : 9화 - 웹 서비스 비교분석하기
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
자, 오늘은 머리아픈 UI 얘기를 조금 떠나서. 큰틀에서 서비스를 분석하는 방법에 대해서 이야기해보겠습니다. 그리고 세부적으로는 세세하게 UI나, 사용 편의성까지 판단하는 부분까지 들어가게될듯하네요.
https://brunch.co.kr/@clay1987/97
위의 글은 기존에 진행했던 -한화큐셀즈에 대한 서비스 분석을 바탕으로한 - 분석방법에 대한 이야기입니다.
이떄. 제 경우에는 크게 세가지 방식으로. 비주얼컨셉 / UI 디자인적 완성도 / 컨텐츠 내용과 맥락이라는 세가지 기준점으로분석을 했었는데요.
오늘의 분석 대상인 한화 큐셀즈 홈페이지
https://www.q-cells.com/kr/main.html
일단 디자인분석이라고 하면. - 난 디자이너니까. 시각적 규격만 들여다보면 되지않을까. 하고 생각하시는 분들이 많을겁니다. 그러나 정작 실무나, 팀장급 이상의 업무를 하게되면. 서비스 분석이 왜 중요한지. 그리고 그걸 실제로 어떤식으로 정리를 해야하는지. 여러 고민을 하게되는데요
일단 제가생각하는 팀장급 업무 수준의 UI 디자인은. 해당 서비스에대한 역기획이나 / 개선지점 까지 잡아낼 수 있는 수준 / 개발을 위한 밑기반도 확인이 가능한 수준을 이야기합니다. 그리고 그 정도 수준이 되려면 위에서 이야기드린 웹서비스 분석글 정도로는 불충분하죠.
실제로 어떤 서비스를 만들건 간에. 기존에 없는 완전히 새로운 서비스인 경우는 많지않습니다.그렇기에 -타사 대비 분석을 항상 진행해야하고.해당 서비스가 어느 위치에있는지. 어떤 장단점이있는지. 다른 서비스들과 겹치지 않는 고유한 강점이 있는지.이런 부분들을 분석해야합니다.
타사 서비스에대한 분석은 항상 더 나은 결과를 만들어줍니다. 여기에 좋은 사례가 바로 이런 분석글인데요. 거의 아카데미 / 논문급의 분석글이라 가져와봤습니다.
MBC의 개발자분이 분석한 - 타사분석 사례
해당 저자는 MBC에서 근무하는 IT / 개발쪽 업무부서 시니어인듯한데요. 서비스분석을 위해 약 십여개의 서비스들을 하나하나. 이용률 / 랭킹 / 기능분석 을 포함해 도식화하여 - 해당 서비스가 어떤 방향으로 나아가야할지를 분석합니다.
사실 저런 방식은 기획이나 사업 단위의 프로젝트 분석에 가깝기때문에. 당장 실무에 적용하기에는 좀 거리가 있다고 느끼실겁니다. 그래서 제가 이번에 하려는건. 한가지 분야에 있는 세가지 서비스에 대한 비교 / UI 분석을 진행해보려합니다.
실무에서 사용하실수도 있는 방식이고. 각 서비스 디자인들을 들여다보기위한 방식이므로. 참고핫히거나, 개선하셔서 자신만의 방식으로 사용하셔도 좋을듯하네요.
오늘의 세 주인공은 - 애니메이션 스트리밍 / 전문 업체인 - 라프텔, 애니플러스, 애니맥스 - 총 세 채널입니다.
라프텔
애니플러스
http://www.aniplustv.com/#/default.asp?gCode=MA&sCode=000
애니맥스
굳이 하나만 바라보지않고. 왜 세가지를 서로 비교하는가는. 아주간단합니다. 절대적인 분석방법을 갖고있거나. 이미 해당 업계에대해서 큰 흐름을 알고계신 분이라면 상관없겠지만. 대부분의경우 디자이너들이 하나의 업계에 대해서 통달한 경우는 많지가 않습니다. 그렇기에 항상 - 새로운 기술이나.상대적으로 더 나은 기술 / 개선된 UI를 분석하기에는. 상대적 분석이 훨씬 좋은 방식이 됩니다.
지금부터 이야기되는 이 방식은 무조건적인 정답은 아니겠으나. - 해당 업계에 대해 많은 지식이 없는 경우에도 유용하게 사용할 수 있는 방식입니다. 일단 해당 업계에 대해서 잘 알지 못할 경우. 크게 세가지를 들여다보아야합니다.
1. 해당 서비스에 대한 인지도 / 사건사고
요즘은 나무위키라던가. 이런것들이 많죠. 온라인 아카이브가 많으니.해당 서비스에대한 인지도는 그런 문서들을 잠시 훑어보기만해도 확인이 가능합니다.
https://namu.wiki/w/Animax%20PLUS
예를 들어 애니맥스 플러스라는 서비스의경우. 한국에만 서비스가 있는게 아니라. 일본쪽에서 한국 지사형태로 만들어진 사업단위입니다. 또한 애니플러스라는 - 국내 서비스보다 뒤늦게 시작했음에도 불구하고 - 양질의 컨텐츠들을 많이 들여왔다고 하더군요.
장단점 비판.요소같은 것들이나 실제 이용자들이 겪는 불편등이 자세하게 나와있는 상태입니다. 세세한 부분들이나. 대략적인 평가를 위키에서 찾고. 확인한 이후. 해당 서비스에대해서 좀더 자세히 알고싶은 경우는 트래픽 확인 사이트.가있으니. 해당 웹사이트의 트래픽.을 알아보면 이해가 쉽습니다.
왜 트래픽이냐.하시면 - 실제 얼마나 많은 이용자들이 해당 사이트를 찾는지. 그리고 해당 사이트에 연관되어 자주 찾게되는 서비스들은 어떤 곳인지를 확인할 수 있기 때문입니다.
1. 애니맥스 플러스의 사례
예를 들어 애니맥스 플러스라는 곳은 두 도메인을 갖고있는데. 그중 메인 도메인은 2018년 12월 부터. 2019년 1월까지 전 세계적으로 약 26만명 가량의 접속자가 있었습니다.
약 두달간의 접속자수인데. 접속자수가 빠르게 줄어들고있다는 점이 눈에 띠네요. 그럼 다른 서비스를 좀 볼까요?
2. 애니플러스 TV의 사례
http://www.aniplustv.com/#/default.asp?gCode=MA&sCode=000
해당 내용은 애니맥스 플러스의 사용률에대한 부분입니다. 마찬가지로 2018년 12월~ 2019년 1월까지 약 77만명의 사용자가 접속했습니다. 27만명 정도의 애니맥스 (1번사례)에 비해 차이가 많이 나죠. 그렇다면 '왜 이런차이가 날까'를 분석해보니.
-
일단 첫번째 요인은. 애니맥스 플러스라는 사이트는. 실제 스트리밍 서비스와. 모체 홈페이지가 따로있었습니다. animaxplus.co.kr 과 / spina.co.kr 이라는 - 개별 도메인을 사용하고있죠
그렇기에 모체가되는 사이트는. 접속자수가 상당히 많고. 그중 약 1만명의 접속자가 부 도메인으로 몰리는걸 알 수 있었습니다.
두번째 요인은 컨텐츠 수급량의 차이와. 구조의 차이입니다. 컨텐츠를 담고있는 내용이나 / 사용 목적이 다르기 때문에, 그 규모가 차이가 날 수 밖에 없는 것이죠.
애니맥스 (1번)의 홈페이지
애니플러스 (2번)의 사례
일단 기술 스택을 좀 분석해보면. 디자인 수준이나. 이미지 첨부 등. 개발적인 부분에서 - 파란색 애니맥스 쪽이 훨씬 수준이 떨어지고. 이미지 처리에대한 기반도 매우 부족하단걸 확인할 수 있었습니다. 그중 가장 대표적인것이. 해당 화면을 그려내기위해 첨부된 이미지들의 방식.에대한 부분이었는데요.
대부분 좌우 배너를 사용할경우.중간에 가려지는 부분은 트래픽 경량화를 위해. 이미지를 압축하거나. 중간부분을 비워두는것이 좋습니다. 보통은 통이미지를 사용하진 않죠. 그러나 직접 확인해본결과. 약 2.5메가가 넘는 - 심지어 상단은 텅 비어있는 통짜 이미지를 배경으로 발라뒀더군요.
배경에 통 이미지를 그대로 사용해, 엄청난 트래픽 부하를 일으키는 애니맥스 사이트의 현황
이런 이미지크기 하나에도 신경을 써야하는 이유는. 1만명이 한달에 접속한다 했을때. 한달 트래픽은 해당 이미지를 위해서. 2만5천 메가바이트의 트래픽을 준비해야하고. 10만명이면 25만 메가. 250gb정도가 되는 트래픽을 사요하게됩니다. 사람 접속자수가 늘어날수록 기하급수적으로 소모 용량이 늘어나죠. 그렇기에 이미지 최적화 / 조각으로 잘라서 사용자에게 보여주는 속도와. 트래픽 모두를 개선해야하는데. 이런 부분에 대해서 전혀 신경을 쓰지 않고있다는걸 확인할 수 있었습니다.
덕분에 로딩은 느리고. 사용성도 떨어지게됐죠.
또 한가지 확인한것은. 자체 서비스 앱에 대한 관리부분에서였습니다.
https://play.google.com/store/apps/details?id=kr.co.animaxplus&hl=ko
구글 플레이스토어 기준. 235명이 평가하고. 평점은 1.7점. 거의 악담에가까운 수준으로 - 서비스에대한 대처나. 유지보수가 이뤄지고있지 않다는걸 알 수 있죠. 일단 업데이트가없다 = 서비스에대한 지속적인 관리나 / 개선의지가 없다고 보여지므로. 개발인력이 제대로 배치가되지않는다. = 자체 개발력이 없다. 고 보시는게 맞을듯합니다.
심지어 웹페이지는 반응형을 지원하지않고. 모든 페이지는 동일한 레이아웃에. 하단이 비어있는. 기묘한 구조입니다. 심지어 레이아웃 그리드 자체도. 완성도가 낮은 상태죠
게다가 메가메뉴...비슷한걸 사용하곤있지만. 사실상 메뉴구조가 나뉘어있어봐야 의미가없는. 단일 메뉴에 가깝더군요.
좌측의 다섯개의 메뉴가 - 모두 동일한 6개의 하위카테고리를 갖고있습니다. 그냥 결과적으로 목록을 - 다른방식으로 다섯개의 카테고리로 나누어두었을 뿐이라는거죠.
이런 수준에 비해서. 주황색. 애니플러스를 확인해보면. 일단 규격이나 그리드가 상당히 안정되어있다는걸 알 수 있습니다. 일단 개발자가 손을 많이 대고있고. 디자인적으로도 - 무난함이 묻어납니다
배너 크기도 지나치게 크게 만들지않았고. 정말 중요한 경우나 / 피할수없는경우를 제외하고는. 이미지 최적화 / 개별 모듈화를 진행했더군요. 또한 이 서비스는. 애니맥스 (1번 사례) 와는 다르게 단순 스트리밍이 아니라. 쇼핑 메뉴와 - 토크 게시판. 랭킹 컨텐츠를 제공하고있습니다. 그래서 실제 사용자들의 유입이나. - 컨텐츠 구매 / 등이 원활하게 이뤄지도록 한 구조입니다.
덕분에 더 무겁고. 준 포탈급의 사이트로서운영이 되고있었습니다. 반응형은 제공하고있지않으나. 모바일 도메인을 따로두어서. 해당 도메인만 반응형처리가 되어있더군요.
좌측의 두개가. 반응형 처리된 모바일 도메인이고. 우측이 PC 화면에서 동일한 메뉴를 찾아서 함께 배치해본 화면입니다. 작품 목록. 메뉴 또한 PC에서 중요하게여겨지는 부분만을 압축해서 모바일에서 제공하고있고
영상 플레이어또한 모바일에서 편리할 수 있도록. 하단 목록과. 개별 애니메이션 에피소드 목록을 따로 배치했습니다. 규격상 좀 복잡하다고 느껴지는 부분들은 있엇지만. 애니맥스 (1번 사례)보다 훨씬 나은 사용성을 보여주더군요.
구글 플레이 앱에서의 평가도 확인해보니. 애니맥스 (파란색)에 비해 훨씬 낫더군요.
https://play.google.com/store/apps/details?id=com.aniplustv.android&hl=ko
평가인원수는 약 1850명. (애니맥스에 비해 5배가 넘음) 평균 별점은 2.8점. 업데이트 관련된 이슈가 많은듯한데. 그래도 관리는 하고있다.정도겠네요.
자. 위에서 이야기한 내용을 한번 정리해보면
1. 해당 서비스에 대한 전반적인 평가를 위키나, 사용자 게시판 등에서 확인한다.
2. 해당 서비스의 기술기반이 탄탄한지. 개발인력의 유지보수가 이뤄지고있는지. (웹 / 앱 모두)를 확인한다.
3. 해당 서비스의 트래픽과 이용률, 그리고 실제 서비스의 UI 편의성을 비교해보고, 상관관계를 확인한다.
4. 사업분야와 서비스 영역. UI의 사용성 등을다른 업체와 비교해본다.
-
여기까지가 두 업체.그나마 고만고만한 업체들을 분석한 결과인데요. 그럼 이번엔 - 라프텔 (보라색) 이라는 서비스를 비교분석해보죠.
3. 라프텔의 사례
위에서 이야기한 애니맥스 (파랑) / 애니플러스 (주황) 이 각각 28만명 .55만명 정도의 접속자였다면. 라프텔은 규모가 다릅니다.
동일하게 2018년 12월 ~ 2019년 1월까지. 무려 280만명의 인원이 접속했습니다. 애니플러스 (주황). 55만의 약 다섯배네요.
그래서 뉴스를 좀 찾아보니. 카카오 벤쳐 등으로부터 20억 투자유치가 2018년 10월에 결정된것으로 나오더군요.
https://platum.kr/archives/109535
그럼 왜. 애니플러스나. 애니맥스와는 다른 - 5배 이상의 사용자를 얻었고. 실제 UI는 어떤가.를 비교해보죠
일단 세 서비스는 - 크게 두가지 방식으로 사업모델이 나뉩니다.
광고 기반 무료정책 + 유료 구독모델 : 라프텔
라프텔은 광고를 보는 대신 애니메이션을 감상가능한 무료모델을 사용했고. 이로인해 실제 수많은 무료사용자들을 끌어모았습니다.
https://play.google.com/store/apps/details?id=laftel.net.laftel&hl=ko
사용자 평가. 1만 3천명. (애니플러스에 비해 5배 이상). 평균평점 4.7. 전반적으로 평가 수준이 매우 높죠? 무료 서비스로 어필을 하고. 이후에 불편하면 - 유료구독을 할수있는 형태입니다. 또한 사용자에대한 리플/ 관리 / 컨택도 지속적으로 하고있는것으로 보이고요
도메인은 하나로 통일하고. 반응형 웹을 확실하게 지원합니다. 좌측이 모바일규격. 중간이 타블렛. 우측이 PC입니다. 애초에 모바일규격에 맞는 PC 레이아웃을 선택해서. 모바일에서는 좌우 스와이프로 목록을 쭉 확인할 수 있게 되있더군요.
기획자체도 모바일에 최적화된 화면에. PC 접속시의 화면을 추가로 레이아웃을 고려한 것으로 보입니다.
영상 플레이어 역시도. 모바일을 고려한 플레이어 / 단순한 구조로 - 사용자에게 많은걸 고민할 필요가 없게 해두었죠.
회원가입의 경우도. 유일하게 3 사이트들 중에 구글 로그인을 제공하고. 회원가입시 - 2단계로 나누어서. 실제 본인인증이 필요없이. 30초 내에 가입이 가능하게 해둔점도 눈에 띠더군요.
또한 재미있는게. 완전하진 않아도 - 왓챠의 영화 취향 분석이나. 넷플릭스의 추천 알고리즘 처럼 - 사용자의 취향이나. 성향을 판단해 비슷한 연관 태그들을 추천해줍니다. 이후에는 자신의 취향 관련 키워드로 글타래가 만들어지고. 그걸 수정하거나,ㅡ 추가할수도있는 형태가됩니다.
심지어는 그런 결과물들을 기반으로 국내 웹툰들을 다시 - 태그화해서. 관련된 태그들의 / 인기작품들을 소개해주는 형태입니다.
애니메이션에대한 취향을 기반으로. 출판만화. 라이트노벨. 웹툰까지 영역을 넓게 잡고 - 무료서비스로 묶고. 사이트까지 가벼우니 유지보수에도 큰 어려움을 느끼지않는 환경이라 - 확장성도 좋더군요. 이런 다양한 강점을 갖고있으니, 자연스럽게 접속자수가 많을 수 밖에 없겠죠?
자. 오늘은 사실상 굉장히 여러 단계를 거쳐서 - 서비스를 분석해봤는데요.
UI 디자이너니까. UI만 본다.라는건. 말도 안되는 이야기입니다. 사실상 - 해당 사업이나. 프로젝트가 어떤 목적을 두고있는지. 어떤 사용자들이 -어떤 구조에서 더 좋은 사용성 / 높은 구매율이나, 목표달성율을 보이는지. 과거의 오래된 UX나, 신규 서비스의 UX는 대체 뭐가 다르고. 어떤 편의성이있는지. 사업단위를 바라보는 눈과. UI와 서비스 전반을 분석하는 방식까지. 여러가지 시선이 필요합니다. 단순히 UI의 만듦새만 바라볼수는 없는것이죠.
새로운 회사를 들어가신다고 하거나. 혹은 신규 서비스를 기획할떄. 이런 서비스 분석방법은 - 기존의 방식을 더 나아지게하는 방법이나. 기존의 상태를 확인하는데에 매우 유용합니다. 오늘은 빠른 시간내에. 일부만을 분석한 내용을 이야기드렸으나. 추후에는 좀더 상세한 방법을 이야기드릴 수 있을 듯 합니다. 개별 UI / 설계의 분석내용이 추후에 이어지겠네요.
-
다음시간에는 해당 분석에대해서. 좀더 상세하게. 페이지나 핵심 UX 관련 편의성에대해 비교분석을 해보겠습니다.
https://brunch.co.kr/@clay1987/152
오늘의 정리는 다음과 같습니다
1. 서비스 분석을 위해서는 UI 외에도 해당 서비스의 영역과 사업모델을 확인해야한다.
2. 웹페이지는 사용자 트래픽이 늘어날수록 더욱 무거워지므로, 설계시부터 가볍게, 경량화가 필요하다.
3. 반응형 처리가 잘 된 사이트는 유지보수가 쉬워지므로 - 설계시부터 모바일에 최적화된 디자인을 하면 더 좋다.
4. 하나의 서비스가 가진 문제는 - 더 나은 방식을 사용한 서비스를 분석해보면 더 쉽게 알 수 있다.
5. 회원가입이나 사용자의 구매 플로우 둥의 중요한 UX는 - 시대에 따라 변화한다. 그렇기에 최신 서비스를 확인하여 더 편리한 방식을 사용해야한다.
6. 동일한 목적을 갖고있더라도 설계와 전략에 따라 - 전혀 다른 UI가 만들어진다. 그 장단점을 파악하고 - 옳바른 선택을 하려면 사업과 실제 사용자들의 욕구를 정확히 이해해야한다
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
