홈페이지 아이콘은 브라우저 탭에 뜨는 파비콘부터 메뉴·버튼에 쓰이는 작은 그림 기호, 앱처럼 등록될 때 쓰이는 대표 아이콘까지를 함께 가리키는 말이다. 이 기사는 홈페이지 아이콘을 준비할 때 무엇을 얼마나 신경 써야 하는지, 그리고 그 비용이 왜 업체마다 다르게 매겨지는지를 처음부터 끝까지 짚어 본다.
아이콘은 크게 세 가지 쓰임으로 나뉜다. 첫째는 파비콘으로, 브라우저 탭이나 즐겨찾기 목록에 작게 표시되어 사이트를 구분해 주는 역할을 한다. 둘째는 메뉴나 버튼 옆에 붙어 기능을 한눈에 알아보게 하는 인터페이스용 기호다. 셋째는 홈페이지형 블로그나 웹앱을 스마트폰 화면에 저장했을 때 앱처럼 보이게 하는 대표 아이콘이다. 셋 다 크기와 형식 기준이 다르므로, 제작을 의뢰하기 전에 어떤 용도로 쓸 것인지부터 정리해 두는 것이 순서를 줄이는 길이다.
아이콘 비용이 갈리는 이유
아이콘 하나의 가격이 천차만별로 보이는 까닭은 작업 방식이 다르기 때문이다. 이미 만들어진 기호 모음(아이콘 세트)을 그대로 가져다 쓰면 별도 비용이 거의 들지 않거나 매우 적게 든다. 반면 브랜드 색상과 분위기에 맞춰 하나하나 새로 그리는 방식이라면, 디자이너의 작업 시간과 수정 횟수만큼 비용이 늘어난다. 또한 홈페이지 전체 디자인 작업에 아이콘 제작이 포함되어 있는 경우와, 아이콘만 따로 의뢰하는 경우도 셈법이 달라진다. 견적을 받을 때는 이 아이콘이 기존 소스를 활용하는 것인지, 새로 그리는 것인지부터 확인하는 것이 좋다.
홈페이지 제작 방식에 따라 달라지는 아이콘 처리
홈페이지 제작은 크게 직접 코드를 짜는 방식, 제작 도구(빌더)를 쓰는 방식, 그리고 근래 늘어난 홈페이지 제작 AI를 활용하는 방식으로 나뉜다. 제작 도구나 홈페이지 만들어주는 AI를 쓰면 아이콘 세트가 기본으로 제공되는 경우가 많아, 별도로 아이콘을 그릴 필요 없이 원하는 그림을 골라 색상만 바꾸면 끝나는 경우가 흔하다. 반면 처음부터 직접 설계하는 방식이나 홈페이지 디자인을 독자적으로 새로 짜는 경우에는 파비콘과 아이콘을 별도 파일로 준비해 코드에 심어야 하므로 절차가 하나 더 늘어난다. 홈페이지형 블로그처럼 이미 정해진 틀 안에서 운영하는 경우에는 아이콘 항목이 설정 메뉴 안에 마련되어 있어 이미지 파일만 올리면 되는 경우가 많다.
홈페이지 디자인 참고 사이트를 볼 때 놓치기 쉬운 점
홈페이지 디자인 참고 사이트를 둘러볼 때 많은 사람이 전체 레이아웃과 색상 배합에만 집중하고, 정작 작은 아이콘의 통일감은 지나치는 경우가 많다. 하지만 실제로 완성도 차이를 크게 가르는 부분은 아이콘의 굵기와 선 스타일이 서로 맞아떨어지는지, 그리고 사이트 전체에서 같은 규칙으로 쓰였는지다. 참고 사이트를 볼 때는 큰 그림뿐 아니라 메뉴 아이콘, 버튼 아이콘, 파비콘이 서로 같은 톤을 유지하고 있는지까지 함께 살펴보는 것이 좋다. 이런 세부 요소는 제작 단가표에 별도 항목으로 잡히지 않는 경우가 많아, 계약 전에 미리 물어봐야 나중에 추가 비용 이야기가 나오지 않는다.
흔한 오해 바로잡기
아이콘을 그냥 인터넷에서 검색해 내려받아 쓰면 된다고 생각하는 경우가 많은데, 출처가 불분명한 이미지는 저작권 문제가 생길 수 있어 상업적으로 운영되는 홈페이지에는 적합하지 않다. 또한 아이콘 제작이 무조건 비싼 항목이라고 여기는 경우도 있지만, 실제로는 홈페이지 제작 단가표 전체에서 차지하는 비중이 크지 않은 경우가 많다. 오히려 시간을 잡아먹는 쪽은 아이콘 자체보다 어떤 그림을 어디에 쓸지 결정하는 논의 과정인 경우가 흔하다. 처음부터 어떤 메뉴에 어떤 종류의 기호가 필요한지 목록을 정리해 두면 이 시간을 크게 줄일 수 있다.
준비 전에 확인해야 할 순서
홈페이지 제작을 의뢰하기 전에는 먼저 사이트에 필요한 아이콘의 개수와 종류를 목록으로 만들어 두는 것이 좋다. 그다음 브랜드 색상과 로고 분위기를 함께 전달하면, 새로 그리는 방식이든 기존 세트를 고르는 방식이든 방향을 잡기가 수월해진다. 마지막으로 파비콘이나 대표 아이콘처럼 별도 파일 형식이 필요한 항목은 미리 요청해 두어야, 완성 이후에 다시 작업하는 시간을 아낄 수 있다.
| 구분 | 내용 |
|---|---|
| 파비콘 | 브라우저 탭·즐겨찾기에 쓰이는 가장 작은 단위의 표시 아이콘 |
| 인터페이스 아이콘 | 메뉴·버튼 옆에서 기능을 나타내는 기호 |
| 대표 아이콘 | 스마트폰 화면 저장 시 앱처럼 보이게 하는 상징 이미지 |
| 기존 세트 활용 | 이미 만들어진 아이콘 모음을 그대로 사용, 비용 부담이 적음 |
| 맞춤 제작 | 브랜드에 맞춰 새로 그림, 작업 시간만큼 비용 발생 |
홈페이지 아이콘을 준비할 때는 우선 어떤 제작 방식을 택했는지부터 다시 살펴보는 것이 좋다. 제작 도구나 홈페이지 제작 AI를 쓰고 있다면 기본 제공되는 아이콘 목록을 먼저 확인하고, 직접 설계하는 방식이라면 담당자에게 아이콘이 기존 세트인지 맞춤 제작인지를 구체적으로 물어보면 된다. 세부 항목은 제작 단가표나 계약서에 명시된 내용을 기준으로 확인하는 것이 가장 정확하다.
· · · · · · · · · ·
스페셜타임스는 AI 기술의 도움을 받아 더 빠르고 다양한 뉴스를 독자에게 전달하기 위해 노력하고 있습니다.