유튜브 피드에서 살아남는 색

하나의 질문 속에 담긴 두 문제

«썸네일에 어떤 색이 통하나»는 실은 답이 다른 두 개의 질문이고, 그 둘을 섞는 것이 검색해서 나오는 조언이 그토록 모호한 이유입니다.

첫째는 인터페이스와의 분리입니다. 내 화면에는 경계가 있고, 그 경계는 유튜브의 배경에 직접 맞닿습니다. 이것은 계산이 되고, 이 가이드의 대부분이 이 이야기입니다.

둘째는 이웃과의 분리입니다. 화면 안쪽에서 겨루는 상대는 인터페이스가 아니라 같은 줄의 다른 썸네일들입니다. 여기에는 보편적인 답이 없습니다. 그 썸네일들이 어떻게 생겼는지에 전적으로 달려 있기 때문입니다.

인터페이스는 정확히 두 색 중 하나

유튜브 페이지는 어두운 모드에서 거의 검정, 밝은 모드에서 흰색입니다. 어두운 쪽 값은 #0F0F0F로, 검정으로 생각해 버리는 것이 바로 실수가 될 만큼 검정에 가깝습니다. 어두운 회색이며, 정말로 검은 썸네일은 그것이 놓인 페이지보다 더 어둡습니다.

시청자가 둘 중 무엇을 쓰는지는 알 수 없습니다. 같은 파일이 양쪽에서 버텨야 하고, 그것은 색의 쓸모 있는 대비가 최선의 경우가 아니라 최악의 경우라는 뜻입니다.

그 두 값이 바로 미리보기 도구의 모형이 재현하는 값이며, 밝게/어둡게 전환이 있는 이유입니다. 같은 파일을 실제로 놓일 두 바닥에 올려 보는 것입니다.

숫자가 실제로 어떤가

표준 방식으로 계산한 대비율입니다. 썸네일 가장자리에 놓을 법한 색들을 골랐습니다. 중요한 것은 마지막 열입니다. 배제할 수 없는 경우이기 때문입니다. 여기서 말하는 대비율은 WCAG가 정의하는 그 대비율이므로, 이 숫자들은 웹의 다른 어디에서와 똑같은 의미를 가집니다.

두 단색 사이의 분리를 재는 값이고, 글자의 가독성을 재는 값이 아닙니다. 그쪽에는 별도의 숫자가 있고 글자 크기 가이드에 있습니다. 이 표는 이렇게 읽으세요. 내 썸네일이 끝나고 페이지가 시작되는 경계가 얼마나 보이는가.

결과는 흔한 조언의 반대

마지막 열을 훑어보면 «밝은 색을 쓰라»가 예상하는 그림이 아닙니다. 가장 환한 선택지들이 가장 나쁩니다. 환하다는 것은 거의 항상 높은 밝기를 뜻하고, 높은 밝기는 흰색 위에서 보이지 않습니다.

흰 테두리는 밝은 모드에서 1.0:1입니다. 경계가 문자 그대로 없습니다. 노랑, 시안, 밝은 회색도 1.3에서 1.5 사이로 겨우 나을 뿐입니다. 이 색들은 어두운 모드 스크린샷에서 하나같이 훌륭해 보이는데, 정확히 그런 식으로 선택됩니다.

두 바닥 모두를 견뎌 내는 색은 중간 밝기의 채도 높은 색들입니다. 빨강, 파랑, 마젠타, 주황, 그리고 평범한 중간 회색까지요. 어느 것도 한쪽 열을 압도하지 못하고, 바로 그것이 핵심입니다. 크게 지는 일이 없는 유일한 색들입니다.

이 규칙이 적용되는 자리와 그렇지 않은 자리

이것은 화면의 바깥 띠에 대한 규칙이지 디자인 전체에 대한 규칙이 아닙니다. 썸네일의 가운데는 인터페이스에 닿지 않으므로 흰 가운데는 문제가 아닙니다. 흰 가장자리가 문제입니다.

들리는 것보다 작고 훨씬 구체적인 제약입니다. 내 썸네일이 페이지 위의 물체로 읽히는지, 아니면 페이지 속으로 녹아드는지를 결정하는 것은 화면의 마지막 몇 퍼센트입니다. 번져 나간 가장자리는 지저분해 보이는 데서 끝나지 않습니다. 썸네일을 더 작게 만듭니다. 배경에 녹아든 부분은 더 이상 내 것으로 계산되지 않으니까요.

화면 안쪽에서는 경쟁의 성격이 바뀐다

가장자리가 버티기 시작하면, 색은 측정 가능한 문제에서 비교의 문제로 넘어갑니다. 썸네일 내부에 가장 좋은 색은 없습니다. 중요한 것은 옆에 무엇이 있는지 하나뿐이기 때문입니다.

채도 높은 빨강 썸네일은 탁한 회색들의 줄에서는 튀고, 채도 높은 빨강들의 줄에서는 사라집니다. 그리고 그 줄은 내가 고르는 것이 아닙니다. 대부분의 분야에서 관행은 한곳으로 수렴하며, 그것은 가장 전문적으로 읽히는 색이 곧 다른 모두가 쓰고 있는 색이라는 뜻입니다.

그래서 쓸모 있는 질문은 «어떤 색이 최고인가»가 아니라 «여기에 빠진 색이 무엇인가»입니다. 실제로 놓일 피드에서 내 작업을 보면 몇 초 안에 답이 나오고, 아무리 많은 이론도 그 답을 주지 못합니다.

색상은 밝기보다 먼저 무너진다

색 이름이 아니라 밝고 어두움으로 생각해야 하는 이유가 하나 더 있습니다. 썸네일이 실제로 보이는 크기에서는 색상 대비가 가장 먼저 붕괴합니다.

파랑 위의 빨강은 원본 크기에서 강렬하고 타일 크기에서 진흙이 됩니다. 각각 몇 픽셀이 평균되고, 남는 것은 서로 비슷한 밝기이기 때문입니다. 밝음 대 어두움은 같은 처리를 견뎌 냅니다. 밝음과 어두움을 평균해도 차이는 남으니까요.

점검 방법은 작업을 흑백으로 보는 것입니다. 색을 빼면 무너진다면 그것은 색이 떠받치고 있던 것이고, 표시되는 크기는 색을 가장 먼저 가져갑니다.

흰 테두리, 그리고 그것이 목발이 되는 순간

썸네일 전체를 감싸는 얇은 흰색이나 밝은 테두리는 번지는 가장자리에 대한 표준 처방이고, 어두운 모드에서는 통합니다. 밝은 모드에서는 표에 나온 그 보이지 않는 경우입니다. 한 테마를 위해 고른 테두리가 다른 테마에서는 테두리 없음일 수 있습니다.

양쪽을 견디는 버전은 중간 밝기의 테두리, 두 톤으로 된 가장자리, 또는 그냥 바깥 띠가 극단이 아니라 중간 톤의 내용을 품는 구도입니다. 마지막 것만이 임시방편처럼 보이지 않습니다.

테두리가 문제를 푸는지 가리는지도 물어볼 값어치가 있습니다. 주제가 분명하지 않은 작업은 둘레를 감싸도 분명해지지 않습니다. 액자에 든 불분명한 작업이 됩니다.

3분짜리 점검

여기에 색채 이론은 필요하지 않습니다. 같은 파일을 세 번 보면 되고, 문제를 가장 빨리 찾는 순서가 있습니다.

1. 두 바닥에서 가장자리 보기썸네일을 흰색 위와 #0F0F0F 위에 올려 보세요. 둘 중 하나에서 경계가 사라진다면 그 색을 바꿔야 하고, 바꿀 대상은 바깥 띠뿐입니다.
2. 흑백으로 보기그렇게 했을 때 작업이 무너진다면 색상이 떠받치고 있던 것이고, 표시 크기가 가장 먼저 가져가는 것이 바로 그것입니다.
3. 이웃들 옆에서 보기실제로 놓일 피드에서, 실제로 보일 크기로요. 인터페이스를 견뎌 낸 색이 그 줄에서도 튀는지 알려 줄 수 있는 단계는 이것뿐입니다.

여기서 가져갈 것

짧게 정리하면 이렇습니다. 가장자리에는 중간 밝기의 채도 높은 색을. 그것만이 두 인터페이스 모두를 상대로 버팁니다. 밝음과 어두움의 극단은 화면 안쪽에, 비용이 들지 않는 자리에. 색상 대비가 아니라 밝기 대비로. 색상은 크기를 견디지 못하니까요. 그리고 실제 선택은 이론이 아니라 내가 놓일 줄을 상대로.

마지막 부분은 어떤 글도 대신해 줄 수 없는 단계입니다. 이 글도 마찬가지입니다. 매주 바뀌는 썸네일 묶음에 달려 있기 때문입니다.

많이 나오는 질문