프로젝트 목적

지니뮤직 디자인 개선은 ‌GUI 디자인 역량을 키우기 위한 개인 프로젝트입니다. 평소 지니뮤직을 자주 사용하며 GUI 측면에서 답답함과 불편함을 꾸준히 느껴왔던터라 개선해보았습니다.

문제 발견/정의

지니뮤직은 산만한 느낌을 주고 가독성이 떨어지는 UI로 전체/개별 영역의 정보를 파악하는데 많은 인지적 노력이 필요하게 됩니다. 뇌 과학 측면에서 보면, 콘텐츠 영역(중심와)에 시각적 복잡도가 높을수록, 시선 분산으로 안구 도약이 되지않아 응시점이 발생되기 어렵습니다. 즉 어딜 봐야 할지 모르겠고 정신 사납게 된다는 것입니다. 개인적으로 사용할 때도 매번 복잡한 인터페이스에서 탐색하기보다 듣고 싶은 노래를 검색해서 플레이합니다.

먼저 분석을 통해 아래와 같은 구체적인 문제를 발견하고 정의하였습니다.

- 좁은 마진/패딩 값으로 콘텐츠 영역 내 카테고리 경계가 모호함(근접성의 원리로 서로 가까이 있는 것들을 함께 묶어서 지각하게 되는 현상 발생)
- 화면을 가득 채운 빅 배너, 하단의 3개(내비게이션, 버튼 내비게이션, 플레이) 바가 나열돼 콘텐츠 영역이 많이 가려져 답답함
- 이미지 내 많은 텍스트, 아이콘 중첩으로 시각적 복잡도 높음
- 장식 요소가 많은 버튼, 아이콘으로 시각적 복잡도 높음
- 여백 없이 빽빽한 텍스트 정보 나열
- 빅 배너 이미지가 바뀌면 화면 배경색이 같이 바뀌어 혼란을 줌

문제 해결

스케치 툴을 활용해 작업하였고, 포토샵과 달리 벡터 툴이기 때문에 해상도는 mdpi(360x640)로 제작하였습니다.
정의된 문제는 수학적으로, 읽기 쉽게, 자기다움 표현 3가지 키워드로 접근하였습니다.

1. 수학적으로는 모듈에 관한 키워드입니다. 각 요소들의 레이웃들을 이리저리 배열하고 배치하며 실험해본 결과 나름의 기준(시간적 균등함)이 생겼는데, 8(DP) 배수 그리드 시스템이라고 말하고 싶습니다. 8의 배수(8, 16, 24, 32, 40, 48 등)를 적용해 각 요소들을 배치하고 모듈화하였습니다. 배치를 하다 보면, 8보다 적은 수치가 필요할 때가 있는데 그럴 때는 8의 1/2인 4를 적용하였습니다.

2. 읽기 쉽게는 정보량의 간소화에 관한 키워드입니다. 이미지 내 텍스트나 아이콘의 중첩 배치, 장식 요소가 많은 버튼과 아이콘 등으로 인해 시각적 복잡도가 높은 상태로 장식 요소는 배제하고, 중요도가 낮은 정보들은 숨김처리하여 콘텐츠를 좀 더 쉽게 탐색할 수 있도록 하였습니다.

3. 자기다움 표현은 브랜딩에 관한 키워드입니다. 지니뮤직이라는 느낌을 곳곳에서 느낄 수 있도록 표현되길 원했습니다. 여타 뮤직 서비스가 그렇듯 정보량이 정말 많은 콘텐츠입니다. 수많은 곡들에 대한 이미지와 텍스트 등 시각적 정보량이 복잡할 정도로 많기 때문에 컬러 적용이나 로고를 사용하는데 어려운 점이 있었고, 제한적으로 활용해 곳곳에서 브랜드를 느낄 수 있도록 하였습니다.
키워드별 상세 디자인 방향은 아래와 같습니다.

1.  수학적으로
: 8배수 그리드 시스템으로 콘텐츠 영역 내 카테고리 경계를 명확하게 구분하고, 전반적으로 디자인 요소의 배치와 모듈을 재구성

2. 읽기 쉽게
: 빅 배너 이미지와 상관없이 화면 배경색 고정
: 빅 배너 영역 크기 조절, 하단의 3개(내비게이션, 버튼 내비게이션, 플레이) 바 분리/재배치
: 이미지 내 텍스트와 아이콘을 분리하여 배열
: 버튼, 아이콘 내 장식 요소 최소화
: 정보의 중요도를 고려해 강약 조절하여 표기
: 사용 빈도가 떨어지는 메뉴 등 IA 재구성
: 플레이 화면에서 기능별로 아이콘 그룹핑과 재배치

3. 자기다움 표현
: 기존 로고와 메인 컬러를 포인트로 활용하여 곳곳에서 지니뮤직의 느낌을 줄 수 있도록 함

위 문제 해결의 3가지 키워드에서 ‘수학적으로’와 ‘읽기 쉽게’는 나름 감을 잡았다?란 수확을 얻게 되었는데, ‘자기다움 표현’은 개인적으로 아쉽습니다.
정체성을 표현하는데 대표적 요소인 컬러와 로고가 있는데, 지니뮤직의 메인 컬러인 시안 색을 다른 서비스처럼 앱바 배경색으로 정체성을 표현하기에는 어려움이 있었습니다. 시안 색이 포인트 컬러로는 적합한 반면, 면적에 적용하면 둔탁하고 너무 강조되어 되려 콘텐츠 영역의 주의/집중하게 하는데 방해 요소로 작용하였습니다.
기존 로고는 지니뮤직이라는 철학을 담기보다는 음악이란 메타포를 적용한 활자 정도로 보였습니다. 디자인 리뉴얼에서 브랜드 철학이 담기지 않은 로고를 사용하기 어려워 새로 로고를 작업하고 싶었지만, BI 보다는 GUI 관점에서 접근했기 때문에 디자인의 완결성 측면에서는 떨어지지만, 대신 기존 로고를 최소화(햄버거 버튼에 g를 결합한 형태)하여 활용하였습니다.

GUI 디자인 원본 이미지  <   클릭해서 다운로드 후 보실 수 있습니다.

인터랙션 작업은 디자인을 전반적으로 살펴보기 위한 Scroll과 메뉴 이동을 위한 Paging, 하단 플레이 바 썸네일 터치시 플레이 화면으로 이동, 플레이 바에서 재생(일시정지) 버튼 터치시 음악 재생(일시정지), 프로그레스 바 등 Protopie 툴을 활용해 기본 인터랙션을 적용하였습니다. 
그러나 툴의 태생적 한계로 몇 가지 문제점이 있습니다. 일단 오디오 레이어 기능이 없어, 비디오 레이어를 생성(뮤직비디오 링크)하여 화면에서 보이지 않은 위치에 두고 재생 버튼을 누르면 연결되도록 하는 트릭을 썼습니다. 더 큰 문제는 재생 버튼을 눌러 비디오 레이어를 재생시킨 후 메뉴를 Paging 하면 음악이 나오지 않는 점, 플레이 화면 이동시 잠시 음악이 멈춘 후 재생되는 점이 있습니다. 또한, 음악 재생 시간이 '끝났을 때' 이벤트에 맞게 일시정지 버튼에서 재생버튼으로 전환과 프로그레스 바의 리로드를 할 수 있는 트리거와 리스펀스 기능이 없어 1회성 인터랙션으로 끝나는 점, 정해진 음악 시간과 프로그레스 바의 점진적 시간을 일치시키는 기능 부족으로 직관적으로 맞췄다는 문제 등이 있었습니다. 이러한 부분은 추후 코드 기반 Framer로 스터디를 해볼 예정입니다.
Protopie가 간단한 인터랙션 디자인 작업에는 효율적인 반면, 프로그래밍 언어처럼 로직컬한 작업이 어려워 편법이 필요하다는 점과 기능 부족으로 완성도가 떨어질 수 있습니다.

지니뮤직_share.protopie  <  클릭하여 직접 인터랙션 하실 수 있습니다.

마치며..

GUI 디자인의 숙련된 역량을 갖추고 싶지만 작업하는 동안 만만치 않다는 생각이 들었습니다. 디자인 트렌드가 스큐어모피즘에서 플랫으로 넘어왔고, 최근에는 콘텐츠 영역을 최대한 살려주기 위해 기능 콤포넌트나 장식 디자인 요소 등이 간소화 되며 미니멀리즘 디자인으로 흘러가고 있습니다. 쉽게 말해 그래픽 디자인을 할 부분이 줄어드는 상황으로 기본 디자인 요소의 미세한 디테일이 더 중요해졌다고 생각합니다. 얼핏 디자인하기 쉬워졌다고 생각할 수 있으나, 이러한 미세한 디테일을 가늠하고 다루는 역량을 갖추고 다른 디자인과 차별점을 갖게 하는 것이 더 어려워졌다고 생각이 들었습니다. 가령 제가 작업하며 기존의 장식적인 아이콘 대비 간결함을 갖기 위해 일일이 그려가며 형태, 선의 두께/반경 등을 고려해 작업했지만 이것만으로는 다른 디자인과 차별점을 갖기 어려운 부분입니다.

지니뮤직을 통해 모바일 앱을 디자인해보았습니다. 다음으로 구상 중인 개인 프로젝트는 기존 서비스의 리뉴얼이 아닌, 신규 웹 디자인(+설계)으로 개인 포트폴리오 3.0 버전입니다. 1.0 버전은 PPT로 만들었는데, 아무래도 이미지 슬라이드 형식이다 보니 저의 생각과 사고 과정을 기술하기에는 제약적이었습니다. 그래서 블로그처럼 콘텐츠 중심(이미지+텍스트)의 현재 포트폴리오 2.0을 만들었습니다. 웹 빌더 툴을 이용해 2.0을 만들면서 제한적인 기능(레이아웃, 타이포그래피 등 디자인 디테일)으로 제 생각을 다 표현하지 못하는 부분이 못마땅해 3.0이 자연스레 구상되었습니다. 3.0은 조금 더 UX와 관련된 디자인과 기술(트랜지션, 애니메이션 등 인터랙티브)을 보여줄 수 있을 것입니다. 마크업(HTML+CSS)을 학습해서 직접 퍼블리싱하고, JavaScript를 활용해 인터랙션도 보여주고 싶은 목표를 갖고 있습니다. 난관이 많겠지만 패션 디자이너가 직접 옷을 만들고, 가구 디자이너가 대패질과 용접을 하며 디자인한 가구를 만드는 맥락과 같이 기술을 이해하고 다루는 디자이너로 성장을 기대합니다.