비 오는 버스 창

이 장면의 색

창 밖은 회색인데 안쪽 조명은 노르스름합니다. 이 조합은 정보를 많이 넣지 않고도 젖은 도시를 말합니다. 본문은 따뜻한 아이보리, 포인트만 젖은 코트 색으로 두면 화면이 축축해 보이지 않습니다. 비가 배경이지 주인공이 아니게 만드는 배색입니다.

왜 이 다섯 색인가

비 오는 날의 사진을 색으로 줄이면 대개 회색 한 덩어리가 됩니다. 실제로 눈이 보는 것은 그렇지 않습니다. 창 바깥은 채도가 빠진 청회색이고, 안쪽은 버스 실내등 때문에 누런빛이 돕니다. 이 두 온도가 유리 한 장을 사이에 두고 붙어 있는 것이 이 장면의 정체입니다. 그래서 다섯 색 중 넷은 차갑고 하나만 따뜻하게 뒀습니다. 마지막 한 색이 없으면 그냥 흐린 날이고, 있으면 창 안쪽에 사람이 앉아 있는 그림이 됩니다.

화면에 앉히는 순서

가장 밝은 아이보리를 전체 배경으로 70퍼센트쯤 깔고 시작하세요. 카드나 구획을 나눌 때 빗물 자국 색을 면으로 쓰고, 제목과 본문은 젖은 아스팔트 색으로 씁니다. 김 서린 유리 색은 테두리나 구분선처럼 얇은 선에만 쓰는 편이 좋습니다. 면으로 넓게 깔면 화면 전체가 뿌옇게 흐려집니다. 코트 소매 색은 링크와 주요 버튼 하나에만 남겨 두세요. 전체 화면에서 이 색이 차지하는 면적이 5퍼센트를 넘으면 비 오는 날이 아니라 가을 세일 배너가 됩니다.

대비와 가독성

실내 조명 아이보리(#F4F1EA) 배경에 젖은 아스팔트(#4A5C6A) 본문을 놓으면 대비는 6.14:1입니다. 일반 본문 AA 기준 4.5:1을 충족합니다. 코트 소매(#C9896A)를 버튼 배경으로 쓰면 짙은색 글자가 두 후보 중 대비가 더 높고 6.03:1입니다. 일반 본문 AA 기준을 충족합니다. 위 미리보기에서 실제 사용할 조합을 바꿔 검사할 수 있습니다.

이렇게 쓰면 무너집니다

비를 표현하겠다고 배경 전체를 청회색으로 채우는 것이 이 팔레트가 가장 자주 망가지는 방식입니다. 그러면 화면이 젖은 게 아니라 어두워집니다. 파란 계열을 하나 더 추가하는 것도 피하세요. 이 배색은 차가운 색이 이미 셋이라, 넷이 되는 순간 서로 구분이 안 되고 전부 회색으로 읽힙니다.

글꼴과 질감

글자 사이가 넉넉한 본문용 고딕이 잘 맞습니다. 제목까지 같은 글꼴로 굵기만 올리면 담담한 톤이 유지됩니다. 질감을 넣는다면 아주 옅은 세로 그라데이션 정도가 한계입니다. 물방울 이미지나 유리 흐림 효과를 얹으면 배색이 하려던 일을 그림이 대신해 버려서 둘 다 약해집니다.

이런 곳에 쓰면

• 에세이 블로그
• 날씨 앱 야간 모드
• 플레이리스트 커버