[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 디테일##]