brunch

매거진 실전 UI UX

라이킷 324 댓글 14

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 서점직원 Apr 13. 2021

실전 UI/UX - 커뮤니티를 설계할때 고려해야할 것들

한국적 커뮤니티 플랫폼 설계의 UI/UX 방법론

위버스 당근마켓 무신사

바야흐로 커뮤니티의 전성시대입니다. 하루가 멀다하고 새로운 커뮤니티가 출시되고 또 사라져 갑니다. 커뮤니티 성공 공식에 대한 아티클, 분석글들이 범람하고 있지만 아무도 진짜 본질은 얘기해주지 않습니다. 사람들이 궁금한 건 커뮤니티 설계는 어떻게 하는 거고 뭐가 다른건데? 라는 의문인데 말이죠. 우리에게 필요한 건 넷플릭스가 어떻게 개인화 추천을 하냐가 아니고 당근마켓과 오늘의 집 목록 페이지는 무엇이 다른가이니까요.

이름하여 한국적 커뮤니티 플랫폼 설계의 UI/UX 방법론.
커뮤니티를 설계할 때 고려해야 할 UI/UX의 자잘한 기술에 대해 알아보려고 합니다.

당근처럼 만들어주세요!

- 서비스 특성에 맞는 목록 페이지 구성법

평화로운 월요일 아침. 또 뭘 보고 왔는지 고객님은 주간회의에서 새로운 일거리를 던지십니다.

고객님 : 내가 보니까 말이야. 우리도 당근처럼 고객들이 소통할 수 있는 커뮤니티 영역을 만들어야겠어.

서점군 : ????

우리 서비스에서 그런 걸 만들어봐야 망할 수 밖에 없는 이유를 10가지도 더 댈 수 있지만 고객님이 까라면 까야죠. ~~악덕 상사였던~~ 서점군은 옆자리 부사수에게 일을 떠넘기기로 합니다.

서점군 : 들었지? 니가 커뮤니티 기획을 해보는거야. I'm counting on you

서점군의 사탕발림에 넘어간 부사수는 열심히 벤치마킹해서 이틀만에 목록 페이지 기획안을 만들어왔습니다. 그가 가져온 기획안은 당근마켓 판박이였죠. 부사수가 가져온 기획안을 보고 서점군은 버럭 화를 냅니다.

자 여기서 문제. 서점군이 화를 낸 이유는 무엇일까요?

1) 인성이 개차반이어서

2) 당근마켓을 똑같이 배껴서

3) 우리 서비스 성격과 맞지 않아서

서점군이 화를 낸 이유를 자세히 알려면 시중 커뮤니티 앱들의 목록 페이지를 분석해볼 필요가 있습니다. 국내 대표 커뮤니티 플랫폼들의 목록 페이지를 예로 들어봅시다.

1) 게시판 List - View 스타일의 네이버 카페

2) 사진이 중심이 되는 2열 Feed 방식의 오늘의집

3) 본문이 중심이 1열 Feed 방식의 당근마켓

보통 커뮤니티 플랫폼 게시판 목록 페이지는 이 3가지 레이아웃을 벗어나지 않습니다. 세세한 디테일의 차이만 있을 뿐 큰 틀은 거의 다 비슷하죠. 우리 부사수짱은 여기서 본문이 중심인 당근마켓의 1열 Feed 방식을 차용했습니다. 우리 서비스는 사진이 중심이 되는 서비스라 당근보다는 오늘의집 레이아웃이 더 적합했죠. 고객님이 당근 얘기를 했다고 우리 서비스의 성격이나 특성에 대한 고민 없이 당근을 그대로 베끼는 안일함에 화가 났습니다. (절대 인성이 폐급이라 그런 게 아님)

실제로 업무를 하다 보면 주니어들이 이런 실수를 많이 합니다. 그 당시 핫한 서비스의 UI를 무분별하게 차용해놓고 왜 이렇게 그렸냐고 물어보면 당근이 이렇게 생겨서요라는 말을 아무렇지도 않게 하죠. 기획자라면 가장 하지 말아야 할 말이 OO이 이렇게 생겨서요라는 말입니다. 그건 기획자로써 기본이 안된 겁니다.

네이버 카페는 왜 목록에서 제목만 보여주고 당근마켓은 목록에서 본문을 보여줄까. 이건 두 서비스가 다루는 콘텐츠의 성격과 연관이 있습니다. 제목과 내용의 구분이 없고 1000자 이하의 단문으로 라이트한 이야기를 나누는 커뮤니티 서비스는 당근마켓같은 1열 Feed 스타일이 가장 적합합니다. 어차피 본문 자체가 길지 않으니까 목록에서 본문을 2~3줄 정도 보여주는 것만으로 본문의 내용을 어느정도 파악할 수 있고 더보기를 클릭해서 상세페이지 없이 본문에서 내용을 바로 펼칠수도 있으니까요. 이런 서비스는 전통적인 List - View UI를 대입하면 본문을 보기 위해 제목을 클릭하는 불필요한 클릭을 유발하게 됩니다. 반대로 본문의 길이나 내용을 예측할 수 없고 길이도 길 경우에는 네이버 카페 같은 전통적인 List - View 스타일의 UI가 더 적합합니다.

결국 목록 페이지 UI 레이아웃을 결정하는 핵심 요소는 콘텐츠의 성격이다. 라는 이야기입니다.

하나씩 정리해볼까요

1) 본문 길이 제한이 없고 전문적인 학술 자료나 정보를 교환하는 커뮤니티 / List - View

2) 텍스트보다는 사진이 주가 되는 커뮤니티 / 사진 중심의 2열 또는 1열 레이아웃

3) 1000자 이하의 단문이며 전문적인 이야기보다는 가벼운 가십거리 소재를 나누는 커뮤니티 / 1열 Feed

소 뒷걸음질치다 쥐잡는다고 운이 좋게도 내가 아무 생각 없이 베낀 레이아웃이 콘텐츠의 성격과 일치할수도 있습니다. 하지만 나름대로의 논리는 필요하죠. 똑같은 말을 해도 어떻게 말하느냐에 따라 상대방이 받아들이는 느낌이 다를 테니까요.

오답

커뮤니티 서비스를 원하신다길래 당근이랑 똑같이 만들어봤습니다.

Best Practice

콘텐츠를 분석해본 결과 1000자 이하의 단문 커뮤니티는 1열 피드 레이아웃이 가장 적합한 것으로 판단되어 목록에서 본문을 노출하는 1열 피드 방식으로 화면을 구성했습니다.

댓글은 몇개를 보여주나요?

- 댓글과 대댓글

간단해보이는 댓글창 하나를 설계할때도 기획에서 고려해야 할 다양한 요소들이 많습니다. 댓글 표시 개수부터 방법까지 서비스의 성격에 따라 UI가 180도 달라지기도 하죠.

위 이미지는 네이버 카페의 본문 댓글 표시 영역과 오늘의집 본문 댓글 표시 영역입니다.

네이버 카페는 본문에서 10개, 오늘의집은 본문에서 5개의 댓글을 표시합니다. (나머지 댓글은 댓글창을 클릭하여 전체댓글 확인 가능) 왜 본문에서 보여주는 댓글 개수에 차이가 있는걸까?

전통적인 게시판 레이아웃에서 게시글수 10개는 지금까지 공식처럼 여겨졌습니다. Desktop 환경에서 이미지가 있는 게시판일 경우 이미지 형태의 바둑판식 보기 레이아웃을 지원할 때를 대비해 한페이지에서 표시되는 게시글수는 되도록이면 짝수로 맞추도록 하는 것이 공식이었죠. 1열, 2열, 5열 등 다양한 레이아웃에 대응하기 가장 좋은 게시글의 개수가 10개였으니까요. 최근에는 커진 Desktop 해상도와 4열 피드에 대응하기 위해 게시물수를 20개씩 보여주는 경우가 많습니다.

게시물수가 10개 일때 1열 / 2열 / 5열 Layout 대응

네이버 카페의 댓글 수 10개는 게시물수의 영향을 받은것으로 보입니다. 사용자가 느끼기에 익숙하고 안정감 있는 숫자라는 이유도 있겠지만 그냥 예전부터 쓰던 관습적인 개수라는 영향도 있는거죠. 이런 경향이 Mobile에서도 이어지고 있는거고요. Desktop을 먼저 설계하고 Mobile을 나중에 설계하니 Mobile의 성격이 Desktop에 어느정도 종속될 수 밖에 없는거죠.

오늘의집은 약간 다릅니다. Mobile을 기준으로 했을 때 댓글 10개는 너무 많아. 절반 정도만 보여주자 라는 것이 오늘의집 생각입니다. 이는 Desktop에서도 마찬가지인데 오늘의집 Desktop 버전에서는 Mobile과 동일하게 댓글을 5개만 보여줍니다. 오늘의집은 흔히 말하는 Mobile First로 모바일을 먼저 설계하고 Mobile 기준으로 Desktop을 설계한 결과물이죠. 물론 댓글수가 단순히 Mobile First에만 영향이 있는것은 아닙니다. 두 서비스가 다루고 있는 콘텐츠의 성격도 영향이 있습니다.

네이버 카페는 본문에서 등록순으로 댓글을 표시합니다. 정렬 기준으로 보면 등록된 가장 오래된 댓글부터 제일 위에 표시되죠. 전체 댓글 163개 기준으로 보면 1번~10번 댓글이 표시되는 형식입니다. 오늘의집은 정 반대인데 전체 댓글 8개 기준으로 4번~8번 댓글이 표시됩니다. 두 서비스를 비교해보면 네이버는 처음 달린 순으로 댓글을 표시하고 오늘의집은 최신순으로 댓글을 표시합니다. 댓글 표시 순서의 차이는 두개 서비스가 다루는 콘텐츠의 속성에 따른 차이입니다.

네이버 카페는 순수하게 커뮤니티에 중점을 둡니다. 사용자의 의견을 처음부터 끝까지 순차적으로 표시하는 방식이죠. 이러한 구조는 첫 댓글을 선점하면 여론이 한쪽으로 쏠릴 수 있고 댓글이 많아질 때 사용자의 가독성이 떨어진다는 단점이 있으나 이용자들끼리 활발한 소통을 하기 적합한 방식입니다. 사용자들이 처음부터 끝까지 댓글 의견을 청취한 후 자신의 의견을 다는 스타일로 레이아웃을 구성한거죠.

오늘의집은 콘텐츠에 중점을 둡니다. 댓글은 콘텐츠에 딸린 부가적인 요소일 뿐 서비스의 핵심은 콘텐츠인거죠. 시의성이 높은 콘텐츠일수록 최신순으로 댓글을 표시하는 것이 더 좋습니다. 오래된 의견보다는 최신 의견이 시의성을 따지기 더 적합하기 때문이죠.

네이버와 오늘의집. 두 서비스에 달린 댓글을 보면 두 서비스의 지향점을 더 명확히 알 수 있습니다.

네이버 카페의 댓글은 주로 본문에 대한 의견이 주를 이룹니다. 이용자가 의견을 제시하면 그 의견에 따른 자기 생각을 제시하고 여러 유저들과 의견을 나누는 다방향 소통 방식이죠. 반면 오늘의집은 콘텐츠에 대한 의견보다는 상품에 대한 문의나 호평이 주를 이루는 작성자와 댓글 작성자의 쌍방향 소통방식입니다. 두 서비스 모두 서비스의 성격에 맞게 적합한 레이아웃을 잘 구성한 것처럼 보입니다.

댓글을 카운팅하는 방식에도 두 서비스는 차이를 보입니다. 네이버 카페는 본문에 표시되는 10개 댓글을 표시할 때 대댓글을 포함해서 10개 댓글을 카운팅합니다. 반면 오늘의집은 대댓글을 제외하고 댓글만 5개를 카운팅합니다. 두 서비스가 댓글 카운팅 방식에서 차이를 보이는 이유는 댓글 접기 기능이 있느냐 없느냐에 그 이유가 있습니다.

네이버 카페는 대댓글 접기 기능을 제공하지 않습니다. 대댓글도 모두 보여주는 방식이죠. 반면 오늘의 집과 당근마켓은 댓글이 설정한 개수를 초과하면 (오늘의 집 1개 이상 / 당근마켓 2개 이상) 나머지 댓글은 더보기 형태로 접어서 표시합니다. 네이버 카페는 대댓글을 접지 않기 때문에 댓글에 달린 대댓글의 개수가 무한정 늘어날 수 있어 댓글 카운팅을 할 때 대댓글도 포함하는거고 오늘의집이나 당근마켓은 대댓글의 표시 개수에 한개가 있기 때문에 대댓글을 포함하지 않고 댓글만 골라서 카운팅하는거죠.

두 서비스의 대댓글 접기 기능 제공 유무는 소통 방식에 따라 차이를 보입니다. 앞서 설명했듯 커뮤니티 중심의 다방향 소통이 주인 네이버 카페는 모든 대댓글을 표시하고 작성자와 댓글러의 쌍방향 소통방식이 주를 이루는 당근마켓은 대댓글이 일정 개수 이상 초과할 시 접어서 표시합니다. 두 서비스의 소통방식 차이를 예로 들어 설명하면 이렇습니다.

네이버 카페 글은 작성자와 이용자들간의 의견을 주고 받는 스타일로 댓글 창을 활용하는 반면 당근마켓은 작성자와 댓글러 사이의 양방향 소통의 주를 이룹니다. 여기서 주황색 배경으로 표시된 2번 댓글은 작성자와 댓글러 둘이서 주고받는 이야기이기 때문에 모든 이용자들에게 쓸모있는 정보는 아니죠. 이처럼 대댓글 활용방식에서 두 서비스가 큰 차이를 보이기 때문에 서비스의 성격에 따라 댓글을 접기도 하고 펼치기도 합니다.

정리하면 커뮤니티 서비스를 기획할 때 댓글 영역에서 기획자가 정의해줘야 할 정책적 요소는 다음과 같습니다.

1) 본문에서 몇개의 댓글을 표시할 것인가 (5개? 10개?)

2) 댓글은 오래된순부터 표시할것인가 최신순부터 표시할것인가

3) 본문에서 카운팅되는 댓글 개수에 대댓글은 포함할것인가 하지 않을 것인가

4) 대댓글은 일정 개수가 넘으면 접어서 표시할까 모두 다 표시할까

작성일은 어떻게 표시하나요?

- 시간 / 날짜 등 서비스에 다른 작성일 표시법

최근 커뮤니티 서비스에서 작성일을 표시하는 방법은 크게 두가지로 구분됩니다.

1) 오늘 작성한 글은 작성 시간을 표시 (24시간제) / 이전 글은 작성 일자를 표시

2) 1분전 / 1시간전 / 1일전 등으로 글 작성 일자를 특정 단위로 쪼개서 표시

작성일 표시 방법은 서비스 성격에 따라 차이를 보입니다. 네이버 카페나 디시인사이드처럼 많은 글들이 올라오고 작성 순서대로 글이 표시되는 서비스 같은 경우 글의 작성 시간을 명시적으로 표현하고 작성 순서대로 리스트페이지에서 표시하는 것이 일반적입니다. 반대로 많은 글이 올라오지 않고 리스트 페이지 노출 순서가 글 작성순서가 아닌 알고리즘에 의한 추천순인 경우 글 작성 시간을 특정 단위로 쪼개서 표시합니다.

커리어리가 두번째 예에 해당하는 대표적인 서비스입니다. 알고리즘에 따라 작성순서와 관계없이 초천/적합도에 따라 게시물을 노출하는데 커리어리 같은 서비스의 경우 글 작성 시간보다는 글의 내용이 중요하기 때문에 글 작성 시간은 대략적으로 뭉뚱그려서 표현합니다. 이용자들의 글 열람 기준은 작성 시간이 아니라 글의 내용이니까요.

전통적인 커뮤니티는 약간 다릅니다. 커뮤니티 특성상 최신 이슈와 같은 시의성 있는 소재를 다루는 경우가 많고 글의 리스폰율이 높기 때문에 정확한 시간을 알려주는 게 중요한 일일 수 있으니까요. 글이 작성된 시기가 중요하냐 글의 내용이 중요하냐에 따라 글 작성 시간을 표현하는 방법도 다릅니다.

고인물을 만드는 추천과 비추천

- 비추천은 어떻게 고인물을 만드는가

최근 커뮤니티 플랫폼의 트렌드는 추천 기능만 두고 비추천이나 신고 기능은 두지 않는것이 일반적입니다. 과거 커뮤니티 서비스들이 추천과 비추천 서비스를 동시에 제공하는걸 생각해보면 다소 이례적이죠. 이유가 뭘까? 비추천 기능을 악용해 커뮤니티 여론을 장악하고 커뮤니티를 고이게 만드는 사례가 다수 발생하였기 때문입니다.

비추천과 신고 기능은 사실 관리 편의성을 위해 도입되었다고 해도 과언이 아닙니다. 일정수의 비추천이 쌓이면 게시물을 비공개 처리하는 비추천 방식은 광고나 스팸글을 처리하기 용이하지만 반대로 특정 집단이 여론을 장악하기 좋은 빌미를 제공하기도 합니다. 자기와 의견이 다른 글에 반대의견을 가진 사람들이 몰려가서 비추천을 날리고 글을 내려버리는 속칭 커뮤니티 여론 장악이 지속되면 이에 지친 일반 유저들이 떠나가고 커뮤니티의 여론이 특정 집단의 이해관계나 정치적 셈법에 의해 좌지우지 되는 고인물 상태가 되어 버리는거죠. 대형 커뮤니티 중에 이런 여론장악에 당한 커뮤니티들이 무척 많습니다. 커뮤니티 플랫폼은 이런 사태를 방지하기 위해 비추천 기능과 신고를 없애고 추천 기능만 두는 포지티브 정책을 취하고 있습니다.

비추천이 도태된 건 최근 UI/UX 경향, 서비스 성격과도 연관이 있습니다. 서비스의 성격이 세분화/전문화되고 있으며 좋은 글은 알고리즘을 통해 자연스럽게 상위에 노출, 그렇지 않은 글은 자연스럽게 도태되는 구조이다보니 굳이 비추천이나 신고 기능을 넣을 필요가 없는거죠. 요즘은 SNS나 공유 기능도 워낙 잘되어 있기 때문에 좋은 글은 사이트나 서비스를 넘어 인터넷 세상에 널리 떠돌기도 하고요.

오늘은 가볍게 커뮤니티 서비스를 기획할 때 기획자가 고려해야 될 몇가지 포인트를 짚어봤습니다. 우리에게는 한국적 서비스와 특성에 맞는 아티클이 필요합니다. 맹목적인 미제 찬양은 이제 그만할때도 되었습니다. 외국 아티클에 매몰되지 않고 한국적 특성에 맞는 UI/UX 방법론이 활발히 연구되는 그런 세상을 기원합니다.

비즈니스와 실전 UI/UX 사례를 모은 서점직원의 신간

<실전 예제로 알아보는 서점직원의 실전 UI/UX> 절찬리 판매 중!

실전 예제로 알아보는 서점직원의 실전 UI/UX - 예스24

`사람의 시선은 왜 왼쪽부터 시작할까?``로그인 버튼은 왜 저기에 있고 위치에 따라 어떤 차이가 있는 걸까?``맥도날드 키오스크는 왜 불편할까?`기본이 되는 이론부터 실제 서비스를 예제로 한

www.yes24.com