첫 웹사이트 작업기

BEST.GG는 UI 디자인을 시작하게 된 지 6개월 정도 되던 시점부터 만든 사이트입니다. (!) 신입 디자이너가 사이트를 만드는 일은 아마 흔한 일이 아닐 겁니다… 그래서 오늘은 BEST.GG 프로젝트를 시작하겠다고 들었던 당시의 기억을 되살려 글을 써보려고 합니다.

초기에 아무런 구상 없이 무작정 만들기만 했었던 디자인 시안을 다시 보면 무슨 생각으로 저렇게 했었지? 라는 생각이 들기도 하는데요… ㅎㅎ 사실 이 주제에 대해 제일 처음으로 써보려고 했지만, ‘BEST.GG –  전적 페이지 디자인’의 내용이 쓰기에 너무 재미있어서 이번 글을 늦게 내보내게 되었네요.

관점

고맙게도 BEST.GG 프로젝트를 시작한 지 얼마 지나지 않아 경험이 훨씬 많으신 UX 디자이너분이 오시게 되었고, 많은 부분이 바뀌게 되었습니다. 공감하실지도 모르겠지만… 디자인을 배우는 학생이셨다면 수없이 들어보셨을법한 말들이 있죠. 디자이너는 예쁘게 만드는 사람이 아니다. 사용자의 관점에서 바라보고, 어떻게 하면 더 편리한 경험을 제공할 수 있는지 고민해야 한다… 와 같은. 익히 이론적으로 알고 있는 내용이었고, 항상 그런 생각을 가지고 작업을 진행했다고 생각했습니다.

하지만 찬찬히 되돌아보면 위와 같은 생각을 거쳐 시작했던 작업이 그다지 많지 않았던 것 같습니다. 예전에 주니어 디자이너와 시니어 디자이너의 차이점에 관련된 그림을 본 적이 있습니다. 당시에는 어떤 의미인지 직접 와닿지 않았었는데, 이제야 그 의미를 차츰 알아가고 있네요.

https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e

그래서 이번 작업을 진행할 때는 페이지 하나하나를 따로 보던 시각에서 벗어나 사이트 전체를 보려는 구조적인 관점을 키우려고 노력했습니다. 무작정 Artboard를 만들어 그려내는 방식이 아니라 메모장이든 프레젠테이션이든 생각을 정리하는 시간이 중요하다는 것을 깨달았죠.

생각

이전에는 OP.GG의 간단한 화면만을 구상하는 일이 많았습니다. 그래서 웹 안에서의 flow, 페이지의 레이아웃, 색상 및 UI components 간의 관계와 같은 거시적인 측면을 놓치는 경우가 많았습니다. (얼마나 안일했던가 T T) OP.GG는 이미 몇 년 동안 가지고 있던 color scheme이 있었고, 사용되는 폰트의 종류와 크기가 어느 정도의 규칙을 가지고 있었습니다. 그래서 새로운 페이지나 기존의 페이지를 리뉴얼하게 되는 경우가 있으면 최대한 기존과 통일되도록 하는 것이 고정된 디자인 방향이었고, 그것을 바꿀 명분을 내세우지 못했죠.

하지만 BEST.GG는 완전 새로운 사이트입니다. 사이트를 만든다고 처음 들었던 당시를 생각해보면 약간 신이 났던 것 같습니다. 폰트, 색상부터 그리드까지 사이트 내의 규칙을 만들어가는 일은 정말 멋진 일이죠. 그러나 막상 시작하려고 하니 출발점을 찾을 수가 없었습니다! 대략 머릿속에 떠올랐던 생각들을 나열해보자면…

• max width는 어떤 기준으로 정해야 하지?
• 폰트는 뭘 써야 하나?
• 폰트 크기는 어느 정도가 적당할까?
• 폰트 색상에 variation을 준다면 무엇을 기준으로 해야하나?
• 많은 사람들(특히 게이머)에게 편안함을 주는 색상은?
• UI 요소 간 여백, margin, padding 값은 완전히 통일시켜야 하나? (가이드를 보면 여백과 margin, padding에 대한 값을 정해놓은 작업을 많이 볼 수 있는데, 실제로 디자인을 진행했을 때 모든 곳에 적용되는 것이 정말 가능한가)

우선 이런 고민을 다른 사람들도 분명 한 번쯤은 고민해봤을 거라 믿고, 프로젝트를 처음 시작할 때 디자인적으로 어떻게 접근해야 하는지 구체적으로 기록한 경험담을 찾아보았습니다. 그리고 나름대로 순서를 짜서 몇몇 고민을 해결하기도 했죠.

max width는 어떤 기준으로 정해야 하지?

Google Analytics의 도움을 받아 OP.GG를 사용하는 유저 중 41%가 1920×1080 해상도의 모니터를 사용하고 있다는 것을 알게 되었습니다. 그래서 Artboard의 기준을 1920×1080으로 잡았습니다. BEST.GG는 컨텐츠와 들어갈 항목들의 양이 무수히 많았기 때문에 넓은 width가 필요했습니다. 그래서 좀 넓은 영역인 1200px을 max width로 잡고 디자인을 시작했죠. 1366×768 사이즈의 노트북 유저도 10%나 차지하고 있었기 때문에 화면을 그릴 때마다 모니터에 따른 max height을 측정했고, 페이지에 처음 들어왔을 때 어떤 인상을 받을 수 있는지 확인하면서 작업했습니다.

폰트는 뭘 써야 하나?

BEST.GG는 숫자가 컨텐츠의 상당히 많은 부분을 차지하고 있습니다. 또한, 선수, 팀, 리그 이름이 모두 영어로 이루어져 있죠. 그래서 숫자의 가독성이 높으면서도 영어로 보이는 부분에서는 어느 정도의 안정감을 가진 폰트가 필요했습니다.

최종적으로 Helvetica가 적용되었습니다. Helvetica는 X-Height이 크기 때문에 가독성이 높았고, 짜임새 있는 구조를 바탕으로 보는 사람에게 신뢰감과 안정감을 주죠. BEST.GG와 잘 어울리는 폰트라는 생각이 듭니다.

많은 사람들(특히 게이머)에게 편안함을 주는 색상은?

대부분의 게임 사이트들은 어두운 background를 많이 사용합니다. 어두운 환경 속에서 게임을 즐기기 때문일까요… 생각해보면 방에서 불 끄고 모니터에 집중하면서 게임을 하는 것이 가장 편안한 환경이었던 것 같습니다. 하지만 BEST.GG는 데이터와 숫자가 많은 사이트죠. 가독성이 가장 중요했고, 가독성이 뛰어난 환경은 흰 바탕에 검은색 글씨를 써 내려 가는 것입니다. 그래서 어두움보다는 밝은 인상을 주는 방향으로 진행하게 되었습니다. 오픈한 지 6개월이 지난 지금 종종 어두운 모드를 요구하는 피드백이 있습니다. 결국, 게이머에게는 어두운 모드가 필수인 것일까요… BEST.GG에서 해결해야 할 과제 중 하나로 남아있습니다.

UI 요소 간 여백, margin, padding 값은 완전히 통일시켜야 하나?

작업이 완료된 디자인 스타일 가이드만 봤을 때는 마치 반드시 적용해야 하는 절대 규칙 같은 느낌이 있었습니다. 하지만 경험담을 살펴보면 모든 페이지에 동일한 규칙을 적용하기엔 무리가 있고, 굳이 완벽하게 적용하지 않아도 디자인 일관성을 유지하는데 지장이 없다고 판단한 결과들이 많이 있었습니다.

웹 사이트는 한 번 디자인해서 끝나는 결과물이 아닙니다. 계속해서 새로운 컨텐츠들이 추가되고 버전이 업그레이드되죠. 어느 정도 공통된 UI를 통해 구조적이고 신뢰성 있는 사이트라는 느낌을 주는 것은 중요한 부분입니다. 모든 것들은 UI의 큰 틀 안에서 세부적인 조각들을 차차 맞춰가는 과정의 결과물이라는 것이죠.

이런 과정에서 얻었던 가장 큰 경험은 많은 생각을 해볼 수 있었다는 것입니다. 프로젝트 초기가 아니라면 깊게 고민할 시간이 없었을 테니까요.

차차 디자인 경험이 쌓아가면서 드는 생각은 ‘시간은 한정되어 있고, 어떤 일에 투자하는 만큼 다른 일에 투자할 시간은 없다‘는 것입니다. 초반에는 이것도 하고 싶고 저것도 하고 싶고, 하고 싶은 만큼 다 할 수 있다는 자신감에 차 있었는데 결과적으로 시간이라는 것을 무시할 순 없더군요. 어떤 일이든 원하는 만큼 모든 것을 투자할 수 없습니다. 어느 때보다 상대적으로 시간이 많은 프로젝트 초기에 이런 고민을 해보는 것도 중요한 경험이었죠.

마치며

BEST.GG는 지금 오픈한지 반년이 되어갑니다. (시간이 너무 빠르다…) 프로젝트를 시작한 지는 거의 1년 정도 된 것 같네요. 지금도 개발이 진행 중인 상태이고, 몇 주 뒤면 새로운 페이지가 생기게 됩니다. 지금 다시 보면 바꾸고 싶은 부분이 있기도 해요. Standings 같은 경우 6:6칼럼 구조를 활용한 페이지인데, 화면을 2분할로 정확하게 나누다 보니 시선의 무게를 어느 쪽에 먼저 둬야 할지 애매한 부분이 있기도 하죠. 데이터를 많이 다루는 화면에서 메인 공간과 서브 공간의 애매한 분리는 위험하다는 생각이 들었습니다. 다음에 시간이 되면 개선하고 싶은 페이지 중 하나죠.

BEST.GG를 작업하면서 크게 느낀 점은 역시 사람은 자신이 좋아하는 것을 해야 한다는 것입니다. 어떻게보면 약간 팬심으로 사이트를 만든 느낌이 있습니다. ㅎㅎ 그만큼 즐겁게 작업했고, 후에 사이트가 어느 정도 완성의 단계에 이르면(BETA 딱지를 띠게 된다면…) 그동안의 작업에 대한 객관적인 평가를 하는 시간도 있어야 할 것입니다. 회사의 성장에 도움이 되는 디자인을 했는지… 도움이 됐다면 어떤 방식으로 되었는지… 회사의 특성상 모든 프로젝트는 cost가 있고, 특히 스타트업이라면 시간을 투자한 만큼의 성장에 대한 결과가 있어야겠죠.

BEST.GG는 작업 기간이 오래 걸렸던 것만큼 쓸 내용이 많은 것 같습니다. 다음에는 구조적인 부분을 위주로 회고하고자 합니다. 이전에는 글을 많이 쓰지 않았는데, 이렇게 작업에 대한 회고 겸 글을 쓰다보니 나름대로 정리도 되고 기록으로 남는다는 사실이 좋네요. 글을 쓴다는 것은 행동 자체에 그 의의가 있는 것 같습니다. 지금 이 글을 읽고 계시는 여러분들도 한 번 써보시는 게 어떨까요?