반전 판을 따로 두고, 로고 곁의 글자는 대비 기준으로
원래 로고를 어두운 배경에 놓았을 때 모양의 일부가 배경에 묻힌다면, 밝은 색으로 바꾼 반전 판을 따로 만들어 시각 요소 규칙집에 넣습니다. 묻히지 않는다면 원래 로고를 그대로 쓰되, 어두운 배경에서 쓸 수 있다는 것을 규칙집에 함께 씁니다. 로고 곁에 놓이는 슬로건, 진료 시간, 주소 같은 글자는 로고와 달리 배경과의 대비 기준을 지키게 하고, 사진 위에 얹을 때는 사진의 밝기가 곳마다 다르므로 로고 아래를 고르게 어둡게 하거나 단색 띠를 깔아 그 위에 놓습니다. 어두운 배경은 누리집 머리글, 배너, 채널 표지 이미지, 밤에 보이는 간판처럼 생각보다 여러 곳에 생기므로, 이 규칙이 없으면 곳마다 로고를 다루는 방법이 달라집니다.
로고와 곁의 글자를 다르게 다루는 근거는 W3C의 「Understanding Success Criterion 1.4.3: Contrast (Minimum)」에 있습니다. 이 해설은 글자와 글자 이미지의 대비를 최소 4.5:1로 하고, 큰 글자는 최소 3:1로 하도록 하면서, 로고나 브랜드 이름의 일부인 글자에는 대비 요구가 없다고 밝힙니다. 다만 로고나 로고타입이 링크 같은 사용자 인터페이스 구성 요소로 쓰일 때는, 브랜드 지침이 허락한다면 글자 대비가 충분한 로고 변형을 택하는 것을 권장 사례로 제시합니다.
같은 해설은 브랜드 지침 때문이 아니라 만든 사람의 선택으로 로고를 낮은 대비로 보여 주는 경우는 대비 요구에서 빠지지 않는다는 점도 밝힙니다. 어두운 배경 위의 로고가 흐릿해 보이는 것이 브랜드 규칙이 정한 결과가 아니라 배경을 그렇게 정한 탓이라면, 규칙집에 반전 판을 두어 그런 일을 막는 편이 낫습니다.
어두운 배경에 놓이는 것과 지킬 기준
어두운 배경 위에 놓이는 것을 나누어 각각 지킬 기준을 정리했습니다. 둘째 칸은 W3C 해설에 나온 내용입니다.
| 놓이는 것 | 해설의 기준 | 병원이 정할 것 |
|---|---|---|
| 로고와 로고타입 | 대비 요구 없음 | 모양이 묻히면 반전 판을 둠 |
| 링크로 쓰이는 로고 | 충분한 대비의 로고 변형을 택하는 것을 권장 사례로 제시 | 누리집 머리글의 로고는 반전 판이나 대비가 충분한 판을 씀 |
| 로고 곁의 보통 글자 | 최소 4.5:1 | 슬로건, 진료 시간, 주소의 글자 색 |
| 로고 곁의 큰 글자 | 최소 3:1 | 배너 제목처럼 크게 쓰는 글자의 색 |
둘째 줄은 누리집에서 특히 따질 줄입니다. 누리집 머리글의 로고는 첫 화면으로 돌아가는 링크로 쓰이므로, 어두운 머리글 위에 원래 로고가 흐리게 놓인다면 반전 판으로 바꾸는 것이 해설의 권장 사례와 맞습니다. 해설이 「브랜드 지침이 허락한다면」이라는 조건을 붙인 만큼, 병원 규칙집에 반전 판이 들어 있어야 누리집 제작사가 그 판을 쓸 근거가 생깁니다.
셋째 줄과 넷째 줄은 로고가 아닌 글자에 대한 기준입니다. 해설은 4.5:1과 3:1을 넘어야 할 문턱값으로 다루고, 계산한 값을 반올림하지 않는다고 밝히므로, 4.49:1처럼 문턱에 가까운 값은 기준을 넘지 못한 것으로 셉니다. 색을 정할 때는 기준에 겨우 닿는 값보다 여유가 있는 값을 정해, 화면마다 색이 조금씩 달리 보여도 기준 아래로 떨어지지 않게 합니다.
반전 판을 정하고 쓰는 차례
원래 로고를 어두운 배경에 올리는 데서 시작합니다. 병원이 쓸 만한 가장 어두운 배경색과 중간 밝기의 배경색 위에 원래 로고를 놓고, 모양의 어느 부분이 배경에 묻히는지를 원장과 디자이너가 함께 따집니다. 화면에서만 따지지 말고 휴대전화로 같은 화면을 열어, 작은 화면에서 가는 획이 배경에 먼저 묻히지 않는지도 함께 따집니다.
묻히는 부분이 있다면 반전 판을 만듭니다. 반전 판은 원래 로고의 모양을 바꾸지 않고 색만 밝게 바꾸며, 색이 여럿인 로고라면 흰색 한 가지로 바꾼 판과 일부 색만 밝힌 판 가운데 원래 로고와 가장 가깝게 읽히는 쪽을 정합니다. 모양을 바꾸지 않는 까닭은 반전 판이 새로운 로고가 아니라 같은 로고의 다른 색 판이어야 하기 때문입니다. 획의 굵기나 글자 간격을 바꾸고 싶어지더라도 그것은 반전 판에서 할 일이 아니라 로고 자체를 고칠 때 할 일입니다.
로고 곁에 놓일 글자의 색을 정합니다. 슬로건, 진료 시간, 주소처럼 로고와 함께 놓일 글자는 어두운 배경과의 대비를 계산해 보통 글자는 4.5:1 이상, 큰 글자는 3:1 이상이 되는 색으로 정합니다. 배너 문구를 넣을 때는 대비와 함께 의료광고 금지 표현을 피했는지도 따집니다.
사진 위에 얹는 방법을 정합니다. 사진은 밝은 곳과 어두운 곳이 섞여 있어 로고가 놓인 곳마다 대비가 달라지므로, 로고 아래 사진을 고르게 어둡게 덮거나 단색 띠를 깔아 그 위에 반전 판을 놓는 방법을 규칙으로 정합니다. 해설은 사진에 우연히 찍힌 거리 간판 같은 글자는 대비 요구에 들지 않는다고 하지만, 병원이 사진 위에 얹은 로고 곁 글자는 읽히도록 놓은 글자이므로 대비 기준을 지킵니다.
정한 것을 규칙집에 넣습니다. 원래 판과 반전 판, 각 판을 쓸 배경색의 범위, 사진 위에 얹는 방법을 한 쪽에 넣고, 병원 이전 명칭 변경을 앞두고 새 로고를 만든다면 반전 판까지 한 벌로 맡겨 새 로고와 함께 받습니다.
사진 위에 로고를 얹는 방법
넷째 과정에서 정할 수 있는 방법을 나란히 놓았습니다. 둘째 칸은 그 방법이 어울리는 사진입니다.
| 방법 | 어울리는 사진 | 지킬 것 |
|---|---|---|
| 사진 전체를 고르게 어둡게 덮음 | 밝은 곳과 어두운 곳이 고르게 섞인 사진 | 덮은 뒤에도 로고 곁 글자의 대비를 계산함 |
| 로고 아래에만 단색 띠를 깖 | 사진의 모습을 최대한 살리고 싶은 사진 | 띠의 색과 로고의 대비를 원래 판과 같게 맞춤 |
| 사진의 어두운 곳에만 놓음 | 한쪽이 넓게 어두운 사진 | 어두운 곳의 가장 밝은 부분을 기준으로 대비를 따짐 |
셋째 줄은 가장 손이 덜 가지만 가장 흔들리기 쉬운 방법입니다. 사진을 잘라 쓰는 곳마다 어두운 곳의 위치와 크기가 달라지므로, 같은 사진이라도 채널마다 로고가 밝은 곳에 걸릴 수 있습니다. 여러 곳에 같은 사진을 쓸 계획이라면 첫째 줄이나 둘째 줄의 방법이 안전합니다. 어느 방법을 쓰든 덮는 정도나 띠의 색은 규칙집에 값으로 남겨, 다음 배너를 만드는 사람이 같은 값으로 만들게 합니다.
어두운 배경의 로고가 흐려지는 경우
원래 로고의 색을 디자이너마다 따로 밝힌 반전 판은 곳마다 다른 로고가 됩니다. 규칙집에 반전 판이 없으면, 배너를 만드는 사람과 누리집을 만드는 사람이 각자 다른 색으로 로고를 바꾸고, 어두운 배경에서만 로고가 여러 꼴로 흩어집니다. 밝은 배경에서는 하나였던 로고가 어두운 배경에서 둘셋이 되면, 같은 병원의 배너와 누리집이 서로 다른 곳의 것처럼 섞여 놓입니다.
로고에는 대비 요구가 없다는 말을 곁의 글자까지 넓힌 배너는 읽히지 않는 글자를 남깁니다. 해설이 대비 요구에서 뺀 것은 로고와 브랜드 이름의 글자이고, 그 곁의 진료 시간과 주소는 4.5:1의 기준을 지켜야 합니다.
사진 아무 곳에나 얹은 로고는 화면의 크기가 바뀔 때 밝은 곳으로 미끄러집니다. 사진 위의 로고 위치를 사진의 특정 부분에 기대어 정했다면, 잘리는 위치가 달라지는 곳마다 그 기대가 무너집니다. 휴대전화와 컴퓨터에서 사진이 잘리는 위치가 다르면, 컴퓨터에서는 어두운 곳에 있던 로고가 휴대전화에서는 밝은 하늘 위에 놓입니다.
어두운 배경의 로고에 관한 질문
반전 판은 꼭 흰색이어야 하나요?
흰색일 필요는 없지만, 병원이 쓸 어두운 배경 위에서 모양이 묻히지 않아야 합니다. 원래 로고의 색 가운데 밝은 색을 살린 판이 원래 로고와 더 가깝게 읽힌다면 그 판을 반전 판으로 정할 수 있습니다.
로고의 대비도 계산해야 하나요?
해설은 로고와 브랜드 이름의 글자에 대비 요구가 없다고 밝힙니다. 다만 누리집에서 링크로 쓰이는 로고는 대비가 충분한 변형을 쓰는 것을 권장 사례로 들므로, 그런 곳에서는 반전 판의 대비도 함께 따집니다.
어두운 화면 모드에서도 반전 판을 써야 하나요?
누리집이나 앱이 어두운 화면 모드를 지원한다면, 그 모드의 배경도 어두운 배경의 하나로 다루고 같은 규칙을 씁니다. 모드에 따라 원래 판과 반전 판이 바뀌어 나오게 하면 어느 모드에서도 로고가 묻히지 않습니다.
간판처럼 밤에 보이는 곳도 이 규칙을 따르나요?
간판은 조명과 재료에 따라 보이는 모습이 달라지므로, 화면용 반전 판을 그대로 쓰기보다 간판 업체와 밤에 보이는 모습을 따로 맞춥니다. 다만 모양을 바꾸지 않고 색만 바꾼다는 반전 판의 원칙은 간판에도 그대로 씁니다.
반전 판이 생기면 원래 로고는 언제 쓰나요?
원래 로고는 밝은 배경에서 계속 쓰고, 반전 판은 규칙집에 정한 어두운 배경의 범위에서만 씁니다. 두 판의 쓰임을 배경색의 범위로 나누어 써 두면, 중간 밝기의 배경에서 어느 판을 쓸지 묻는 일이 줄어듭니다.
묻히는 로고에는 반전 판을, 곁의 글자에는 대비 기준을
어두운 배경 위의 로고는 원래 판의 모양이 배경에 묻히는지로 반전 판이 필요한지를 정하고, 반전 판은 모양을 바꾸지 않고 색만 밝게 바꾸어 규칙집에 넣습니다. 로고 곁의 글자는 W3C 해설의 4.5:1과 3:1 기준을 지키고, 사진 위에는 고르게 어둡게 덮거나 단색 띠를 깔아 얹으면, 어두운 배경에서도 로고와 곁의 글자가 함께 읽힙니다.