채널마다 대표 색을 지키는 방법

눈이 아니라 색이 정해지는 원본의 값으로

값을 남긴 뒤에는 두 가지를 채널마다 따집니다. 하나는 대표 색으로 쓴 글자가 바탕과 충분히 대비되는지이고, 다른 하나는 대표 색이 무엇인가를 알리는 일을 혼자 떠맡고 있지 않은지입니다. W3C의 웹 콘텐츠 접근성 지침 해설은 앞의 것을 1.4.3 명도 대비(최소) 기준으로, 뒤의 것을 1.4.1 색 사용 기준으로 다룹니다. 병원브랜딩에서 이 두 기준을 채널마다 따로 따지는 까닭은, 같은 대표 색이라도 홈페이지의 글자와 썸네일 속 글자는 값이 정해지는 곳이 달라서, 한 채널에서 통과한 짝이 다른 채널에서도 그대로 쓰였는지는 그 채널의 원본을 열어야 알 수 있기 때문입니다.

채널마다 대표 색이 정해지는 곳

표의 넷째 열이 채널마다 기록하는 까닭을 보여 줍니다. 홈페이지는 값 한 줄로 고칠 수 있지만, 블로그와 SNS의 이미지는 글자가 픽셀로 굳어 있어 한 장씩 새로 만들어야 합니다. W3C 1.4.3 해설은 글자 이미지가 확대할 때 깨지기 쉽고 글자와 바탕의 대비나 색 조합을 바꾸기도 더 어렵다고 설명하며, 가능하면 글자로 쓰고 그렇지 않다면 해상도가 높은 이미지를 쓰라고 제안합니다. 그래서 이미지 채널의 대표 색은 내보내기 전에 따지고, 원본 파일을 함께 보관합니다.

병원은 병원 홈페이지 기획을 색 기록표의 홈페이지 줄에 글자 색과 바탕 색의 짝이 정해진 뒤에 시작합니다. 홈페이지의 색 값은 다른 채널이 색을 가져가는 기준점이 됩니다. 이 짝이 정해지지 않으면, 쪽마다 만드는 사람이 대표 색을 조금씩 다른 값으로 넣게 됩니다.

원본 찾기에서 내보내기 전 맞대기까지

1. 채널마다 대표 색이 정해지는 원본을 찾기
2. 원본에서 글자 색과 바탕 색의 값을 짝으로 기록하기
3. 짝마다 명도 대비를 계산하기
4. 대표 색이 정보를 전하는 곳을 찾아 다른 단서를 더하기
5. 새 이미지를 내보내기 전에 기록표와 맞대기

첫째 단계는 채널마다 대표 색이 정해지는 원본을 찾는 일입니다. 홈페이지는 스타일 파일을, 블로그와 SNS는 이미지를 만든 디자인 파일이나 카드 틀을, 채널 프로필은 로고 원본 파일을 찾습니다. 원본이 없어 화면에 올라간 이미지밖에 남지 않은 채널은 「원본 없음」으로 기록하고, 다음 이미지부터 원본을 만들어 보관합니다.

둘째 단계는 원본에서 글자 색과 바탕 색의 값을 짝으로 기록하는 일입니다. 홈페이지는 스타일 파일에서 글자 색과 그 글자가 놓인 바탕 색을 함께 읽고, 이미지는 디자인 파일에서 글자 층의 색과 그 아래 바탕 층의 색을 읽습니다. 바탕이 사진이라면 글자가 놓인 부분의 바탕을 단색 띠로 깔고 그 띠의 값을 바탕 색으로 남깁니다. 대표 색이 글자가 아니라 바탕으로 쓰였다면, 그 위에 놓인 글자 색과 짝을 지어 남깁니다.

셋째 단계는 짝마다 명도 대비를 계산하는 일입니다. W3C 1.4.3 기준은 글자와 글자 이미지가 바탕과 적어도 4.5:1의 대비를 갖추게 하고, 큰 글자는 적어도 3:1을 갖추게 합니다. 해설은 18포인트 글자나 14포인트 굵은 글자를 낮은 대비 기준이 적용될 만큼 큰 글자로 다룹니다. 같은 해설은 글자 대비 요구가 글자 이미지에도 적용된다고 밝히므로, 블로그 썸네일 속 제목도 홈페이지 본문과 같은 기준으로 계산합니다.

넷째 단계는 대표 색이 정보를 전하는 곳을 찾아 다른 단서를 더하는 일입니다. W3C 1.4.1 기준은 색을 정보 전달, 동작 표시, 반응 요청, 시각 요소 구분의 유일한 시각 수단으로 쓰지 않게 합니다. 해설은 「필수 입력 칸은 빨간색」, 「오류는 빨간색으로 표시」를 색 차이로 정보를 전하는 예로 듭니다. 예약 화면에서 예약할 수 있는 날만 대표 색으로 칠했다면, 그 날짜에 글자나 기호를 함께 넣습니다.

다섯째 단계는 새 이미지를 내보내기 전에 기록표와 맞대는 일입니다. 썸네일이나 카드를 만들 때마다 글자 색과 바탕 색이 기록표의 짝과 같은지, 새로 쓴 짝이라면 대비를 계산했는지를 한 줄씩 맞대고 내보냅니다. 새 짝은 내보내기 전에 기록표에 한 줄로 더하고, 원본에서 값을 읽은 날짜를 함께 남깁니다. 기록표에 없는 짝으로 내보낸 이미지는 다음에 대표 색을 고칠 때 목록에서 빠지게 됩니다.

색 기록표 한 줄의 칸

기록표에는 색 이름을 쓰지 않습니다. 「병원 파란색」처럼 이름만 주고받으면 채널을 맡은 사람마다 다른 값을 넣게 되고, 둘째 칸이 이름으로 채워진 줄은 셋째 칸을 계산할 수 없습니다. 다섯째 칸의 날짜는 대표 색을 바꾼 날과 맞대는 데 씁니다. 바꾼 날보다 앞선 날짜가 남은 줄은 아직 옛 값을 쓰는 채널입니다.

병원은 블로그 운영을 썸네일 원본 파일과 그 파일에 쓴 색 값의 짝을 한 폴더에 보관하는 일과 함께 꾸립니다. 원본 없이 올린 썸네일만 남으면, 대표 색을 고치는 날 지난 썸네일은 처음부터 새로 그려야 합니다.

채널의 대표 색이 어긋나는 세 잘못

채널마다 대표 색이 어긋나거나 읽히지 않게 되는 잘못은 셋입니다.

첫째 잘못은 화면을 캡처해 색 값을 뽑는 것입니다. W3C 1.4.3 해설은 사용자의 글꼴 다듬기 설정을 작성자가 정할 수 없으므로, 대비를 따질 때 화면에 표시된 글자가 아니라 브라우저가 얻은 색이나 바탕이 되는 마크업과 스타일 시트의 색을 기준으로 삼으라고 설명합니다. 캡처에서 뽑은 값은 그날 그 기기의 표시를 기록할 뿐이어서, 그 값으로 다른 채널을 만들면 대표 색이 조금씩 옮겨 갑니다. 값은 둘째 단계처럼 원본에서 읽습니다.

둘째 잘못은 대비 계산을 홈페이지에서만 하고 이미지 채널은 건너뛰는 것입니다. 홈페이지 본문은 스타일 값으로 대비를 바로 계산할 수 있는 데 비해, 썸네일과 카드의 글자는 그림 안에 있어 계산을 잊기 쉽습니다. 셋째 단계에서 밝힌 대로 같은 요구가 글자 이미지에도 적용되므로, 계산은 기록표의 모든 줄에 합니다. 썸네일 틀을 하나 정해 두고 쓰는 블로그라면 틀의 짝 하나만 계산해도 되지만, 글마다 바탕 사진과 글자 색을 새로 정한다면 썸네일마다 한 줄씩 계산합니다.

셋째 잘못은 썸네일과 카드를 원본 없이 내보내고 남기지 않는 것입니다. 글자 이미지는 원본이 있어도 고치기가 홈페이지보다 번거로운데, 원본까지 없으면 대표 색을 고치는 날 그 이미지는 처음부터 새로 그려야 합니다. 첫째 단계에서 「원본 없음」으로 기록한 채널부터 다음 이미지의 원본을 보관합니다.

가상의 예로, 대표 색을 조금 더 진한 파랑으로 바꾼 한 치과의원이 있습니다. 홈페이지는 스타일 값 한 줄을 고쳐 그날 바뀌었지만, 블로그 썸네일은 원본이 없어 옛 파랑이 남았고, SNS 카드는 디자이너가 홈페이지 화면을 캡처해 뽑은 값으로 만들어 홈페이지와도 미묘하게 달랐습니다. 이 의원이 기록표를 만들었다면 썸네일 줄은 「원본 없음」으로, 카드 줄은 바꾼 날보다 앞선 기록 날짜로 드러났을 것입니다.