자주 사용하는 웹 서비스 홈 화면 UXUI 분석

FLO

로엔엔터테인먼트와 함께 멜론을 매각한 이래 SK텔레콤에서 다시 한 번 런칭한 음원 스트리밍 서비스.

FLO의 UI

UI 디자인 패턴

토글 (Toggle)

토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 보통은 두 가지 상태를 가지고 값이 전환된다.

탭 (Tab), GNB (Global Navigation Bar)

• 탭은 콘텐츠를 분리해서 보여준다.

• GNB는 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴이다.

캐러셀 (Carousel)

캐러셀은 회전목마, 공항의 수하물 컨베이어 벨트를 의미하는 단어이다. 회전목마나 컨베에어 벨트가 회전하는 것처럼 돌아가면서 콘텐츠를 보여준다.

드롭 다운 (Dropdown)

드롭다운은 선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 한다.

---

좋았던 점

저녁시간대에 페이지에 들어가니 시간대에 맞는 다양한 플레이리스트를 추천해주는 것이 좋았다.

또한 계절에 맞는 곡들을 무드별로 다양하게 추천해주는 리스트도 좋았다.

---

개선 아이디어

1. 그리드 시스템 수정

중간 플레이리스트 및 오늘 발매음악에 해당하는 콘텐츠를 크게 늘려 가독성을 좀 더 높이고 싶다.

1. Columns (컬럼) : column이 포함되는 영역에 콘텐츠가 배치된다.
2. Gutters (거터) : 콘텐츠를 구분하는 데 도움되는 column 사이의 공간이다.
3. Margins (마진) : 콘텐츠와 가장자리 사이의 공간이다

2. 탭 드롭 다운 추가

탭 안에 해당하는 각각의 카테고리를 눌러보지 않는 이상 어떤 내용을 담고 있는지 알 수 없다. '보관함'과 '이용권'은 탭만 보더라도 어떤 내용이 있을지 짐작이 되는 반면, '둘러보기' 같은 경우, 어떠한 내용인지 마우스 커서를 올려도 알 수 없어 직접 눌러서 내용을 확인 하였다.

어떠한 내용을 담고 있는지 쉽게 알 수 있도록 각 카테고리에 맞는 항목을 선택 할 수 있는 드롭다운을 탭에 추가하는 것도 좋을 것 같다.