웹 아이콘 종류·사용법·파비콘·라이선스, 보기 좋은 화면을 만드는 기준
웹사이트를 만들던 중 메뉴 옆에 어떤 그림을 넣어야 할지 멈칫한 경험이 있을 겁니다. 집 모양을 누르면 첫 화면으로 갈 수 있다는 뜻은 분명하지만, 같은 집 모양이라도 선으로 그린 아이콘과 색이 꽉 찬 아이콘은 화면 분위기가 꽤 다릅니다. 작은 그림 하나가 어색하면 사이트 전체가 급하게 만든 것처럼 보이기도 합니다.
이 글을 읽으면 웹 아이콘의 종류를 나누는 기준부터 크기, 색상, 접근성, 사용 허가를 확인하는 방법까지 알게 됩니다. 단순히 예쁜 이미지를 고르는 데서 그치지 않고, 방문자가 헷갈리지 않고 사용할 수 있는 아이콘을 선택하는 기준을 실제 화면 예시와 함께 살펴보겠습니다.
웹 아이콘은 무엇이며 어디에 쓰일까
웹 아이콘은 웹사이트에서 기능이나 정보를 작은 그림으로 알려 주는 시각 요소입니다. 검색, 장바구니, 공유, 다운로드처럼 글로 길게 쓰지 않아도 의미를 전달할 수 있습니다. 다만 그림만 보고 뜻을 바로 알기 어려운 기능도 있으므로 중요한 버튼에는 짧은 글자를 함께 적는 편이 안전합니다.
사용 위치에 따라 아이콘의 역할도 달라집니다. 메뉴 옆 아이콘은 이동할 곳을 알려 주고, 버튼 안의 아이콘은 누르면 일어나는 행동을 보여 줍니다. 브라우저 탭에 표시되는 파비콘은 사이트를 구별하는 작은 표식입니다. 본문을 꾸미는 장식용 아이콘은 기능을 뜻하지 않으므로 버튼처럼 보이지 않게 만드는 것이 좋습니다.
- 선 아이콘: 가볍고 깔끔한 느낌을 줍니다. 금융, 문서, 관리 화면처럼 정보가 많은 곳에 잘 맞습니다.
- 면 아이콘: 모양이 또렷하고 작은 크기에서도 잘 보입니다. 모바일 메뉴나 주요 버튼에 활용하기 좋습니다.
- 색상 아이콘: 시선을 끌고 친근한 분위기를 만들 수 있습니다. 색이 많아지면 화면이 복잡해질 수 있습니다.
- 파비콘: 브라우저 탭, 즐겨찾기, 기록 화면에서 사이트를 구분하는 작은 이미지입니다.
고르기 전에 확인할 웹 아이콘 체크리스트
먼저 아이콘이 들어갈 실제 크기를 확인해야 합니다. 큰 배너에서 선명한 그림도 모바일 화면의 작은 버튼에서는 선이 뭉개질 수 있습니다. 아이콘을 정한 뒤 줄여 보는 것이 아니라, 처음부터 실제 크기와 비슷하게 놓고 알아보기 쉬운지 살펴보세요.
- 아이콘만 보아도 기능을 짐작할 수 있는가
- 같은 화면의 다른 아이콘과 선 굵기와 모서리 모양이 비슷한가
- 배경색 위에서 충분히 구별되는가
- 마우스를 올리거나 키보드로 이동할 때 상태 변화가 보이는가
- 아이콘을 읽지 못하는 사람을 위해 버튼 이름이나 대체 설명이 있는가
- 상업적 사용, 수정, 재배포가 허용되는 자료인가
아이콘의 뜻도 점검해야 합니다. 예를 들어 별 모양은 즐겨찾기일 수도 있고 평점 표시일 수도 있습니다. 점 세 개는 더 보기 메뉴로 널리 쓰이지만, 사용자가 바로 이해해야 하는 중요한 기능이라면 글자를 덧붙이는 편이 낫습니다.
선 아이콘과 면 아이콘, 어떤 차이가 있을까
선 아이콘은 화면을 덜 답답하게 만든다는 장점이 있습니다. 그러나 선이 너무 얇으면 작은 화면이나 밝은 배경에서 흐려집니다. 반대로 면 아이콘은 눈에 잘 들어오지만 여러 개를 한꺼번에 배치하면 화면이 무거워질 수 있습니다.
예를 들어 여행 예약 사이트에서 검색, 일정, 결제 메뉴를 보여 준다고 가정해 보겠습니다. 정보가 많은 관리 화면이라면 같은 굵기의 선 아이콘이 차분하게 어울립니다. 예약 완료나 할인처럼 강조할 정보에는 색상이나 면 아이콘을 제한적으로 사용할 수 있습니다. 모든 아이콘을 알록달록하게 만들면 무엇이 가장 중요한지 알기 어려워집니다.
서로 다른 자료를 섞어 쓸 때는 특히 주의해야 합니다. 한 아이콘은 모서리가 둥근데 다른 아이콘은 각져 있거나, 하나는 정면인데 다른 하나는 기울어져 있으면 통일감이 깨집니다. 같은 아이콘 묶음 안에서 선 굵기, 모서리, 시선 방향, 여백을 비교해 보세요.
웹 아이콘을 적용하는 순서
- 기능을 먼저 적습니다. ‘예쁜 검색 아이콘’이 아니라 ‘상품을 찾는 버튼’처럼 아이콘의 역할을 문장으로 씁니다.
- 사용 환경을 정합니다. 컴퓨터용인지 휴대전화용인지, 어두운 화면인지 밝은 화면인지 구분합니다.
- 아이콘 묶음을 고릅니다. 필요한 모양이 여러 개라면 한 세트 안에서 선택해야 크기와 선이 잘 맞습니다.
- 실제 화면에 배치합니다. 시안 속 큰 그림만 보지 말고 메뉴, 카드, 버튼 안에서 확인합니다.
- 사용성 검사를 합니다. 아이콘을 처음 보는 사람에게 기능을 맞혀 보게 하면 오해하기 쉬운 모양을 찾을 수 있습니다.
- 사용 조건을 기록합니다. 출처, 허용 범위, 수정 여부를 메모해 두면 나중에 담당자가 바뀌어도 문제가 줄어듭니다.
파일 형태도 목적에 맞춰 선택합니다. 크기를 바꾸어도 선명해야 하는 그림에는 벡터 형식이 유리하고, 사진처럼 색이 많은 이미지는 일반 이미지 형식이 더 적합할 수 있습니다. 누리집 속도가 중요하다면 불필요하게 큰 파일을 그대로 올리지 말고 용량을 줄인 뒤 품질을 확인해야 합니다.
웹 아이콘을 사용할 때 자주 하는 실수
가장 흔한 실수는 아이콘을 장식으로만 보고 기능 설명을 생략하는 것입니다. 휴지통 모양이 삭제를 뜻하는 것은 널리 알려져 있지만, 새로 만든 모양이나 브랜드 전용 기호는 의미가 바로 전달되지 않을 수 있습니다. 이때는 아이콘 아래에 글자를 붙이거나, 마우스를 올렸을 때 설명이 나타나게 해야 합니다.
두 번째 실수는 색상만으로 상태를 구분하는 것입니다. 오류를 빨간색, 완료를 초록색으로 표시하더라도 색을 구별하기 어려운 사용자가 있을 수 있습니다. 색상과 함께 느낌표, 확인 표시, 상태 문구를 같이 사용하면 의미가 더 분명해집니다.
세 번째는 사용 허가를 확인하지 않고 검색 결과 이미지를 내려받는 경우입니다. 무료로 보이는 자료도 개인용과 상업용 조건이 다를 수 있고, 출처 표시나 재배포 제한이 붙어 있을 수 있습니다. 이미지 제공 사이트의 현재 이용 약관과 각 자료의 상세 조건을 사용 전에 다시 확인하세요. 공공 서비스 화면을 만든다면 관련 디자인 시스템의 아이콘 사용 원칙도 함께 살펴보는 것이 좋습니다.
파비콘도 아무 이미지나 작게 줄이면 안 됩니다. 글자가 많은 로고는 탭에서 뭉개질 수 있으므로 한 글자나 단순한 기호처럼 축소해도 알아보기 쉬운 형태가 적합합니다. 여러 크기의 화면과 어두운 브라우저 환경에서 충분히 보이는지도 확인하세요.
웹 아이콘 자주 묻는 질문
아이콘만 넣어도 버튼 기능을 설명할 수 있나요?
널리 알려진 기능은 가능하지만 항상 그런 것은 아닙니다. 검색이나 재생처럼 익숙한 기호는 아이콘만으로도 이해되지만, 보관·내보내기·공유처럼 서비스마다 위치와 뜻이 달라지는 기능은 글자를 함께 쓰는 편이 좋습니다.
무료 웹 아이콘이면 마음대로 사용해도 되나요?
무료라는 말은 비용이 없다는 뜻일 뿐, 모든 사용을 허용한다는 뜻은 아닐 수 있습니다. 상업적 사용 가능 여부, 출처 표시 필요 여부, 수정 가능 여부, 다른 사람에게 파일을 나누어 줄 수 있는지를 각각 확인해야 합니다.
파비콘은 로고 전체를 넣는 것이 좋나요?
로고가 단순하고 작은 크기에서도 구별된다면 사용할 수 있습니다. 긴 이름이 들어간 로고라면 핵심 기호만 남기는 편이 더 잘 보입니다. 실제 브라우저 탭과 즐겨찾기 화면에서 축소해 확인하는 과정이 필요합니다.
웹 아이콘의 적당한 크기는 정해져 있나요?
모든 화면에 같은 크기를 적용하기보다는 버튼의 역할과 주변 여백을 함께 봐야 합니다. 작은 아이콘은 누르기 어려울 수 있으므로 그림 크기뿐 아니라 버튼 전체의 누를 수 있는 영역도 확인하세요. 모바일 화면에서는 손가락으로 누를 때 다른 버튼까지 잘못 선택하지 않는지 직접 시험하는 것이 좋습니다.
아이콘을 직접 만들어야 하나요?
사이트의 성격을 강하게 보여 주거나 기존 자료로 뜻을 표현하기 어렵다면 직접 제작할 수 있습니다. 다만 아이콘마다 선 굵기와 비율이 달라지지 않도록 먼저 규칙을 정해야 합니다. 자주 쓰는 기능은 묶음으로 설계하고, 나중에 추가될 메뉴에도 같은 규칙을 적용할 수 있게 기록해 두면 관리가 편합니다.