아이콘 디자인, 버튼·접근성·쉬운 정보 디자인으로 사용성을 높이는 법
앱에서 결제 버튼을 찾다가 작은 그림 하나를 보고 멈춘 경험이 있을 것입니다. 휴지통처럼 보였지만 실제로는 보관 버튼이거나, 화살표 방향이 헷갈려 다음 화면으로 가지 못하는 경우도 있습니다. 아이콘은 작지만 사용자의 행동을 바로 바꾸는 화면 요소입니다.
이 글을 읽으면 아이콘 디자인을 시작할 때 정해야 할 기준, 버튼과 함께 배치하는 방법, 접근성을 확인하는 순서를 알게 됩니다. 예쁜 그림을 만드는 데서 끝내지 않고, 사용자가 뜻을 오해하지 않는지와 다양한 화면에서 잘 보이는지도 살펴봅니다.
아이콘 디자인은 작은 그림보다 뜻을 설계하는 일
아이콘은 기능이나 정보를 짧은 모양으로 보여 주는 기호입니다. 메뉴, 검색, 공유, 삭제처럼 자주 쓰는 기능은 글자 대신 아이콘만 놓기도 합니다. 이때 중요한 것은 그림의 장식성이 아니라 사용자가 의미를 예상할 수 있는가입니다.
예를 들어 돋보기는 검색을 쉽게 떠올리지만, 별 모양은 즐겨찾기인지 평가인지 서비스마다 다르게 해석될 수 있습니다. 익숙하지 않은 기능이라면 아이콘만 두지 말고 글자를 함께 넣는 편이 안전합니다. 아이콘은 글자를 줄이는 도구이지, 설명을 모두 없애는 도구는 아닙니다.
좋은 아이콘은 다음 조건을 갖춥니다.
- 기능의 뜻이 한 가지 방향으로 읽힙니다.
- 작게 줄여도 외곽선과 핵심 모양이 남습니다.
- 같은 화면 안에서 선의 굵기와 모서리 느낌이 일정합니다.
- 색을 보지 못해도 모양이나 글자로 기능을 구분할 수 있습니다.
제작 전에 확인할 아이콘 디자인 체크리스트
그림을 그리기 전에 아이콘이 들어갈 자리와 사용 상황부터 정해야 합니다. 휴대전화의 작은 상단 버튼과 안내서의 큰 그림은 같은 아이콘이라도 필요한 세부 수준이 다릅니다.
- 목적: 이동, 선택, 상태 표시, 경고 중 어떤 역할인지 적습니다.
- 대상: 어린이, 고령자, 처음 방문한 사람처럼 사용자의 특징을 살핍니다.
- 크기: 실제 화면에서 가장 작게 쓰이는 크기로 축소해 확인합니다.
- 환경: 밝은 화면, 어두운 화면, 인쇄물 등 사용 장소를 정합니다.
- 상태: 기본, 선택됨, 비활성, 오류 상태를 모두 준비합니다.
특히 상태 표현을 빼먹기 쉽습니다. 선택된 메뉴만 색을 바꾸면 색을 구분하기 어려운 사람은 변화를 놓칠 수 있습니다. 색뿐 아니라 배경, 테두리, 위치, 글자 같은 다른 단서도 함께 제공해야 합니다.
선형·면형·입체형 아이콘, 무엇이 더 알맞을까
아이콘의 형태는 크게 선으로 그린 선형, 면을 채운 면형, 빛과 그림자를 넣은 입체형으로 나눌 수 있습니다. 어느 하나가 항상 좋은 것은 아니며 서비스의 성격과 표시 크기에 따라 선택해야 합니다.
| 형태 | 장점 | 주의할 점 | 어울리는 상황 |
|---|---|---|---|
| 선형 | 가볍고 정돈된 느낌 | 작으면 선이 끊겨 보일 수 있음 | 설정, 탐색, 업무 도구 |
| 면형 | 작은 크기에서도 눈에 잘 띔 | 아이콘끼리 무겁게 보일 수 있음 | 강조 버튼, 모바일 메뉴 |
| 입체형 | 친근하고 개성이 뚜렷함 | 기능 뜻보다 장식이 앞설 수 있음 | 콘텐츠 표지, 브랜드 화면 |
예를 들어 금융이나 행정처럼 정확한 행동이 중요한 화면에서는 단순한 선형 또는 면형이 잘 맞을 수 있습니다. 반면 어린이용 학습 서비스는 부드러운 입체형을 사용할 수 있지만, 장식 때문에 버튼의 뜻이 흐려지지 않는지 따로 확인해야 합니다. 공식 디자인 시스템을 참고할 때도 모양을 그대로 가져오기보다 내 서비스의 글자 크기, 색상, 버튼 구조와 함께 검토해야 합니다.
아이콘을 만드는 순서와 버튼에 적용하는 방법
- 기능을 한 문장으로 씁니다. ‘문서를 다른 사람에게 보낸다’처럼 행동을 적으면 공유, 전송, 저장의 차이가 분명해집니다.
- 대표 모양을 고릅니다. 사용자가 이미 알고 있는 기호를 우선 검토합니다. 새 기호를 만들 때는 주변에 설명을 붙입니다.
- 기본 도형으로 단순화합니다. 원, 사각형, 선처럼 간단한 요소로 시작하고 작은 장식은 뒤로 미룹니다.
- 같은 기준으로 묶습니다. 아이콘 상자 크기, 선 굵기, 모서리 둥근 정도, 좌우 여백을 통일합니다.
- 버튼 안에서 시험합니다. 아이콘만 있을 때와 글자와 함께 있을 때를 모두 확인합니다.
- 실제 사용자에게 물어봅니다. ‘이 버튼은 무슨 일을 할 것 같나요?’라고 묻고 정답을 알려 주지 않은 채 반응을 기록합니다.
버튼 디자인에서는 아이콘과 글자의 관계가 중요합니다. 글자 왼쪽에 아이콘을 두면 행동의 종류를 먼저 보여 주고, 글자 오른쪽에 화살표를 두면 다음 단계로 이동한다는 인상을 줄 수 있습니다. 다만 방향만으로 의미를 전달하면 안 됩니다. ‘다음’, ‘열기’처럼 행동을 적어 주는 것이 오해를 줄입니다.
아이콘을 누를 수 있는 영역도 그림 크기와 같게 만들 필요는 없습니다. 그림은 작더라도 손가락이 누르기 편한 주변 영역을 확보해야 합니다. 정확한 크기 기준은 사용하는 운영체제와 디자인 시스템의 공식 안내에서 재확인하고, 실제 기기에서 눌러 보는 과정도 거쳐야 합니다.
자주 생기는 실수와 고치는 방법
비슷한 기능에 다른 모양을 쓰는 경우
어떤 화면에서는 저장을 디스크 모양으로, 다른 화면에서는 내려받기 화살표로 표현하면 사용자는 두 기능의 차이를 다시 배워야 합니다. 기능 이름을 먼저 정하고, 같은 기능에는 같은 아이콘을 반복해서 쓰세요.
아이콘을 너무 자세히 그리는 경우
작은 화면에서 선, 구멍, 그림자를 많이 넣으면 서로 붙어 보입니다. 핵심 외곽선만 남긴 뒤 축소 테스트를 해 보세요. 원본 파일에서 예뻐 보이는 것보다 실제 사용 크기에서 알아볼 수 있는지가 더 중요합니다.
색으로만 상태를 구분하는 경우
빨간색이면 오류, 초록색이면 완료라고 정해도 모든 사용자가 같은 방식으로 볼 수 있는 것은 아닙니다. 색과 함께 체크 표시, 경고 모양, 상태 글자를 제공해야 합니다. 배경과 아이콘의 밝기 차이도 확인해야 합니다.
장식 아이콘과 기능 아이콘을 섞는 경우
서비스를 꾸미는 그림은 개성이 중요하지만, 기능 버튼은 예측 가능성이 우선입니다. 같은 화면에서 장식용 3차원 그림과 얇은 선형 버튼을 무작정 섞으면 시선의 우선순위가 흐려질 수 있습니다.
아이콘 디자인에 대해 자주 묻는 질문
아이콘에 글자를 꼭 함께 넣어야 하나요?
모든 아이콘에 글자가 필요한 것은 아닙니다. 검색, 재생, 닫기처럼 널리 알려진 기능은 상황에 따라 아이콘만 사용할 수 있습니다. 하지만 공유, 보관, 내보내기처럼 서비스마다 의미가 달라질 수 있는 기능은 글자를 함께 두는 편이 좋습니다.
아이콘 색상은 브랜드 색으로 통일하면 되나요?
브랜드 색을 사용할 수 있지만, 모든 아이콘을 같은 강한 색으로 칠하면 중요한 버튼과 일반 기능이 구분되지 않습니다. 기본 아이콘, 강조 행동, 경고 상태의 색 역할을 나누고 밝은 화면과 어두운 화면에서 읽히는지 확인하세요.
무료 아이콘을 내려받아 사용해도 되나요?
무료라는 말만 보고 바로 사용하면 안 됩니다. 상업적 이용 가능 여부, 수정 허용 범위, 출처 표시 조건을 제공처의 현재 라이선스에서 확인해야 합니다. 서로 다른 제작자의 아이콘을 섞을 때는 선 굵기와 비율을 다시 맞추는 작업도 필요합니다.
아이콘을 잘 만들었는지는 어떻게 판단하나요?
디자이너의 취향보다 사용자의 행동으로 판단하는 것이 좋습니다. 아이콘만 보여 주고 뜻을 맞히는지, 버튼을 찾는 데 시간이 오래 걸리지 않는지, 색을 빼도 상태를 구분하는지 확인하세요. 결과를 바탕으로 모양이나 글자를 고치면 아이콘 디자인이 실제 사용성으로 이어집니다.