일러스트레이션

한동안 제품 화면에 들어가는 그림은 전부 이미지라는 한 단어로 불렸습니다. 아이콘도 이미지, 사진도 이미지, 손으로 그린 삽화도 이미지였습니다. 이름이 하나뿐이니 각각이 맡는 일도 구분되지 않았습니다. 뜻을 압축해 작게 반복하는 자리에 풍경 사진이 들어가고, 절차를 설명해야 하는 자리에 아무 의미 없는 장식 그림이 들어갔습니다.

페이지덱에서 이 구분이 없어서 생긴 대표적인 일이 문서 목록 화면이었습니다. 새로 가입한 사람에게는 목록에 아무것도 없으니 화면 한가운데가 그냥 비어 있었습니다. 사용자는 아직 안 불러온 화면으로 읽고 새로고침을 몇 번 하다가 문의를 넣었습니다. 기능은 멀쩡했지만, 비어 있는 상태를 비어 있다고 말해 주는 것이 화면에 없었습니다.

민서가 그 자리에 안내 그림과 한 줄 문구를 제안했을 때 처음 돌아온 반응은 꼭 필요하냐는 질문이었습니다. 그림은 꾸미는 일로 여겨졌고 꾸미는 일은 바쁠 때 맨 먼저 빠졌습니다. 그림이 무엇을 하는지 가리킬 이름이 없으니 논의가 취향 싸움으로 흘렀습니다.

일러스트레이션이라는 이름이 자리를 잡으면서 그 논의의 모양이 바뀌었습니다. 이 그림이 장식인지 설명인지, 설명이라면 무엇을 대신 말해 주는지를 묻게 됐기 때문입니다.

그림이 글보다 먼저 읽힌다는 성질을 이용합니다. 사람은 화면을 열었을 때 문장보다 형태와 색을 먼저 알아보고, 일러스트레이션은 그 짧은 순간에 이 화면이 어떤 상태인지를 알려 줍니다.

맡는 일은 둘입니다. 하나는 설명입니다. 여러 단계를 거치는 개념이나 요소 사이의 관계처럼 문장으로 풀면 다섯 줄이 되는 것을 한 장으로 보여 줍니다. 다른 하나는 분위기입니다. 같은 안내라도 그림의 선과 색에 따라 딱딱하게도 친근하게도 읽히고, 이 인상이 브랜드가 스스로 규정한 성격과 표현 체계인 브랜드 아이덴티티와 이어집니다.

실제로 다룰 때 정하는 것은 넷입니다.

1. 스타일을 한 벌로 묶습니다. 선 굵기, 쓸 수 있는 색의 범위, 사람을 그리는 방식 같은 것을 미리 정해 두고 새 그림을 그때 기준에 맞춥니다. 화면마다 스타일이 다르면 서로 다른 제품을 옮겨 다니는 느낌을 줍니다. 그래서 재사용 가능한 규칙과 부품으로 묶어 둔 디자인 시스템 안에 일러스트 규칙을 함께 둡니다.
2. 화면에서 몇 번째로 읽히게 할지 정합니다. 시선을 끄는 힘이 세기 때문에 크기를 키우면 정작 눌러야 할 버튼보다 먼저 읽힙니다. 안내 그림을 버튼보다 작게 두고 여백으로 눌러 주는 조정이 여기서 나옵니다.
3. 형식을 고릅니다. 선과 면으로 이루어진 그림은 확대해도 가장자리가 깨지지 않는 형식으로 내보내고, 그림자와 질감이 많은 그림은 사진과 같은 형식으로 내보냅니다. 어두운 배경을 기준으로 구성한 다크 모드를 지원한다면 배경색이 바뀌었을 때 선이 사라지지 않는지도 이 단계에서 확인합니다.
4. 글로 읽을 수 있게 해 둡니다. 이미지를 글로 설명해 주는 대체 텍스트를 붙이되, 옆의 문구가 이미 같은 말을 하고 있는 장식용 그림이면 비워 둡니다. 화면 읽어 주는 프로그램이 같은 내용을 두 번 읽게 되기 때문입니다.

들어가는 자리는 대체로 정해져 있고, 자리마다 맡는 일이 다릅니다.

1. 빈 상태 — 보여 줄 내용이 아직 없을 때의 화면입니다. 그림 한 장과 한 줄 문구가 고장과 시작점을 갈라 줍니다. 여기에 다음 행동을 여는 버튼까지 같이 두는 것이 기본 구성입니다.
2. 오류 상태 — 문제가 생겼음을 알리는 화면입니다. 딱딱한 오류 문구만 있으면 사용자는 자기 잘못으로 받아들이기 쉬운데, 그림이 그 긴장을 낮춰 줍니다. 다만 결제 실패처럼 돈이 걸린 자리에서는 가벼운 그림이 오히려 상황을 얕보는 것처럼 읽힙니다.
3. 온보딩 — 새 사용자가 제품에 자리 잡도록 돕는 과정입니다. 처음 보는 개념을 문장으로만 설명하면 읽히지 않으므로 한 화면에 그림 하나를 두고 문장을 줄입니다.
4. 랜딩 페이지 — 행동 하나를 유도하려고 만든 단독 페이지입니다. 제품 화면을 그대로 보여 주기 어려운 초기 단계에서 무엇을 하는 제품인지를 그림으로 대신 말합니다.

자리마다 판단 기준은 같습니다. 이 그림을 지웠을 때 사용자가 무엇을 잃는지 물어보는 것입니다. 잃는 것이 없으면 그 그림은 장식입니다. 장식이 나쁜 것은 아니지만, 로딩 시간과 관리 비용을 치르고 얻는 것이라는 점이 달라집니다.

"여기 일러스트 하나 들어가야 할 것 같아요. 지금은 빈 화면이라 고장난 것처럼 보여요."

그림이 상태를 알려 주는 기능을 한다는 주장입니다.

"이건 장식이라 대체 텍스트는 비워 두셔도 됩니다."

옆 문구가 같은 내용을 이미 말하고 있다는 판단입니다.

"일러스트 스타일이 화면마다 달라요. 선 굵기부터 맞추죠."

한 벌로 묶이지 않은 그림들이 쌓였다는 지적입니다.

페이지덱에서는 새 화면을 그릴 때 민서가 그림 자리를 비워 두고 문구와 버튼부터 앉힙니다. 그것만으로 화면이 읽히면 그림은 넣지 않고, 무슨 상태인지 애매하면 그때 그림을 그립니다. 순서를 이렇게 잡아 두면 그림이 설명을 보태는 자리에만 들어가고, 문구가 부실한 것을 그림으로 덮는 일이 줄어듭니다.

있으면 좋고 없어도 그만인 장식으로 보는 경우가 가장 많습니다. 기능이 아니라 보기 좋으라고 넣는 것처럼 보이니 일정이 밀리면 가장 먼저 빠집니다. 하지만 빈 화면과 오류 화면에서 일러스트레이션은 상태를 알려 주는 일을 합니다. 문서 목록이 비었을 때 그림과 문구가 없으면 사용자는 그 화면을 고장으로 읽습니다. 장식으로만 분류해 두면 이런 자리가 끝까지 채워지지 않고, 문의 창구에는 원인을 짚기 어려운 문의가 쌓입니다.

반대로 많이 넣을수록 친근해진다고 보는 것도 흔합니다. 그림이 인상을 좌우하는 것은 맞지만, 한 화면에 여러 장이 들어가면 시선이 분산돼 정작 해야 할 일이 뒤로 밀립니다. 그림 파일은 글자보다 무거워서 화면이 뜨는 속도에도 영향을 줍니다. 자주 쓰는 화면일수록 그림을 덜어 내고, 처음 한 번 보는 화면에 몰아 두는 쪽이 맞습니다.