UI 브리핑 : 11화 - 카톡 PC웹, PC앱 분석
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
저번시간까지는 총 세개의 웹서비스를 비교해 보았었습니다.
https://brunch.co.kr/@clay1987/152
설계적으로 어떤것들이 더 나은 방식인지. 어떻게 더 나은 서비스를 구분하는지를 월 트래픽과, 앱스토어 리뷰, 사업 서비스 모델을 서로 비교하며 - 실제 웹디자인의 개별 요소를 간단하게 분석해보았죠. 오늘 진행할 내용은 카카오톡에 대한 서비스 분석과. PC 프로그램과 앱 서비스를동시에 들여다보는 과정을 거칠겁니다.
일단. 카카오톡을 굳이 들여다보는 이유는 크게 두가지가있습니다.
1. 다음카카오는 사실상 네이버와함께 국내 IT 업게에 큰 영향을 주는 서비스입니다. 그만큼 그들의 서비스행보는. 다른 업계들에게도 크게 영향을 줍니다.
2. 다음 카카오는 네이버와 다르게 메신저를 기반으로시작되었으나. 앱서비스의 포탈화를 자신만의 방식으로 진행하고있는. 독특한 서비스입니다.
추후 네이버 서비스도 비교분석을 하겠지만. 일단 상대적으로 우리에게 익숙한. 카카오톡을 먼저 들여다보도록 하겠습니다.
카카오톡은 PC용 메신저와 - 스마트폰용 메신저 + 준 포탈 메뉴를 함께 운영하고있습니다. 사실 이 방식은. 과거에 성공했던 IT업계들과는 정 반대의 방향을 걷고있는데요. 기존에 PC 서비스로 흥했던., 메신저류들이 - 모바일 시장으로 개별 서비스를 만들어나갔었죠. MSN메신저나, 버디버디, 네이트온 같은 서비스들은 정작 모바일에 와서는 다른 생태계를 이겨내지 못하고 사라진반면 - 카카오톡은 무료화를 앞세우고. 유저수를 먼저 모은 뒤. 부수적으로 -아주 천천히. 운영비를 충당하기 시작했습니다.
https://platum.kr/archives/15711
현재에 와서는 카카오톡은 사시상 한국 1위 메신저에 가까운데요. 그럼에도 불구하고 - 카카톡이 벌어들이는 매출은. 전체 앱 시장의 5%가 채 되지않습니다.
2018년 기준으로. 한국 모바일 앱 시장의 4조 4527억원중. 91%가 게임에서 나왔구요. 그나마도 9%는 다시 네이버와 카카오같은 거대 기업브랜드에서 나오게되고. 또다시 해당 9%에서 네이버 포털. 메신저, SNS 등 - 개별 서비스의 사용량으로 나뉘어지니. 실제 카카오톡으로 벌어들이는 금액은, 결코 크지 않은 셈이죠.
사실상 이 부분만 들여다보더라도. 앱 시장이 '죽어가고있다는' 이야기를 해볼수있습니다.
https://www.youtube.com/watch?v=cr55VbPGrVg&feature=youtu.be
기존에 업로드한 영상에서도 이야기했었지만. 돈이 오고가는 곳에. 기술이 발전하게 됩니다. 당연히 UI 디자이너 역시 IT 업계의 산업에 영향을 받습니다. 말그대로 '시장이 커지는 곳'을 공략하기위한 사업자 / 사업장들에 끼어서 들어가는거죠.
간단히말해서. 전체 파이가있는데. 이중에 전체 매출의 10%도 안되는 금액을 대기업이 대부분 가져가고. 남은 일부분을 갈라먹기하고있는게 유료 서비스들이며. 그 이후에가 스타트업들이 - 새로운 길을 열어나가고있다는 이야기죠. 제가 첫 영상부터 위기론을 이야기한건. 사실 현 IT업계가 일부 기업들을 제외하고는 엄청나게 레드오션화 되고있기 때문입니다. 그리고 그건 앱 시장의 죽음과 크게 연관되어있죠.
5년내로 창업기업의 72퍼센트가 폐업한다는 2018년 8월자 뉴스입니다. 1/3만 살아남고. IT 업계쪽만 다시 파고들어가본다면. 그 양은 더욱더 적어지겠죠.
이게무슨의미냐하면.
새로운 서비스가 만들어지지않으므로. 중간경력~고위경력자들이 활약할 수있을만한 서비스가 많아지지않고. 초심자 입장에서는 더욱더 취업이 어려워지며. 스펙경쟁이 강화된다는 이야기입니다. 그리고 대부분의 서비스들은 카카오톡. 네이버등과 같은 거대기업의 포탈화 / 내부 서비스 카테고리로 묶인 형태로 - 먹혀들어가게되죠.
카카오톡의 더보기 화면입니다. 사실상 카카오톡은 네이버와 다르게 메신저앱이기에. 구조가 좀 다르지만 기본적으로 자사의 중요서비스들을 그대로 연결하는 창구로서의 역할을 합니다. 준 포탈서비스인거죠. 서비스를 따로 떼어서 -모바일웹화하는것도 아니고. 개별 모듈이되어서 카카오톡 앱자체에 연결되어들어가는 구조로 설계하는 입장에서는 굉장히 독특한 형태입니다. 앱안에 앱이있는거죠.
설계기반으로보면. depth 안에 또다시 복잡한 뎁스가이어지는데. 그걸 해결하기위한 방법을 고민할 수 밖에 없습니다. 추후에도 어떤 서비스가 등장하건 간에. 카카오톡이 하듯이 - 앱 안의 앱. 앱 서비스안에 또다시 세부 카테고리로. 포탈화될 가능성이 높고. 이미 거의 당연시되고있죠. 그렇기에 카카오톡과 네이버 등의 서비스는 꼭 한번 역분석을 해보시길 추천드립니다.
https://brunch.co.kr/@clay1987/71
제가 추천드리는건 간단하게 와이어프레임을 통한 구조분석 방법입니다. 반복되는 컨텐츠와. UI 모듈별로. 어떤 요소들이 언제 등장하는지. 개별로 반복되는 단위가 어떤것들이 있고. 최소 / 최대영역은 어떠한지.
특이한 모듈이나. 해당 모듈의 등장조건등까지. 어느정도는 개발적인 역분석까지 필요해집니다.
카카오톡도 마찬가지로 분석을 좀 해보다보면. 특이한것이 몇가지 보이는데요. 일단 그중 하나는 SMS 문자를 카카오톡 내에서 확인이 가능하도록- 연동이가능하다는것입니다. 그래서 크게보면. 모바일에서의 사용성은 SMS 뷰어 / 채팅기능 / 포탈앱. 세가지로서의 기능을 갖고있습니다.
그에반해 PC쪽을 들여다보면. 카카오스토리. 이모티콘샵 정도의 - 아주 일부 기능만을 제공하고있다는걸 알수있습니다. 사실 이 사용성 차이에는. PC쪽에선 웹사이트로 대체가 가능한것도 있고. 개발중인 / 업데이트 대기중인 목록도 있을겁니다
카카오톡은 PC에서는 사실상 일반 메신저로서의 역할만 하고있죠. SMS뷰어 역시 제대로 동작하지않고. 모바일에서 도착한 플러스친구 메시지의 경우. PC에서는 확인이 불가능한 등. 서로 연계가 깨지는 부분들이 존재합니다.
그리고 사실 PC쪽의 가장 큰 지점은. 개발되는 규격도 다를 뿐더러 윈도우의 OS 해상도 배율에 영향을 받는다는점입니다. 이 부분은 해상도 크기와 연관이 되기때문에. OS 배율. 스케일링과 연관이 깊습니다. 그리고 이건 웹브라우저를 포함한 모든 PC 프로그램이 고민해야할 숙제중 하나죠.
https://brunch.co.kr/@clay1987/123
기존 UI 스케일링에 대해 정리한 글입니다. 4k / 43인치 해상도 기준과. FHD / 24~27인치의 일반 해상도 기준을 비교한것이고 게임을 기준으로 예시를 좀 들어봤었죠.
각각 150% 해상도와 / 125% 배율 / 100%배율입니다. 하나의 프로그램이지만. 텍스트와 이미지. 배율자체가 OS의 설정. 해상도. 두가지에 영향을 받아서 크기가 달라지죠.
https://brunch.co.kr/@clay1987/135
이 부분에대한 내용을 다시 - 윈도우의 그리드와. 레이아웃을 실험적으로 - 비례를 체크해봤습니다. 말그대로 일정 해상도에맞는. 일정한 배율. 규칙이있고. 최소단위의 작은 사각형을 찾고나면. 거기에맞춰서 모든 프로그램이 크기를 달리하게된다는 이야기인데요. 사실 이런 배율에대한 지원역시. 완벽한게 아닙니다. 해상도 크기에따라서 텍스트 크기와. UI 배율에 미세하게 조절이되어야하기 때문이죠.
사실상 현재까지는. 4k 해상도 / 거대한 패널 크기에 대해 - 상세하게 UI 크기를 조절할 수 있는 방법은 - PC 프로그램상으론 존재하지않습니다. 윈도우 OS의 영향을 받기 때문이죠. 그래서 이부분을 좀 정리해보자면 앱 하나를 들여다본다하더라도. 앱과 모바일 OS는 항상 기기에 영향을 받을 수 밖에 없죠. PC 프로그램도 PC OS의 비례와 배율지원. 웹의경우는 웹브라우저의 배율과 기본 비례에 영향을 받을 수 밖에 없다는겁니다.
그렇기에 모바일앱과 PC앱. 두가지를 모두 지원하기위해서는. 각자 다른 개발환경. 개발언어를 기반으로 할 수밖에 없고. UI 디자이너 역시 거기에맞는 개발지원방법과 기획적 기반이 필요해집니다. 그렇기에 별도로 PC와 웹, 앱의 규격적 기반. 환경적 기반을 공부해두는 것이 꼭 필요하다는 이야기입니다.
윈도우7 이후부터 지원되는 리본 UI의 사례
https://www.howtogeek.com/294439/how-to-enable-the-experimental-ribbon-interface-in-libreoffice/
오늘은 카카오톡에대한 기반으로. 앞으로의 앱들이 어떤식으로 - 포탈에 규합되고. 귀속되는지에 대해 간단히 이야기를 해봤고. 이후 카카오톡 모바일과. PC를 분석하기위한 방법들을 좀 알아봤습니다. 그리고 그게 기존에 이야기드렸던 - UI 스케일링. 그리고 윈도우 OS의 배율과 연관이있다는 것도 알아봤군요.
앞으로의 UI 디자이너의 역할은. 단순히 시각적인 완성도와 색깔을 구분하는 역할이아니라. 그 어떤 규격의 기반해서 디자인을 하더라도 다양한 부분에 대해 고민을 해야합니다. 해당 기기의특성과. 실제 사용자가 바라보는 해상도의 환경. 그리고 기술적 특성이나, 현실적인 한계 를 딛고도 어느정도까지 - 일관적인 디자인을 설계 / 유지할수있는지. 그 부분에 UI 디자이너의 설계실력이 달려있습니다.
https://brunch.co.kr/@clay1987/136
사실상 이런 부분은 일반적인 학원이나. 학교에서도 따로 이야기를 하진 않을겁니다. 제가직접 찾아낸 분석방법이고. 사실상 모든 디자인에있어서 그리드 최소단위를 찾고. 그 기술적 기반이나. 배율. 스케일링을 서로 연관지어 분석하는 방식이거든요.
이런 최소단위라는건. 사진위주의 간단한 구조 / 스타일리시한 배치에서는 잘 드러나지않는 부분들중에 하나입니다. 그렇기에항상 - '어려운구조 / 스타일보다는 기능성에 집중된 서비스들을 분석해보는것이 중요하죠.그런면에서 다음시간에는. 우리에게 익숙할만한 메일시스템. 구글과 네이버, 다음 등의 주요 메일 시스템들의 구조와 그 차이. 그리고 배율에 따른 그리드 최소단위를 분석해보도록 하겠습니다.
오늘의 정리는 다음과 같습니다.
1. 개별의 앱과 웹서비스는 항상 업계의 커다란 흐름에 영향을 받을 수 밖에 없다.
2. UI 디자이너가 '어떤 앱, 웹서비스'를 디자인하게될지 역시도 - 업계의 현재 중요한 사업들과 트렌드에 연결되어있다.
3. 카카오톡과 네이버는 사실상 국내 IT 업계를 선도하는 최강자이고. 이들의 디자인과 설계물은 싦무자를 위한 좋은 교과서가 되어준다.
4. 기존에 사용하고있는 서비스들의 구조를 분석하고, 역기획을 통해 개별 UI 컴포넌트들의 구조나, 등장조건을 확인해보자.
5. 요즘의 서비스들은 웹 > 모바일 앱 > PC 앱 순으로 점차 범위를 늘려가게된다. 그러므로 웹과 모바일의 규격적 기반. 그리고 PC OS의 배율과 그리드 최소단위를 꼭 확인해두자.
6. 윈도우 OS의 배율지원은 모든 PC 앱들. (웹 브라우저까지 포함)에 비율적인 영향을 준다. 또한 해상도와 커다란 화면들은 또다시 배율에 변수를 만들어낸다.
이 내용은 UI 디자인 연구소 - 단톡방의 내부인원들을 위해 만들어진 자료입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
