IxD LAB에서는 그 동안 연구했던 내용들을 바탕으로 실제 앱을 만들어 보기로 했습니다. 스마트워치 UX와 관련하여 그간 축적한 자료가 생각보다 많았습니다.

 

 

덕분에 큰 부담없이 호기롭게 시작했지만, 새로운 디바이스의 특징을 효과적으로 담아내려는 욕심에 초반부터 오랜 고민이 시작되었습니다.
 

아이템 선정

우리는 생각보다 훨씬 더 자주 스마트폰을 확인하고, 항상 곁에 두려 합니다.1) 하지만 스마트폰은 많은 경우 주머니 안에, 가방 안에, 혹은 책상 위에 있기 때문에 몸을 움직여 디바이스를 집어 들어야 하는 수고스러움이 따릅니다. 그런 까닭에 필요한 정보를 필요한 순간에 확인하기에는 약간의 시간차가 발생할 수 있습니다.
그에 비해 스마트워치는 애써 찾지 않더라도 손목 위에서 항상 우리를 기다리고 있습니다. 필요한 정보를 확인할 때에 스마트폰에 비해 즉시성에 뛰어납니다. 따라서 우리는 사용자가 궁금해 할 만한 정보를 미리 준비할 수 있는 서비스를 구상해 보기로 했습니다. 몇 가지 아이템들이 후보로 거론되었지만, 최종적으로 선택한 것은 현재 다음 검색에서 제공하고 있는 ‘방금그곡’ 이었습니다.
justmusic_daum

다음검색 ‘방금그곡’

 

justmusic_kakao

카카오톡 #검색 ‘방금그곡’

구조 설계

방금그곡 서비스는 각 매체별로 시간대별 곡 목록을 보여줍니다. 하지만 스마트워치에서는 매체 선택과 목록 탐색이라는 두 가지 Task를 한 화면에서 해결하기 어려웠습니다. 따라서 단일 매체의 한 곡만 노출하고, 제스쳐를 통해 곡 목록을 탐색하도록 하며, 3D 터치(안드로이드는 Long Tap)를 통해 호출하는 메뉴로 매체 선택 및 검색을 할 수 있게 하였습니다.

 

justmusic_flow

JustMusic 구조 및 동선

UX 고려사항

워치용 앱을 만들기 위해서 반드시 고려해야 할 사항으로는 다음 두 가지 항목을 선정했습니다.
  • 디스플레이 형태(사각형, 원형)에 관계없이 잘 표현되는 화면
  • 가독성에 유리한 큰 폰트 사이즈
justmusic_mainscreen

JustMusic 메인화면 설계

첫 번째로, 사각형과 원형 디스플레이에서 모두 제대로 표현될 수 있도록 텍스트를 중앙정렬 하기로 했고, 더 나아가 아예 카드 자체를 원형으로 제공하는 것도 좋겠다는 의견이 있었습니다. 음악이라는 주제에서 느껴지는 아날로그적인 감성을 표현하기 위해 원형 카드는 LP판의 형태로 디자인하기로 했습니다.
하지만 사각형 디스플레이에서 원형 카드를 제공할 경우, 모서리에 여백이 생겨 어색해 보일 수 있다는 단점이 있었습니다. 이를 보완하기 위해 카드의 뒷 배경에 현재 곡의 앨범자켓을 채우는 방안을 생각해 보았습니다.
두 번째로, 가독성을 위한 큰 폰트 사이즈 적용은 스마트워치용 앱의 기본이라고 할 수 있습니다. 하지만 여기서도 이슈가 있었습니다. 폰트 사이즈를 키우게 되면 텍스트의 길이에 따라 줄바뀜이 생기기 쉬웠고, 줄바뀜이 생기게 되면 전반적인 레이아웃이 어그러질 우려가 있었습니다.
결국, 폰트 사이즈 이슈는 프로토타입을 통해 계속해서 수정해보기로 했습니다.

프로토타이핑

프로토타입은 Framer라는 툴을 사용했습니다. Framer는 자바스크립트의 개량형인 커피스크립트를 이용해서 코딩에 익숙하지 않는 기획자, 디자이너 등도 비교적 쉽게 인터랙티브 프로토타입을 제작할 수 있도록 하는 프로그램입니다.2) Framer에는 아직 안드로이드 웨어 템플릿이 없는 관계로 초기 프로토타입은 애플워치용으로 만들었습니다. *필요한 경우, 커스터마이징을 통해 안드로이드 웨어용 프로토타입도 만들 수 있습니다.3)


Last updated : 2015.12.24
기본적인 고려사항 이외에도 인터랙션을 통한 재미를 위해 LP판이 위아래로 움직일때마다 회전하며 기울어지도록 했고, 턴테이블 바늘이 까딱거리면서 실제 LP판을 교체하는 느낌이 날 수 있도록 했습니다.
하지만 역시 폰트 사이즈 이슈에서 자유로울 수 없었습니다.

디자인

디자인 툴은 Sketch를 사용했습니다.4) 모바일 프로젝트에 최적화 된 툴로 평가받으며, 점차 점유율을 늘려가고 있는 까닭에 IxD LAB에서도 해당 툴을 활용해보기로 했습니다. (툴에 대한 포스팅이 아닌 관계로 자세한 설명은 생략하겠습니다.)
justmusic_sketch

Just Music 디자인 시안

메인 화면 디자인에서 가장 신경썼던 부분은, 프로토타입에서 드러났던 가독성 이슈의 보완이었습니다. 이를 위해 폰트를 조금 더 키워보았습니다.
핵심 정보는 바로 “어디에 나온 무슨 곡인가?” 하는 점이기 때문에, 비록 서비스 전반에 대한 인상을 좌우하는 LP판과 앨범 이미지가 많이 가려지기는 했지만, 감수하기로 했습니다. 그리고 사각형 디스플레이에서도 어색하지 않은 디자인을 위해서 뒷 배경은 앨범 이미지 대신, 턴테이블 이미지를 배치해 보았습니다.

개발

실제 디바이스에서 작동하는 앱은, 원형 디스플레이에서 확인할 수 있도록 안드로이드 웨어용으로 개발했습니다. 기본적인 사항들은 프로토타입과 크게 다르지 않습니다.
추가로 Framer를 통해 제작한 프로토타입에서 아쉬웠던 디바이스 센서 활용 부분을 보강하였습니다. 초반 설계 과정에서 마이크 입력을 고려하기는 했지만, 작업하면서 좀 더 다양한 센서를 활용해 보고자 몇 가지 기능을 추가하기로 했습니다.
 
  • 손목을 흔들어 즉시 음악 검색 (가속도 센서)
  • 음악을 듣는 동안 맥박을 측정하여 호감도 표시 (심박 센서)
단순히 화면에 표시되는 UI를 넘어 센서를 활용한 인터랙션을 추가할 경우, 더욱 풍부한 경험을 제공할 수 있을 것입니다. 특히 심박 센서를 활용한 기능은 향후, 끌리는 음악에 대한 자동 북마크나 측정된 심박수를 통한 유사 BPM을 가진 음악 추천 등 다양한 활용 가능성이 예상됩니다.
완성된 앱의 사용 장면입니다.
방금그곡 – 기본

방금그곡 – 음성으로 프로그램 검색

음악검색

Last updated : 2015.12.24
 

리디자인

1차 개발 프로토타입으로 사용성 검증을 마친 후에 서비스의 완성도를 높이기 위해 시각 요소를 고도화하는 작업이 필요하다 생각하였습니다. 2차 리디자인을 진행하면서 중점적으로 생각한 부분은 음악 서비스 특성이 한 눈에 보이는 것과 화면이 작은만큼 정보가 쉽게 눈에 들어올 수 있도록 정보의 우선 순위를 시각적으로 정리하는 것이었습니다. 그리고 기능적인 부분에 있어서는 빠르게 메뉴에 접근할 수 있는 직관적인 인터페이스를 제공하려 하였습니다.

Last updated : 2016.06.21

l 방금그곡 Visual Concept

  • CD 메타포 – CD 메타포를 이용하여 타임라인 표현, 인터랙션 또한 CD를 상하로 스와이프하면서 변경하는 느낌이 들도록 디자인
  • 앨범 커버 – 음악 서비스를 풍부하게 보여줄 수 있는 앨범 커버를 화면 전체에 활용
  • 원형 요소 – 워치페이스의 프로그레스바/음악 검색 등 화면 요소를 구성할 때 원형을 반복적으로 사용하여 시각적 통일성 부여
  • 아이콘 – 각 형태의 특성을 잘 살려 심플하고 일관성있는 표현 방식으로 유니크한 아이콘 디자인

l Watch Face(시계화면) 제공

  • 1분에 한 곡씩 방금그곡이 업데이트 되는 것을 가장자리 컬러 라인으로 표현
  • 보다 빠르게 방금그곡 정보에 접근이 가능하도록 시계화면에 실시간 곡 목록 표시
  • 시계화면에서 바로 음악 검색이 가능한 인터페이스
  • 범용적으로 사용할 수 있는 날씨, 캘린더 등의 기능 버튼 추가

l 직관적인 인터랙션 가이드와 인터페이스 제공

  • 동선을 명확하게 최소화하여 빠르게 탐색
  • 방금그곡의 타임라인 네비게이션을 직관적으로 표현
  • 방금그곡 정보에서 음악 재생 기능을 강조하는 메타포
  • 프로그램 검색 및 음악 검색 기능 실행에 대한 직관적인 인터페이스
  • 메뉴의 미디어 선택과 검색 기능을 구분하여 그룹핑
  • 음성입력 피드백의 시각화

l 심박수를 이용한 추천

음악검색 시 심장박동센서를 이용하여 사용자의 심박수와 유사한 BPM을 가진 곡을 검색 결과(Soundcloud 이용)와 함께 추천합니다.
스마트워치 관련 포스팅 더 보기