brunch

You can make anything
by writing

C.S.Lewis

by UXUI디자이너 데이지 Dec 27. 2023

[UXUI] 네이버 치지직과 트위치의 UXUI 차이

어떤 디자인이 더 좋을까

    2023년 12월 6일 트위치 코리아가 한국에서 사업을 하겠다고 하면서, 네이버에서 스트리밍 서비스인 치지직을 서비스하겠다고 발표했다. 치지직은 트위치의 대체제가 될 거라는 기대와 함께 12월 19일부터 베타 테스트가 시작됐다. 갈 곳을 잃어버린 트위치 스트리머들을 흡수할 수 있을지에 대한 기대와 우려가 섞인 시점에서 현재 오픈베타로 진행 중인 치지직과 트위치에는 UXUI적으로 어떤 차이가 있을지 분석해 봤다. 전반적으로 치지직의 느낌은 트위치와 매우 비슷하였는데, 다만 약간의 디테일에 있어 차이점과 아쉬운 점을 찾아볼 수 있었다.



치지직과 트위치의 앱 메인
(좌) 치지직의 앱 메인 (우) 트위치의 앱 메인



치지직의 primary color

치지직의 가장 큰 아쉬운 점은 디테일한 부분에 있어 일관성을 갖추지 못한 것 같은 느낌이 들었다. 치지직은 별도의 단독 서비스가 아닌 네이버 게임에서 파생된 서비스다 보니 네이버 게임과 치지직의 primary color가 혼용돼서 사용하고 있는 문제가 있다. 검색창의 경우 web에서 초록색, app에서 보라색을 사용하고 있는 반면, 보유 치즈 내역에서는 web에서 보라색, app에서 초록색을 사용하고 있다. 이처럼 같은 기능이지만 환경에 따라 다른 색상을 혼용하여 사용하는 것은 서비스의 정체성을 약화시키며, 사용자에게 혼란을 야기할 수 있다.


네이버 게임
보라색을 메인 컬러로 사용하는 네이버 게임
치지직
초록색을 메인 컬러로 사용하는 치지직
치지직의 검색 시 색상
(좌) 치지직 App에서의 보라색 컬러 (우) 치지직 Web에서의 초록색 컬러
치지직의 보유 치즈 색상
(좌) 치지직 App에서의 초록색 컬러 (우) 치지직 Web




채널 선택(mause over)에 대한 인식

트위치는 특정 방송에 선택(mause over) 시 썸네일을 선택하면 레이아웃에 진한 테두리가 생기고, 제목을 선택하면 트위치의 메인 컬러로 변하면서 명확하게 해당 방송을 선택하고 있음을 인지할 수 있게 해주고 있다. 반면 치지직은 스트리머의 이름에만 옅은 배경과 함께 글씨 색이 조금 더 밝아지는데, 시각적 변화가 적고 밑에 붙어있는 태그와 형태가 유사하여 트위치에 비해 상대적으로 어떤 방송을 선택하고 있는지 인지하기 어렵다.


선택에 따른 변화의 차이가 미비하고 태그와 형태 구분이 어려움
트위치의 기본값 / 마우스 오버
명확하게 선택화면에 대한 인지가 가능함
트위치의 기본값 / 마우스 오버_썸네일 / 마우스 오버_제목




추천 채널

채널 추천 시 트위치는 카테고리 타이틀을 통해 어떤 종류의 방송인지 알려주고, 해당 방송에 대한 태그들을 보여주는 반면, 치지직의 경우 단순 스트리머 썸네일과 이름만을 보여주고 있어 방송에 대한 정보량이 부족하여 상대적으로 유저의 유입을 이끌어내기 어렵게 보인다. 

(좌) 치지직의 채널 추천 (우) 트위치의 채널 추천




web text box & search

치지직의 경우 전반적인 UI규칙으로 마우스 오버 시 밝은 배경과 함께 더 밝은 텍스트로 일관성 있는 변화를 보여주고 있다. 하지만 그 색상의 차이가 미비하여 선택에 대한 인지가 약하다. 또한 색상의 변화 역시 통일되어 있지 않고, 약간의 차이가 있었다.


채팅

치지직의 채팅창
트위치의 채팅창


검색

검색의 경우 치지직은 검색어를 입력하여 검색 시 x버튼이 검색창 우측에 활성화되어있다. 반면 트위치의 경우 검색 시 x버튼이 나오지 않으며, 검색창에 마우스 오버를 해야 x버튼이 생기고 그때가 되어야지 유저는 x버튼과 기능에 대해 인지할 수 있게 된다. 검색어의 글자 수가 많을 경우 공간의 활용으로 인해 x버튼을 숨김 처리를 하는 것이 효율적일 수 있으나, 해당 플랫폼의 검색어 형태가 검색창을 꽉 채울 정도로 많을 것 같지는 않아서 치지직과 같이 바로 기능 인지를 할 수 있게 해주는 편이 더 좋다 생각한다.

치지직의 채팅창
트위치의 채팅창




if

UXUI디자인은 심미적인 요소 또한 중요하지만 사용자의 경험에 맞춰 인지와 사용성이 더 중점이 되어야 한다. 메인 컬러를 사용하여 아래와 같이 명도와 채도에서 보다 명확한 시각적 차이를 준다면 보다 쉽게 사용자의 행위에 대해 인지할 수 있고 서비스의 정체성 역시 강화할 수 있지 않을까 생각한다.


 마우스 오버 시 변화 영역 변경
(좌) 현재 디자인 / (우) 예시 디자인


버튼의 색상을 메인 컬러로 변경
(좌) 현재 디자인 / (우) 예시 디자인


다시 보기 색상 네이버게임 색상에서 치지직 색상으로 변경
(좌) 현재 디자인 / (우) 예시 디자인


버튼 선택 시 명도를 더 밝게 한 경우
(좌) 현재 디자인 / (우) 예시 디자인


어떤 방송인지에 대한 안내를 추가한 경우
(좌) 현재 디자인 / (우) 예시 디자인





구독과 라이킷은 글 작성에 많은 힘이 됩니다.

매거진의 이전글 [UXUI] 크림의 금액설정 구조
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari