게시글

 

게시글 오버뷰

 

게시글은 에디터를 이용하여 폰트의 굵기와 크기, 색상을 바꿀 수 있고 사진을 첨부하여 글을 업로드 할 수도 있습니다. 또한, 영상/정보 글에는 원본 사이트 링크를 첨부하는 것이 가능하여 출처를 밝히기 쉽고, 유튜브 채널 운영자들에게는 해당 영상을 보는 사용자들이 자신의 페이지로 쉽게 이동할 수 있도록 하였습니다.

 

현재의 구성, 그리고 앞으로 바뀔 게시글 미리 보기

 

글쓴이가 에디터를 이용하여 작성한 글이 그대로 보입니다. 글을 수정해야 하거나 삭제해야 하는 경우, 빠른 기능선택을 위해 상단에 버튼을 텍스트로 배치해 놓았습니다. 또한, 사용자들의 반응을 바로 확인할 수 있도록 제목 아래에 조회/추천/댓글 수가 나타납니다.

 

출처를 공개하고 유튜브 사용자들의 편의성을 고려해야 하는 링크(URL) 표시는 글이 끝나는 그 아래에 클립 아이콘과 함께 푸른 톤을 사용하여 콘텐츠 영역과 구분이 될 수 있게 디자인하였습니다.

현재 게시글은 우리가 ‘얼굴 책’에서 항상 보아 온 따봉 버튼을 이용하여 추천을 누르는 기능이 구현되어 있습니다. 하지만 위에 첨부한 디자인 시안에는 위/아래의 화살표 버튼을 확인할 수 있죠. 네, 그렇습니다. 바로 표현의 다양성을 위한 비추천 기능을 앞두고 있습니다. (챔피언 분석 – 팁에는 미리 구현되어 있으니 한번 이용해보세요) 버튼 색상의 경우 추천은 열광적인 느낌의 레드 컬러로, 비추천은 차갑고 가라앉은 느낌의 블루 컬러로 선정하였습니다.

글을 다 읽어본 후에 평가할 수 있도록 반응(추천/비추천) 버튼과 공유하기 버튼은 하단에 배치하였으며, 그 외 본인의 의견을 피력할 수 있는 댓글 기능이 이어집니다.

 

댓글과 답글, 그리고 정렬

 

 

일련의 이슈에 의하여 커뮤니티 사용자가 증가했을 당시, 가장 많이 그리고 가장 빠르게 바뀐 것이 바로 댓글 기능입니다.

타 커뮤니티, 네트워크 시스템을 이용해 본 사용자들의 경험을 반영하기 위해 사진 댓글을 도입하고 인기순/최신순으로 글을 정렬할 수 있게 구성하였습니다. 또한, 전체 페이지를 새로고침하는 번거로움을 덜기 위해 댓글 자체만 갱신할 수 있는 기능을 만들어냈습니다. (물론 여기엔 개발자의 노고가…)

AMA(Ask Me Anything)를 진행하면서 댓글 수가 많아질 때 로딩 속도를 줄이기 위해 ‘더 보기’ 버튼을 도입했습니다. 글쓴이가 댓글 혹은 답글을 등록할 경우에는 작성자 색을 다르게 하여 다른 사용자들과 구분을 주었고 답글을 입력했을 때 꺾쇠 표시를 만들어 하위 댓글의 느낌을 살렸습니다.

회원과 비회원의 닉네임도 구분이 필요했습니다. 그래서 비회원은 ip의 일부를 노출하며 조금 더 흐린 색으로 임의의 닉네임(!)을 표현하였습니다.

댓글 또한 게시글처럼 추천/비추천을 할 수 있습니다. 하지만 답글(대댓글)은 평가대상으로 분류하지 않기로 하여 해당 기능을 포함하지 않습니다.

 

모바일 웹과 앱 버전

 

모바일웹 버전의 일부 페이지

 

모바일앱 버전의 일부 페이지

 

모바일웹 버전은 웹 사이트와 유사하게, 이미 구축된 앱 디자인에 맞춰 조금 더 심플한 느낌으로 진행하였습니다. 화면 전환방식, 팝업 등장 위치, 로딩 시 사용하는 이미지 등 앱에서 구현 가능한 디테일, 인터렉션을 살리기 위해 노력했습니다

 

마치며… 커뮤니티는 앞으로 더 진화할 것입니다!

 

 

가깝게 앞서 소개한 추천/비추천 제도와 공지사항으로만 소개했던 티어제 구현, 더 나아가서 리그 오브 레전드만이 아닌 다양한 주제로 이야기를 나눌 수 있는 커뮤니티로 발전하고자 합니다. 처음 컨셉은 ‘한국형 레딧’에서 시작하였지만, 점차 발전해나가면서 우리만의 특징이 있는 공간을 만들어나갈 것입니다. 아직은 베타테스트 버전이지만 꾸준히 하나씩 틀을 맞춰나가다 보면 완성된 서비스를 선보일 수 있을 거라 믿습니다 !_!

 


Reference

https://www.reddit.com/r/leagueoflegends/

http://9gag.com/

https://www.quora.com/

https://news.ycombinator.com/

https://voat.co/

댓글 남기기

Instagram

%d 블로거가 이것을 좋아합니다: