앱 아이콘 크기로 줄인 병원 로고의 식별성 확인

실제 휴대폰 화면에서 판정하기

판정 결과와 간략형은 시각 요소 규칙집에 아이콘 항목으로 정리하고, 로고 원본 파일과 함께 간략형 원본도 보관합니다. 앱 아이콘뿐 아니라 검색 결과의 파비콘, 메신저 채널의 프로필 이미지처럼 작은 정사각형으로 쓰이는 곳이 모두 이 항목의 적용 대상입니다. 이런 곳은 환자가 병원을 처음 만나는 곳이기도 해, 작은 로고 하나가 병원의 첫인상을 정하기도 합니다.

작은 정사각형으로 쓰이는 곳

「관련 안내의 크기 기준」 칸은 파일을 만들 때의 기준이고, 실제 화면에 표시되는 크기는 이보다 작을 수 있습니다. 그래서 파일 기준을 맞춘 뒤에도 화면에서의 판정이 따로 필요합니다.

검색 결과 파비콘 안내가 말하는 것

Google 검색 센터의 파비콘 안내는 사용자가 검색결과에서 사이트를 빠르게 식별할 수 있도록 파비콘이 웹사이트 브랜드를 시각적으로 잘 나타내야 한다고 하고, 파비콘은 가로세로 비율 1:1의 정사각형이어야 하며 크기는 8x8픽셀 이상이어야 하고, 다양한 표시 경로에서 보기 좋도록 48x48px보다 큰 파비콘을 쓰는 것이 좋다고 안내합니다. 파비콘 URL은 안정적이어야 하므로 자주 고치지 말라고도 합니다.

네이버 서치어드바이저의 파비콘 안내도 너비와 높이가 같은 정사각형으로 최소 16px 이상이어야 하고, 검색 결과에 노출될 때는 입수된 파비콘을 화면에 맞는 크기로 리사이즈해 표시하므로 32px 이상을 권장한다고 밝힙니다. 또 웹사이트를 표현할 수 있는 고유의 이미지를 사용하고, 파비콘 URL을 자주 변경하지 않도록 안내합니다. 두 안내 모두 파일은 크게 만들되 화면에서는 작게 줄어 보인다는 점을 전제로 합니다.

판정하는 방법

판정은 실제 휴대폰 여러 대에서 합니다. 화면 크기와 해상도가 다른 기종을 섞어야, 작은 화면에서만 생기는 뭉개짐을 놓치지 않습니다. 로고 파일을 홈 화면 바로가기나 시험용 아이콘으로 띄우고, 화면을 팔 길이만큼 떨어뜨린 상태에서 판정합니다.

판정 기준은 다음과 같습니다. 기준을 미리 정하지 않으면 판정하는 사람마다 「괜찮다」는 느낌으로 결론을 내리게 됩니다. 바깥 윤곽만으로 다른 아이콘과 구별되는가, 로고 안의 글자가 읽히는가, 로고의 색이 배경과 섞이지 않는가입니다. 직원 몇 명에게 아이콘 여러 개 사이에서 병원 로고를 찾게 하고 걸린 시간과 혼동한 아이콘을 기록하면, 판정이 한 사람의 느낌에 기대지 않게 됩니다. 판정할 때는 병원 로고 옆에 실제로 홈 화면에 함께 놓일 만한 다른 앱 아이콘이나 주변 병원의 아이콘을 나란히 놓아, 실제 사용 환경과 비슷하게 만듭니다.

아이콘용 간략형을 정하는 기준

판정에서 글자가 읽히지 않는다면, 아이콘용 간략형은 글자를 빼고 심볼만 남기거나 병원 이름의 첫 글자만 남기는 방향으로 정합니다. 심볼이 복잡해 윤곽이 뭉개진다면 세부 장식을 덜어 내고 바깥 윤곽만 살린 형태를 만듭니다.

간략형은 원래 로고에서 덜어 낸 것이어야 하며, 새로운 모양을 만들어서는 안 됩니다. 간략형을 본 사람이 원래 로고를 떠올릴 수 있어야 작은 화면과 큰 화면의 인상이 이어지기 때문입니다. 간략형을 만들 때는 원래 로고에서 무엇을 남기고 무엇을 덜어 냈는지를 함께 기록해, 로고를 다듬을 일이 생겼을 때 간략형도 같은 원칙으로 정리할 수 있게 합니다.

간략형도 실제 휴대폰 화면에서 같은 방법으로 판정해 통과한 것만 규칙집에 올립니다. 간략형마저 판정을 통과하지 못하면, 원래 로고의 형태 자체를 다듬어야 하는지를 디자인 담당자와 따로 논의합니다. 이 논의는 로고 전체를 고치는 큰 결정이 될 수 있으므로, 판정 기록을 근거로 운영 회의에서 정합니다.

정사각형 안의 여백과 잘림

작은 아이콘은 정사각형이나 둥근 모서리, 원형으로 잘려 표시됩니다. 가로로 긴 로고를 그대로 정사각형에 넣으면 로고가 아주 작아지고, 원형으로 잘리는 곳에서는 양 끝이 사라집니다. 그래서 아이콘용 간략형은 처음부터 정사각형 안에 들어가는 비율로 만들고, 원형으로 잘려도 핵심 형태가 남도록 가운데에 모읍니다.

정사각형 둘레에는 일정한 여백을 남깁니다. 여백 없이 가장자리까지 채우면 둥근 모서리나 원형 표시에서 로고가 잘리고, 여백이 너무 넓으면 로고가 작아져 판정을 통과하기 어렵습니다. 여백의 비율은 판정을 거쳐 정하고, 규칙집에 수치로 남겨 쓰는 사람마다 여백이 달라지지 않게 합니다.

작은 크기에서의 색

큰 화면에서는 구별되던 두 색도 아이콘 크기에서는 하나의 덩어리로 섞일 수 있습니다. 특히 밝기가 비슷한 두 색을 나란히 쓴 로고는 작아질수록 경계가 흐려집니다.

아이콘용 간략형은 색 수를 줄이는 방향으로 정리합니다. 대표 색 하나와 바탕색 하나로 줄여도 병원을 알아볼 수 있다면 그 형태가 가장 안정적입니다. 휴대폰 홈 화면처럼 배경 이미지가 사용자마다 다른 곳에서는 아이콘 자체에 바탕색을 넣어, 어떤 배경 위에서도 로고가 묻히지 않게 합니다.

규칙집 아이콘 항목에 남길 것

시각 요소 규칙집의 아이콘 항목에는 판정에 쓴 기종과 크기, 판정 결과, 간략형의 형태와 쓰는 곳, 간략형을 쓰지 않는 곳을 정리합니다. 판정에 쓴 조건이 기록되어 있어야 나중에 새 기종이 나왔을 때 판정을 반복할지 판단할 수 있습니다.

로고 원본 파일과 함께 간략형도 원본 파일로 보관하고, 쓰이는 곳마다 필요한 크기의 파일을 미리 만들어 함께 보관합니다. 쓰는 사람이 원본을 그때그때 줄여 쓰면 화면마다 다른 결과물이 생기므로, 규칙집에는 「아이콘에는 이 파일만 쓴다」는 원칙을 명시합니다. 외부 업체에 앱이나 예약 화면 제작을 맡길 때도 이 파일과 원칙을 함께 전달해, 업체가 원래 로고를 임의로 줄여 쓰지 않게 합니다. 업체가 만든 시안에 들어간 아이콘도 규칙집의 파일과 같은지 납품 전에 대조합니다.

지도 앱의 작은 대표 이미지

지도 앱의 검색 목록에서 병원의 대표 이미지는 작은 사각형으로 잘려 표시됩니다. 공간 사진을 대표 이미지로 쓰면 작은 크기에서는 무엇을 찍었는지 알기 어렵고, 여러 병원의 비슷한 대기실 사진 사이에서 구별되지 않을 수 있으며, 로고를 쓰면 간략형이 필요한 상황이 됩니다.

지도 앱의 작은 목록에서도 병원을 알아볼 수 있도록, 병원은 병원 플레이스 사진을 판정 결과에 맞추어 정리하고, 대표 이미지에는 간략형과 공간 사진 가운데 작은 크기에서 더 잘 알아볼 수 있는 쪽을 씁니다.

이름이 바뀔 때의 아이콘 교체

병원 이름이 바뀌어 로고가 새로 만들어지면 간략형도 새로 정해야 합니다. 이때 파비콘은 안내대로 URL을 자주 고치지 않는 것이 좋으므로, 주소는 유지하고 이미지 파일만 교체하는 방식이 유리합니다. 네이버 안내는 같은 주소에서 이미지를 교체하더라도 재수집이 필요해 반영에 시간이 걸릴 수 있다고 밝힙니다. 이름 변경 직후에는 새 로고와 옛 파비콘이 한동안 함께 노출될 수 있으므로, 교체 일정을 간판과 누리집 교체 일정과 맞추어 미리 진행합니다.

병원은 병원 이전 명칭 변경을 파비콘 주소는 유지하고 이미지만 교체하는 방식으로 아이콘까지 마무리합니다.