좋아하는 웹 화면 분석하기

웹 화면 분석

UX/UI 디자인 사례를 참고했었던
라이브 스트리밍 플랫폼 치지직의 웹 화면을 간단하게 분석해 보았다.

-헤더 (header)
웹사이트나 앱의 최상단에 위치한 헤더에는
브랜드 아이덴티티인 치지직 로고가 심플하게 배치되어 있다.
주요 서비스나 카테고리로 이동할 수 있는 링크가 있고
사용자가 원하는 정보를 빠르게 찾을 수 있도록 돕는 검색 바가 있다.
로그인과 같은 사용자의 행동을 유도하는
CTA(Call to Action) 버튼과
사용자의 눈의 피로를 감소시켜주는 다크모드 UI가 배치돼 있다.

-콘텐츠 영역 (contents area)

메인 정보를 전달하는 섹션인 콘텐츠 영역에는
다양한 스트리머들의 방송 화면이 행과 열에 맞게 나열돼 있어
시각적 피로도를 낮추고 가독성과 시각적 흐름을 챙겼다.
실시간 스트리밍 중인 LIVE 표시와 현재 시청자 수가 표시돼 있고
카테고리 별로 스트리머를 대표하는 태그가 표시돼 있다.

-푸터 (footer)
웹사이트의 최하단 영역인 푸터에는
사업자 정보, 법적 고지, 고객 지원 등
법적 의무 정보와 사용자 편의를 위한 링크가 배치되어 있다.
단순히 정보를 나열하는 공간을 넘어,
사용자가 길을 잃었을 때 도움을 주는 정보 안전망이자
브랜드의 신뢰도를 결정짓는 중요한 역할을 한다.

웹 디자인 재현 작업

피그마를 활용해서 직접 웹 디자인을 구현해
간단한 프로토타입을 만들어보려 했는데
레이아웃을 구성하는 요소가 제멋대로 튕겨 나가거나
크기가 조절되지 않는 문제가 생겨서 상당히 애먹었다.
프레임에서 그리드를 생성해 헤더, 컨텐츠, 푸터로 섹션을 나누고
미리 제작한 UI 컴포넌트들을 프레임에 삽입하고 싶었는데
원하는 위치에 적용되지 않았다.

(미리 제작한 UI 컴포넌트를 프레임에 끌어다놓으니 프레임 크기 자체가 줄어들었다)

그래서 그리드를 만들지 않고 기본 프레임에 UI 컴포넌트를 삽입했다.
얼추 모양새라도 최대한 비슷하게 만들고 싶었다.

(솔직히 치지직 디자인은 너무 복잡할 것 같아서 심플한 네이버 소개 디자인으로 도망쳤다.)

이전에는 피그마를 활용해서
간단한 도형 만들기나 텍스트 배치하는 것까지만 해도
문제없이 잘 만들어와서 생각보다 할만하다 라고 생각했었는데
직접 웹 디자인을 참고해서 그대로 따라하는 것만해도 벅차게 느껴졌다.
치지직 웹 디자인을 구현해 보려다가 정말 벽이 느껴져서
훨씬 심플한 네이버 소개 웹 디자인으로 바꿔봤는데도 쉽지 않았다.
앞으로 프로덕트 디자이너 교육 과정에 참가하게 될 예정인데
정말 노력하고 스스로 문제점이 뭔지 계속 생각해야
무언가를 얻어갈 수 있겠다는 생각이 든다.

(출처)
https://chzzk.naver.com/
https://www.navercorp.com/
-작가 rawpixel.com, Freepik-