태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


'Path'에 해당되는 글 2건

  1. 2012.03.31 [UI 디테일] SNS의 댓글 네비게이션 구조를 어떻게 설계하는것이 좋을까? (10) by 위승용 (uxdragon)
  2. 2010.12.05 [UI 디테일] Personal Network Service ‘Path’ (8) by 위승용 (uxdragon)
2012.03.31 22:04

[UI 디테일] SNS의 댓글 네비게이션 구조를 어떻게 설계하는것이 좋을까?

SNS 관련 프로젝트를 통해 댓글 네비게이션 구조를 어떻게 설계하면 좋을지에 대해 고민할 시간이 있었습니다. 본 블로깅을 통해 그러한 고민을 정리하고 공유하도록 하겠습니다.


1. SNS에서 최근 쓴 댓글은 위쪽에 보여져야 할까? 아래 쪽에 보여져야 할까?

SNS 댓글 UI 설계 시 가장 고민했던 부분이 바로 이 점 이었습니다. 당시로서는 판단의 근거가 없었기 때문에 타 SNS 들이 어떻게 UI를 설계하고 있는지 벤치마킹을 했습니다. 하지만 벤치마킹으로는 고민의 결과밖에 확인 할 수 밖에 없기 때문에 왜 이렇게 UI가 설계되었는지에 대해서는 별도의 고민을 해야 했습니다. 동료들과 대화하던 차에 SNS형 구조에서 댓글은 '대화의 흐름(히스토리)'이 중요하다는 사실을 알 수 있었습니다. 또한 대화의 흐름(히스토리)이 중요하기 때문에 위에서부터 아래로 댓글을 보는것이 자연스럽다고 판단하였습니다.

결과적으로 최근에 쓴 댓글은 아래 보여지게 설계하였습니다.


2. SNS에서 댓글 더보기 버튼은 댓글내용 위에 있어야 할까? 아래 있어야 할까?

SNS에서 댓글은 댓글의 흐름에 따라 보여지나, 댓글의 수가 많아질 경우 최근에 쓴 댓글들을 우선순위로 노출시켜야 합니다. 이 때 보통 UI 설계 시 댓글 더보기 버튼을 넣어야 합니다. 이 때 댓글 더보기 버튼을 댓글 내용 위에 넣어야 할지, 댓글 내용 아래 넣어야 할지 고민이 되었습니다. 이때도 타 SNS들이 어떻게 UI를 설계하고 있는지 벤치마킹을 했습니다. Facebook과 C로그는 댓글의 위에 댓글 더보기 버튼을 노출하였습니다. 그리고 Me2day는 댓글 아래 댓글 페이징 UI를 제공했습니다. 댓글 더보기 버튼을 아래쪽에 넣을 경우에는 대화의 흐름을 방해할 수 있다는 판단하에 댓글 더보기 버튼을 상단에 노출하였습니다.

결과적으로 댓글의 위에 댓글 더보기 버튼을 제공하였습니다.

['Facebook'의 댓글 더보기 방식]

['Facebook'에서 댓글을 볼때의 시선의 흐름]


Me2day의 댓글 페이징 UI도 신선하기는 했고, 고민의 흔적이 느껴지는 UI였습니다. 최근 글을 보려고 스크롤을 아래로 내린 상태에서 바로 이전 페이지, 다음 페이지로 이동할 수 있는 버튼이 있어서 다음 태스크로의 이동이 원활하게 이루어졌습니다. 다만 이전 댓글 버튼을 눌렀을 경우 위치가 고정이 되어 결국에는 스크롤을 위로 올린다음 다시 내려야하는 상황이 발생하게 되는 문제가 있었습니다.

['Me2day'의 댓글 더보기 방식]

['Me2day'에서 댓글을 볼때의 시선의 흐름]


3. 그래서, 타사 SNS들은 잘 하고 있는걸까?

2012년 3월 기준으로 Facebook, Me2day, C로그, 요즘의 댓글 노출 순서, 댓글 입력필드 위치, 댓글 더보기 버튼 위치, 댓글 입력 버튼, 타임라인에 댓글이 바로 노출되는지에 대한 여부를 조사하였습니다.

조사 결과는 다음과 같습니다.

[타 SNS들의 댓글 네비게이션 및 요소 비교 차트]

['Facebook'의 댓글 네비게이션 구성 요소]

['Me2day'의 댓글 네비게이션 구성 요소]

['C로그'의 댓글 네비게이션 구성 요소]

['요즘'의 댓글 네비게이션 구성 요소]


다른 서비스와는 다르게 '요즘'이 최근 작성한 글이 위쪽에 보여지게 설계를 하고 있습니다. 최근 작성한 글이 위에 보여지기 때문에 댓글 입력필드와 댓글 더보기 버튼이 다른 서비스와는 역으로 설계되어 있는것을 알 수 있었습니다. 최근 작성한 글이 위에 보여지는 방식은 SNS의 댓글 방식보다는 게시판 글 방식에 좀 더 적합합니다.   

[게시판 글 방식 : NHN 홈페이지 보도자료 게시판]


이전에도 기술하였듯이 Me2day의 댓글 더보기 방식은 기존의 더보기 버튼과는 다른 새로운 방식으로 문제를 해결 한 것으로 보입니다. 또한 늘 그렇듯 장점과 단점이 존재하는 UI였습니다.


다음 내용을 3가지 패턴으로 정리할 수 있습니다. (아래 이미지를 참고하세요.)

1. 댓글 더보기 버튼은 상단에 노출 + 시간순 정렬 : Facebook, C로그, Path 등

2. 댓글 더보기 버튼은 하단에 노출 + 시간 역순 정렬 : 요즘, 일반 게시판 등

3. 댓글 더보기 버튼을 하단에 노출(페이징 방식) + 시간순 정렬 : Me2day 등

[SNS의 댓글 네비게이션 구조 패턴]


글을 정리하며...


[SNS 댓글 및 게시판 네비게이션 구조 포지셔닝 맵]


결론적으로 댓글 네비게이션 구조를 시간순으로 정렬하고, 댓글 더보기 버튼을 상단으로 정렬하는것이 적합해 보입니다. 다음의 SNS '요즘'은 SNS의 댓글 네비게이션 구조라기 보다는 게시판형 게시글 구조와 같은 방식을 사용하고 있기 때문에 정렬을 다시 고민해봐야 될 것 같습니다.

또한 Facebook과 C로그 그리고 Path의 경우 댓글 더보기 버튼을 클릭하지 않아도 최근에 작성한 글 몇개를 보여주는 UI를 사용하고 있습니다. 이는 대화의 흐름을 유지하면서도 수시로 최신글을 확인하고자 하는 Active Persona를 반영한 UI로 보여집니다.

물론 이정도의 고민을 하지 않더라도 누구나 생각할 수 있는 당연한 고민이라고 생각합니다. 또한 타사 SNS에서도 이미 잘 하고 있습니다. 하지만 나중에 SNS UI 설계를 시작 한다고 했을 때에 단순히 타사 서비스를 베끼려고 하기 전에 왜 이런 UI를 설계했을지 설계자의 고민속으로 들어가서 진득하게 고민하는 시간을 가져보는것도 좋을 것 같구요.

물론 당연하게도 Persona에 입각한 Goal directed design이 우선적으로 이루어졌을 경우에는 이러한 결정이 손쉬울 수 있습니다. 하지만 프로젝트의 여건상 Persona 제작이 힘들다면 Rapid Persona를 만들어보는것을 우선 추천합니다. 그것마저 힘든 상황이라면 벤치마킹을 통해 정보를 수집하고, 수집된 정보를 토대로 한 UI 기획자의 직관과 고민에 의한 결정으로도 문제를 해결하는데 도움이 될 수 있을것으로 기대합니다.


감사합니다.


PS. 본 블로깅을 하는데 있어서 영감을 준 김금룡님, 내용이 정리될 수 있도록 명쾌한 의견주신 無異 님 감사합니다.


Reference site

Facebook - http://facebook.com

Me2day - http://me2day.net

C로그 - http://c.cyworld.com

요즘 - htttp://yozm.daum.net


[참고##UI 디테일##]


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


Trackback 4 Comment 10
Ad Test...
2010.12.05 22:13

[UI 디테일] Personal Network Service ‘Path’




글을 시작하며

안녕하세요. 오랜만에 글을 작성하게 되었습니다. 요즘 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에 어떤 기능이 추가될지, 어떻게 변화할 것인지 유심히 지켜보시면 한 서비스의 흥망성쇠가 어떻게 이루어지는지도 덤으로 배우실 수 있을 것 같습니다.



[참고##UI 디테일##]


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


Trackback 0 Comment 8
Ad Test...