태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.


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
  1. 김금룡 2012.03.30 14:41 신고 address edit & del reply

    좋은 글 감사합니다.^^

    • uxdragon 2012.03.31 23:05 신고 address edit & del

      좋은 관점 제시해줘서 고맙습니다.

  2. 無異 2012.04.02 12:42 신고 address edit & del reply

    페이스북이나 미투데이의 스타급 댓글이 달린거 한번 쭉 훑어보려면 엄청 짜증나네요.

    페이스북은 view previous comments 를 누르면 50개가 펼쳐져서 스크롤을 내리면서 쭉 읽어가다가 다 읽으면 다시 스크롤을 올려서 위의 더보기 버튼을 누르는 걸 반복하고.
    미투데이는 previous comments 누르고 스크롤을 올려서 코멘트의 맨 위로 이동한 후에 쭉 읽어가다는 걸 반복해야하네요.
    페이스북의 더 보기나 미투데이의 페이징이나 결국 반대로 스크롤 하는 닭질을 반복해야 하는데, 최근 글에서 부터 보면서 몇십개의 청크만 우선 표시하는 구조가 원인인 것 같습니다.

  3. 無異 2012.04.02 12:46 신고 address edit & del reply

    암튼 위의 모든 SNS가 댓글 시간정렬순서와 상관없이 더보기 청크는 최근에서 이전으로 시간역순으로 보는 구조네요. 이런 구조는 새로운 댓글을 매번 확인하는 열성 사용자에게는 적합하지만 저처럼 가끔 쭉 훑어보려는 사용자에게는 적합하지 않은 것 같습니다. 음. 뭐 저같은 사용자를 배제하는게 퍼소나 방법론을 잘 적용한 디자인이긴 하겠지만. 하지만... 그래서 안 써!

    • uxdragon 2012.04.02 21:56 신고 address edit & del

      페이스북의 view previous comments 방식은 상단에 노출되는 구조라 변형에 어려움이 있지만, 미투데이의 previous comments 는 버튼을 누르면 코멘트의 맨 위로 바로 올려주는 방식을 쓰면 스크롤 하는 공수를 줄일 수 있을 것 같네요.

      근본적인 문제는 최근 글 몇 개를 우선해서 보여주는 방식을 어떻게 개선할 수 있느냐인데, 無異님 의견에 동의하구요. 어떤 나은 방식이 있을지는 좀 더 고민해봐야 될 것 같습니다.

  4. 정종혁 2012.04.06 00:18 신고 address edit & del reply

    순간 제 덧글이 있어서 깜짝 놀랐습니다.ㅋ
    항상 고민하던 부분이었는데 정리된 글을 보니 어느정도 스스로 정돈이 되는 느낌이네요.ㅎ
    감사합니다.ㅎ

    • uxdragon 2012.04.17 21:37 신고 address edit & del

      감사합니다. 우연히 딱 걸렸네요. ^^;

  5. 강팀장 2012.07.02 19:33 신고 address edit & del reply

    저는 조금 더 다른 관점으로 고민을 해 봤습니다.
    과연 SNS라고 해서 시간 흐름의 대화에만 치중되어야 할까... 입니다.
    ^^
    이 포스트를 진작 알았으면... 조금 더 깊은 고민을 해 보았을껀데... 제 포스트로 트래백으로 남기고 갑니다.
    유익한 고민... 감사합니다.

    • uxdragon 2012.07.15 16:02 신고 address edit & del

      안녕하세요. 트랙백 타고 글 잘 읽어보았습니다.
      저와는 다른관점에서의 고민을 하셨더군요. ^^

      트랙백 걸었습니다.

  6. 강규영 2013.11.11 09:26 신고 address edit & del reply

    잘 읽었습니다. 한편 트위터의 최근 개편(일명 파란선) 비슷하게 위아래를 보여주고 가운데를 펼치는 새로운 시도도 가능하겠네요

Ad Test...