디자이너 없이 만든 사이트에서 가장 자주 보이는 문제는 색이 촌스러운 것이 아니라 페이지마다 다른 것입니다. 홈의 버튼과 서비스 페이지의 버튼이 미묘하게 다른 초록이고, 제목 크기도 화면마다 조금씩 다릅니다.
원인은 취향이 아니라 결정을 여러 번 하기 때문입니다. 페이지를 만들 때마다 색 선택기를 열면 매번 조금씩 다른 값이 나옵니다. 해결은 결정을 한 번만 하고 그것을 한 곳에 저장하는 것입니다.
색은 다섯 개면 충분합니다
브랜드 색을 여러 개 만들 필요가 없습니다. 역할이 정해진 다섯 개면 사업 사이트 하나를 끝까지 만들 수 있습니다.
여기서 대비를 반드시 확인합니다. 옅은 회색 글자는 화면에서는 세련돼 보이지만 밝은 환경의 휴대폰에서는 읽히지 않습니다. 접근성 기준(WCAG)은 본문 글자와 배경의 명도 대비를 최소 4.5:1 로 권고하며, 무료 대비 검사 도구에 두 색을 넣으면 즉시 판정이 나옵니다.
이것은 배려의 문제만이 아닙니다. 읽히지 않는 문구는 아무리 잘 쓴 문구여도 전환을 만들지 못합니다.
폰트는 한두 종으로 끝냅니다
제목과 본문에 같은 폰트를 쓰고 굵기만 다르게 하는 구성이 가장 안전합니다. 두 종을 쓰겠다면 제목용 하나 · 본문용 하나까지입니다. 세 종을 넘어가면 화면이 산만해지고, 무엇보다 내려받을 폰트 파일이 늘어 첫 화면이 늦게 그려집니다.
한글 웹폰트는 라틴 알파벳 폰트보다 파일이 훨씬 큽니다. 그래서 굵기를 종류별로 전부 불러오는 구성은 특히 비쌉니다. 실제로 쓰는 굵기만 불러오세요.
한 곳에 넣어 두면 리브랜딩이 5분입니다
색과 폰트를 어디에 저장하느냐가 나중에 큰 차이를 만듭니다.
사업을 하다 보면 브랜드 색이 바뀝니다. 로고를 다듬거나, 인쇄물과 색을 맞추거나, 상호를 바꾸는 일이 실제로 생깁니다. 전역 설정에 넣어 둔 사이트는 그때 값 하나를 바꾸면 되고, 페이지마다 지정한 사이트는 전수 수정을 해야 합니다.
테마 설정을 어디까지 활용할 수 있는지는 테마 · 플러그인 아카이브에서 더 다루고, 앞 회차의 블록 에디터 범위를 알아 두면 전역 스타일을 훨씬 빨리 찾습니다. 폰트 로딩이 첫 화면 속도를 깎고 있다면 최적화 지원 사업에서 함께 정리합니다.
다음 회차
색과 폰트가 정리됐으면 이제 화면 크기입니다. 다음 회차는 모바일 — 데스크톱에서만 확인하면 놓치는 것들을 순서대로 봅니다.