오늘은 BEST.GG의 구조에 대해서 얘기해보려고 합니다. 페이지의 전체적인 레이아웃과 내용에 맞는 UI 구성을 잡아가면서 BEST.GG만의 규칙을 만들어가는 과정이었죠.
1. 그리드(Grid)
BEST.GG의 구조를 짤 때 가장 중요시했던 부분은 통일된 그리드를 통해 전반적인 사이트의 구성을 탄탄하게 가져가고자 함이었습니다. 작업하면서 몇 가지 불가피한 예외사항들이 있어 100% 완벽하게 적용했다고 하기에는 어렵지만, 작업에 들어가기에 앞서 그리드를 정해놓았기 때문에 BEST.GG의 구조가 주는 전체적인 느낌이 통일감을 유지할 수 있었던 것 같습니다.
그렇다면 어떤 Grid 시스템을 가져갈 수 있을까요? BEST.GG는 8pt 그리드 시스템을 가지고 있습니다. 8pt 그리드 시스템은 UI 요소의 크기나 여백, 간격 등을 늘리거나 줄일 때 8pt씩 조정하기 때문에 붙여진 이름입니다.
8pt 그리드 시스템에 관한 글
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
디자이너들은 크기와 여백의 요소에 짝수를 사용하여 다양한 크기의 디바이스들에 맞는 일관된 디자인을 적용했습니다. 그리고 인기 있는 화면 크기의 대다수(960px, 1080px…)는 8로 나눌 수 있고, 화면에 쉽게 들어맞죠. 8pt 그리드 시스템을 바탕으로 UI 요소들 간 효율적인 관리를 통해 사이트의 전반적인 퀄리티가 저해되지 않고, 디자인 작업 시 의사 결정을 최소화할 수 있게 되겠죠. 그래서 BEST.GG에 이 시스템을 적용해보게 되었습니다.
2. 레이아웃 (Layout)
BEST.GG의 페이지 상단에는 full width로 면적이 크고 진한 색상의 타이틀 영역이 있고, 그 아래로 2가지 영역으로 구분된 칼럼들이 존재합니다. 상단에서 시선을 먼저 잡아주어 페이지의 주인이 누구인지와 어떤 내용을 말할 것인지를 보여주고, 하단으로 갈수록 시선의 흐름이 자유롭게 이어지도록 했습니다.
하단 영역은 크게 2가지 영역으로 구분되어 있습니다. 우측에 메인 영역을 가지고 있고, 좌측에 서브 영역을 배치한 구조이죠. 우측에 메인 영역이 있는 이유는 사람들이 정보를 읽을 때 시선이 왼쪽에서 오른쪽으로 움직이기 때문입니다. 우측 공간에 유저의 니즈가 높은 중요한 정보를 배치하여 시선을 자연스럽게 유도했죠.
BEST.GG는 전체적으로 큰 덩어리의 요소들이 상단에 배치되고 그 아래로 점차 작은 덩어리의 요소들이 자리 잡는 구성을 가지고 있습니다. 한 페이지 내에 많은 정보를 담고 있으므로 화면에서 정보의 우선순위를 확실히 구분할 수 있도록 했습니다.
3. Style Guide
3-1. Typography
BEST.GG는 한글로는 맑은 고딕, 영문으로는 Helvetica를 사용하고 있습니다. 많은 정보를 전달할 때 중요한 가독성을 중심으로 폰트를 정했죠. Helvetica의 짜임새 있는 구조는 보는 사람에게 신뢰감과 안정감을 주기 때문에 적합한 폰트라고 생각합니다. 또한, 맑은 고딕은 윈도우 기본 글꼴로 범용성을 가지고 있습니다. 큰 사이즈의 맑은 고딕 폰트는 자간이 다소 넓어 벙벙한 느낌을 주는데, 타이틀로 들어가는 큰 사이즈의 폰트는 대게 선수 혹은 팀의 이름에만 적용되어 영문으로만 보이기 때문에 큰 문제가 되지 않았습니다.
3-2. Color Palette
BEST.GG의 main 색상은 한색입니다. 한색이 주는 시원한 느낌은 이스포츠의 무대를 잘 살릴 수 있는 색상이죠. 차분한 색상보다는 활력이 넘치고 생기가 느껴지는 톤의 blue와 green을 선택했습니다. BEST.GG가 다루는 영역인 이스포츠가 젊은 연령대가 즐기는 분야이기도 하고, 대부분의 경기 무대에서 푸른색의 조명이 자주 사용되기 때문입니다.
BEST.GG의 전반적인 색상 구성은 밝은 톤의 배경에 어두운 톤의(주로 black, gray 계열의) 텍스트 색상을 주로 사용했습니다. 배경이 되는 공간이 밝은 톤일 경우 blue 색상을, 어두운 색상이 배경이 되는 공간에는 green 색상을 활용하여 main 색상이 전체적인 구조에 잘 어울리도록 했습니다. 주로 사이트 내 유저들에게 액션을 요구하는 UI 요소들에 사용되었습니다.
BEST.GG에는 main 색상에 버금가는 중요도와 비중을 가진 색상이 필요합니다. 게임을 다루는 서비스 성격상 게임의 결과에 따른 데이터를 색상을 활용하여 보여주기 위함이죠. 리그 오브 레전드의 특성상 전적에서 게임의 승리와 패배에 대한 구분이 확실해야 합니다. 이전 글에서 설명했듯이 텍스트만으로 결과를 보여주기보다는 배경 색상에 승리, 패배를 녹여내는 것이 좋다고 생각했기 때문에 additional color로서 색상 패턴을 만들었습니다.
3-3. Button
버튼 UI에도 기존 8pt 그리드 규칙에 따라 8배수의 마진과 여백 값을 적용했습니다. 작은 사이즈의 버튼에는 2px, 큰 사이즈의 버튼에는 5px의 코너값을 적용하여 크기가 늘어나도 비율에 맞게 값을 적용했습니다. 버튼 형식은 라인형 버튼과 솔리드형 버튼이 있습니다. 한 공간에 여러 개의 버튼이 배치될 때, 중요도에 따라 시각적인 강조를 달리할 필요가 있기 때문이죠. 제일 중요한 기능을 가진 버튼에 솔리드 스타일을 적용해서 기능의 중요도를 보여줍니다. 유저의 액션을 유도해야 하는 회원 가입 같은 버튼에 사용되죠. 라인형 버튼은 솔리드형보다 좀 더 sub 기능을 담당합니다. BEST.GG에서는 주로 필터 버튼에 적용되었습니다.
4. Tab
전적 디테일 뷰에서 탭의 디자인을 어떻게 가져갈 것인지에 대한 이슈가 있었습니다. 탭 디자인을 작업할 때 항상 고민했던 것은 현재 위치를 강조할 것인가 아니면 다른 버튼들을 눈에 띄게 하여 유저에게 누르도록 하게끔 유도해야 하는가였습니다.
최근 UI 디자인을 보면 현재 위치에 좀 더 무게를 두는 디자인이 많습니다. 텍스트에 bold를 적용하고, 하단에 3px 정도의 라인을 그어 확실하게 보여주죠. 그에 비해 다른 메뉴에는 스타일을 적용하지 않고 그대로 두거나, 오히려 색상을 옅게 하여 텍스트가 잘 안 보이는 경우도 많습니다. A 같은 경우가 그 예시죠.
BEST.GG는 한 페이지에 정보가 아주 많은 구조이고, 안타깝게도 다 펼쳐서 보여줄 수 없으므로 정보들을 탭 형식으로 나누어 보여주는 경우가 많습니다. 첫 번째 탭이 default로 열려있다고 해도 유저들이 나머지 탭을 열어 더 많은 정보를 볼 수 있게끔 유도해야 했죠. 그래서 나머지 탭 메뉴의 텍스트를 옅게 하지 않고 완전한 흰색을 사용하기 위해 B 안을 만들어보았습니다. 그리고 텍스트가 길어질 경우 각 메뉴의 구분이 확실하지 않을 것 같아 C 안처럼 메뉴 사이에 짧은 라인을 적용하기도 했죠. 하지만 이렇게 데이터가 많은 페이지에서 텍스트만으로 누를 수 있는 버튼임을 인지할 수 있을까에 대한 의문은 사라지지 않았습니다.
그래서 D 안처럼 모든 메뉴에 탭 형식의 디자인을 적용하게 되었습니다. 탭 디자인을 적용하되, 선택된 탭과 선택되지 않은 탭의 구분을 확실하게하여 유저에게 현재 보고 있는 정보의 위치가 어디인지 명확하게 전달할 수 있었죠. 또한, 나머지 메뉴들도 탭 형식으로 보이기 때문에 기존 텍스트 형식보다 누를 수 있다는 인지가 쉽게 가능했습니다. BEST.GG의 탭 메뉴들은 충분한 width가 있는 경우 위와 같은 형식의 디자인을 적용했습니다. 다만 본문 5번의 Card 타입에서는 width가 한정적이고 좁으므로 선택된 부분에만 탭 형식의 디자인을 적용하는 예외가 있었죠. 대신 Card 타입에서는 메뉴의 가짓수가 대게 2개였기 때문에 버튼 인지에 대한 문제가 크지 않았습니다.
5. Card
BEST.GG의 페이지 좌측에는 sub 내용을 담는 카드들이 있습니다. 선수의 주력 챔프, 이스포츠 뉴스, 선수 및 팀 순위 등 각 페이지에 맞는 정보들을 가지고 있죠. BEST.GG의 데이터 특성상 카드 안에서 여러 가지 필터를 통한 정보의 구분이 필요했습니다. 그래서 명확한 명칭과 함께 통일된 UI 요소들을 가져가고자 몇 가지 규칙을 정했습니다.
- 가장 상위 항목는 탭 형식으로 보여준다. – Tab + Button
- 항목이 4가지 이상인 경우, 버튼 형식으로 보여준다. – Button
- 한 카드 내에서 탭 또는 버튼 필터를 중복으로 사용하지 않는다.
BEST.GG의 카드들은 탭 형식, 버튼 형식, 탭+버튼 형식, 탭과 버튼이 모두 없는 형식 4가지가 있습니다. 위 규칙들을 바탕으로 공통된 스타일을 만든 후, 각 기능에 맞는 카드 포맷을 만들었습니다.
마치며
아쉽게도 BEST.GG의 모든 영역 구석구석에 위 이론들이 완벽하게 적용된 것은 아닙니다. 예를 들어, 반드시 영어로만 표현될 4글자의 단어가 좁은 영역에 들어가야만 한다면 8~9px의 작은 사이즈를 사용할 수밖에 없겠죠. 또한 버튼의 마진을 8배수의 px로 잡기에는 공간이 부족한 경우도 있었죠. 처음부터 충분한 공간을 가지고 요소를 배치하기에는 정보량이 너무 많은 사이트였고, 그만큼 유저들의 니즈가 많은 분야이기도 합니다. 앞으로 경험이 계속 쌓인다면 이런 이슈들에 대응할 수 있는 구조를 만들 수 있을까요…?
지금까지 BEST.GG의 구조에 대해서 정리해봤습니다. 디자인 look&feel을 위한 컨셉 작업 단계일 때는 사이트의 전체적인 분위기에 집중해서 작업했지만, 개발에 들어가는 단계 바로 직전에서는 UI의 일관된 규칙과 통일감이 주는 중요도가 더 컸습니다. 그래서 전반적인 사이트의 구조에 대해 정의하는 시간이 큰 의미가 있었죠. 회사의 환경 특성상 개발 단계에서도 디자인 수정이나 새로운 정보가 추가되거나 하는 경우가 많았는데, 정보에 따른 UI 체계를 갖추고 작업을 진행하여 이후에 들어오는 업무에 대해서도 기존 구조를 해치지 않는 선에서 효율적인 수정 및 개선을 할 수 있었습니다.
