태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.


'앱소개'에 해당되는 글 5건

  1. 2013.12.26 Assistor PS 디자인 가이드 툴 리뷰 by hyun27
  2. 2013.07.03 Assistor PS - mini tool for GUI guideline (1) by Limho
  3. 2013.05.03 grappic-앱디자인을 손쉽게 확인하기 by hyun27
  4. 2013.03.14 [pxd talks 23] 나만의 포스터를 쉽고 멋지게 :: Phoster 앱 개발 이야기 (2) by 김 선오
  5. 2012.03.25 [스마트 디바이스와 서비스] Nike+ : Goal Management Service by 김 동후
2013.12.26 09:13

Assistor PS 디자인 가이드 툴 리뷰

GUI 가이드 문서 만들 때, 오브젝트에 그림자나 아웃 글로우 같은 이펙트가 걸려있을 경우, 경계를 확대해서 꼼꼼히 보지 않으면 안됩니다. 생각보다 시간이 많이 걸리는 작업인데요, 컴퓨터가 알아서 어디까지 이펙트가 걸려있는지 자동으로 크기값을 알려주고 좌표값을 표시해 준다면 얼마나 편할까요?
이 때 필요한 프로그램이 Assistor PS입니다. 이전에 pxd블로그에서 디자인 가이드 툴 Assistor PS에 대해 소개한 적이 있었는데요, 오늘은 제가 Assistor PS를 사용하면서 유용했던 기능을 공유하려 합니다.



1. 가이드박스 생성&크기값 추출

가이드박스 생성
첫번째로 가이드 박스 자동 생성입니다. 작업을 시작하기 전, 좀 더 가이드를 수월하게 하기 위해 오브젝트나 텍스트의 영역을 표시해주는 가이드 박스를 그리는 경우가 많은데요, 이때 세심한 작업이 필요합니다. 오브젝트에 그림자 등의 효과가 적용 되었을 경우 최대한 확대를 하여 효과가 끝나는 지점이 잘리지 않게 영역 표시를 해 주어야 하기 때문이죠.

포토샵에서 원하는 오브젝트의 레이어 선택 후 Assistor PS의 'Guide Box'버튼을 클릭하면 그림자 효과가 적용된 부분까지 인식하여 박스를 생성해 주기 때문에 확대해 자세히 보지 않아도 정확하게 영역을 설정할 수 있습니다. 이것 만으로도 시간이 많이 절약 되었습니다. 

크기값 추출
크기값 추출도 가이드박스 생성과 비슷합니다. 원하는 오브젝트, 텍스트의 레이어를 선택하거나 marquee툴로 영역을 설정 후 크기값 추출 버튼을 클릭하면 적용된 효과를 포함한 크기값을 알 수 있습니다. 아래 그림과 같이 포토샵 내에 @Assistor_guide폴더를 생성해 수치값을 자동으로 표시해 주는 방식입니다. 


2. 좌표값 및 마진값 추출

좌표값 추출
지금까지는 아이콘이나 이미지의 좌표값을 알아내기 위해 포토샵의 marquee툴을 사용했습니다. 도큐먼트의 왼쪽 최상단에서부터 오브젝트의 좌측 상단 좌표점까지 쭉- 드래그를 해서 선택된 공간의 좌우 값이 좌표값인 것이죠.
이때, 전체 디자인이 화면에 꽉 차도록 축소한 상태에서 좌표값을 잴 때가 많은데요, 그럴 경우 오브젝트의 정확한 좌표점을 찍지 못하고 몇 픽셀 어긋나는 경우가 많았습니다. 좌표점이 어긋나면 다시 화면을 확대해서 정확한 좌표점을 찾아 드래그를 하는 반복 작업을 해야합니다.

Assistor PS에서는 좌표값을 추출할 수 있는 기능이 있어 한번의 클릭으로 좌표값을 알아낼 수 있습니다. 좌표값을 알고싶은 오브젝트의 레이어를 선택하고 ‘좌표값 추출’ 버튼을 클릭하면 '짠' 하고 좌표값을 표시해 줍니다.
상대좌표를 구할 때에는, marquee툴로 영역을 설정하고 레이어를 선택한뒤 '좌표값 추출'버튼을 클릭하면 선택된 영역의 좌측 상단을 기준으로 한 상대좌표값을 알 수 있습니다. 사소한 기능일 수도 있지만 지금까지 좌표값 하나를 알기위해 확대하고 축소하고 마우스 드래그도 몇번씩 했던 귀찮음에 비하면 작업 과정이 깔끔해 졌습니다.


마진값 추출
컴포넌트간, 오브젝트간, 또는 텍스트와 아이콘간의 마진값을 가이드에 표기하는 경우도 많은데요, 마진값을 구할때도 역시 포토샵의 marquee툴을 사용하고 있었습니다. 좌표값 추출기능에서도 이야기 했듯이, marquee툴을 사용하면 열심히 확대를 해서 보지 않을 경우 픽셀이 어긋나는 경우가 많습니다. Assitor PS의 마진값 추출 기능을 사용하면 오브젝트 두개의 레이어를 선택한 뒤 마진값 추출 버튼을 클릭하여 쉽고 정확하게 마진값을 구할 수 있습니다.
 
대부분의 기능이 포토샵에서 레이어 선택 or marquee툴로 영역 설정 > Assistor PS의 기능 버튼 클릭 > 포토샵에 자동으로 @Assistor_guide폴더 생성, 수치값 표기의 순서로 사용법이 간단하여 배우기가 편했습니다. 또, 컷팅해야 할 이미지를 저장하기 쉽게 새창으로 내보내는 기능, 안드로이드 해상도 자동 계산 기능 등도 포함되어 있어 가이드 작업 중 귀찮고 불편했던 부분이 많이 편해졌다고 느껴졌습니다.

"작업시간이 눈에 띄게 줄어들어 매일매일 칼퇴를 하게 되었다!" 라든지 "이게 없으면 가이드 작업을 절대 할수 없다" 정도는 아닐 수도 있지만, 한번 익숙해지니 포토샵의 단축키를 사용하는 것 처럼 작업이 한결 수월해 졌습니다. 매우 중요하지만 소모적인 작업인 디자인 가이드를 덜 귀찮게 작업할 수 있도록 도와주는 요긴한 툴이라고 생각됩니다.

제작사인 위트스튜디오의 블로그를 참고하시면 자세한 기능에 대한 설명이나 업데이트 소식을 보실 수 있습니다. :)
참고 : 위트스튜디오 Assistor PS 블로그


[참고##앱소개##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.07.03 00:15

Assistor PS - mini tool for GUI guideline

얼마 전, 'Assistor PS' 라는 소프트웨어의 정식 버전이 나왔습니다. pxd는 베타 버전을 신청해 사용하다가, 정식 버전을 구매하였습니다.

windows 7 이상 / CS3 이상
Mac OS X / CS3 이상

'Assistor PS'는 GUI디자인을 할 때 반복적인 작업들을 쉽고 빠르게 처리할 수 있도록 해 주고, 많은 노동력이 필요한 GUI가이드라인 제작도 빠르게 할 수 있도록 도와 주는 포토샵(Adobe photoshop)보조 프로그램입니다. 다양한 해상도와 비율의 단말들을 위한 여러 벌의 GUI가이드라인을 작성해야하는 GUI디자이너에게는 정말 반가운 프로그램이죠.

http://witstudio.net/assistor/
위트스튜디오의 홈페이지에 이 프로그램에 관한 설명이 잘 되어 있네요.

작업중인 화면을 동영상캡쳐하여 전반적인 기능들을 빠르게 보여주는 영상입니다.



기능별로 튜토리얼 영상이 준비되어 있습니다.

레이어 가이더 1/2
- '오브젝트의 좌표값, 크기값, 오브젝트간 거리값, 폰트정보'를 자동으로 레이어생성해 주는 기능에 대해 설명하고 있습니다.

레이어 가이더 2/2
- 가이드박스 만들기와 가이드 디스크립션활용에 대해 설명합니다.

가이드 메이커
- 포토샵의 가이드를 마우스가 아닌 수치로 빠르고 정확하게 만들 수 있습니다.

유닛컨버터
- 단말 DPI에 따른 수치값 자동 계산 기능에 대해 설명합니다.

라운더
- Path Shape 모서리의 라운드값을 수치입력으로 일괄 변경할 수 있습니다.

타일러
- 사용자가 입력한 규칙에 따라 오브젝트를 쉽게 복제하는 기능입니다.

어시스터PS가 제공하는 모든 기능들이 깨알같고 요긴한데요. 특히 포토샵 Guide선은  GUI작업이 아니더라도 웬만한 디자인작업에서 많이 쓰는 것이라, 하나하나 마우스클릭으로 Guide선을 끌어다 놓던 기존 작업방식을 원시적인 것으로 만들어 버릴 만큼 편리합니다. '롱프레스-드래그-릴리스'로 지친 여러분의 검지손가락 수명을 상당히 연장시켜줄 것입니다.
그 뿐만 아니라, 디자인 작업 중 사각형 라운드의 크기에 따른 전체적인 조화를 보기 위해 매번 R값이 다른 사각형을 다른 레이어에 다시 그리고 대조해 보며 디자인작업을 하는 경우가 많은데, 간단히 수치값만 변경하면 바로 적용되는 모습을 보시면 앞으로 세이브 될 시간이 눈앞에 보이실 겁니다. :)

설정에서는 드래그방식으로 기능탭의 수와 순서를 편집할 수 있습니다.

GUI가이드라인 업무의 고됨을 경험하고 이해하여 만든 프로그램이라 느껴집니다.
pxd 디자이너들도 '작업 효율을 실질적으로 많이 올려 준다'는 평가를 하고 있고요.
가이드라인 작업의 비효율에 대해 고민을 하고 있는 디자인(개발)회사라면 꼭 사용해 보시길 추천합니다.

어시스터PS에 관한 다양한 소식들은 Facebook (Assistor App)에서 확인하실 수 있습니다.


참고로 이 프로그램을 개발한 위트스튜디오는 코디네이터(http://witstudio.net/codinator/)라는 GUI작업에 최적화된 그래픽저작툴도 개발 중이라고 합니다.

[참고##앱소개##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 1
Ad Test...
2013.05.03 00:17

grappic-앱디자인을 손쉽게 확인하기

GUI 디자이너라면 실제 디자인 작업에 들어가기 전, 레퍼런스 조사를 위해 앱을 다운받아 디자인을 살펴본 경험이 있을 것입니다. 그 때마다 일일이 앱스토어에 들어가 썸네일 이미지를 확인하고 앱을 다운 받은 후 GUI디자인을 봐야하는 귀찮은 과정이 있었는데요, 앱스토어에 등록된 앱의 이미지를 번거로운 과정 없이 손쉽게 확인할 수 있는 서비스가 있어 소개해 드리려고 합니다.


grappic


grappic은 앱스토어에 등록된 모든 앱 디자인을 실시간으로 확인할 수 있는 서비스입니다. grappic의 유저는 grappic을 통해 앱 디자인을 손쉽게 확인하고 마음에 드는 디자인에는 투표를 해 순위를 올릴 수 있습니다. 또한 간직하고 싶은 이미지는 My Pic(개인 라이브러리)에 저장해 언제든지 다시 꺼내볼 수 있습니다. 그럼 grappic의 몇 가지 유용한 기능들을 살펴보도록 하겠습니다.
*grappic은 웹사이트도 운영되고 있지만 베타 버전이기 때문에 모든 기능을 사용할 수는 없다고 합니다. 이번 포스팅에서는 앱을 기준으로 소개해 드리도록 하겠습니다.


1. Pic Board
grappic의 메인 화면인 Pic Board에서는 추천 이미지와 순위가 높은 이미지를 확인할 수 있습니다. 많은 사람들이 투표한 이미지가 먼저 보여지기 때문에 그만큼 선호도가 높은 디자인을 볼 수 있는 공간이죠. 좋은 이미지를 보기 위해서라도 유저들의 적극적인 투표가 필요하다고 생각됩니다. :)

2. Street (Random view)
Street에서는 순위와는 상관없이 랜덤하게 뿌려지는 이미지를 확인할 수 있습니다. Random view 형식이기 때문에 어떤 목적성을 가지고 디자인을 찾아보는 경우 보다는 잠깐 시간이 비어있을 때, 출퇴근 시간이나 쉬는 시간에 가벼운 마음으로 앱 디자인을 볼 때에 유용할 것 같습니다. 상하좌우 플리킹으로 손쉽게 넘겨보면서 마음에 드는 디자인에 투표도 하고 My Pic에 저장해 놓을 수도 있습니다.


3. My Pic
Pic Board와 Street에서 내가 '픽'한 이미지를 확인할 수 있는 공간입니다. 기본적으로 My Pic이라는 pack이 있고 사용자가 직접 새로운 pack을 생성해 이미지를 카테고라이징 할 수 있습니다. 아래의 이미지는 simple style이라는 pack을 생성해 놓은 것인데요, 저런 식으로 스타일별, 컨텐츠의 장르별로 이미지를 구분해 놓고 필요할 때에 찾아보면 유용할것 같습니다.


소개 동영상도 재미있습니다.


앱 다운로드
https://itunes.apple.com/us/app/grappic/id581463486?mt=8

grappic 웹사이트
http://grappic.net/
현재 웹사이트에서는 My Pic은 이용할 수 없고 이미지 뷰잉과 투표만 가능하네요. 그래도 앱스토어의 전체 앱을 살펴볼 수 있다는 점에서 GUI디자이너의 북마크 리스트에 추가할 만한 사이트라고 생각합니다. :)
자세한 서비스의 설명은 제작사인 위트스튜디오의 블로그를 참고해 주세요.

grappic 설명 블로그 글
http://blog.witstudio.net/category/Service/grappic™
[참고##앱소개##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...
2013.03.14 07:01

[pxd talks 23] 나만의 포스터를 쉽고 멋지게 :: Phoster 앱 개발 이야기

한 달에 한 두 번씩 명사 분들의 경험과 좋은 생각을 공유하는 pxd talks.
이제는 사내 강의에서 벗어나 외부 초청도 같이 진행하며 보다 많은 분들과 함께하는 뜻 깊은 시간이 되어가고 있습니다.

2013년의 첫 번째 pxd talks 시간은 새해를 맞아 처음 진행된 강의라는 것과 함께 특히 참여 열기가 뜨거웠는데요, 바로 국산 토종 앱으로는 드물게 미국 앱스토어 메인에 소개되며 뜨거운 반응으로 큰 화제를 몰고 온 Phoster 앱 개발 이야기를 들을 수 있는 시간이었기 때문이었습니다.

Phoster 앱. 아직 모르신다면 이제부터 Phoster 앱 개발사 Bucket Labs의 심찬용 대표님이 전하는 Phoster 앱의 개발 과정과 흥미진진한 미국 앱스토어 입성기를 들어보겠습니다.



1. Photo + Poster = Phoster!
Phoster앱은 Bucket Labs에서 개발한 것으로 ‘Phoster’라는 이름은 Photo + Poster의 합성어 입니다. ‘Phoster’는 나만의 포스터를 쉽고 멋지게 만들 수 있는 앱 입니다. 폰에 저장된 사진을 불러와서 다양한 템플릿에 적용한 후, 텍스트의 사이즈나 색상을 조절하여 개성 있는 포스터를 만들 수 있습니다.




2. Phoster 제작기
- 이거 네가 만든 거야?
처음 Phoster앱을 기획할 때의 중심은 “이거 네가 만든 거야?” 라는 말을 들을 정도로 멋지지만, 알고 보면 디자인 감각이 없는 사람이라도 ‘누구나’ 쉽게 멋진 나만의 포스터를 만들 수 있는 앱을 만드는 것이었다고 합니다. 이런 점에서 Phoster 앱으로 포스터를 만들어 보면 정말 기획 포인트가 결과물까지 잘 이어졌다는 것을 알 수 있습니다.

- 어디서 본 듯한 디자인?
그런데 한가지 흥미로운 사실이 있습니다. 기획에서 디자인적으로 특히 더 고려한 부분은 바로 제공되는 템플릿 디자인이 ‘너무’ 멋지지는 않아야 한다는 것 이었습니다. 멋진 포스터를 만들어야 하는데 만들 수 있는 템플릿 디자인은 왜 '너무' 멋지지 않아야 할까요?

내가(사용자)가 만든 결과물을 친구들에게 보여줄 때, 사용자는 “이거 Phoster 앱으로 한거네?” 라는 친구들의 반응을 원하지 않을 것입니다. 내가 디자인하고 직접 작업한 결과물이라는 경험을 사용자에게 주는 것을 최우선으로 했기 때문에 템플릿은 보다 흔한 디자인의 템플릿이어야 했다고 합니다.

- 개발자 2명 그리고 디자이너 1명
이렇게 만들어진 Phoster 앱은 놀랍게도 개발자 2분과 디자이너 1분, 이렇게 단 3명의 인력으로 3개월 만에 제작 되었다고 합니다. 이렇게 진행하는 프로젝트 방식에서 주목할 것은 내부 인력은 개발에만 집중하고 디자인은 외부 디자이너와 협업하는 방식이라고 할 수 있겠습니다. 아무래도 1명의 디자인 담당자와 프로젝트를 하다 보면 자신의 스타일에서 크게 벗어나지 못하는 한계가 있기에 이런 방식을 채택했다고 하는 데, 이런 자유로운 협업 체계가 Bucket Labs 만의 개성 있고 독특한 앱과 디자인을 가능하게 하는 것 같습니다.

- 업데이트, 업데이트, 업데이트
여느 앱과 마찬가지로 Phoster도 업데이트를 통해 많은 부분이 업그레이드 되는 과정을 거쳤습니다. 이러한 업데이트는 앱을 출시 한 후에 받는 피드백의 반영을 중심으로 이뤄지며, 기능 면에서 이전 버전보다 더 쉽고 편하게 사용 할 수 있도록 하는 것을 핵심으로 합니다. 그러나 'Phoster’의 업데이트는 단순히 기능에만 국한되는 것이 아닌 디자인적으로도 통일감을 줘서 보다 좋은 사용자 경험을 가능하게 했습니다.

예를 들어 텍스트 입력 시, 텍스트 스타일과 사이즈, 이동, 추가 등에 관한 전반적인 수정이 가능하도록 하여 사용자에게 좀 더 자유로운 포스터 제작을 할 수 있도록 했고 또한, 배경색상 수정도 가능하게 하여 굳이 사진을 넣지 않더라도 포스터를 완성할 수 있게끔 하는 편리함도 제공했습니다. 아울러 내가 만든 포스터들을 볼 수 있는 갤러리에는 조명 디자인을 추가하여 실제 갤러리에서 작품을 보는 듯한 느낌을 받을 수 있도록 했습니다.

이런 업데이트는 앱을 설치하여 사용중인 사용자에게는 업그레이드된 기능을 제공할 뿐 아니라 새로 다운받는 신규 사용자들에게도 좋은 반응을 일으켜 앱스토어 순위권 유지에 큰 도움이 된다고 하는데요, 이러한 다양한 과정을 거친 'Phoster'가 미국, 호주, 유럽, 일본 등 전 세계적으로 앱스토어에 어떻게 큰 화제를 몰고 올 수 있었는지 좀 더 자세히 알아 보도록 하겠습니다.


3. 앱스토어 메인 입성기

- 애플에서 온 메일
앱이 출시되고 난 후, 'Phoster'는 독특한 컨셉과 개성있는 결과물로 사진 카테고리 1위에 랭크되며 카테고리에서 뿐만 아니라 전체 유료앱 순위에도 두각을 보이기 시작했습니다. 이 때 사용자들의 좋은 반응과 더불어 Bucket Labs는 애플이 보낸 메일 한 통을 받게 됩니다. 과연 어떤 메일일까요?

앱을 출시하고 나서 개발사들은 애플이 보내는 한 통의 메일을 기다린다고 합니다. 메일의 내용은 '당신의 앱이 앱스토어의 메인에 소개될 예정이기 때문에 배너 제작에 필요한 앱 이미지를 제공해 달라'는 내용 이라고 합니다. 'Phoster'는 이렇게 국산 토종 앱 으로는 드물게 일본, 호주, 미국의 앱스토어 메인에 소개되며 뜨거운 화제를 몰고 왔습니다.

- 파워 블로거와 리뷰의 힘
상위권 앱의 경우 하루 수 만건의 다운이 이뤄지는 앱스토어. 이런 앱스토어에서는 앱의 지속적인 노출이 이뤄지지 않을 경우, 매일 쏟아져 나오는 엄청난 양의 새로운 앱에 자취를 감추게 되기 때문에 앱의 홍보와 노출은 대단히 중요한 요소라고 할 수 있습니다. 이런 앱 생태계에서 ‘Phoster’가 특별한 홍보활동을 하지 않고도 상위권 랭크 유지를 할 수 있었던 것에는 여러 가지 원인이 있다고 하는데요, 우선 앱스토어 메인에 앱이 소개되는 것 자체가 엄청난 홍보 효과를 가져왔으며 또한 파워 블로거의 리뷰와 앱 소개 전문 업체, TV 프로그램 등에 리뷰가 소개 되면서 의미 있는 결과를 낼 수 있었다고 합니다.
Phoster 동영상 리뷰) http://vimeo.com/16268830


4. 'Phoster'의 성공과 Bucket Labs의 앱 개발 이야기
'Phoster'는 출시 후, 2년 반이 채 되지 않은 기간 동안 무려 200만건 이상의 다운로드를 달성했습니다. Bucket Labs의 이 같은 성공은 국내 소규모 앱 개발 서비스로 봤을 때, 매우 고무적인 성과라고 할 수 있습니다. 이런 결과가 가능하게 된 것은 프로토타이핑 작업과 그에 따른 피드백 적용 등을 최대한 빠르게 할 수 있었고, 이렇게 진행된 프로토타이핑에서 의미 있는 결과가 나왔을 때 그 내용에 맞춰 디테일에 집중했기 때문이라고 할 수 있습니다.

Bucket Labs에서는 프로젝트를 진행함에 있어 각 파트의 담당자들과의 커뮤니케이션에는 아이디어 단계라 하더라도 구체적으로 같은 내용을 공유하기 위해 프로토타이핑이 필수적이라고 합니다. 특히 간단한 아이디어의 경우 2~3일 동안 앱의 전체적인 기능을 보여줄 수 있는, 거의 완성된 버전의 프로토타입을 제작하여 수시로 아이디어를 구체화 시킨다고 하니 빠른 앱 트렌드에 맞는 개발 포지션이 아닐까 합니다.

5. Bucket Labs의 앱 소개
- Stickr

나만의 포스터에 이어 이번에는 나만의 스티커!
스티커를 직접 만들어 사진에 꾸밀 수 있으며 귀엽고 독특한 디자인이 눈에 띄는 앱 입니다.
제공되는 스티커 템플릿의 실제 같은 질감과 표현은 독특한 질감의 종이, 실제 스티커 등을 직접 촬영하여 보정한 후 디자인 소스로 사용했기 때문이라고 합니다.

바로가기) https://itunes.apple.com/us/app/stickr/id588352952?mt=8


- Grid Lens

곤충의 눈으로 사진을 찍으면 어떨까? 하는 재미있는 아이디어에서 출발한 Grid Lens는 앱 기능 사용시 자연스럽게 구현된 애니메이션으로 재미있는 조작감을 느낄 수 있는 앱 입니다. 사진 촬영과 함께 꾸미기 기능까지 함께 제공하고 있어 더욱 즐거운 경험을 할 수 있습니다.

'Grid Lens'는 출시 후, 미국 앱스토어 유료앱 종합 순위 24위에 랭크 되었습니다. 비하인드 스토리로 iTunes Holyday Shutdown (연말시즌 애플의 휴가기간으로 앱스토어가 다운 외 순위 설정, 업데이트등의 기능이 정지되는 기간) 기간에 딱 맞게 종합 24위에 랭크 되었기에 자연적으로 순위가 고정되어 순위권 유지와 노출 효과를 볼 수 있어서 대단히 운이 좋았던 케이스라고 합니다. ^^

바로가기) https://itunes.apple.com/us/app/grid-lens/id490495120?mt=8


2시간여의 시간이 느껴지지 않을 만큼 재미있고 흥미진진한 개발 이야기를 들을 수 있었던 좋은 시간이었습니다. 다양하고 즐거운 이야기로 pxd talks를 빛내주신 Bucket Labs 심찬용 대표님께 감사 드립니다.
[참고##pxd talks##]


팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 2
Ad Test...
2012.03.25 20:50

[스마트 디바이스와 서비스] Nike+ : Goal Management Service

이건 뭐지? 스마트칩? 스마트앱? 스마트 서비스?
최근 스마트 디바이스를 활용한 다양한 제품들이 출시되고 있습니다. 그 중 Nike+라는 사례를 통해 이러한 스마트 디바이스 제품들이 어떠한 형태의 서비스와 연결되고 있는지 분석해보았습니다.

결론부터 말하고 시작하겠습니다.


[Nike+는 Goal Management Service이다]


이 서비스를 만나게 된 계기
지난 2월 코리아 스마트 모바일 UX컨퍼런스에서, 스마트 디바이스의 활용에 대한 주제를 다루는 강연이 있었습니다. 그 중 하나의 사례로 'Nike+'라는 것을 소개해 주시더군요. 거기에서의 포커스는 작은 스마트 칩이 신발에 장착되면서 사람을 움직이고, 운동을 하게 만들며, 누적된 데이터 들을 보면서 자기 효능감을 높일 수 있다는 것입니다. 이 부분에서 약간 의심이 들기 시작했습니다. '정말 그럴까? 너무 확대해석하는 건 아닐까?'라는 생각이 들더군요 그래서 직접 유저가 되어서 한 번 사용해보았습니다.


서비스 소개

Nike+ 서비스 소개 화면



Nike+는 Running을 할 때의 GPS정보를 수집하여, Running Data를 관리해주는 서비스입니다.
데이터 수집을 위해서는 Nike+ GPS라는 앱이 설치된 아이폰/아이팟을 가지고 있어야 합니다. 또는 전용 센서가 달린 스마트 디바이스(센서, 암밴드)를 통해서 데이터를 기록합니다.


Nike+에 연동되는 스마트 디바이스 보기

평상시 건강관리에 관심이 있고, Running을 좋아하는 사람이라면 자신의 운동 기록들이 눈에 보이는 데이터들로 가공이 된다는 사실만으로 호기심이 생겨나고, 한 번 써보고 싶은 생각이 듭니다.

그래서 이 서비스를 직접 체험해보았습니다. 그리고 Nike+가 재미있고 매력적인 이유에 대해서 분석을 해보았습니다. 서비스에 대한 특징을 정리하면 크게 3가지로 정리할 수 있습니다.

1. Goal Management
2. Data Management
3. Community


그럼 3가지 특징에 대해서 하나하나 분석해보도록 하겠습니다.



1. Goal Management

Nike+에서 가장 먼저 해야하는 일은 명확한 목표 설정을 하는 것입니다.

Nike+ 홈페이지에서는 굉장히 적극적으로 목표 설정을 하도록 유도하고 있습니다. 달리기 횟수나 시간, 거리, 칼로리 소모량과 같이 디바이스를 통해 측정되는 데이터를 모두 활용하여 목표 수행을 할 수 있도록 유도하고 있습니다. 설정 내용도 매우 구체적입니다. 강요가 아닌 자발적인 목표 설정의 형태로, 내 수준에 맞는 목표 설정을 할 수 있도록 가이드하고 있습니다.

유저의 수준에 맞는 구체적인 목표를 설정할 수 있다.


Nike+ gps 앱에서도 목표 설정 과정을 거쳐야만 실제 런닝 모드로 전환이 됩니다. 물론 'Basic'모드 라는 기능이 있어서 별도의 셋팅없이 기록만 남기게 하는 기능도 있지만, 어차피 기록은 무조건적으로 생성되고 히스토리가 누적되기 때문에 이 앱에서 목표설정을 하지 않는 것은 굉장히 소모적이고 의미없는 행위로 느껴집니다.

구체적인 목표를 설정하는 화면 - 이 화면을 거쳐야 Start를 할 수 있다.


이렇게 목표를 명확하게 설정해놓도록 하는 과정은 사용자를 움직이는 동기가 됩니다. 사용자에게 운동에 대한 동기를 부여하고 실질적으로 '운동'을 하게 만드는 것입니다.



2. Data Management

이제 사용자는 운동을 시작합니다. 앱을 실행시키면 거리와 시간, 속도가 카운팅됩니다.

이때부터 위치 이동에 따른 모든 정보들이 기록이 됩니다. 좌측 상단에 있는 'View map'버튼을 누르면 위성 지도상에 루트를 디스플레이 해줍니다. 내 디바이스에 저장되어 있는 음악도 들을 수 있으며(플레이리스트 활용 가능) 파워송이라는 기능을 통해, 나에게 힘을 주는 음악들을 사전에 지정해놓고 들을 수 도 있습니다. 또한 중간중간 1Km단위로 실시간 상황을 음성으로 안내해줍니다. 현재 몇 Km를 통과했는지, 몇 분을 달렸는지, 목표까지는 몇 분이 남았는지 등을 알려줍니다.

런닝이 시작되면서 부터 모든 데이터들이 실시간으로 수집되며 화면을 통해 디스플레이 된다.


운동이 끝나면 아래와 같은 데이터들이 생성됩니다. 이번 런닝에 대한 전반적인 기록이 저장되고 나의 느낌, 날씨, 길의 형태와 간단한 메모 등을 기록할 수 있습니다. 운동에 대한 히스토리를 남길 수 있어서 잔잔한 재미들을 느낄 수 있습니다.

런닝에 대한 Summary를 할 수 있고, 기록에 대한 히스토리를 저장할 수 있습니다.


이제 홈페이지에 들어가서 자동 싱크된 데이터들을 확인합니다. 모바일 기기에서 누적된 데이터들이 재미있는 애니메이션으로 표현되고, 모바일에서 보지 못한 정보들을 추가적으로 확인할 수 있습니다.

나의 누적 레벨도 보여지며 다음 목표와 최고 기록에 대한 누적 정보들도 보여집니다. 또한 GPS경로 보기 기능을 통해서 이동 루트를 애니메이션을 통해 재현을 해주고, 속도 분포와 단위 거리별 시간 등을 보여줍니다.

나는 단지 앱을 켜고 런닝을 했을 뿐인데, 생각치도 못한 데이터들이 기록되어 있어서 살짝 놀랍니다.
또한 그 데이터들이 눈에 보기 좋게 가공이 되어있고, 다음 목표와 연결시킬 수 있게 되어 있어서 성취감을 느끼는 동시에 다음 런닝에 대한 기대감도 높이게 됩니다.

데이터들을 이해하기 쉬운 그래픽으로 표현하였다. 이동경로를 애니메이션으로 표현하는 부분은 색다른 재미를 준다.



3. Community

Nike+는, 런닝을 즐기는 유저들과 다양한 형태로 커뮤니케이션이 가능합니다. Nike+ 사이트에 등록된 유저들과 친구를 맺고 런닝데이터와 정보들을 주고 받을 수 있으며, 사이트 안에 '챌린지'라는 그룹을 통해서 공통된 목표를 두고 런닝 데이터를 공유하며 경쟁할 수 있습니다. 또한 Facebook, Path, Twitter와 연동이 되어서 나의 런닝 상태를 실시간으로 공유할 수 있습니다. 단순히 알리는 차원이 아니라 알림에 대한 사람들의 피드백을 운동 중에 실시간으로 받을 수 있어서 2차적인 커뮤니케이션이 일어나는 커뮤니티가 형성됩니다.

Test로 Path와 연동을 시켜보았습니다. 아래와 같이 귀여운 인터페이스를 통해 Nike+와 Path를 연동시킬 수 있습니다. 또한 Nike+를 실행시키면 Path에 런닝이 시작되었다는 메시지를 자동으로 올려줍니다. 이 부분에서 재미있는 것은 이 메시지에 이모티콘이나 댓글이 달리면 실시간으로 런닝을 하고 있는 Nike+유저에게 응원의 환호성이 들리게 됩니다. 환호성이 들리면 유저는 간접적이지만 굉장한 힘을 얻게 됩니다. 다른 사람에게 운동 여부를 어필하고 응원까지 듣게 되니 관심을 받고 있다는 느낌이 들게 되고 런닝하는데 힘을 얻게 됩니다. 또한 운동을 마치고 Share를 하게 되면 운동의 결과가 패스에 자동으로 올라갑니다. 달린 거리와 시간, 목표 지점을 통과한 시점(별), Path 친구들이 응원을 보낸 시점을 런닝 경로를 따라 표시해줍니다. 홈페이지에서 유저 혼자만 볼 수 있던 정보들이 외부로 노출 되면서 정보의 활용도를 높여주고, 운동에 대한 만족감을 높일 수 있는 장치가 됩니다.


또한 '챌린지'라는 커뮤니티를 통해 공통의 목표를 정해놓고 런닝을 즐길 수 있습니다. 함께 운동을 한다는 연대감을 형성해주고, 목표 달성을 위한 경쟁을 유도하여 운동효과를 높일 수 있습니다.

아래 화면은 현재 사내 분들을 대상으로 한 챌린지 그룹입니다. 한 달 동안 20km라는 공통의 목표를 두고 서로 운동을 할 수 있도록 장려하고, 거기에 경쟁심리를 더해서 서로 윈윈 할 수 있는 커뮤니티를 형성하게 됩니다.

공통의 목표를 정해두고 그룹원들끼리 공유 및 경쟁을 하게 됩니다.



정리

Nike+는 런닝을 좋아하는 사람들의 심리를 잘 반영한 서비스라고 생각합니다. 런닝, 특히 장거리 달리기는 목표설정이 매우 중요합니다. 힘이 든 운동이기 때문에 운동을 시작하는 것 부터 장벽이 있고, 달리면서 타협을 하게 되어 끝까지 완주하기가 어려운 종목입니다. Nike+는 명확한 목표 설정을 가이드 해 주면서 장거리 런닝의 말초적인 장벽을 허물어주는데 효과적인 툴입니다. 또한 런닝을 하면서 막연하게 예측할 수 밖에 없던 데이터들을 gps정보를 통해 정확히 수집을 해주고, 현실감있는 데이터로 가공해 주면서 운동에 대한 기록들을 효과적으로 관리해줍니다. 앱을 하나 깔았더니 생각치도 못한 데이터들을 얻게되어, 런닝을 좋아하는 사람들에게는 자기 효능감을 높일 수 있는 데이터로 인식됩니다. 생각치도 못한 보너스를 받은 것 같은 느낌이 들게 되는 것이지요. 또한 커뮤니티를 통해 운동효과를 높이게 됩니다. 홈페이지 커뮤니티를 통해 운동 실행에 대한 동기부여를 받게되고, SNS의 커뮤니케이션을 통해 운동을 하는 도중에 동기부여를 받게 됩니다. 실질적인 운동효과를 높이는데 긍정적인 영향을 끼치게 됩니다.

단지, 스마트 앱 하나로 이루어지는 서비스가 아닙니다. 앱(또는 스마트 칩)과 홈페이지 그리고 SNS서비스가 복합적으로 관계를 맺고 있는 서비스입니다. 복잡한 User Scene을 가지고 있습니다. 그러나 가장 중요한 포인트는 유저들의 심리를 매우 잘 반영하고 있다는 것입니다. 좋은 UX, 좋은 서비스를 기획함에 있어서 가장 중요한 것이 무엇인지 다시 한 번 느끼게 하는 체험이었습니다.

날씨가 따뜻해지고 있습니다. 모두 다같이 운동합시다~^^ Run~~~!!

<(^_^)

[참고##앱소개##]

팀블로그 pxd Story 구독 방법  블로그 글은 각 개인의 생각이며 피엑스디와 다를 수 있습니다.


Trackback 0 Comment 0
Ad Test...