OP.GG 커뮤니티 UI/UX #3 – 모바일 웹 리뉴얼

OP.GG는 PC유저가 75%를 차지하고 있습니다. 리그 오브 레전드, 오버워치 등 게임이 PC에서 실행되기 때문에 자연스럽게 데스크톱으로 사용성이 이어지기 때문일까요? 그런데 신기한 사실이 하나 있습니다. 커뮤니티 쪽은 모바일 유저가 60% 이상을 차지하고 있다는 사실이죠.

OP.GG의 컨텐츠는 소환사 전적, 챔피언 분석, 커뮤니티, 프로관전 등 여러가지가 있습니다. 소환사 전적이나 챔피언 분석과 같은 대부분의 컨텐츠는 게임을 플레이하기 전, 후에 사용하죠. 커뮤니티는 작년 9월에 출시된 서비스로 계속해서 트래픽이 증가하고 있는 인기 있는 카테고리 중 하나입니다. 커뮤니티의 특별한 점은 게임을 하지 않는 시간에 소비되는 컨텐츠라는 것이죠. 즉, 게임환경(PC)과 분리된 성격을 가진 커뮤니티는 모바일 접근 가능성이 자연스럽게 커지게 됩니다. 유저의 실생활과 OP.GG를 가깝게 해주는 장치가 되었죠. 결과적으로 OP.GG는 게임을 플레이할 때, 플레이하지 않을 때 모두 유저들에게 컨텐츠를 제공하면서 게임 라이프 스타일을 만들어주는 역할을 하게 되었습니다.

 

커뮤니티 리뉴얼의 시작

 

얼마 전 OP.GG의 GNB와 인덱스가 리뉴얼되었습니다. 2년 정도의 시간동안 항상 작은 변화들이 있었지만 OP.GG의 전체적인 톤 앤 매너를 재정립하자는 취지에서 리뉴얼되었죠.

 

OP.GG는 PC 기반의 서비스로 시작했기에 커뮤니티를 처음 만들 때에도 PC에 큰 비중을 두어 진행되었습니다. 그래서 PC보다 모바일 버전에는 많은 시간을 할애할 여유가 없었고, 후에 새로운 페이지가 추가되는 상황이 잦아져서 전체적인 통일감이 약해져 갔습니다. 하지만 모바일 커뮤니티의 사용자가 60%를 넘는 지금, OP.GG 커뮤니티만의 디자인을 재정립할 시기가 되었고, 리뉴얼의 필요성이 대두되었습니다. 바뀐 인덱스를 기점으로 커뮤니티 모바일 웹 UI를 리뉴얼 버전과 통일시키고, 가독성을 개선해보고자 하는 취지로 디자인 리뉴얼이 시작되었습니다. 이번 글에서는 커뮤니티 모바일 웹 디자인을 리뉴얼하는 과정에 관해 이야기하고자 합니다.

 

디자인을 시작하기에 앞서 이번 프로젝트의 목표에 대해 정리해보는 시간을 가졌습니다. 첫 번째는 리뉴얼된 GNB와 인덱스에 맞는 시각적 통일감입니다. 사이트 안에서 일관된 시각적 장치를 제공해주어야 서비스의 비주얼 아이덴티티가 명확해지기 때문이죠. 두 번째는 가독성 개선입니다. 가독성을 개선할 수 있는 요소들은 여러 가지가 있습니다. 자간, 행간부터 시작해서 배경과 텍스트의 대비, 여백 조정 등 커뮤니티의 컨텐츠가 보다 쉽게 읽힐 수 있는 환경을 만들어주는 작업이 되겠죠. 마지막 목표는 게시판별 컨텐츠 성격을 강화하는 것입니다. OP.GG 커뮤니티는 다른 커뮤니티와 달리 게시판의 종류가 많지 않습니다. 각 게시판의 성격에 맞는 레이아웃을 적용하여 컨텐츠의 성격도 강화하고, 게시판의 환경도 컨텐츠의 목적에 맞게 조성하기 위함이죠.

 

커뮤니티의 게시판

 

모든 커뮤니티는 게시판을 가지고 있습니다. 그리고 게시판마다 그 주제와 성격이 다르죠. 여행, 음식, 동물, 연예, 사회, 정치 등이 주제의 예시가 되겠죠. 게시판의 성격은 게시글의 형식을 보면 알 수 있습니다. 사진이 메인이 되는 게시판, 영상만 올릴 수 있는 게시판, 글로만 쓸 수 있는 게시판 등 해당 컨텐츠의 양식이라고 말할 수 있습니다.

대부분 커뮤니티는 많은 게시판을 가지고 있습니다. 그만큼 광범위한 취향들을 고려해줄 수 있기에 유저풀도 늘어나게 되겠죠. OP.GG 커뮤니티는 반대로 최대한 간결한 커뮤니티를 지향합니다. 너무 많은 게시판은 찾아 들어가기에 복잡하고, 신규 유저들은 구조에 적응하기까지 시간이 걸리기 때문이죠. 또한, 커뮤니티는 OP.GG가 제공하는 카테고리 중 하나여서 커뮤니티만의 구조를 가지고 간다면 사이트 하나 규모의 Depth가 늘어나는 것이기 때문에 사이트 자체가 무겁고 복잡하게 느껴질 수도 있습니다.

 

결과적으로 OP.GG 커뮤니티는 4가지 게시판으로 구성하게 되었습니다. 그래서 게시판의 특성을 살려 게시판의 성격에 따라 다른 레이아웃을 적용하기로 했습니다. 유저에게 각각의 게시판에 적합한 컨텐츠를 인식시키기 위함이죠. 게시판의 성격에 맞지 않는 게시글은 커뮤니티의 환경을 해칠 수도 있고, 유저의 태도에도 안 좋은 영향을 미치기 때문입니다.

 

각 게시판에 적용되는 레이아웃은 아래와 같습니다.

인기 게시판

인기 게시판의 게시글은 유저들에게 추천 수 또는 댓글 숫자를 통해 이미 엄선된 컨텐츠입니다. 수많은 게시글들 중 유저가 원하는 컨텐츠를 찾아가야만 하는 과정이 생략되는 공간이죠. 따라서 한 컨텐츠에 넓은 공간을 부여했습니다. 각 컨텐츠의 가치를 부각해 유저에게 컨텐츠에 대한 신뢰감을 높였습니다.

 

자유 게시판

자유 게시판은 말 그대로 모든 주제를 다루는 범용적인 게시판입니다. 그렇기 때문에 컨텐츠의 양식이나 내용 또한 매우 자유롭습니다. 자유 게시판에서는 게시판의 특성상 양질의 컨텐츠를 찾을 확률이 낮기에 리스트 형식으로 게시글을 보여줍니다. 게시글이 올라오는 간격이 가장 짧기 때문에 최대한 한 화면에 많은 게시글이 보이게 했습니다.

 

정보 게시판

정보 게시판은 게임에 유용한 가이드나 패치 내용, 이벤트 등 정보성을 가진 컨텐츠를 공유하는 공간입니다. 주로 긴 글이 많기 때문에 이미지와 함께(이미지가 첨부되어 있다면) 글 일부를 보여줌으로써 흥미를 유도하는 레이아웃 구성을 했습니다. 충분한 공간을 가지고 타이틀과 본문 내용, 썸네일이 보이는 카드뷰 형태를 적용했습니다.

정보 게시판은 하루에 25개 정도의 글이 올라옵니다. 다른 게시판에 비해 상대적으로 적은 편이죠. 정보 게시판에 맞는 컨텐츠의 퀄리티도 있어야 하고, 글이 길기 때문에 어느 정도의 자작 능력이 있어야 하기 때문일까요… 본문의 내용을 조금이나마 보여준다면 게시글 클릭이 더 늘지 않을까 생각됩니다. 그래서 더 많은 사람이 정보 게시판에 글을 올리고 싶은 마음이 들게 하는 것이 목표입니다.

 

영상 게시판

처음에 영상 게시판의 레이아웃을 기획했을 때, 썸네일을 크게 보여주어야겠다고 생각했습니다. 무언가를 선택할 때 텍스트보다 이미지가 영향력이 더 크다고 생각했기 때문이죠. 유튜브 같은 영상 기반의 서비스를 봐도 썸네일을 크게 보여주고 있습니다. 그래서 큰 썸네일을 기반으로 한 레이아웃으로 시안을 공유했는데, 팀원분께 근본적인 질문을 받았습니다. 과연 OP.GG의 영상 게시판에서 유저들이 어떤 요소를 먼저 읽을지에 대한 것이었죠.

유튜브는 제한이 없는 자유로운 주제를 다루고 있고, 그만큼 다양한 썸네일이 있습니다. 반면 OP.GG 커뮤니티 영상 게시판의 썸네일은 60%가 소환사의 협곡(롤 맵의 한 종류)이고, 나머지는 챔피언 또는 프로게이머의 얼굴입니다. 결국, 유저가 컨텐츠를 선택할 때 썸네일보다 타이틀을 중점으로 보게 되지 않을까 생각했습니다. 그래서 썸네일을 보여주되, 타이틀보다 큰 영역을 주지 않았습니다. 대신 자유 게시판과의 차별된 레이아웃이 필요하기 때문에 썸네일을 좌측으로 옮겼죠. 자유 게시판은 썸네일이 있을 수도 있고, 없을 수도 있기 때문에 우측에 썸네일을 배치하는 것이 레이아웃상 흐트러지지 않게 모양을 유지할 수 있었지만, 영상은 항상 썸네일이 존재하기 때문에 좌측에 있어도 크게 문제가 되지 않았습니다.

 

모바일 환경과 가독성

 

글을 읽을 때 가장 중요한 것은 가독성이죠. 가독성은 환경에 따라 다른 조건을 가지고 있습니다. 모바일에서 가장 잘 읽히는 폰트 사이즈는 뭘까요? 영문에 관한 문서는 인터넷상에 많이 존재합니다. 영문은 16px이 적정한 폰트 사이즈라고 합니다. 그 예로 부트스트랩이 16px을 기본 폰트로 사용하고 있죠. (웹에서 적정한 영문 폰트 사이즈에 관한 글: https://www.imarc.com/blog/best-font-size-for-any-device)

 

그렇다면 모바일 환경에서의 적정한 한글 폰트 사이즈는 몇일까요? 모바일 화면에서 정보를 읽을 때 이해도 점수는 데스크톱 수준의 48%에 그친다고 합니다. 그리고 모바일의 작은 화면은 PC보다 가독성이 떨어지는 환경이므로 글줄의 간격이 더 넓어야 합니다. 대략 본문의 행간이 150% 이상이어야 읽기가 쉽다고 하죠. 하지만 한글은 영문보다 속공간이 좁고, 획이 많기 때문에 160% 정도가 적당하다고 생각합니다.

 

 

결정된 커뮤니티 모바일 웹의 게시글 디자인입니다. 기존에는 타이틀과 본문의 폰트 사이즈와 스타일이 아주 다르지 않았기 때문에 이번에 리뉴얼을 진행하면서 확실한 영역 구분을 만들었습니다. 또한, 폰트 색상도 기존보다 진하게 적용하여 배경(white)과 확실한 대비를 이루도록 했습니다. 사실 본문의 폰트 크기를 17px 정도로 좀 더 크게 하고 싶었는데요… 개발상의 이슈로 모바일과 같은 폰트 사이즈를 사용해야 했기에 15px로 합의를 봤습니다. 이번에도 또 다시 가독성이 가장 좋은 환경은 흰 종이에 검은색 글씨가 아닌가 하는 생각이 들었는데요… 진리인 것 같습니다.

 

UI 개선

 

 

컨텐츠 간 요소 재배치

기존 커뮤니티 리스트에서는 제일 왼쪽에 Up/Down 화살표가 세로로 보이고, 작성 시간, 닉네임, 타이틀, 댓글이 순서대로 보이는 형식입니다. 영역 구분이 애매한 부분이 있고, 시선의 흐름이 한 방향이 아니여서 어색한 느낌이 있죠. 그래서 컨텐츠를 재배치했습니다.

 

리스트는 사용자가 컨텐츠를 선택하여 읽게끔 유도하는 통로의 역할을 하므로 컨텐츠를 명확하게 보여줘야 합니다. 가장 중요한 요소는 타이틀이죠. 타이틀을 통해 내용을 유추하고, 결과적으로 클릭을 실행하기 때문입니다. 제목 아래에는 작성 시간과 닉네임이 보입니다. 제목, 작성시간, 그리고 닉네임은 게시글에 대한 객관적인 정보입니다. 그리고 추천과 댓글은 게시글에 대한 다른 유저들의 주관적인 반응이죠. 한 리스트에 보이는 여러 요소를 성격에 맞게 분리된 구조를 만들었습니다.   

 

 

선택 UI

커뮤니티 모바일 웹에서 몇몇 부분에 picker UI를 사용하고 있는 경우가 있었습니다. picker UI는 조작이 불편하기도 하고, 누르기 전에 선택지를 파악할 수 없는 이슈가 있죠. 그래서 되도록 밖으로 꺼내 다 보여주고자 했습니다.

 

커뮤니티 검색은 자주 사용하는 기능은 아닙니다. 하지만 필요할 때 꼭 있어야 하는 기능이죠. 다른 서비스의 검색 기능을 이용하실 때 ‘작성자’로 검색해야 하는데 ‘제목’으로 검색한 경험이 있으신가요? 그래서 검색할 때는 조건 없이 검색할 수 있고, 검색 결과 화면에서 조건을 선택하여 결과를 볼 수 있게 바꾸었습니다. 확실히 조건이 3가지 이하인 경우에는 picker보다 segment control이 명확한 것 같습니다. 커뮤니티 프로필 화면에서는 게시판에 따른 게시글과 댓글을 볼 수 있습니다. 이 또한 밖으로 빼내어 메뉴들을 한 번에 보여주게끔 했습니다. 신고하기 창에서는 Dropdown 형식으로 신고 사유를 선택할 수 있게 되어있습니다. 조건을 숨기는 대신 나열하여 depth를 줄였습니다.

 

 

버튼 UI

기존 커뮤니티에서 버튼임을 인지하기에 시각적으로 약한 부분이 있었습니다. 바로 글쓰기와 커뮤니티 검색 버튼이죠. 공간을 차지하며 중복된 정보를 제공하던 게시판의 이름을 없애고, 검색과 글쓰기 버튼을 위한 자리를 만들었습니다. 버튼임을 확실하게 인지하게끔 solid 스타일로 모양을 잡았습니다.

 

마치며

 

이번 프로젝트를 진행하면서 좋았던 점은 시작 전에 스스로 정리하는 시간을 가졌다는 점입니다. 기존 커뮤니티를 연구하고, 모바일 환경에 대한 리서치를 시간을 가지고 진행했죠. 디자인만 리뉴얼되는 프로젝트에서는 디자이너의 명확한 개선 목적과 기대 효과를 바탕으로 시작됩니다. 디자인 리뉴얼을 제시할 수 있는 사람은 디자이너뿐이니까요! 그래서인지 이전보다 확실한 목표 설정이 필요하다고 생각했습니다.

 

폰트 스타일 훔쳐보기

 

리서치를 하면서 다른 서비스의 소스를 훔쳐보는(?) 재미도 있었습니다. OP.GG 커뮤니티는 한국 서버에서만 가능하기 때문에 한국 유저가 가장 많이 사용하는 NAVER를 위주로 폰트를 조사했었죠. 폰트 사이즈나 행간을 작업하면서 적용해보고, 모바일로 테스트하면서 OP.GG에 맞는 텍스트 스타일을 가져가려고 했습니다.

 

스타트업은 디자인을 리뉴얼하는 데 많은 시간을 할애할 수 없는 환경입니다. 그래서 최대한 빠르고 효율적으로 이 프로젝트가 완성될 수 있도록 간단한 문서를 만들어 공유하고, 목업을 바로 테스트할 수 있는 환경을 만드는 것이 중요했죠. 사실 문서를 공유해도 적극적인 피드백이 들어오지는 않는데요, 이번에 인비전(invision)을 사용하여 테스트를 진행할 때는 비교적 많은 분이 피드백을 주셨습니다. 모바일이기 때문에 환경이 중요하기 때문이겠죠? 다음번에도 적극적으로 활용해야겠습니다.

 

아직 개발이 완료되지는 않았지만 되돌아보면 재밌게 작업한 프로젝트였습니다. OP.GG는 20개의 언어로 서비스를 하고 있기 때문에 디자인을 하는 데 제약이 있는 환경입니다. 단어를 기준으로 충분한 여백이 있어야 하죠. 그렇지 않으면 단어가 겹치거나 흐르거나 난리가 납니다. T T 그에 반해 커뮤니티는 아직 한국 서버만 운영 중이어서 한글만 테스트하면 되는 환경이었기에 편하게 작업했던 것 같습니다. 언젠가 외국 서비스를 진행하게 된다면 다시 고려해야겠지만… 리뉴얼이 완료되고 유저들이 보다 편리하게 커뮤니티를 이용했으면 하는 바람과 함께 글을 마칩니다.

 

 

커뮤니티 디자인에 관한 이전 글

OP.GG 커뮤니티 UI/UX #1 – 오버뷰와 리스트

OP.GG 커뮤니티 UI/UX #2 – 게시판과 댓글, 모바일 버전과 앞으로의 커뮤니티

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.