오피지지 커뮤니티는 지금 베타테스트 버전을 서비스 중입니다. 한국형 레딧을 표방하여 유저들에게 새로운 커뮤니티 공간 제공을 목표로 만들어 나가며 UI/UX 측면에서 고민하고 엄선한 부분, 앞으로 나아갈 방향에 대한 로그를 남겨보려 합니다.
Concept
인터넷 게시판을 이용해 본 적이 있다면 누구나 쉽게 사용할 수 있고 익숙하게 받아들일 수 있으며, 모바일 시대에 최적화된 환경을 제공하는 서비스를 만들고자 합니다. 또한, 최신 이슈와 트렌드 반영이 빠르게 이루어질 수 있는 시스템을 만들어나가는 것에 초점을 맞추기로 했습니다.
User Interface
메뉴(탭)
탭은 인기/자유/정보/영상 게시판으로 나누어져 있습니다. 자유/정보/영상 탭의 게시글이 일정 시간을 기준으로 많은 추천을 얻으면 자동으로 인기 카테고리에 게시됩니다.
베타 서비스를 진행하면서 세분된 탭을 구성하면 어떻겠냐는 피드백을 많이 받았습니다. 하지만 추후에 리그 오브 레전드와 관련된 내용 외에도 다른 주제에 관해서도 이야기를 나눌 수 있는 다양한 카테고리를 구성할 계획이 있으므로 탭의 분류를 늘리지 않으려고 합니다. 세분화보다는 다양성에 집중하고자 하는 큰 그림(!)을 그리고 있으니, 조금만 기다려주세요!
목록 – 내용 미리 보기
자유를 제외한 게시판에서 +아이콘을 클릭하면 게시글의 내용을 미리 볼 수 있어 글의 대략적인 내용을 파악하거나 바로 링크/유튜브 동영상을 이용하려 할 때 편리하도록 디자인하였습니다. 아이콘은 게시물의 속성을 파악하기 쉽게 영상 게시글일 경우 플레이 버튼으로 아이콘을, 본인이 직접 수기한 글은 문서 모양으로, 링크를 이용한 경우 클립 아이콘으로 직관성 있는 형태를 이용하였습니다.
공지사항
공지사항은 게시물 최상단에 ‘고정’됩니다. 그래서 좌측에 핀 이미지를 사용하여 고정되어있다는 느낌을 전달하고자 했습니다.
글의 표시
내가 내용을 읽은 글의 제목은 조금 더 옅은 색으로, 목록에서 지금 내용을 보고 있는 글의 제목은 포인트 컬러를 사용하여 쉽게 구분할 수 있도록 하였습니다. 썸네일이 없는(영상 또는 이미지를 첨부하지 않고 오로지 텍스트로 구성된 글) 경우, 리그 오브 레전드의 마스코트인 포로를 placeholder로 사용하였습니다. 추천 버튼은 목록에서 바로 누를 수 있고, 자신이 추천한 게시글은 아이콘의 색상을 다르게 표시하여 바로 확인할 수 있습니다.
페이지 내비게이션
이전/다음 버튼을 좌측 하단에 나란히 배치하여 빠르게 페이지 이동을 할 수 있게 구성하였습니다. 우측에는 내가 몇 페이지의 글을 보고 있고, 전체 페이지 수가 몇 개인지를 표시하였는데 포털사이트를 이용할 때 처럼 본인이 직접 검색어를 입력하여 정보를 찾는 글이나 리스트와의 차별점을 두고 싶었습니다. OP.GG 커뮤니티에서는 여러 사람의 다양한 이야기, 정보를 최신순으로 읽어내릴 것을 컨셉으로 하여 페이징을 하였습니다.
자유게시판
기존 한국 커뮤니티를 이용하는 유저들을 위해 익숙한 사용자 경험을 제공하고자 하여 우리가 흔히 접할 수 있는 게시판 형태로 디자인하였습니다. 이미지가 포함된 글 제목 끝에는 사진 아이콘을 자동으로 첨부하여 내용이 텍스트로만 구성된 지, 이미지가 포함되어 있는지를 파악하기 쉽게 구성하였습니다.
<<다음화 예고 >>
‘OP.GG 커뮤니티 UI/UX -1’에서는 컨셉과 페이지 오버뷰, 리스트에 관한 이야기를 작성하였습니다. 커뮤니티 UI/UX 로그는 총 2부작이며, 2부에서는 상세페이지 디자인과 댓글 등에 대한 내용이 이어집니다.
