디자인을 하기 전에.
정리된 상태로 디자인을 준비하기
원티드에서 디자이너 구인을 보다가 재미있는 문구를 발견했다.
"아래 과제 중 하나를 골라서 제출해주세요."
무슨 과제일까 봤다. 페이지 하나를 골라서 UI/UX Design을 개선하라는 것이었다.
그래서 무슨 페이지인가 가서 봤다.
페이지를 보자, 여러 가지 생각이 들었다. 이게 UI/UX를 개선하기가 어려운 상태였다. 개선이라고 하면, 무언가 되어 있는 상태에서 작업을 시작해야 하는데, 이 작업은 근본적인 부분을 정리하고 들어가야 하는 작업이었다.
몇 군데 회사의 웹사이트를 봤는데, 이 회사는 특히 정리가 많이 필요한 상태였다.(디자인이 아니다.) 일반적인 웹사이트라고 하면, 보통 정해진 포맷이 있다. 회사 소개를 간략히 하고, 상품을 알려주고, KPI 수치를 표시하는 일반적인 포맷에 가깝게 정리 했다.
정리를 하기 위해 색과 폰트부터 다시 결정해야 했다. 기본적인 디자인이 흑과 백을 많이 사용되었기 때문에, 주요 배색이 배경색인 흰색과 비교되었을 때, 진한 편을 선택했다. 색을 결정한 후 폰트는 MAC의 기본 폰트 Apple SD 산돌고딕 Neo로 작업했다.
회사의 이름과 정보는 모자이크 처리했다.
전반적인 작업 결과로 상단 영역의 낭비를 줄였다. 강조하고 싶은 것처럼 보이는 문구를 좀 더 크게 키워줬다. 그 결과 각 코스의 정보를 좀 더 일찍 볼 수 있다. 당연한 내용이지만, 처음 보이는게 중요하다. 한 미디엄의 블로그는 글을 통해서 사용자의 자신이 보고 있는 스크린의 크기 기준으로 첫번째 스크린과 스크롤한 두번째 스크린에서 74%의 시간(전체 페이지를 보는 시간 대비)을 소모한다고 주장했다.
전반적으로 공간낭비를 줄이고, 여백을 적절하게 조정 하였다. 여백을 조정한 결과 전체 페이지의 길이를 가로폭 1920x8281px에서 높이를 6770px로 줄였다. 전체 길이만 줄어든 것이 아니라, 처음 이미지 영역이 가지고 있던 여백을 줄이고, 이미지와 글자의 구분을 명확히 해서 타이틀을 읽기 쉽게 했다.
카드 디자인이 자주 쓰이는데, 카드의 비율을 좀 더 카드에 맞게 변경하고, 글자 크기로 정보의 형태를 나누었다. 버튼의 크기도 통일해서 다시 배치하였다.
마찬가지로 리뷰 텍스트도 폭을 정리해서 상품 배치와 비슷한 방향으로 정렬하였다.
주요 KPI에서 숫자와 단위를 분리해서 분명하게 표현했다. 이전에는 영역의 구분이 불명확했기 때문에 배경색을 구분하여 차이를 두었다.
중요한 내용도 좌우 여백을 줄이고, 간결하게 다시 표현했다.
풋터는 개인적으로 신경을 많이 쓰는 부분이기 때문에, 레이블 구분을 좀 더 분명하게 했다. 좌우의 여백과 위 아래 여백의 균형을 맞추었다. 메일의 경우는 눈에 덜 띄지만, 크기를 키웠다.
정리를 전반적으로 한 후, 사이트에서 필요한 여러가지 요소와 개선점이 보였다. 여러 가지를 보여주고 싶은 의도는 충분히 느껴지지만, 그런 의도를 좀 더 명확하게 하려면, 정리 후에 보이는 점들을 개선해서 좀 더 특징을 만든다면, 좋은 점들을 발견하면서 다른 모습을 만들어 갈 수 있을 것 같았다.
대상이 된 웹사이트는 퍼블리싱의 제한 안에서 디자인 되었고, 콘텐츠는 그렇게 만들어진 디자인 안에서 제한되었다. 이러한 과정은 악순환을 불러온다. 디자인은 가치를 설명하기도 하는데, 대상 사업은 고객에게 투자한다는 모토를 가지고 있다.(그리고 이건 웹사이트에 공개된 내용을 상당히 꼼꼼히 봐야 알 수 있다.) 그런데 고객이 대면하는 웹사이트에 어떤 방식이든 투자를 하지 않는다는 것은 브랜딩 측면에서 좋지 않은 메시지를 줄 수 있다는 생각이 든다.
총 작업 시간은 6~8시간 정도 소요되었으며, 이 정리 작업을 진행하면서 이게 적합한 과제인가 하는 생각이 들었다. 정보를 그룹으로 묶고, 분류한 상태로 정리가 되어 있지 않으면, 디자이너는 이 정보의 우열을 가리거나 핵심을 이해하기 어렵다. 그렇게 되면 정말 다양한 방향으로 디자인이 진행된다. 그러면서 아주 멋진 크리에티브가 나오기도 하지만, 대부분은 길을 잃는다. 크리에이티브가 나왔다고 하더라도, 그걸 현실의 한계에서 구현하기 어려워진다.
베르나르 베르베르 단편 중에 이런 구절이 기억난다. 천장을 높이기 위해서는 기둥을 튼튼하게 쌓는 것이 중요하다. 이상적인 것을 추구하려면, 현실의 기반도 그만큼 준비되야 하는 것이다.
가급적이면, 분명한 형태가 갖춰진 상태에서 예상할 수 있는 개선점을 만들어낼 수 있어서 퀄리티를 비교해 볼 수 있을 것 같다.
