SNS 댓글 UI 설계
SNS 댓글 네비게이션은 대화 흐름을 어떻게 표현하느냐에 따라 사용자 경험이 크게 달라진다. SNS 구조에서는 댓글이 '대화의 흐름(히스토리)'을 나타내므로, 시간 순서대로 읽어나가는 시간순 정렬이 자연스러운 독서 패턴에 맞다. 이는 최신 글을 위에 노출하는 전통적인 게시판 방식(역순 정렬)과 다르다.
댓글 UI 설계에서 세 가지 핵심 질문이 제기된다. 첫째, 최근 댓글의 위치: 대화 흐름을 유지하기 위해 새 댓글은 하단에 추가되어야 한다. 둘째, 더 보기 버튼의 위치: 이전 댓글을 불러오는 버튼은 댓글 목록 상단에 위치해야 자연스러운 대화 흐름을 방해하지 않는다. 하단에 두면 새 댓글과 이전 댓글이 뒤섞여 가독성이 저하된다. 셋째, 페이지네이션 vs 더보기: 페이지 번호 방식은 대화 연속성을 끊기 때문에 SNS보다 게시판에 더 적합하다.
플랫폼 비교 분석에서 세 가지 패턴이 식별된다. 패턴 1 — 상단 더보기 + 시간순(Facebook, C로그, Path): 대화 흐름 보존에 가장 적합. 패턴 2 — 하단 더보기 + 역순(Yozm 등 게시판형 SNS): 전통 게시판 방식에 익숙한 사용자에게 친숙하나 SNS 특성에는 부합하지 않음. 패턴 3 — 하단 페이지네이션 + 시간순(Me2day): 페이지 이동이 대화 흐름을 단절시키는 문제.
순수 벤치마킹만으로 UI를 결정하는 것은 위험하다. 퍼소나(Persona) 기반의 목표 지향 디자인(Goal-Directed Design) 원칙을 적용해야 한다. 동일한 구조라도 서비스의 사용자 특성과 목적에 따라 최적 패턴이 달라질 수 있다.
핵심 내용
- SNS 댓글은 '대화 히스토리'이므로 시간순 정렬이 자연스러운 독서 패턴에 부합
- 더보기 버튼은 댓글 목록 상단에 두어야 대화 흐름을 방해하지 않음
- Facebook·C로그·Path: 상단 더보기 + 시간순(최적 패턴)
- Me2day: 하단 페이지네이션 + 시간순(페이지 이동이 대화 흐름 단절)
- Yozm: 역순 정렬(게시판형, SNS 특성과 미스매치)
- 벤치마킹은 출발점일 뿐, 퍼소나 기반 목표 지향 설계가 더 중요
관련 개념
- 정보 구조 설계 IA — 콘텐츠 흐름과 네비게이션 구조 설계
- 사용자 행동 패턴 — SNS 이용자의 댓글 읽기 행동 패턴
- UI 컴포넌트 용어 — 더보기 버튼, 페이지네이션 등 UI 패턴 용어
출처
- [UI 디테일] SNS의 댓글 네비게이션 구조를 어떻게 설계하는것이 좋을까? — 2012-04-02, 위승용 uxdragon