비주얼 디자인

화면을 만드는 일은 오랫동안 기능이 다 돌아간 뒤에 겉모습을 입히는 마지막 단계로 취급받았습니다. 개발이 끝나면 디자이너에게 넘겨 색을 입히고 여백을 다듬게 하는 순서였고, 그 작업을 부르는 말도 꾸미기나 예쁘게 만들기였습니다. 걸리는 것은 순서가 아니라 판단 기준이 없다는 쪽이었습니다.

기준이 없으니 시안 검토 자리는 취향 싸움이 됐습니다. 나오는 말은 대개 "좀 더 시원했으면 좋겠어요" 나 "이 색은 촌스러운데요" 같은 문장이고, 받는 쪽도 "그럼 파란색으로 바꿔 볼게요" 말고는 답할 말이 없습니다. 어느 쪽도 왜 그래야 하는지를 대지 못하니 대개 목소리가 크거나 직급이 높은 사람의 취향이 이기고, 다음 화면에서 똑같은 논쟁이 처음부터 다시 시작됩니다. 한 제품 안에서 파란색 계열이 아홉 가지로 늘어나는 것도 이 지점에서 벌어지는 일입니다. 매번 다른 사람의 취향이 이겼기 때문입니다.

더 큰 손해는 화면 쪽에서 났습니다. 필요한 정보가 다 들어 있는데 정작 사용자는 못 찾는 화면이 계속 나왔습니다. 문서 목록 위에 새 문서 만들기와 파일 가져오기와 템플릿 고르기와 휴지통이 같은 크기 같은 회색으로 나란히 놓여 있으면, 처음 들어온 사람은 넷을 다 읽어야 하고 그중 셋은 지금 자기에게 필요 없는 버튼입니다. 만든 쪽은 기능을 빠짐없이 넣었으니 할 일을 했다고 여기지만, 쓰는 쪽은 무엇부터 눌러야 할지 고르지 못한 채 창을 닫습니다. 화면에 있는 것과 사용자가 본 것이 다르다는 사실이 이때는 아무 숫자로도 잡히지 않았습니다. 버튼은 정상으로 떠 있었고 오류 기록도 비어 있었으니 담당자가 볼 수 있는 화면에서는 모든 것이 제대로였습니다. 그래서 이 문제는 대개 사용자를 옆에서 지켜보다가 그 사람이 한참 화면을 훑고도 아무것도 누르지 않는 장면을 보고 나서야 발견됐습니다.

비주얼 디자인은 이 판단을 취향에서 떼어 내려고 붙인 이름입니다. 색과 크기를 고르는 목적을 아름다움이 아니라 읽히는 순서에 둔 것입니다. 한 화면에서 무엇을 가장 먼저 보게 할지를 먼저 정하고 나면 나머지 결정은 그 순서를 따르는 계산이 됩니다. 그러면 질문이 "이 색이 예쁜가" 에서 "이 버튼이 첫 번째로 읽혀야 하는가" 로 바뀌고, 뒤쪽 질문에는 팀이 답을 맞춰 볼 수 있습니다. 같은 이름 아래 모인 원리와 요소는 전부 그 순서를 만들어 내는 수단입니다.

비주얼 디자인 아래 용어는 두 갈래입니다. 무엇을 하려는지를 말하는 원리가 넷이고, 그 원리를 실제로 구현하는 재료인 요소가 일곱입니다. 원리는 목적이고 요소는 수단이라 한 원리를 여러 요소로 구현할 수 있고, 한 요소가 여러 원리를 동시에 떠받치기도 합니다. 시안을 두고 말이 엇갈릴 때 원리 쪽 이름을 먼저 대면 논의가 취향으로 흐르지 않습니다.

원리 넷은 화면을 읽는 사람의 눈이 어떻게 움직이는지를 다룹니다.

1. 시각적 위계 — 무엇을 먼저 보게 할지 정해 주는 구성입니다. 사람은 화면을 왼쪽 위부터 차례로 읽지 않고 크고 진하고 튀는 것부터 봅니다. 그 성질을 이용해 가장 중요한 것을 가장 크고 진하게 두는 일이라, 나머지 세 원리는 이 순서를 만들어 내는 방법에 가깝습니다.
2. 여백 — 요소와 요소 사이를 비워 두는 공간입니다. 빈자리는 낭비처럼 보이지만 실제로는 묶음을 만듭니다. 제목과 본문 사이가 8픽셀이고 본문과 다음 제목 사이가 32픽셀이면 읽는 사람은 아무 설명 없이도 그 둘이 한 덩어리라는 것을 압니다. 반대로 간격이 전부 16픽셀로 같으면 열 줄이 그냥 열 줄로 보입니다.
3. 대비 — 밝기나 크기나 굵기의 차이로 구분을 만드는 일입니다. 차이는 크게 벌리거나 아예 없애야 뜻이 생깁니다. 본문이 14픽셀인데 제목이 16픽셀이면 어중간해서 둘 다 본문처럼 읽히고, 24픽셀로 올리면 제목으로 읽힙니다. 글자색과 배경색의 밝기 차이는 읽을 수 있느냐까지 걸리는 문제라 눈으로만 고르지 않고 수치로 확인합니다.
4. 정렬 — 요소의 기준선을 맞춰 두는 일입니다. 화면이 어수선해 보이는 이유는 대개 색이 아니라 왼쪽 끝이 2픽셀씩 어긋나 있기 때문입니다. 기준선을 하나로 모으면 보이지 않는 선이 생기고, 그 선이 사용자에게 여기까지가 한 묶음이라는 신호를 줍니다.

요소 일곱은 그 원리를 실어 나르는 재료입니다. 원리보다 손에 잡히는 대상이라 시안에서 바로 고칠 수 있는 자리이기도 합니다.

1. 타이포그래피 — 글자를 다루는 설계 전부입니다. 서체를 고르는 일만이 아니라 크기와 굵기와 줄 간격과 한 줄에 들어갈 글자 수까지 포함합니다. 제품 화면의 거의 모든 정보가 글자로 전달되므로 위계를 만드는 데 가장 자주 쓰이는 요소입니다.
2. 컬러 — 색으로 의미와 인상을 전하는 설계입니다. 빨강은 위험, 초록은 완료처럼 이미 굳은 약속을 따르는 쪽과, 회사가 자기 색을 정하는 쪽이 함께 들어 있습니다. 강조색은 한 화면에 하나만 두는 것이 기본입니다.
3. 레이아웃 — 요소를 화면 위 어디에 둘지 정한 규칙입니다. 화면을 몇 칸으로 나눌지, 어느 칸에 무엇을 얹을지, 창이 좁아지면 어떻게 접을지를 여기서 정합니다. 위치 자체가 위계라서 같은 버튼도 맨 위에 두면 중요해 보이고 맨 아래에 두면 부가 기능처럼 보입니다.
4. 아이코노그래피 — 아이콘의 형태와 규칙을 한 벌로 정한 체계입니다. 아이콘 하나를 잘 그리는 일이 아니라 선 굵기와 크기와 모서리 처리를 서른 개가 똑같이 따르게 만드는 일입니다. 뜻이 명확하지 않은 아이콘은 글자를 함께 붙입니다.
5. 일러스트레이션 — 그림으로 설명과 분위기를 더하는 요소입니다. 목록이 비어 있는 화면이나 오류 화면처럼 글자만으로는 딱딱한 자리에 들어가고, 여러 단계를 거치는 개념을 한 장으로 보여 줄 때도 씁니다.
6. 엘리베이션 — 그림자와 층으로 요소의 높낮이를 표현한 것입니다. 무엇이 앞에 떠 있고 무엇이 뒤에 깔려 있는지를 알려 주는 신호라, 지금 열린 창이 화면 전체를 막고 있는지 아니면 그 아래를 계속 쓸 수 있는지를 그림자 하나로 구분해 줍니다.
7. 코너 반경 — 모서리를 둥글린 정도입니다. 값 하나짜리 사소한 결정처럼 보이지만 제품 전체의 인상을 가장 빠르게 바꾸는 값이고, 버튼과 카드와 입력창이 서로 다른 값을 쓰면 같은 제품이 아닌 것처럼 보입니다.

두 갈래는 한 방향으로 이어집니다. 먼저 이 화면에서 무엇이 첫 번째인지를 정하고, 그 순서를 만들어 낼 방법을 원리에서 고르고, 실제 값은 요소에서 집습니다. 첫 번째로 읽혀야 할 버튼이 정해졌으면 크기와 색으로 차이를 벌리고 주변을 비워 혼자 떠 있게 만드는 식입니다. 순서를 거꾸로 밟으면 값부터 고르게 되고, 그때부터는 왜 그 값인지를 설명할 근거가 없어 다시 취향 논쟁으로 돌아갑니다. 이렇게 정한 값을 화면마다 새로 고르지 않도록 색과 글자 크기와 간격을 한 벌로 묶어 문서에 박아 둔 것이 디자인 시스템이고, 비주얼 디자인의 결정은 대개 그 문서 안에 자리를 잡습니다.

"여기 위계가 무너졌어요. 버튼 셋을 다 강조색으로 쓰셨네요."

강조가 셋이면 강조가 없는 것과 같으니 하나만 남기자는 말입니다.

"간격만 8의 배수로 맞춰도 훨씬 정리돼 보일 거예요. 지금은 12랑 10이랑 14가 섞여 있어요."

요소 사이 거리가 제각각이라 어수선해 보이니 값을 한 벌로 통일하자는 뜻입니다.

"이 회색은 배경이랑 대비가 3 정도라 밝은 데서는 안 보입니다."

밝기 차이가 기준에 못 미쳐 읽기 어렵다는 지적입니다. 본문 글자는 배경과 4.5배 이상 차이를 두는 것이 통용되는 선입니다.

페이지덱에서 이 이름이 실제로 값을 한 것은 문서 목록 화면을 고칠 때였습니다. 가입한 지 하루가 지나도 문서를 한 건도 만들지 않은 사람이 절반을 넘었는데, 지현이 기록을 뒤져 봐도 오류도 없고 화면이 안 뜬 것도 아니었습니다. 민서가 화면을 열어 놓고 센 결과 목록 위에 같은 크기 같은 회색 버튼이 다섯 개 놓여 있었습니다. 새 문서, 가져오기, 템플릿, 폴더 만들기, 휴지통이 전부 같은 무게로 보였습니다.

민서는 기능을 지우지 않고 순서만 매겼습니다. 새 문서 만들기 하나를 파란 배경에 한 단계 큰 글자로 올리고, 나머지 넷은 테두리 없는 회색 글자로 내리고, 그 묶음과 목록 사이를 24픽셀 띄웠습니다. 태오가 "쓰는 기능을 숨기는 것 아니냐" 고 물었고, 민서는 넷 다 같은 자리에 그대로 있으며 바뀐 것은 무엇을 먼저 읽는지뿐이라고 답했습니다. 개편 뒤 첫날에 문서를 만든 비율이 눈에 띄게 올랐고, 나머지 네 버튼을 누른 횟수는 거의 줄지 않았습니다. 지현은 이 결과를 두고 화면에 무엇이 있느냐와 사용자가 무엇을 보느냐는 다른 질문이라고 정리했습니다.

가장 흔한 오해는 비주얼 디자인을 다 만든 화면에 마지막으로 입히는 옷으로 보는 것입니다. 일정표에서 이 작업이 대개 개발 앞뒤에 짧게 붙어 있고, 결과물이 색과 서체처럼 눈에 보이는 것이라 나중에 바꿔도 될 듯 보이기 때문입니다. 실제로는 무엇을 먼저 읽게 할지를 정하는 일이라서 화면에 무엇을 넣을지 고르는 단계와 같이 갑니다. 여덟 개 항목을 다 넣기로 이미 정해 버린 화면에서는 어떤 색을 써도 첫 번째가 만들어지지 않습니다. 이 순서를 미루면 개발이 끝난 뒤에야 항목을 덜어내야 한다는 사실이 드러나고, 그때는 화면 하나가 아니라 그 항목에 걸린 기능과 문구와 안내까지 함께 물러야 해서 처음보다 몇 배가 듭니다. 그래서 시안을 그리기 전에 이 화면에서 사용자가 할 일이 무엇인지부터 한 문장으로 적어 두는 팀이 많습니다. 그 문장이 있으면 항목을 덜어낼 근거가 생기고, 없으면 요청받은 항목이 전부 화면에 남습니다.

강조를 늘릴수록 눈에 잘 띈다고 보는 오해도 자주 나옵니다. 하나를 키웠더니 잘 보였으니 둘을 키우면 둘 다 잘 보일 것 같고, 화면마다 담당자가 자기 항목을 키워 달라고 요청하면 거절할 근거도 마땅치 않습니다. 그런데 사람의 눈은 절대값이 아니라 주변과의 차이를 읽습니다. 다섯 개를 모두 진한 파란색으로 만들면 다섯 개가 다시 평평해지고, 사용자는 처음처럼 전부 읽거나 아무것도 읽지 않습니다. 이 상태를 그냥 두면 다음번에 정말 급한 안내가 생겼을 때 쓸 수 있는 자리가 남아 있지 않습니다. 강조는 화면마다 하나씩 배정된 자원이라고 보고, 새 강조를 넣자는 말이 나오면 기존 강조 하나를 내리는 쪽으로 이야기를 돌리는 편이 낫습니다.