병원 로고와 색을 정할 때 먼저 따질 것

로고와 색은 쓰일 곳과 읽힘부터

순서를 크게 나누면 셋입니다. 먼저 로고와 색이 쓰일 곳을 목록으로 만들고, 다음으로 그 목록에서 병원 색이 글자나 배경으로 쓰이는 곳마다 대비를 따지며, 마지막으로 남은 후보 가운데 병원이 전하려는 인상에 맞는 것을 정합니다. 취향은 마지막에만 판단 기준이 되며, 아래 다섯 단계는 이 셋을 더 잘게 나눈 것입니다. 병원브랜딩에서 로고와 색은 한 번 정하면 간판과 인쇄물 전체를 따라 바꾸어야 해서 새로 정하는 비용이 크므로, 읽힘에서 걸러지는 후보를 앞 단계에서 미리 빼는 편이 낫습니다.

쓰일 곳마다 먼저 따질 것

표의 셋째 열 가운데 홈페이지와 안내 표지는 W3C의 웹 접근성 지침 해설이 기준을 제시합니다. W3C는 대비(최소) 기준에서 글자와 글자 이미지는 배경과의 명암 대비가 4.5:1 이상이어야 하고, 큰 글자는 3:1 이상이어야 한다고 설명합니다. 다만 같은 기준은 로고나 브랜드 이름의 일부인 글자에는 대비 요구가 없다고 밝힙니다. 그래서 병원이 따질 것은 로고 그 자체의 대비가 아니라, 병원 색이 로고 밖의 글자와 버튼에 쓰일 때의 대비입니다. 로고에 쓴 연한 색을 홈페이지의 본문 링크 색으로 그대로 옮기면, 로고는 괜찮아도 링크 글자는 기준에 못 미칠 수 있습니다.

W3C는 이 기준의 취지를 시력이 다소 낮거나 대비를 느끼는 힘이 약한 사람도 보조 기술 없이 글자를 읽을 수 있게 하는 데 있다고 설명합니다. 병원을 찾는 환자에는 시력이 약해진 노년층도 함께 있으므로, 이 취지는 병원 홈페이지와 안내문에 그대로 들어맞습니다. 같은 해설은 18포인트 글자나 14포인트 굵은 글자를 큰 글자로 셈해 더 낮은 대비를 허용한다고 설명합니다. 병원 색이 연하다면 제목처럼 큰 글자에만 쓰고, 본문 글자는 진한 색으로 쓰는 방식으로 두 기준을 함께 맞출 수 있습니다.

쓰일 곳 목록에서 인상 고르기까지

1. 로고와 색이 쓰일 곳의 목록 만들기
2. 병원 색이 글자로 쓰이는 곳의 대비 따지기
3. 색만으로 구분하는 곳 찾기
4. 작은 아이콘 크기에서 형태 확인하기
5. 남은 후보 가운데 인상으로 정하기

첫째 단계는 로고와 색이 쓰일 곳의 목록을 만드는 일입니다. 간판과 출입문 표지, 홈페이지와 모바일 화면, 처방전과 진료비 영수증과 진료 안내문 같은 서류, 진료 예약 문자에 들어가는 링크 화면, 검색 결과의 작은 아이콘까지 목록에 올립니다. 목록마다 크기, 인쇄인지 화면인지, 색을 몇 가지까지 쓸 수 있는지를 함께 적으면 다음 단계에서 따질 곳이 분명해집니다.

둘째 단계는 병원 색이 글자로 쓰이는 곳마다 대비를 따지는 일입니다. W3C는 일반 글자에 4.5:1, 큰 글자에 3:1을 최소 대비로 제시하고, 이 기준값은 반올림하지 않는다고 설명합니다. 해설이 드는 예처럼 4.499:1은 4.5:1 기준을 채우지 못한 것으로 셈한다는 뜻입니다. 병원 색을 버튼 바탕으로 쓰고 그 위에 흰 글자를 얹는 경우도 같은 셈을 합니다.

셋째 단계는 색만으로 구분하는 곳을 찾는 일입니다. W3C의 색 사용 기준은 색이 정보를 전달하거나 구분하는 하나뿐인 시각적 수단이 되지 않아야 한다고 설명합니다. 진료과 안내를 파란색과 초록색으로만 구분했다면 글자나 기호를 함께 넣습니다. 같은 기준은 색 사이의 밝기 격차가 3:1 이상이면 색만 쓴 것으로 셈하지 않는다고 함께 설명합니다. 다만 초록은 정상, 빨강은 이상처럼 특정 색을 정확히 알아보아야 뜻이 통하는 경우에는 밝기 차이와 관계없이 다른 시각적 표시가 더 필요하다고 해설은 밝힙니다. 같은 해설은 부분 시력을 가진 사람과 많은 노년층이 색을 잘 구분하지 못하고, 흑백 화면을 쓰는 사람도 색으로 전한 정보를 받지 못한다고 설명합니다.

넷째 단계는 검색 결과에 나오는 작은 아이콘 크기에서 로고의 형태가 남는지 확인하는 일입니다. Google 검색센터는 파비콘이 정사각형(1:1)이어야 하고 최소 8x8픽셀이어야 하며, 48x48픽셀보다 큰 크기를 권장한다고 안내합니다. 네이버 서치어드바이저는 파비콘을 최소 16px 이상의 정사각형으로 안내하고 32px 이상을 권장합니다. 가로로 긴 로고는 이 크기에서 글자가 뭉개지므로, 로고에서 상징 부분만 떼어 낸 정사각형 판을 함께 마련합니다.

Google 검색센터는 사용자가 검색 결과에서 사이트를 빠르게 알아볼 수 있도록 파비콘이 웹사이트 브랜드를 시각적으로 잘 나타내야 한다고 안내합니다. 같은 안내는 파비콘 주소가 안정적이어야 하며 자주 변경하지 말라고 덧씁니다. 네이버 서치어드바이저도 받은 파비콘을 화면에 맞는 크기로 줄여 표시한다고 설명합니다. 로고가 정해지지 않은 채 아이콘부터 올렸다가 로고가 달라지면 아이콘 파일과 주소까지 함께 고쳐야 하므로, 아이콘은 로고가 정해진 뒤에 올리는 편이 낫습니다.

다섯째 단계에서야 남은 후보 가운데 병원이 전하려는 인상에 맞는 것을 정합니다. 앞 단계를 통과한 후보끼리 견주므로 취향으로 정해도 읽힘 문제가 뒤늦게 생기지 않습니다.

쓰일 곳 목록에 적을 내용

이 목록은 로고를 정한 뒤에도 그대로 쓸모가 있습니다. 새 인쇄물을 만들거나 홈페이지를 고칠 때 이 목록에 한 줄을 더하고 같은 단계를 거치면, 로고와 색이 곳마다 다르게 쓰이는 일을 줄일 수 있습니다.

병원은 구조화 데이터를 로고와 색을 정한 뒤에 다루는 항목으로 미룹니다. 검색 로봇에 병원 정보를 알리는 일은 병원 이름과 로고가 정해진 다음에 해야 검색 결과와 홈페이지와 간판의 모습이 한 가지로 이어지기 때문입니다.

로고와 색을 정할 때 자주 생기는 잘못

앞의 단계를 거치고도 로고와 색을 정하는 과정에서 생기는 잘못은 세 가지입니다.

첫째는 큰 글자로 셈한 제목이 작은 화면에서 줄어드는 경우를 놓치는 잘못입니다. W3C 해설은 18포인트 글자나 14포인트 굵은 글자를 큰 글자로 셈하므로, 휴대전화 화면에서 제목 글자가 그 크기 아래로 줄면 3:1이 아니라 4.5:1 기준을 따집니다. 이 잘못은 컴퓨터 화면으로만 시안을 검토할 때 생기고, 휴대전화로 홈페이지를 열었을 때 드러납니다.

둘째는 병원 색의 가짓수를 늘리는 잘못입니다. 색이 하나 늘 때마다 글자와 배경으로 짝지을 조합도 늘어 대비를 셈할 곳이 함께 늘어납니다. 진료과마다 다른 색을 주고 싶다는 요청에서 흔히 생기며, 인쇄물마다 색이 조금씩 다르게 나올 때 드러납니다.

셋째는 시안을 정하는 사람의 눈으로만 판단하는 잘못입니다. 큰 모니터로 시안을 오래 들여다본 사람은 처음 보는 환자보다 글자를 쉽게 읽습니다. 접수대에서 안내문 글자를 거듭 묻는 환자가 늘면 이 잘못을 의심합니다.