도리스 블로그

네이버뮤직 앱 탐구 6편! 그동안 앱의 각 부분을 나누어서 탐구해 왔는데, 이번 편에는 이 거대한 앱의 전체메뉴와 메뉴별 화면을 간략하게 살펴보았다. 전체를 먼저 정리하고 부분을 탐구하는 방식이 아니라 거꾸로 진행했다. 이런 거대한 앱에서 사용자는 모든 것을 알 필요가 없다. 필요한 기능 위주로 사용하면 된다. 앱을 실행해서 첫 화면에 보이는 것에서 내가 하려던 것이 해결되면 더 찾을 필요가 없다. 앱을 사용하다가 무언가 필요성이 느껴지면 그때가서 찾는다. 그래서 내가 네이버뮤직 앱에서 주로 사용하는 기능들 위주로 먼저 보았다. 그러나 이제는 전체를 정리하며 마무리할 때가 왔다. 전체메뉴를 펼쳐보면 '자주쓰는메뉴' 설정이 있다. 이 기능 있어야할 정도로 메뉴의 갯수가 많다. 무려 18개다. 잘 안쓰는 메..

네이버뮤직 앱 탐구 5편에서는 시작페이지와 마이페이지 그리고 음악검색을 탐구했다. 1. 시작페이지 구성 시작페이지는 TOP100 순위를 시작으로 최신앨범, 음악검색(소리), 광고배너, 장르별 링크로 구성되어 있다. 그 아래에는 플레이리스트가 좌르르 나열되어 있다. 플레이리스트 중에 SPECIAL 라벨이 붙은 것은 매거진으로 연결된다. 매거진 컨텐츠는 모바일웹 컨텐츠를 앱으로 불러들이는 것으로 보인다. 메인 첫 화면에 음악검색(소리)가 있어서 SEARCH 화면으로 들어가지 않고 음악소리를 바로 검색할 수 있어서 편리하다. 그런데 모양새가 버튼스럽지 않아서 배너인지 기능버튼인지 모호하게 보인다. 2. 마이페이지 구성 마이페이지는 일반적인 웹사이트의 마이페이지와 같은 구성이다. 로그아웃 상태에서는 '최근들은 ..

네이버뮤직 앱 탐구 4편! 이번에는 네이버뮤직 앱의 스트리밍 라디오 서비스를 살펴보았다. RADIO라는 이름에서부터 아날로그 감성을 풍기는데 화면 디자인도 스큐모픽 스타일이다. RADIO는 재생목록을 만들지 않아도 유사한 곡을 계속 들려주는 서비스다. 포스팅 내용을 정리하면서 켜놓았는데 선곡이 참 좋다. 내가 좋아하는 노래와 연관된 것으로 구성되어서 그런가. RADIO에서 유사한 곡을 선별하는 공식이 어떻게 작동하는지 궁금해진다. RADIO 메인에서 마음에 드는 추천 곡을 선택하거나, 내가 좋아하는 노래 한 곡을 검색해서 재생시키면 그 다음은 자동으로 유사한 곡을 선곡해서 들려준다. 무엇을 들을지 고민하지 않아도 된다. 게다가 검색해서 리스트를 만드는 수고를 하지않아도 내가 좋아하는 노래와 유사한 새로운..

모바일앱 탐구 - 네이버뮤직 앱 3편. 네이버뮤직 앱의 재생목록 화면에서 가장 눈에 띄는 기능은 '재생목록 검색'이다. 이 기능 정말 유용한 것 같다. TOP100을 듣다가 '싸이'를 검색하면 TOP100 중 싸이의 노래만 검색된다. 그중에서 듣고싶은 곡을 선택하면 그 곡으로 이동해서 재생된다. 나는 별도의 재생목록을 만들지 않고 기본 재생목록에 계속 노래를 추가하면서 듣기 때문에 재생목록에 수백개의 곡이 쌓여있다. 가끔 목록 중에 특정 노래가 듣고 싶을 때 목록을 위아래로 스크롤하면서 그 곡을 찾는 것은 무지 피곤한 일이었다. 그래서 이번 탐구를 통해 검색기능을 발견한 것이 큰 기쁨이다. 재생목록 설정으로 들어가면 몇 가지 유용한 기능이 있다.곡 추가 위치 : 맨 위, 맨 아래, 재생 곡 아래곡 추가 ..

모바일앱 탐구 - 네이버뮤직 앱 2편. 1편에서 네이버뮤직 앱의 시작화면과 상단 하단에 딸린 화면들에 대해 대략적으로 훌터보았다. 2편에서는 음악 앱에서 가장 중요한 기능이라고 생각되는 플레이어에 대해서 탐구해 보았다. 다음은 네이버뮤직 앱 하단의 모습이다. 재생목록이 없을 때, 있을 때, RADIO로 음악을 들을 때. 상황에 따라 표시되는 내용과 디자인이 다르다. 이 곳에서 노래제목 부분을 탭하면 플레이어 화면을 만날 수 있다. 오래 전에 네이버뮤직 앱을 처음 설치했을 때 사실 난 플레이어 화면의 존재를 모르는채로 며칠 동안이나 사용했었다. 앱을 설치하고 로그인 한 후 첫화면에 보이는 'TOP100 전체듣기'로 재생목록에 100곡을 추가시키고 재생/정지 버튼만을 사용해 며칠간 음악을 들었다. 음량조절도..

모바일앱 탐구 - 네이버뮤직 앱 1편. 네이버뮤직 앱을 탐구하기 위해 구석구석 화면을 열어보고 기능을 실행해보면서 느낀 것은 '음악 앱일 뿐인데 참으로 많은 것을 담고 있구나. 복잡하다.' 나의 네이버뮤직 앱에 대한 경험은 웹사이트에서 월이용권을 결제하고, 스마트폰에서 앱을 실행시켜서 TOP100 듣기로 작업 중 무료함을 달래는 것이 전부이다. 그 과정에서 마주하는 화면은 1) 하단 플레이어 바 2) 재생목록 화면 정도이다. 이용하는 기능은 플레이어의 재생/정지 버튼. 간혹 한곡반복 이나 전곡반복 버튼 정도이다. 그밖에 이용하는 기능은 기껏해야 3) 음악 검색 4) 재생목록 추가. 귀찮아서 재생목록을 자주 바꾸지도 않는 편이다. 추가 재생목록을 만들어서 저장해두는 것도 1년에 1~2번 정도. 딱 아이팟 ..

아이폰용 디자인 시 이미지 해상도는 iPhone 6 plus 해상도인 1242x2208 사이즈로 만들고, 완성된 이미지를 750x1334과 640x1136 두 가지로 리사이징하여 사용한다. 단, 1242x2208 사이즈로 작업하되 화면구성은 iPhone 6를 기준으로 4.7인치 화면에서 클릭하기 쉬운 크기의 아이콘과 가독성을 고려한 폰트 크기를 사용한다. iPhone 6 plus 는 자동으로 1080x1920으로 크기를 줄여서 보여주기 때문에 실제보다 작게 보여 클릭과 가독성에 있어 차이가 없어지게 된다.

[사진] Nearsoft Inc 이전 포스팅에서 와이어프레임 스케치를 위한 스텐실 도구를 소개했는데요. 와이어프레임을 그리다보면 수많은 화면들을 그리게 되는데 그때마다 디바이스 모양의 사각박스를 반복해서 그리는 것은 비효율적이잖아요. 그 안에 그릴 내용에 집중을 해야 할텐데 말이죠. 그래서 모바일 와이어프레임 스케치를 위한 템플릿을 인쇄 책자 형태로 만들어 판매하기도 하더라구요. 그런데 찾아보니 무료 템플릿을 제공하는 고마운 분이 계시네요. UX Designer 'Matthew Stephens'의 웹사이트에서 '좋아요' 한 번 눌러주시면 다운로드 하실 수 있어요. iPhone 5, iPhone 5s, and iPhone 5c TemplatesiPhone 6 TemplateTemplates for iPho..

[사진] Todd Moy 모바일 디자인을 위한 와이어프레임 그리기. 와이어프레임 스케치에 도움을 주는 디지털 도구가 다양하게 있지만, 종이에 펜으로 그리는 것 나름의 장점이 있는 것 같습니다. 종이 스케치가 컴퓨터로 그리는 것보다 속도가 더디다고 생각할 수 있는데요. 저의 경우에는 컴퓨터에 그리다 보면 생각정리 없이 요소를 이것저것을 넣었다 뺏다를 반복하며 무조건 올려놓고 보는 식의 스케치가 되더라구요. 종이를 펼쳐놓고 손에 펜을 잡으면 오히려 손을 잠시 멈추고 윤곽을 어떻게 잡을지, 요소는 무엇을 쓸지, 비율은 어느 정도로 할지 머리속에서 몇 분간 생각을 하게 되고 그걸 선으로 옮기고 하다보면, 오히려 생각이 정리가 되면서 결과물을 만날 때까지의 전체적인 속도는 컴퓨터로만 작업하는 것보다 빠르기도 한 ..

내가 만든 모바일웹 또는 반응형웹 사이트가 다른 기기에서는 어떻게 뜰까? 굉장히 궁금한데요. 모바일웹 & 반응형웹을 PC에서 시뮬레이션 해볼 수 있는 웹사이트를 소개합니다. 다음커뮤니케이션의 웹표준 랩, 다룸 (Darum) 에서 제공하는 트로이 입니다. http://troy.labs.daum.net (1) 사이트에 접속한 첫 화면 입니다. 좌측에 제조사별 카테고리가 있고, 우측에 디바이스가 표시되어 있습니다. 디폴트가 갤럭시 노트4 네요. (2) 우측 상단에 3개의 아이콘이 있습니다. 설정 아이콘을 누르니 '시작 디바이스 설정' 이 나오네요. 저는 애플을 사용중이라 아이폰 6로 바꿨습니다. (3) 좌측 카테고리에서 애플 iPhone 6 Plus 를 클릭했더니, 우측에 디바이스가 추가됩니다. (4) 브라우..