병원 로고로 파비콘을 만들 때의 주의점

로고를 줄이는 것이 아니라 정사각형 칸에 다시 담기

크기와 모양의 조건은 검색 서비스가 정해 둔 안내를 따릅니다. 네이버 서치어드바이저는 파비콘이 너비와 높이가 같은 정사각형이고 최소 16px 이상이어야 하며, 다양한 환경에서 보기 좋게 표시되도록 32px 이상을 권장한다고 안내합니다. Google 검색센터는 가로세로 비율 1:1의 정사각형에 8x8픽셀 이상이어야 하고, 다양한 표시 경로에서 보기 좋도록 48x48px보다 큰 파비콘을 쓰는 것이 좋다고 안내합니다. 두 안내를 함께 맞추려면 정사각형으로, 48px보다 큰 크기로 만듭니다.

두 검색 서비스의 파비콘 조건

표의 권장 크기는 만들어 올리는 파일의 크기입니다. 검색 결과에는 서비스가 화면에 맞추어 줄여서 보여 주므로, 큰 파일로 만들어도 실제로 환자 눈에 보이는 크기는 훨씬 작습니다. 그래서 파일을 크게 만드는 것만으로는 부족하고, 작게 줄었을 때 무엇이 남는지를 먼저 정해야 합니다.

파비콘에 남길 부분을 정하는 기준

로고에 심볼과 병원 이름 글자가 함께 있다면 파비콘에는 심볼만 남깁니다. 병원 이름 글자는 작은 칸에서 읽히지 않고, 심볼은 모양으로 알아볼 수 있습니다. 로고가 글자만으로 되어 있다면 병원 이름의 첫 글자나 고유 이름의 앞 글자 한두 자를 남기는 방법을 따집니다.

남긴 부분도 그대로 쓰지 않고 다듬습니다. 가는 선과 작은 장식은 작게 줄이면 사라지거나 얼룩처럼 남으므로 빼고, 색은 로고의 대표 색만 남깁니다. 네이버 서치어드바이저는 배경색을 투명으로 지정할 수 있다고 안내하지만, 투명 배경으로 만들면 검색 결과의 바탕색에 따라 심볼이 묻힐 수 있으므로 밝은 바탕과 어두운 바탕에서 모두 알아볼 수 있는지 확인합니다.

로고 모양별 파비콘 정리

어느 줄에 해당하든, 만든 파비콘은 브라우저 탭에 실제로 띄워 작은 크기에서 확인합니다. 디자인 파일 안에서 크게 확대해 놓고 판단하면 실제 크기에서 뭉개지는 부분을 놓칩니다.

병원을 알아보게 하는 모양

Google 검색센터는 사용자가 검색 결과를 볼 때 사이트를 빠르게 식별할 수 있도록 파비콘이 웹사이트 브랜드를 시각적으로 잘 나타내야 한다고 안내하고, 네이버 서치어드바이저도 웹사이트를 표현할 수 있는 고유의 이미지를 쓰라고 안내합니다. 의료 기관에서 두루 쓰는 십자 모양이나 하트 모양만 넣은 파비콘은 다른 병원의 파비콘과 나란히 놓였을 때 구별되지 않습니다.

환자는 검색 결과에서 같은 진료과의 병원 여러 곳을 한 화면에서 함께 읽습니다. 그 가운데 이 병원을 알아보게 하는 것은 병원만의 심볼이나 글자 모양과 병원의 대표 색입니다. 파비콘은 로고와 같은 병원임이 드러나야 하므로, 파비콘을 위해 로고에 없는 새 모양을 만들지 않습니다.

같은 지역에 이름이 닮은 병원이 있다면 파비콘의 역할이 더 커집니다. 검색 결과에서 이름만으로는 두 병원이 헷갈릴 때, 환자는 작은 아이콘의 모양과 색으로 자신이 찾던 병원을 가려냅니다. 이런 경우에는 파비콘이 이웃 병원의 파비콘과 모양이나 색에서 분명히 달라 보이는지도 확인합니다.

파비콘 주소와 한 사이트 한 파비콘

파비콘은 한 번 정하면 주소를 오래 유지하는 편이 좋습니다. 네이버 서치어드바이저는 파비콘 URL과 이미지가 변경될 경우 업데이트가 지연되고 검색 결과 안의 파비콘 이미지가 일정하지 않을 수 있다고 안내하고, Google 검색센터도 파비콘 URL을 자주 변경하지 말라고 안내합니다. Google은 홈페이지를 다시 크롤링하고 처리하는 데 며칠에서 몇 주까지 걸릴 수 있다고 설명합니다.

Google 검색에서는 사이트당 파비콘이 하나만 지원되고, 사이트는 호스트 이름으로 정의됩니다. 병원 누리집 안의 하위 경로에 둔 지점 화면이나 진료과 화면은 따로 파비콘을 가질 수 없고 본원 누리집의 파비콘을 함께 씁니다. 지점마다 다른 파비콘을 쓰고 싶다면 하위 도메인으로 나누어야 한다는 뜻이므로, 이 점은 누리집 구조를 정할 때 함께 따집니다.

제작 업체에 전할 기술 조건

파비콘의 기술적인 설정은 누리집 제작 업체가 맡더라도, 병원은 지켜야 할 조건을 알고 전해야 합니다. 네이버 서치어드바이저는 검색 로봇이 파비콘을 수집할 수 있어야 하고, 파비콘의 주소에는 상대 경로가 아닌 절대 경로를 쓰며, 같은 rel 속성값은 한 개만 두라고 안내합니다. Google 검색센터도 Googlebot이 파비콘 파일과 홈페이지를 크롤링할 수 있어야 한다고 안내합니다.

업체에 넘길 때는 정리한 파비콘 파일과 이 조건을 한 장에 담아 전합니다. Google 검색센터는 모든 가이드라인을 지켜도 파비콘이 표시되지 않을 수 있다고 밝히고 있으므로, 표시 여부만으로 업체의 작업을 판단하지는 않습니다.

애플 기기용 아이콘

파비콘 설정에 쓰는 rel 속성값 가운데 apple-touch-icon은 Google 검색센터의 설명대로 Apple 개발자 문서에 따른 iOS 친화적인 아이콘을 가리키고, 네이버 서치어드바이저도 이 값을 파비콘 마크업에 쓸 수 있는 값으로 안내합니다. 제작 업체가 이 아이콘을 따로 만든다면, 탭에 쓰는 파비콘과 같은 원본에서 출발하게 합니다.

네이버 서치어드바이저는 여러 rel 속성이 함께 있을 때 shortcut icon, icon, 기본 아이콘, apple-touch-icon 순으로 우선순위를 정한다고 안내합니다. 어느 값이 검색 결과에 쓰일지 병원이 정할 수 없는 셈이므로, 아이콘마다 크기만 다르고 모양과 색은 같게 둡니다.

AI 도구로 파비콘을 그릴 때

파비콘을 AI 이미지 도구로 새로 그리게 하면 로고와 비슷하지만 다른 모양이 나올 수 있습니다. 선의 굵기나 심볼의 비율이 조금만 달라져도 환자는 파비콘과 간판 로고를 같은 병원의 표시로 묶지 못합니다. 파비콘은 로고 원본 파일에서 출발해 줄이고 다듬는 것이 원칙입니다.

AI 도구로 만든 그림은 대기실 화면이나 게시물의 배경처럼 로고가 쓰이지 않는 곳에서 쓰고, 로고와 파비콘의 원본 파일은 병원이 따로 보관해 업체에 그 파일만 넘깁니다. 로고 원본 파일을 바탕으로만 작업한다는 조건을 정해 두고, 병원은 병원 AI 이미지 영상을 만듭니다.

정사각형, 큰 파일, 작은 크기에서의 확인

병원 로고로 파비콘을 만들 때는 정사각형으로, 48px보다 큰 파일로 만들되 작은 크기에서 알아볼 수 있는 심볼이나 앞 글자만 남깁니다. 가는 선과 장식은 빼고 로고의 대표 색 안에서 정리하며, 정한 파비콘의 주소는 오래 유지합니다.