아이콘은 이미지가 아닙니다.

신입 때 디자인 시안을 그대로 PNG로 잘라 넘긴 적이 있습니다. 며칠 뒤 기획자가 “이 화면에서 아이콘 색을 회색으로 바꿔달라”고 했는데, 저는 포토샵을 다시 열어 16개 아이콘을 한 장씩 다시 내보내야 했습니다. 그날 선배가 옆에서 한마디 했습니다. “그거 SVG였으면 CSS 한 줄이었어.” 그 말이 부끄러워서, 그 주 내내 SVG를 팠습니다. 지금 저는 아이콘을 ‘그림’이 아니라 ‘코드로 그리는 도형’으로 봅니다.

그래서 SVG가 뭐가 다른데요?

PNG는 픽셀을 칸칸이 찍어둔 사진입니다. 정해진 칸 수가 전부라서, 키우면 칸이 뭉개지고(계단 현상), 화질을 지키려면 2배·3배 이미지를 따로 만들어 올려야 합니다. SVG는 “(5,12)에서 (19,12)로 선을 그어라” 같은 좌표 명령입니다. 그래서 10px로 줄이든 200px로 키우든 그 자리에서 다시 또렷하게 그려집니다. 색도 stroke 한 줄, 굵기도 stroke-width 한 줄로 바뀝니다.

왜 굳이 움직이게 만드나요?

설명보다 빠릅니다. 아래 아이콘에 마우스를 올려보세요. 왜 이렇게 만들었는지는 바로 아래에 적었습니다.

체크는 ‘그려지면서’ 완료를 말하고, 화살표는 ‘앞으로 밀리면서’ 이동을 말하고, 종은 ‘흔들리면서’ 알림을 말합니다. 동작과 뜻이 붙어 있어야 의미가 있습니다. 반대로 모든 아이콘이 아무 이유 없이 통통 튀면, 사용자는 어디를 봐야 할지 잃어버립니다.

아이콘은 어떻게 ‘세트’가 되나요?

아이콘 하나는 누구나 그립니다. 어려운 건 열 개를 ‘한 사람이 그린 것처럼’ 맞추는 일입니다. 저는 한 세트를 모두 같은 24px 박스 안에 넣고, 선 두께를 2px로 통일하고, 모서리 둥글기와 끝 처리(stroke-linecap: round)까지 똑같이 맞춥니다. 위 위젯의 다섯 아이콘이 나란히 있어도 어색하지 않은 이유가 이겁니다. 이 그리드가 무너지면 어떤 건 굵고 어떤 건 가늘어 보여서, 디자인 전체가 ‘싸 보입니다’.

‘한 사람이 그린 것처럼’을 만드는 규칙은 결국 몇 개의 고정값입니다. 위 다섯 아이콘이 전부 지키는 스펙을 칩으로 정리해 둡니다.

같은 박스, 같은 선 두께, 같은 둥근 끝 — 위 위젯의 SVG를 열어 보면 화살표든 종이든 이 일곱 줄을 똑같이 따릅니다. 색은 currentColor라 글자색만 바꿔도 함께 바뀝니다.

접근성은 어떻게 챙기나요?

아이콘은 눈에는 보여도 스크린리더에는 그냥 ‘그림’일 뿐입니다. 그래서 두 가지로 나눠 다룹니다. 옆에 글자 라벨이 있는 장식용 아이콘은 aria-hidden="true"로 숨겨서 같은 뜻을 두 번 읽지 않게 합니다(위 위젯의 SVG들이 그렇습니다). 반대로 공간이 없어 아이콘만 단독으로 쓸 때는 aria-label="알림"처럼 이름을 줘서, 화면을 못 보는 사용자도 그 버튼이 무엇인지 알게 합니다.

그럼 PNG는 언제 쓰나요?

실사 사진, 복잡한 그라데이션 일러스트, 로고처럼 ‘그림 그 자체’가 중요한 건 PNG(또는 WebP)가 맞습니다. 하지만 인터페이스 안의 기능 아이콘 — 화살표, 체크, 메뉴, 알림 — 은 거의 예외 없이 SVG가 정답입니다. 이걸 구분하는 게 제 일의 절반입니다.

다른 담당자와의 연결

아이콘은 혼자 놀지 않습니다. 위 위젯에서 종이 흔들리고 체크가 그려지는 ‘움직임’의 원리는 사실 모션 담당자의 영역과 맞닿아 있습니다 — 타이밍과 이징은 모션 담당자의 노트에서 더 깊이 다룹니다. 화살표 아이콘이 들어간 버튼이 어떻게 살아나는지는 버튼 담당자의 노트에서 직접 눌러볼 수 있고, 아이콘과 그 옆 텍스트의 정렬·크기를 맞추는 일은 타이포 담당자의 노트와 함께 봐야 완성됩니다. 한 사람이 아이콘만 잘 그려서는 화면이 안 살아납니다. 우리는 이 디테일들을 서로 맞물려 만듭니다.

아이콘 하나를 이렇게 보는 사람이, 사이트 전체를 만듭니다

아이콘은 작아서 무시당하기 쉽지만, 사용자가 가장 자주 보는 신호입니다. 그 16px짜리 도형을 진지하게 다루는 사람이라면 버튼도, 텍스트도, 속도도 같은 태도로 다룹니다. Findable에서는 이런 디테일이 기본값입니다. 당신의 사이트, 어떤 아이콘으로 살려 드릴까요?