웹사이트를 둘러본 사용자가 '뭔가 어색한데 어디가 어색한지는 모르겠다'고 느낄 때, 그 원인이 아이콘인 경우가 의외로 많다. 한 화면에 선 굵기가 다른 아이콘과 채워진 아이콘이 섞여 있고, 어떤 건 24px이고 어떤 건 20px이며, 또 어떤 건 비례가 살짝 다르다. 하나하나는 작은 차이지만 모이면 사이트의 톤 자체가 흔들린다.
1. 한 사이트에서 아이콘 라이브러리는 하나만 쓴다
Lucide, Heroicons, Phosphor, Material Symbols, Tabler — 좋은 아이콘 라이브러리는 많다. 문제는 욕심이 나서 두세 개를 섞을 때 생긴다. 같은 '검색' 아이콘이라도 라이브러리마다 비례와 선 굵기가 미묘하게 다르다. 한 화면에서 검색은 Lucide, 메뉴는 Heroicons, 화살표는 Phosphor를 쓰면 사용자는 무의식적으로 사이트가 '정리되지 않았다'고 느낀다. 라이브러리는 처음에 하나만 고르고, 그 안에서 부족한 아이콘이 있다면 같은 결로 직접 그려 채운다.
2. 선 굵기와 채움 방식을 통일한다
같은 라이브러리 안에서도 outline(선)과 solid(채움) 두 가지가 함께 제공된다. 두 스타일을 자유롭게 섞어 쓰면 안 된다. 보통은 outline을 기본으로 쓰고, 강조하고 싶은 상태(선택, 활성)에만 solid를 예외적으로 쓴다. 선 굵기도 마찬가지다. 한 사이트에서는 1.5px 또는 2px 중 하나만 정해서 끝까지 쓴다. Lucide 기본값이 2px이라면 헤더에서도, 푸터에서도, 폼 안에서도 모두 2px이어야 한다.
3. 크기는 텍스트와 함께 결정한다
아이콘 크기를 절대값으로 박지 않는다. 본문 옆에 들어가는 아이콘은 본문 폰트와 같거나 살짝 크게(본문 16px이면 아이콘 16~20px), 버튼 안의 아이콘은 버튼 글자보다 한 단계 크게 잡는다. CSS에서는 1em 기준 상대값으로 잡으면 폰트 크기가 바뀌어도 아이콘이 같이 따라온다. 모바일에서 글자가 자라면 아이콘도 함께 자라야 시각적 균형이 깨지지 않는다.
4. 아이콘과 텍스트의 정렬은 'baseline'이 아니라 'center'다
아이콘과 라벨을 나란히 둘 때 flexbox의 align-items: center를 쓰는 게 거의 모든 경우에 안전하다. baseline을 기준으로 잡으면 아이콘의 baseline이 글자의 baseline과 안 맞아서 한 픽셀씩 어긋난다. 그리고 아이콘과 글자 사이의 간격(gap)은 너무 좁지 않게 8px 정도가 자연스럽다. 4px처럼 너무 붙어 있으면 한 덩어리로 보여서 무엇이 라벨인지 헷갈린다.
5. 의미 있는 아이콘은 접근성 라벨을 단다
장식용이 아닌 아이콘(닫기, 삭제, 다음, 검색 등)에는 반드시 스크린리더가 읽을 수 있는 라벨이 있어야 한다. SVG 자체에 aria-label="닫기"를 달거나, 아이콘만 있는 버튼이라면 visually-hidden 클래스로 텍스트를 숨겨 함께 둔다. 검색 엔진도 SVG 안의 모양을 읽지 못한다. 접근성은 결국 검색 노출과도 직접 연결된다.
실무에서 자주 빠뜨리는 한 가지
아이콘은 디자인 단계에서 끝나는 게 아니다. 색상 토큰과 묶여야 한다. 라이트 모드에서 #1a1a1a였던 아이콘이 다크 모드에서는 #e5e5e5여야 한다. 아이콘 색을 하드코딩하지 말고 본문 텍스트와 같은 변수(예: --color-text)를 따라가게 두면 테마 전환 한 줄에 아이콘까지 같이 바뀐다. SVG라면 fill="currentColor"로 두는 게 정답이다.
마치며
좋은 아이콘 시스템은 눈에 띄지 않는다. 사용자는 '아이콘이 잘 디자인됐네'라고 칭찬하지 않는다. 다만 사이트가 '정돈됐다', '신뢰가 간다'고 느낄 뿐이다. 작은 회사일수록 이런 디테일에서 신뢰의 격차가 벌어진다. CYAN은 사이트 제작 초반부터 아이콘 라이브러리, 색상 토큰, 컴포넌트 변수까지 하나의 디자인 시스템으로 묶어 작업한다. 한 번 짜둔 시스템이 두 번째, 세 번째 페이지를 만들 때 작업 시간을 절반으로 줄인다.