BGM RADIO
앱디자인

2021.06
UI Design ✦ 100%
Application
BGM RADIO
앱디자인

  • Project
    Background

    BGM RADIO 어플은 맞춤 채널 추천, 또는 내가 저장한 채널의 음악을 들을 수 있어요. 타켓 사용자의 어플 사용 경험을 만족시킬 수 있도록 맞춤화 된 어플 구현을 목표로 했어요.

  • Project
    Goal

    다크모드 백그라운드로 다양한 컨텐츠에 집중할 수 있도록 시인성을 높였어요. 모바일이라는 제한적인 공간에서 많은 컨텐츠를 사용자에게 보여줄 수 있도록, 좌우 스크롤을 사용해 효율적으로 컨텐츠를 나열하여 음악 감상 어플에 특화된 UI를 구현했어요.

Project
Overview red dot

BGM 라디오 앱을 사용중인 손 이미지입니다.
  • 메인의 좌우 스와이프로 5가지 테마를 쉽게 탐색할 수 있도록 했어요.
  • 프리미엄 멤버십
    다크모드 배경으로 눈의 피로도를 줄이고 필요한 곳에만 집중할 수 있도록 액션버튼에 채도 높은 포인트 컬러를 적용했어요.
  • Aa Aa
    데스크톱에 비해 두배 가량 힘든 모바일의 텍스트 이해도를 개선하고자 컨텐츠와 폰트의 크기를 키우고 좌우 스크롤을 사용했어요. (*제이콥닐슨의 모바일 사용성 컨설팅 보고서)

Main

  • 좌우 스와이퍼를 이용해 빠르게
    5가지 테마를 탐색하면서 자연스럽게 컨텐츠를 소비하고 체류시간을 늘렸어요.
  • 모바일의 텍스트 이해도를 개선하고자 폰트와 이미지의 크기를 키우고 좌우 스크롤을 사용했어요. 좌우스크롤을 통해 정보 탐색의 효과를 높였어요.
  • 내가 좋아요한 채널과 라이브 중인 채널을 한눈에 볼 수 있어요. 어두운 배경에서 잘 보이도록 포인트 색상으로 채도 높은 난색을 사용했어요.
  • 어두운 배경에 맞는 명도 대비와 폰트 크기로
    컨텐츠를 강조했어요.
  • 집중하는 이모티콘입니다.집중할때
  • 비오는 이모티콘입니다.촉촉하게비오는날
  • 달리는 이모티콘입니다.운동할때신나는음악
  • 반복적인 레이아웃을 벗어나 개방감 있는 컨텐츠를 위해 썸네일 이미지를 배경에 적용했어요.
  • 좌우 스크롤을 적용해 많은 키워드를 빠르게 훑어보고
    원하는 키워드를 찾을 수 있도록 했어요.
  • 제한적인 모바일 환경에서 단어를 찾을 수 있도록
    토글키 형식으로 Search input을 적용했어요.

Playlist

  • 플레이리스트에만 집중할 수 있도록 버튼과 타이틀을 강조한 풀사이즈 팝업 형식으로 디자인 했어요.

    텍스트의 개입을 최소화 하도록 아이콘으로 간결하게 표현했어요.

    게슈탈트 이론, 근접성의 원칙를 적용하여 버튼과 타이틀을 그룹화함으로써 플레이리스트 탐색을 쉽게 했어요.

    홈바(Home Bar)와 말풍선을 결합한
    아이콘으로 호기심을 유도하고
    클릭과 채팅 참여를 유도 했어요.

  • 채팅창을 상하 슬라이드나 터치로
    열고 닫을 수 있도록 홈바(Home Bar) 인디케이터를 추가했어요.

    홍길동
    오늘 선곡 좋아요. 힘이 나네요!
    집구석발라더
    노래가 항상 취향저격이에요!
    제리
    혼자 듣기엔 너무 아까운 곡들이에요.
    멋쟁이토마토
    그래서 저는 지인에게 추천했어요!
    멋쟁이토마토
    믿고 듣는 플레이리스트예요.

My page

  • 카드디자인에 투명도를 설정하여
    배경 이미지와의 마찰을 줄이고 개방감을 주었어요.
  • 큰 메뉴들을 탭으로 나누고, 각 메뉴 내의 컨텐츠를 효율적으로 관리할 수 있도록 디자인 했어요.
그린웨일 컨텐츠등록
RELAX SLEEP MEDITATION

그린웨일 유튜브에 놀러오세요!

팬
1,254
팔로잉
98
청취자
3,465
채널 공지 통계 수익