아이코노그래피

아이콘은 오랫동안 화면이 필요로 할 때마다 한 개씩 그려졌습니다. 설정 화면을 만드는 사람이 톱니바퀴를 하나 그리고, 며칠 뒤 다른 화면을 맡은 사람이 또 톱니바퀴를 그렸습니다. 두 그림은 비슷해 보였지만 선 굵기가 1.5픽셀과 2픽셀로 달랐고 한쪽은 모서리가 둥글고 한쪽은 각졌습니다. 각자의 화면에서는 아무도 눈치채지 못하다가 둘이 한 줄에 놓이는 순간 화면이 어설퍼 보였습니다.

뜻이 갈리는 쪽이 더 골칫거리였습니다. 같은 저장 기능에 어떤 화면은 플로피디스크를 붙이고 어떤 화면은 아래를 향한 화살표를 붙여 두면, 사용자는 두 버튼이 서로 다른 일을 한다고 읽습니다.

고치자는 말이 나와도 근거가 "이게 더 예뻐서요" 밖에 없으니 취향 싸움이 되고, 그 자리에서 정한 결론은 다음 화면에서 또 뒤집혔습니다. 아이코노그래피는 아이콘을 그림 한 장이 아니라 지켜야 할 규칙의 묶음으로 다루자는 답입니다.

모든 아이콘이 똑같이 따라야 할 값을 먼저 정해 두고, 새 아이콘을 그릴 때마다 그 값에 맞춥니다. 정해 두는 값은 대개 다섯 가지입니다.

1. 격자와 크기 — 아이콘을 그려 넣을 사각형을 24픽셀처럼 하나로 고정합니다. 그 안에서 그림이 실제로 차지하는 영역은 20픽셀로 두고 바깥 2픽셀은 비워 둡니다. 이 여백이 없으면 가로로 긴 아이콘만 유난히 커 보입니다.
2. 선 굵기 — 1.5픽셀로 정했으면 서른 개가 전부 1.5픽셀입니다. 굵기가 섞이면 같은 줄의 아이콘끼리 진하기가 달라 보이고, 사용자는 진한 쪽을 더 중요한 버튼으로 읽습니다.
3. 모서리와 끝 처리 — 선이 끝나는 자리를 둥글게 자를지 각지게 자를지, 꺾이는 모서리를 얼마나 둥글릴지를 정합니다. 제품의 버튼과 카드에 쓰는 코너 반경, 곧 모서리를 둥글린 정도와 같은 결을 아이콘 안에서도 맞춥니다.
4. 채움 방식 — 선으로만 그릴지 안쪽을 색으로 채울지 고릅니다. 둘을 섞어 쓸 때는 섞는 규칙까지 정해 둡니다. 흔한 방식은 선 아이콘을 기본으로 두고 지금 열린 메뉴 하나만 채움으로 바꾸는 것입니다.
5. 뜻과 그림의 짝 — 한 기능에는 한 그림만 씁니다. 반대로 한 그림이 두 기능을 맡지도 않습니다. 이 짝을 목록으로 관리하지 않으면 아이콘이 서른 개를 넘는 순간 같은 그림이 두 뜻으로 쓰이기 시작합니다.

값을 정했다고 저절로 지켜지지는 않아서, 아이콘 한 벌은 디자인 시스템의 부품으로 들어갑니다. 디자인 시스템은 색과 글자 크기와 부품을 한 기준으로 묶어 둔 문서와 코드를 말합니다. 아이콘이 거기 들어가면 디자이너는 파일에서, 개발자는 코드에서 같은 이름으로 꺼내 쓰고, 그림을 한 번 고치면 그 아이콘을 쓰는 화면이 한꺼번에 바뀝니다.

마지막 규칙은 글자입니다. 뜻이 분명하지 않은 아이콘에는 옆이나 아래에 짧은 글자를 붙이고, 자리가 없을 때만 마우스를 올렸을 때 뜨는 설명으로 대신합니다.

아이콘이 가장 많이 놓이는 자리는 글자를 길게 쓸 수 없는 좁은 공간입니다. 화면 위쪽 도구 막대, 왼쪽 메뉴, 목록의 각 줄 끝처럼 폭이 정해진 곳에서 기능 하나를 24픽셀 안에 넣어야 할 때 씁니다.

종류를 한눈에 갈라 주는 자리에도 들어갑니다. 문서 목록에서 표 문서와 글 문서를 앞의 그림 하나로 구분하면 제목을 읽지 않고도 훑어 내려갈 수 있습니다. 읽지 않은 알림의 점이나 잠긴 문서의 자물쇠처럼 상태를 표시하는 쓰임도 같은 갈래입니다.

빈 상태, 곧 보여 줄 내용이 아직 없을 때의 화면에서는 아이콘이 기능 버튼이 아니라 분위기를 눅이는 역할을 합니다. 다만 이 자리에 들어가는 그림이 커지면 아이콘이 아니라 일러스트레이션 쪽으로 넘어갑니다.

어느 자리든 함께 챙겨야 하는 것이 접근성입니다. 화면을 소리로 읽어 주는 프로그램은 그림을 읽지 못하므로, 아이콘만 있는 버튼에는 화면에 보이지 않는 이름을 따로 붙여 둡니다. 이 이름이 없으면 그 버튼은 "버튼" 이라고만 읽히고, 사용자는 무엇이 일어날지 모른 채 누릅니다.

"이 아이콘 어디서 가져오셨어요? 우리 세트에 없는 건데요."

규칙 밖에서 온 그림이라 선 굵기나 크기가 나머지와 어긋날 것이라는 지적입니다.

"공유랑 내보내기가 같은 화살표를 쓰고 있어요."

한 그림이 두 기능을 맡고 있으니 한쪽을 다른 그림으로 바꾸자는 말입니다.

"뜻이 안 잡히면 아이콘 밑에 글자 붙이죠."

그림만 보고 기능을 알아맞힐 사람이 많지 않겠다는 판단입니다.

페이지덱이 문서 목록 화면을 다시 꾸미면서 민서가 아이콘 스물여섯 개를 한 벌로 새로 그린 적이 있습니다. 작업은 그림부터 시작하지 않았습니다. 화면에 흩어져 있던 아이콘을 전부 모아 어떤 기능에 어떤 그림이 붙어 있는지 표로 적었더니, 같은 휴지통이 세 가지 모양으로 그려져 있고, 화살표 하나가 공유와 내보내기와 이동에 함께 쓰이고 있었습니다.

민서는 뜻이 겹친 것부터 갈라 놓고 나머지를 같은 격자 위에 다시 그렸습니다. 태오는 그 결과를 코드에서 이름으로 꺼내 쓸 수 있게 한 벌로 묶었습니다. 그 뒤로 새 화면에 아이콘이 필요하면 목록부터 찾아보고, 없으면 새로 그리되 24픽셀 격자와 1.5픽셀 선이라는 같은 조건에서 그립니다.

아이콘이 글자보다 빨리 읽힌다고 생각하는 경우가 가장 많습니다. 그림이 글자보다 눈에 먼저 들어오는 것은 사실이니 그렇게 믿기 쉽습니다. 하지만 눈에 띄는 것과 뜻이 전달되는 것은 다른 일입니다. 돋보기나 집 모양처럼 수십 년 동안 같은 뜻으로 쓰인 몇 개를 빼면, 처음 보는 아이콘의 기능을 맞히는 사람은 생각보다 적습니다. 글자를 걷어내고 그림만 남긴 도구 막대를 두면 사용자는 버튼을 하나씩 눌러 보며 뜻을 알아내고, 잘못 누른 것이 삭제였을 때 문의가 들어옵니다.

아이콘 세트를 밖에서 사 오면 끝난다는 생각도 자주 봅니다. 완성된 세트를 사면 처음 몇 달은 편합니다. 그런데 제품에만 있는 기능에는 어느 세트에도 맞는 그림이 없어서 결국 누군가 한 개를 따로 그립니다. 사 온 세트가 어떤 격자와 선 굵기로 그려졌는지 적어 두지 않았으면 그 한 개는 반드시 튑니다. 규칙은 세트를 사 오더라도 우리 쪽에서 다시 적어 둬야 합니다.