brunch

You can make anything
by writing

C.S.Lewis

by 김현준 Jan 21. 2024

치지직(CHZZK) ¹

UI Insight 시리즈 04

© 치지직(CHZZK)

온보딩 ¹

앱 진입 시, 소셜 아이디로 로그인하면 온보딩이 시작됩니다. 여러 게임의 라운지에 가입할 수 있는 페이지가 나타납니다. 최초 사용자의 입장에서는 왜 게임을 선택해야 하는지, 라운지의 개념이 무엇인지 모르기 때문에 좀 더 직관적인 설명이 필요하다고 느껴집니다. 또한 게임 리스트의 정렬 기준이나 분류가 있다면 선택하는데 도움이 될 것 같습니다. 모달 버튼 색상의 채도가 너무 높은 반면, 텍스트는 흰색이라 가독성이 떨어지는 문제도 있어 보입니다. 



© 치지직(CHZZK)

방송 시청: 치지직 홈 ²

GNB의 가장 첫 메뉴인 홈은 치지직이라는 이름으로 되어 있습니다. 치지직 페이지에는 상단부터 광고 배너, 스트리밍 방송, 팔로잉 채널, 추천 방송, 동영상, 최근 소식, 추천 채널 순으로 나타납니다. 타이틀,  등 비중이 높은 텍스트에 치지직만의 폰트를 사용하고 있습니다. 산돌의 '네모니' 시리즈처럼 네모난 비주얼에 폰트 웨이트가 높다 보니 작은 텍스트에서는 가독성이 다소 떨어져 보입니다. 상단의 한 개짜리 라이브 방송은 아래 추천 방송과 어떤 차이가 있는지, 차이가 없다면 왜 중간에 팔로잉 채널이 껴있는지 궁금하네요. '추천' 부분은 전체 보기로 진입할 시 레이블링이 '라이브 영상'으로 바뀝니다. 



© 치지직(CHZZK)

방송 시청: 채널 홈 ²

채널은 내비게이션 바가 사라지는 풀스크린 모달 형식으로 진입되며, 좌측 상단에 나가기 버튼이 생깁니다. 홈, 동영상, 커뮤니티, 정보 탭으로 구성되며, 우측 상단 점 세 개짜리 케밥 메뉴를 누르면 채널의 네이버 게임 프로필로 진입합니다. 다만, 프로필 보기 한 개의 기능을 제공함에도 중간에 모달이 발생하여 한 번 더 선택하게 합니다. 네이버 게임 프로필이라는 페이지에 대해서도 어떤 기능인지 추가적인 설명이 필요해 보입니다. 



© 치지직(CHZZK)

방송 시청: 동영상 시청 ²

동영상 진입 시 광고 이후 스킵 버튼을 눌러 시청할 수 있습니다. 로딩 시, 로딩 스피너와 재치 있는 UX 라이팅이 눈에 띕니다. 재생 바 위에는 현재 재생시점과 총 재생길이가 나타납니다. 댓글은 베스트 댓글 하나만 요약해서 보여주는 카드 형태로 나타나며, 탭 해서 확장하여 볼 수 있습니다. 좋아요를 버프로, 싫어요를 너프로 표현하는 UX 라이팅도 돋보이는데, 타 스트리밍 사이트에 비해 후발주자인 치지직만의 아이덴티티를 나타내기 위한 전략으로도 보입니다. 



© 치지직(CHZZK)

방송 시청: 검색 ²

치지직 홈 우상단의 돋보기 아이콘을 눌러 검색으로 진입할 수 있습니다. 검색 텍스트 필드 아래에는 최근 검색어와 최근 시청 라이브가 나타납니다. 검색 시 결과 탭은 추천, 채널, 라이브, 동영상, 라운지, 게시글로 구성됩니다. 게임을 강조한 스트리밍 플랫폼답게, 각 스트리머의 방송 텍스트 아래에는 해당 게임 이름이 칩으로 나타납니다. 채널 탭은 디바이더가 없고, 게시글은 디바이더가 있는 비주얼로 보입니다. 



© 치지직(CHZZK)

e스포츠: 홈 ³

e스포츠 탭은 홈, 커뮤니티, 뉴스, 일정, 영상, 순위, 승부예측의 탭으로 구성됩니다. 홈에는 라이브 경기, 지난 주요 경기 영상, 경기 일정, 게시판, 추천 라이브, 경기 다시 보기로 구성됩니다. 각 섹션은 우측 상단의 더 보기 아이콘을 누르거나 슬라이드 하여 더보기할 수 있습니다. 탭의 경우 으로 이루어져 있는데, 슬라이드는 되지 않고 탭 해서 이동할 수 있습니다. 그리고 아직까지는 칩 컴포넌트가 옆으로 밀리는 등의 오류가 남아있습니다.




© 치지직(CHZZK)

e스포츠: 그 외 ³

롤, 배틀그라운드, 발로란트 세 개의 게임과 기타 게임으로 나누어 최상단 탭이 구성되어 있는데, 스트리밍뿐 아니라 게임과 관련하여 큰 커뮤니티를 형성하고자 하는 게 느껴집니다. 하나의 게임 탭 안에도 경기 결과나 순위 같은 상당히 많은 컴포넌트로 구성되어 있으며, 관련된 콘텐츠를 좋아하는 사용자에게는 반복적이고 주기적인 사용을 이끌어낼 수 있을 것 같습니다. 





다음 글에서 이어집니다
인터랙션 ★★★☆☆
페이지 간 이동에 마이크로인터랙션이 많지 않습니다. 페이지에서 왼쪽 모서리를 슬라이드 하여 뒤로갈 수 없거나, 메뉴 탭을 슬라이드 하여 이동할 수 없습니다. 아직까지는 미구현되거나 오류로 여겨지는 인터랙션이 간혹 있으며 이런 부분들은 시간이 지나면 개선될 것으로 보입니다. 컴포넌트 요소가 많아 스켈레톤 등이 사용되어도 다소 복잡해 보이지 않을까 하는 생각이 듭니다. 

직관성 ★★★☆☆
정보구조가 복잡하고 기능이 많음에도 생각보다 직관적으로 탭을 구성했다고 생각합니다. 다만 아직까지는 불필요한 모달이나 컴포넌트가 간혹 있어 보입니다. 그리고 치지직 플랫폼 내의 새로운 개념이나 서비스에 대해서는 최초 사용자에게 보다 직관적인 UX 라이팅이 필요하다고 느껴졌습니다. 


브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari