아이콘 하나 잘못 고르면 앱 전체가 무너진다는 말, 믿어지시나요? 저는 처음엔 반신반의했습니다. 그런데 직접 겪고 나서야 이게 과장이 아니라는 걸 알았습니다. 무료 아이콘 5개 라이브러리를 섞어 쓴 결과, 사용자 테스트에서 '이 앱 뭔가 이상한데요'라는 피드백을 들었을 때의 그 당혹감이 지금도 생생합니다.
아이콘은 언어다 — 직관성이 전부가 아닌 이유
아이콘을 고를 때 대부분의 디자이너가 가장 먼저 떠올리는 기준은 직관성입니다. 누가 봐도 검색창은 돋보기, 알림은 종 모양이어야 한다는 것이죠. 이 기준은 분명히 맞습니다. 그런데 저는 직관성에만 집중하다가 더 근본적인 문제를 놓쳤습니다.
아이콘은 단순한 그림이 아니라 텍스트를 대체하는 약속된 시각 언어입니다. 그래픽 디자인 이론가 스티븐 헬러(Steven Heller)가 아이콘을 '언어'로 정의한 것도 이 때문입니다. 하트가 좋아요를 뜻하고, 비상구 표시가 탈출 방향을 가리키는 것처럼, 아이콘은 문화와 언어의 장벽을 넘어 보편적으로 통용되는 커뮤니케이션 수단입니다.
그렇다면 언어에서 가장 중요한 것은 무엇일까요? 일관성입니다. 같은 단어가 문서마다 다른 폰트와 크기로 섞여 있다면 그건 언어가 아니라 혼란입니다. 아이콘도 마찬가지입니다. 제가 초기 프로젝트에서 저질렀던 실수가 바로 이것이었습니다. 각각의 아이콘은 직관적으로 멀쩡했습니다. 그런데 서로 다른 라이브러리에서 긁어온 아이콘들이 한 화면에 공존하자, 선 굵기가 제각각이고 어떤 건 채워진 형태(Filled), 어떤 건 윤곽선만 있는 형태(Outlined)가 뒤섞이면서 앱 전체의 시각적 통일감이 완전히 무너졌습니다.
여기서 Filled와 Outlined는 아이콘의 두 가지 렌더링 방식을 말합니다. Filled는 아이콘 내부가 색으로 채워진 형태이고, Outlined는 테두리 선만으로 형태를 표현하는 방식입니다. 이 두 스타일이 한 화면에 혼용되면 사용자는 의미 차이가 있는 것인지, 단순 스타일 차이인지 판단하지 못하고 혼란을 느끼게 됩니다.
실제로 Apple의 Human Interface Guidelines(HIG)와 Google의 Material Design 가이드라인은 공통적으로 아이콘의 일관성을 핵심 원칙으로 제시합니다. 단순하고 친근하며, 본질적인 특성에 집중하고, 최대한 익숙하고 공통화된 아이콘을 사용하라는 것이 두 플랫폼 가이드라인의 교집합입니다(출처: Apple Human Interface Guidelines).
UI 아이콘 디자인에서 반드시 챙겨야 할 핵심 요소를 정리하면 다음과 같습니다.
- 직관성: 사용자가 추론 없이 즉시 기능을 파악할 수 있는 아이콘을 선택한다
- 통일된 스타일: 하나의 아이콘 세트에서만 선택하고, Filled·Outlined 혼용을 금지한다
- 단순성: 복잡한 디테일을 제거하고 핵심 형태(실루엣)만 남긴다
- 규격과 시각보정: 키라인 그리드 기반으로 정렬하여 시각적 균형을 맞춘다
30% 향상된 사용성 평가, 그 숫자 뒤에 있는 것
사용자 테스트 피드백을 받은 직후, 저는 전면 교체를 결정했습니다. 이때 기준으로 삼은 것이 Material Design 아이콘 가이드라인이었습니다. Material Design이란 Google이 제안한 UI 디자인 시스템으로, 시각적 일관성과 사용성을 동시에 잡기 위해 색상, 타이포그래피, 아이콘, 간격 등 모든 디자인 요소에 명확한 규칙을 부여한 체계입니다.
저는 Material Design 아이콘 세트를 단일 소스로 확정하고, 24px 그리드와 2px 선 굵기를 전 화면에 일괄 적용했습니다. 작업을 마치고 나서 다시 사용자 테스트를 돌렸을 때, 앱 사용성 평가 점수가 이전 대비 30% 향상되었습니다. 솔직히 이건 예상 밖이었습니다. 아이콘 스타일 하나 통일했을 뿐인데 수치가 이렇게 크게 움직일 거라고는 생각하지 못했습니다.
여기서 하나 더 체감한 것이 시각보정(Optical Correction)입니다. 시각보정이란 수학적으로 동일한 크기와 무게를 가진 도형이라도 사람의 눈에는 크기가 달라 보이는 착시를 보완하기 위해, 실제 수치를 미세하게 조정하는 작업입니다. 예를 들어 원형 아이콘과 정사각형 아이콘을 동일한 px로 그리면 원이 더 작아 보입니다. 이 차이를 눈으로 동일하게 느끼도록 원의 크기를 살짝 키워주는 것이 시각보정입니다. 이 작업이 적용되었을 때와 아닐 때의 완성도 차이는 생각보다 꽤 명확하게 느껴집니다.
키라인 그리드(Keyline Grid)란 아이콘을 일정한 기준 도형(원, 정사각형, 직사각형 등) 안에 배치하여 아이콘 간의 시각적 무게감을 균일하게 맞추는 정렬 체계입니다. Material Design과 iOS SF Symbols 모두 이 키라인 그리드를 기반으로 아이콘을 설계합니다(출처: Google Material Design).
한편, 이번 작업을 통해 예상치 못한 부가 효과도 있었습니다. 개발자에게 아이콘 에셋을 전달하는 핸드오프(Handoff) 과정이 눈에 띄게 깔끔해진 것입니다. 핸드오프란 디자이너가 완성된 디자인 파일과 에셋을 개발자에게 인계하는 과정을 말합니다. 아이콘 세트가 통일되면 네이밍 컨벤션(icon_search_24, icon_bell_24 등)과 사이즈 규격이 자동으로 일관성을 갖게 됩니다. 덕분에 "이 아이콘 크기 다시 확인해주세요"라는 커뮤니케이션 비용이 거의 사라졌습니다.
아이콘 규격과 접근성(Accessibility) 측면도 짚고 넘어갈 필요가 있습니다. 접근성이란 시각적 제약이 있는 사용자를 포함해 모든 사용자가 콘텐츠를 이용할 수 있도록 설계하는 개념입니다. 아이콘 단독으로는 의미 전달이 불완전할 수 있으므로, 화면 낭독기(Screen Reader)가 인식할 수 있는 대체 텍스트(Alt Text)를 함께 제공하는 것이 실무에서 점점 더 중요해지고 있습니다. 제 경험상 이 부분까지 챙긴 디자이너는 생각보다 많지 않습니다.
아이콘 디자인을 처음 공부할 때는 '예쁜 아이콘 고르는 것'이라고 생각했습니다. 그런데 직접 부딪혀보니 이건 시스템을 만드는 일에 가깝습니다. 하나의 세트로 통일하고, 규격을 정하고, 시각보정까지 적용했을 때 비로소 아이콘이 언어로서 기능하기 시작합니다. 지금 본인의 프로젝트에서 아이콘 스타일이 혼재되어 있다면, 단일 세트 교체부터 시작해보시길 권합니다. 생각보다 파급 효과가 큽니다.