[UX] 가벼운 이야기2012.09.18 09:00


글을 시작하며 

[01] Band (이미지출처 하단 명기)


Micro SNS의 등장 이후 특정 그룹을 타겟팅한 SNS가 등장했고, Group형 SNS도 등장했다. 카카오톡(지인간의 채팅), 카카오스토리(지인간의 사진 공유 SNS), 카카오아지트(그룹간의 SNS)의 포지셔닝을 보면 카카오의 전략이 다각도로 이루어졌다는 것을 알 수 있다. (관련 기사 : http://me2.do/FfD7ct2)

NHN도 그룹 SNS 성격의 모바일앱 Band를 내놓고 발빠르게 움직이는 모습이다. Band 서비스의 정확한 시작은 알 수 없으나, SNS의 미투밴드에서 그 출발을 미루어 짐작할 수 있다. 미투밴드는 미투데이 사람들끼리 친목을 도모하기 위한 공개(혹은 비공개)형 소모임이다. (미투밴드 : http://me2.do/GiO7DLF)

그리고 밴드 서비스의 총괄 기획은 NHN 이람 이사님께서 하신 것으로 보여진다. 비공개형 Group SNS를 왜 기획하게 되었는지에 대한 심도있는 글이므로 꼭 읽어 보시기를 권한다. (관련 글:http://me2.do/GVTmyg6)

위 글에 영감을 받아 페이스북, 네이버, 카카오, 다음, Path의 SNS를 포지셔닝 해 보았다. 제공하는 모든 기능을 포지셔닝한 것이 아니므로 실제와 약간 다른면이 있을 수 있다. (이를테면 미투데이에서도 비공개 그룹형 SNS인 미투밴드를 제공하고, 채팅을 지원하므로 실제로는 페이스북과 포지셔닝이 겹친다.)

[02] 공개/비공개, 게시판/채팅 유형에 따른 SNS 포지셔닝 맵


- 페이스북은 공개형 SNS를 필두로 채팅, 그룹형 서비스를 지향하고 있으며, 커뮤니케이션과 관련된 거의 모든 활동을 지원한다.

- NHN(네이버)은 미투데이(공개형 SNS), 밴드(비공개형 SNS), 라인 (비공개형 SNS – 채팅형)을 런칭하여  공개형 SNS와 비공개형 SNS의 양 축을 공략하고 있다. 밴드 서비스는 특이한 점이 게시판형과 채팅형을 구분하지않고 비공개형 SNS에 최적화한 형태를 보여주고 있다는 것이다.

- 카카오는 카카오스토리(공개형 SNS – 게시판형), 카카오톡(비공개형 SNS – 채팅형), 카카오아지트(비공개형 Group SNS), 카카오수다(공개형 Group SNS – 현재 서비스 종료) 등 SNS의 다양한 분류에 최적화한 개별 서비스들을 다양하게 제공하고 있다.

- Daum은 요즘(공개형 SNS), 캠프(공개형-비공개형 SNS), 마이피플(비공개형 SNS – 채팅형)을 런칭하였다.

- Path는 비공개형 SNS를 필두로 일부 공개적인 형태를 보여주고 있다.

(본 포스팅은 SNS 전략을 다루고자 하는 글이 아니므로 각 회사의 서비스 전략 보다는 ‘현상’을 설명하는 정도로 그치고, 그 중에서도 밴드 서비스를 집중적으로 살펴보려고 한다.)

네이버에서 Group형 SNS ‘Band’를 런칭한다고 했을 때 無異 님을 필두로 필자의 회사에서 사내 친목을 도모하기 위한 수단으로 활용해보려고 밴드 앱을 이용해 보았다. 기존에는 친목 도모용으로 Path를 잘 활용하고 있었으나, 마침 Path의 서버가 느려지는 등 사용성의 문제가 있었기 때문에 Band를 사용 해 보고 서비스가 매력적이면 옮기는것도 고려하고 있었다.

이번 포스팅은 짧은 기간동안 이지만 필자의 회사사람들과의 경험을 토대로 한 Group형 SNS Band의 매력적인 부분과 다소 아쉬운 점을 논하고, Group SNS를 기획할 때 어떤 점들을 고려해야 할지를 기술하려 한다. 언급된 내용은 비단 Group형 SNS 뿐 아니라 일반적인 서비스 기획시에도 응용할 수 있을 것으로 보인다. 그만큼 일반적이고 어떻게보면 뻔하다고 느낄 수 있는 이야기를 다루고 있다.


Band App의 매력적인 부분은 다음과 같다.

1. 아이덴티티가 돋보이는 서비스이다.

[03] 밴드 색상 변경


밴드라는 아이덴티티를 고무밴드로 풀어낸 점이 인상깊었다. 또한 밴드 색상을 변경하면 밴드의 아이덴티티 컬러가 바뀌는 것도 좋았다. 


2. 정갈한 UI를 보여준다.

[04] 이미지 모아보기


밴드에서는 이미지를 모아 보여주는 뷰가 있는데, 사진을 한눈에 모아보기에 좋은 화면으로 생각한다. 또한 그 외에도 디테일한 부분에서 GUI의 장점이 돋보였다.


3. 채팅방에서 알림/끔 기능을 제공하는데 이 점 마음에 든다.

[05] 채팅방 알림 켬/끔 기능


채팅방 알림 켬 끔 기능은 유저의 성향과 상황에 따라 가변적인데, 쉽게 켬 / 끔을 지원하는 기능은 장점이라고 생각한다.


4. 댓글 시스템 기획 시 디테일이 돋보인다.

[06] 특정 멤버 대댓글 달기


특정 친구에게 댓글을 달고 싶을 때 특정 친구 댓글을 클릭하면 자동으로 친구 이름이 남겨진다. 그 외에 @친구이름을 입력해도 마찬가지로 입력이 가능한데 고민의 깊이가 느껴지는 UI였다. 특정 친구 댓글을 클릭하면 자동으로 친구 이름이 남겨지는 방식은 미투데이 UI에서도 활용했던 방식이다.


Band App의 아쉬운 점은 다음과 같다.

1. 게시판에서 알림 기능은 게시판 기능과 별도로 분리했으면 한다.

[07] 게시판의 알림 영역과 게시판 영역


알림 기능과 친구의 소식 기능은 별도로 분리되어야 한다. 필자가 쓴 카카오스토리 UI/GUI 글에도 관련 해서기술한 바 있는데 참고했으면 한다. (http://story.pxd.co.kr/520)


2. 사진첩에서 남긴 댓글의 수를 확인하기가 힘들다.

[08] 사진첩 화면


사진첩을 같이 감상하고 즐기는 것은 좋지만, 사진첩에 댓글이 달렸을 때 어디에 달렸는지 확인하기가 어렵다. (글 작성 초기에만 하더라도 댓글 수를 보여주는 GUI가 없었는데, 현재 추가되었다.)


3. 사진 삭제가 어렵다.

[09] 사진 삭제 기능 접근 시나리오


사진 삭제 기능까지 접근하기가 힘들다. 사진 삭제 기능을 1 depth 앞 단계로 빼도 되지 않았을까. (현재 사진 삭제 기능은 1 depth 앞으로 뺀 상태로 업데이트 되었다.)

4. 디테일한 일정 설정이 어려움

[10] 일정 만들기 화면


2일 이상 일정을 등록하기 위해서는 수동으로 2일의 일정을 등록해야 하는 어려움이 있다. 또한 일정 시간 등록을 위해서도 사용자가 수동으로 기입해줘야 한다.


그룹간 커뮤니케이션 서비스를 기획할 때 고려해야 할 사항들은 다음과 같다.

 1. 내 친구가 그 서비스를 이용할 수 있게 해야 한다. 

내 친구를 이 서비스로 쉽게 영입시킬 수 있어야 한다. 내 친구들이 이 서비스를 이용할 수 있는 장점이 분명히 존재해야 한다.


2. 기본적으로 속도와 안정화가 확보되어야 한다.

애초에 사내 커뮤니티로 활용하고 있던 Path의 대안을 고려하였던 부분도 바로 속도였다. 아무리 UI/GUI가 멋지다고 하더라도 기본적인 속도가 받쳐주지 않으면 서비스를 이용하기 힘들다. 카카오톡도 한때 서비스 속도로 인해 유저의 이탈을 초래하였던 쓰라린 경험이 있다. 아직 안정화 작업 중이겠지만 밴드 서비스는 사용 중에 종종 잘 꺼진다. 이러면 신뢰를 얻기 힘들다.


3. 친구가 글을 작성하면 적시 적소에 알려줄 수 있어야 한다.

알림 기능을 지원해야 하며, 알림을 하더라도 어떤 것을 어떻게 알려 줄지 고려되어야 한다. 물론 이건 밴드 서비스에서도 잘 하고 있는 부분이다.


4. 내가 원하는 기능에 대한 접근이 용이해야 한다.

친구들끼리 그룹 채팅방을 만든다면 어떤 서비스를 이용할 것인가? Path? Band? 카카오톡? 현재 같은 그룹의 친구들과의 커뮤니케이션 채널로 카카오톡과 Band를 이용하고 있는데, 채팅은 카카오톡이 좋고, 사진 공유는 Band가 좋아서 두 개의 서비스를 나눠서 이용하고 있다. 사진 공유 화면은 Band의 특장점으로 여겨진다. 친구들과의 커뮤니케이션 채널은 아직도 카카오톡이 좋은데, 논리적으로 설명하기는 힘들지만 밴드는 카카오톡에 비해서 채팅 UI에 대한 접근이 어렵다고 느껴졌다.


5. UI, GUI의 디테일은 장기간 사용시 서비스의 만족도를 높이는 데 기여할 것이다.

UI, GUI의 디테일도 물론 중요하다. 하지만 그 전에 내 친구가 이 서비스를 사용 해야 하고, 적절한 속도와 적절한 알림 등 기본적인 것들이 제공 될 때 의미가 있다.


글을 정리하며

Group SNS ‘Band’ App은 그룹간 SNS App으로써 새로운 가능성을 제시하였다. 특히 내 친한 친구들과 채팅하고 사진을 공유할 수 있다는 장점이 있다. 아직 기능이 좀 더 다듬어져야 하겠지만, UI / GUI 적으로도 고민을 많이 하고 만든 서비스로 보여진다. 

다만 카카오톡, Line과 같은 채팅 서비스들과 비교해 봤을 때 어떤 차별점이 있을지 의문이다. 결국에는 접근성의 문제인데 사용자들이 카카오톡과 같은 그룹 채팅방을 그대로 사용할 지 아니면 카카오톡은 그대로 유지하고 Band 앱을 적극적으로 활용할지는 시간을 두고 지켜볼 일이다. 이 선택은 앞으로 사용자들이 할 것이다. 

Band는 매력적인 서비스임은 분명하며, 앞으로도 많은 점들이 다듬어 질 것으로 예상된다.


*이 글은 Tech it! 에도 실린 글입니다.

이미지 출처

밴드 웹사이트 : http://campaign.naver.com/band/


참고사이트

김범수 "모바일은 패러다임의 신세계다." : http://me2.do/FfD7ct2

밴드, 네이버가 생각하는 소셜네트워크 : http://me2.do/GVTmyg6

밴드 웹사이트 : http://campaign.naver.com/band/


Posted by 위승용 (uxdragon)

댓글을 달아 주세요

[UX] 가벼운 이야기2010.12.06 23:43

글을 시작하며

안녕하세요오랜만에 글을 작성하게 되었습니다요즘 PXD 사람들은 Path라는 아이폰 어플리케이션에 푹 빠져 지내고 있습니다. 본 포스팅에서는 Path 어플리케이션에 대해서 알아보고 사람들이 이 서비스에 빠져드는 이유가 무엇인지 살펴보도록 하겠습니다.


그렇다면 Path 란 무엇인가 Path가 등장했는가?

'Path'는 ‘Personal Network Service’ 라고 볼 수 있습니다. 또한 Path는 현재 아이폰 앱 을 중심으로 서비스 되고 있습니다. (현재 웹에서는 이미지 확인밖에 할 수 없으며웹 혹은 안드로이드 폰으로 확산될 것으로 예상합니다.) 'Path를 설립한 사람들을 살펴보면전 페이스북 시니어 플랫폼 매니저인 Dave Morin, Dustin Mierau 공동개발자 Macster, 냅스터 공동 설립자 Shawn Fanning 등입니다. Path 가 주목받는 것은 이런 공동설립자와 투자자들에게 있습니다.' [인용]

Path가 기존의 Twitter Facebook 같은 Social Network Service와 대비되는 가장 큰 차이점은 바로 ‘Social’ 이 아니라 ‘Personal’ 이라는 점입니다. Path는 개인과 최소한의 주변 사람을 중심으로 하고 있습니다그 동안 Twitter  Facebook을 중심으로 한 Social Network Service는 개방,확장을 중심으로 급속도로 성장하고 있었습니다그와 동시에 Social Network Service에서의 사생활 노출 문제가 대두되었습니다. Facebook에서 직장상사 험담을 하다 직장을 잘린 한 여성이 단적인 예라고 볼 수 있습니다

또한 모든 사람들이 Social 한 것은 아닙니다. Social 한 커뮤케이션 니즈가 있는 사람들(불특정 다수혹은 관련 분야의 사람들과 폭넓은 소통을 하고 싶은 사람)이 있지만, Personal 한 커뮤니케이션 니즈가 있는 사람(한정된 내 친구들과의 소통을 원하는 사람)도 있습니다. Path는 바로‘Personal’에 집중을 하고 있습니다.


[path 소개 영상]


Path 어플리케이션의 특장점

1. 간단한 입력방식이미지 중심 타임라인을 사용하여 손쉽게 사용 가능하고감성을 극대화함

실시간 사진’, ‘사람’, ‘장소’, ‘행동’ - 끝 -

(정말 끝이야?)

[그림1] Path 포스팅 화면 

Path에서 글을 쓸 때 입력해야 할 정보는 이게 끝입니다심지어는 실시간 사진만 있으면사람,장소행동을 입력하지 않아도 됩니다. Path는 버전을 업그레이드하면서 미리 찍어놓았던 사진도 사용할 수 있게 바꾸었습니다이 때도 찍은 사진의 시간을 중심으로 하고 있습니다그만큼 실시간성을 강조하고 있습니다.

Path는 현장 이미지 중심으로 되어 있습니다그렇기 때문에 실시간성이 있고감성을 극대화 시키는데 일조합니다사람장소행동 정보는 입력하지 않아도 되지만사진을 꼭 찍어야 포스팅을 할 수 있습니다리스트도 이미지 중심으로 구성되어 있기 때문에, Path에서 이미지는 큰 비중을 차지하고 있습니다장소는 내 찍은 사진 뿐만 아니라모두가 찍은 사진의 장소를 풍부하게 보여줍니다행동은 내 행동 뿐만 아니라주변 사람들의 행동까지 보여주어 입력을 편하게 도와주고,감성을 극대화시키는 역할을 합니다.(나 혼자 글을 쓰는게 아니구나... 같은 느낌일것 같습니다.) 물론 처음에는 포스팅 화면에서 어떻게 입력해야 할지 당황할 수 있습니다이 점은 익숙해지면 해결될 수 있는 문제겠지만사용상의 문제도 있기 때문에 개선의 여지가 있습니다.

Path는 댓글 달기 기능이 없습니다대신에 이미지를 본 사람들을 표시해줍니다이미지를 본 사람들은 7명까지만 순서대로 보여지며더 보기 버튼을 선택하면 이후에 본 사람들을 볼 수 있습니다이미지를 본 사람들을 보여주는 것은제한적 소통의 극대화라고 볼 수 있습니다댓글달기 및 추천 기능이 없는 Path의 경우 내 이미지를 누군가 보고 있다는 느낌을 이미지를 본 사람들을 통해 받게끔 해줍니다이러한 느낌은 Path 서비스만의 독특한 감성을 이끌어냅니다.

[그림2] 댓글달기 기능이 없음 

2. 친구를 50명으로 제한하여 내 사생활도 부담없이 노출할 수 있음

또한 Path에서 등록할 수 있는 사람은 50명으로 제한됩니다. 100명만 넘어가도 한 사람 한사람에 소홀해질 수 밖에 없는 것이 Social Network Service의 현실입니다인원 제한은 그만큼 한 사람 한 사람에 집중하겠다는 의미로 생각됩니다이미지를 올릴 때 입력한 인원 (같이 찍은 사람 혹은 같이 있는 사람들은 또 나름의 의미를 가지는데남이 찍은 사진이라도 사람에 내가 포함되어있으면 내 타임라인 안에 같이 보이게 됩니다.

제한된 50명은 내 소소한 일상을 공유할 수 있는 친구의 최대 숫자로 보입니다'Robin Dumbar 교수의 이론에 따르면 개인이 사회적 관계를 유지할 수 있는 최대의 인원은 150명이라고 합니다.어떤 정보도 공유할 수 있는 관계의 사람들로그러한 관계를 만들 수 있도록 하고자하는 의도가 담겨있습니다.'  [인용]

Path는 그룹을 지원하지 않습니다이는 서비스를 최대한 간결하게 만드려는 시도인 것 같습니다. Path는 태생이 모바일 어플리케이션(정확히는 아이폰 앱에서 시작했기 때문에그룹 지원이라는 무거운 기능은 지원하고 있지 않습니다하지만 나중에 사람들이 많이 이 서비스를 이용할 경우에는 이러한 사용자의 Needs가 분명히 있을것이며 Needs를 반영할지반영하지 않을지는 앞으로 두고 볼 문제입니다.

현재 Path는 글을 올릴때에 나와 사진찍힌 사람들만 보이게 할 수 있는 옵션을 제공합니다다음과 같은 제한적 공유는 현재로써는 그룹 및 비공개를 대체할 수 있는 용도로 보여집니다.

[그림3] 그룹지원 대신 제한 공개 옵션 제공

Path는 비공개 성향이 강하기 때문에공유하고 싶은 경우 얼마든지 내 사생활도 부담없이 노출할 수 있습니다. 다른 Social Network Service에서는 불가능했던 (혹은 불안했던것들도 원한다면 얼마든지 노출이 가능합니다그렇다면 ‘Path’는 비공개 서비스일까요? 꼭 그렇지는 않습니다.현재로써는 이미지를 내 친구가 아닌 이상 볼 방법은 없습니다그러나 글을 작성할 때 이미지의 위치혹은 현재 위치 (정확히 확인된 바 는 없음을 중심으로 다른 사람들이 작성한 글이 보입니다얼핏 보면 이 서비스가 비공개서비스처럼 보이지만 엄연히 비공개라고 할 수는 없습니다하지만 Path는 이 서비스를 쓰는 사람으로 하여금 비공개 서비스처럼 느끼게 하고충분히 비공개 서비스의 경험을 제공하고 있습니다.

 

3. UI/GUI의 디테일을 통해 감성을 유발함

Path는 그 외에도 UI/GUI의 디테일을 통해 감성을 극대화하고 있습니다. UI의 디테일은 서비스 자체의 성공에 영향을 미치는 중요한 요소입니다.

3-1. 이미지 올리는 화면에서 텍스트를 탭 할 경우 버튼이 꿈틀거립니다

버튼이 꿈틀거리는 효과를 줌으로써 의외의 즐거움을 선사합니다물론 사용성에 있어서는 크게 도움이 되지는 않습니다.


[그림4] 버튼이 꿈틀거리는 효과

3-2. 이전 정보의 경우 꼬리표가 점점 길어지는 효과를 사용하고 있습니다

꼬리표는 기존 아이폰 앱에서 사용했던 타이틀 밀어내기 효과를 꼬리표로 변경한 것입니다타이틀 밀어내는 효과는 실용적이기는 하지만무미건조합니다꼬리표는 이 무미건조함을 감성적으로 풀어내었습니다.

[그림5] 꼬리표가 점점 길어짐

3-3. 로딩 후 이미지를 처리하는 센스를 발휘하고 있습니다

이미지 리스트를 로딩할 때 하단에 보여지는 Hourglass 가 사라지면(로딩이 끝나면완성도있는 그래픽 소스로 대체됩니다이런 소소한 GUI 장치가 이 서비스의 품질을 높이고 있습니다.

[그림6] 로딩 후 이미지로 변경됨

UI의 몇 가지 아쉬움

지금까지는 Path에 대한 칭찬 일색 이었습니다그러나 이번에는 Path를 사용하면서 느낀 몇 가지 UI 문제를 공유하려고 합니다.

1. 포스팅 방식이 잘 이해가 되지 않음

사진을 찍고 포스팅을 하려고 다음 화면에 진입하면 왠지 글을 써야 될 것 같은 느낌이 드는 화면에 진입합니다글을 쓰려고 회색 글씨를 탭하면 글은 안써지고버튼만 꿈틀거립니다물론 사용하다보면 어떻게 사용하는지는 감이 오실 테지만 직관적인 UI는 아니라고 생각합니다.

[
그림7] 글을 쓰려면 뭘 눌러야 되나?


2. 글 입력 과정이 불편함

글을 입력하려고 할 때 글자 입력 폼이 한 줄로 되어있어서 글을 작성하다 보면앞으로 밀려납니다이때 앞의 글자를 수정하기 위해서는 이전 글자까지 드래그를 계속 해야합니다. 아무리 이미지 중심 서비스라고 하더라도 입력이 쉽게 만들어야 하는데이점은 개선의 여지가 있습니다.

또한 이렇게 어렵게 글을 작성했다 하더라도글자를 직접 수정하는 방식을 제공하지 않습니다.글자를 수정하려고 하면기존에 썼던 글은 유지하지 않은 채로 다시 입력해야 하는 번거로운 방식을 사용하고 있습니다.


[그림8] 이전 글자 수정이 어려움

3. 댓글 기능이 없다는 점은 양날의 검

앞에서도 언급되었습니다만Path에서는 댓글 기능을 제공하고 있지 않습니다남들이 다 제공하는 댓글 기능을 빼기 위해서는 내부에서도 많은 고민을 했으리라 생각하고이 고민은 쉽지 않은 고민일 것으로 보여집니다댓글 기능 삭제는 이 서비스를 심플하게 만드는데 큰 공을 세웠습니다하지만 댓글 기능이 없음으로 인해 생기는 부작용도 있습니다그 부작용은 다름아닌 커뮤니케이션 오류입니다. Path는 일방향적인 이미지 및 글 공유로 인해 상대방이 오해할 소지가 다분합니다주관적인 글귀주관적인 이미지를 통해 일방향적으로 소통하면 상대방은 자기 스스로가 해석하고 싶은대로 해석할 수밖에 없습니다이 시점에서 댓글이 없다면 상대방이 본인의 의사를 밝히지 않거나본인 스스로가 오해의 가능성을 사전에 차단하지 않고서는 문제가 해결되지 않습니다

그런면에 있어서 Path는 의사소통의 용도로써는 어딘가 불완전해 보입니다. ‘어디에서누구랑,무엇을 했냐’ 정도의 중립적인 커뮤니케이션을 통해서도 감성을 이끌어내는데는 부족함이 없습니다다만 글이나 이미지에 감정이 실리게되면 해석의 여지에 따라서 부정적인 감정이 파생될 수 있고부정적인 감정이 누적될 우려가 있습니다. – 이 점은 Path가 아니더라도사람과 사람이 해결해야 할 문제로 보입니다다만 인터페이스에서 이런 오해를 불러일으키게 한다면분명히 개선의 여지는 있다고 생각합니다.

 

글을 정리하며

다음과 같이 Path의 등장배경, Path의 특장점 및 UI 의 아쉬움을 기술하였습니다.

본 포스팅에서 살펴본 Path의 장점을 요약하자면 다음과 같습니다.

1.   Path는 기존의 Social Network Service가 간과했던 ‘Personal’ 요소에 집중한 서비스이다.

2.   Path는 모바일 환경에 맞추어 간결하게 만든 서비스이다.

3.   Path는 감성을 극대화시키는 여러가지 방법을 사용하고 있다
(UI/ GUI 디테일이 단적인 예)

Social Network Service 도 이제 많이 등장했습니다개방공유를 중심으로 한 Twitter, Facebook, Me2day 뿐 아니라특정 계층에 중점을 둔 다음 요즘위치 기반을 중심으로 한 포스퀘어 등 이미 서비스들의 홍수로 Social Network Service 시장은 포화된 상태입니다그렇기 때문에 Social’이 화두가 되는 이 시대에 Personal Network Service로 야심차게 등장한 Path의 행보가 기대됩니다

현재 ‘Path’는 아이폰 앱스토어에서 이 주의 앱으로 홍보되고 있으며꾸준히 업데이트를 하고 있습니다앞으로 Path에 어떤 기능이 추가될지어떻게 변화할 것인지 유심히 지켜보시면 한 서비스의 흥망성쇠가 어떻게 이루어지는지도 덤으로 배우실 수 있을 것 같습니다.



Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. shin

    안녕하세요 써치를 하다가 찾았는데 반가운 얼굴이네요 ㅋㅋ
    기억하실지 신혜정이라고 ㅋ 오빠랑 웹수업도 같이들었었는데..ㅋ
    저도 UI 쪽에서 일하고 있어요 ㅎㅎ 반가운마음에 글남겨요~
    블로그 멋지네요~^^ 앞으로 자주 놀러올께요

    2011.01.07 11:30 신고 [ ADDR : EDIT/ DEL : REPLY ]

[UX] 가벼운 이야기2010.10.30 11:21


Family UI의 정의
'Family UI'는 자동차 업계에서 사용되는 Family Look 이라는 단어에서 인용한 것으로 한 브랜드에서 나온 모델들에 브랜드 정체성을 부여해주는 디자인 요소를 말합니다. Family Look을 적용한 디자인은 모델이 다르더라도 특정 회사의 제품이라는 것을 바로 구별해 낼 수 있어서 브랜드 정체성을 강조해주는 효과와 함께 향후 구매력에 영향을 준다고 합니다.[각주:1]


미투데이의 Family UI 비교
웹, iOS 앱, 안드로이드 앱 미투데이를 사용하면서 느꼈던 Family UI 의 차이점을 디테일한 면 위주로 비교해 보았습니다. 전반적으로 미투데이는 웹, iOS 앱, 안드로이드 앱을 일괄적으로 가져가기 위해서 애를 쓴 모습이 보입니다만, 이 글은 차이점에 대해서만 기술함을 밝혀둡니다.
(*미투데이는 친구들과 실시간으로 이야기를 나눌 수 있는 150자 마이크로 블로그입니다. 자세한 설명은 여기에서 확인하세요.) 
 
1. 아이콘
미투데이의 아이콘중에서 '찾아보는' 이라는 아이콘이 있습니다. [그림1]에서 '찾아보는'은  키워드를 이용한 검색 기능을 제공하는데, 같은 레이블의 아이콘임에도 불구하고 아이콘을 서로 다르게 표현하고 있음을 알 수 있습니다. 실제 기능을 보면 좌측에 있는 '찾아보는'은 내가 등록한 키워드 위주로 보여주는 역할을 수행합니다. 우측에 있는 '찾아보는'은 키워드를 보여주기는 하나 '검색 기능'이 있기 때문에 다른 아이콘을 쓰고 있습니다. 다른 기능이라면 아이콘만 다르게 할 것이 아니라 레이블을 변경해야 하지 않나 생각합니다.


[그림1] '찾아보는' 아이콘의 차이 (- 웹, - iOS 앱)

그 다음으로 '프로필'을 나타내는 아이콘을 보시겠습니다. [그림2]를 보시면 좌측에 있는 프로필과 우측 옵션 메뉴 키에 있는 프로필이 레이블은 같은데 아이콘을 다르게 표현하고 있습니다. 내용을 파악해보면 좌측에 있는 프로필은 엄연히 보면 프로필 설정 기능을 수행하며, 우측에 있는 프로필은 프로필 확인으로 해석할 수 있습니다. 마찬가지로 같은 레이블인데 다른 기능을 수행하므로 아이콘 뿐 아니라 레이블을 변경해야 할 것 같습니다.

[그림2] 프로필 아이콘의 차이 (- 웹, - 안드로이드 앱)

[그림3] 을 보시면 우측의 '사람찾기' 아이콘을 웃는 아이콘으로 표현하고 있습니다. 그렇다면 좌측의 아이콘도 과연 사람찾기일까요? 좌측의 아이콘은 아이콘을 변경할 수 있는 아이콘입니다. 이 상황에서는 좌측의 아이콘을 다른 아이콘으로 변경하는 것이 좋을 것 같습니다.

[그림3] 사람찾기 아이콘의 혼용 (좌,우 iOS 앱)

2. 레이블 
자 이제 레이블을 보시겠습니다. [그림4]를 보시면 좌측의 '댓글달기' 버튼과 우측의 '댓글쓰기' 레이블은 같은 기능을 수행합니다. 하지만 레이블의 차이가 있습니다. '쓰기' 버튼과 '올리기'버튼도 사실은 같은 기능을 수행합니다만 레이블의 차이가 있습니다. 물론 UI Flow 상으로는 문제가 없습니다만, 레이블을 통일시켜주는 것이 좋을것 같습니다.


[그림4] 레이블의 차이 (- 웹, - iOS 앱) 


3. 레이아웃
이번에는 레이아웃을 보시겠습니다. [그림5]번을 보시면 좌측의 글을 올린 날짜, 시간은 오른쪽 정렬로 되어있는데, 우측의 글을 올린 날짜, 시간은 왼쪽 정렬로 되어있습니다. 이때에는 두개를 통일시키는 것이 일관된 경험을 줄 수 있겠지요.
또한 날짜 시간 표현방식도 자세히 보시면 미묘하게 다름을 알 수 있습니다. 차이점이 보이시나요?

또한 아래 이미지 표현방식도 차이가 있습니다. 아이폰 앱에서는 한줄에 2개씩 보여주는데, 안드로이드 앱에서는 한 줄에 6개씩 보여줍니다.
* 추가: 아이폰에서 미투한 사람이 몇명이 기준인지는 모르겠습니다만, 많아질 경우 한줄에 5개씩 보여짐을 확인했습니다. 그래도 일관된 UI/GUI는 아니군요.

[그림5] 레이아웃의 차이 (- iOS 앱, - 안드로이드 앱)
 
4. 네비게이션
전체 네비게이션도 OS에 따라 차이가 있습니다. [그림6]을 보시면 좌측 안드로이드 앱에서는 홈(App dashboard) 화면이 있어서 어디를 들어가고 싶을때 홈(App dashboard) 화면을 거쳐서 이동해야 합니다. 하지만 iOS 앱에서는 하단 탭에 자기가 보고 싶은 카테고리 4개를 선택하여 구성할 수 있습니다. 이 차이점은 안드로이드 폰과 아이폰의 태생적인 차이점 일 수도 있겠지만, 한 회사의 서비스이니만큼 어느정도는 일관성을 지켜주는것이 좋겠다고 생각합니다.


[그림6] 네비게이션의 차이 (- iOS 앱, - 안드로이드 앱)

5. 그외에...
미투데이의 '화화'님께서도 iOS의 미투데이와 안드로이드 미투데이 앱의 사용상의 차이점을 기술 해주셨습니다. 작성한 글을 롱탭 했을때 UI가 다르다는 점을 기술하고 있습니다.



정리하며…
다음과 같이 미투데이의 웹, iOS 앱, 안드로이드 앱을 비교해 보았습니다. 
물론 미투데이의 웹 + iOS 앱 + 안드로이드 앱을 모두 사용하는 사람들은 많지 않을수도 있습니다. 그러나 한 서비스를 사용하다가 다른 서비스로 이동하더라도 동일한 경험을 제공하도록 하는것이 사용성 및 서비스의 새로운 가치 창출을 위해서는 꼭 필요하다고 생각합니다. 동일한 경험을 제공하되 각각의 플랫폼의 성격에 따라 최적화된 UI가 나오는것이 좋지 않을까요? 물론 그렇게 하는것이 쉽지는 않을 것입니다. 여러번의 시행착오와 개선이 필요하겠지요. 미투데이는 충분히 잘하고 있고, 잘하고 있기 때문에 더 아쉬운 점을 찾게 되는 것 같습니다. :)

  1. HCI 2009 학술대회 '멀티플랫폼에서 Family UI의 적용에 대한 사례연구'에서 인용 [본문으로]

Posted by 위승용 (uxdragon)

댓글을 달아 주세요

  1. rainriver

    사소한 것인데 아이폰 화면과 안드로이드 화면을 일관되게 배치하시는게 나을거 같습니다.
    마지막 이미지들과 앞선 이미지들이 배치가 달라 읽는 도중에 잠시 혼란스러웠습니다.

    2010.11.22 20:49 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 댓글 감사합니다. 마지막 이미지의 위치를 변경하였습니다. 생각해보니 설명과 이미지가 매치가 잘 안되는것 같아서 이미지 아래에 표시를 추가하였습니다.

      2010.11.23 20:28 신고 [ ADDR : EDIT/ DEL ]

[UX] 가벼운 이야기2010.07.25 22:40


1 | 2 | 3 | 4
5 | 6 | 7 | 8 


어느날 출근시간에 지하철에서 재미삼아 제가가진 앱의 아이콘을 색상별로 분류해봤습니다.

1~6 번째 탭은 정보/유틸 관련 앱이고 7~8 번째 탭은 게임 관련 앱입니다.
 

조사해보니 정보/유틸 관련 앱은 파랑색 계열이 많고, 게임 관련 앱은 빨강색 계열이 많더군요. 과연 이 결과가 우연일지 궁금해졌습니다.




500개의 아이폰, 아이패드 App 색상을 조사한 결과도 마찬가지로 파랑색이 제일 많았다고 합니다. 두번째는 검정색이라고 합니다.





여기에서도  마찬가지로 아이폰 앱 아이콘의 색상을 사용할때 파랑색만은 피하라고 하더군요. 당연히 파랑색이 흔하기 때문이겠죠.

Question: What color should your iPhone app icon be?
Answer: Not blue.





그런데 모든 앱을 대상으로 조사한 결과 실제로 가장 많이 쓰인 색은 갈색이었다고 하네요. 조금 의외의 결과입니다.


또한 아이폰과 같은 스마트폰 환경에서는 앱의 아이콘을 어떻게 디자인하느냐가 중요한것 같습니다. 앱스토어에서도 맨 처음에는 아이콘밖에 보여지지 않기 때문에, 아이콘이 별로면 눌러보지도 않으니까 말이죠.


아이폰(아이팟터치)의 첫화면을 캡쳐한 사진입니다. 앱 아이콘만 보면 어떤 앱인지 구별이 가시나요? 내가 필요한 앱인지 아닌지 알 수 있으신가요?


호기심에서 시작한 블로깅이라 결론을 맺기가 쉽지 않네요. 굳이 결론을 내자면 이렇게 낼 수 있을까요?

1. App 아이콘 디자인을 할 때에는 남들이 다 쓰는 색상을 사용하지 말자 - 파랑색, 검정색, 갈색은 되도록이면 피하자
2. App 아이콘 디자인을 신중하게 하자 - 잘 만든 아이콘 하나가 열 어플 안부럽다



*본 내용은 PXD 사내메일의 내용을 일부 포함하고 있습니다.

Posted by 위승용 (uxdragon)

댓글을 달아 주세요