색과 폰트는 ‘감’이 아니라 ‘루틴’으로 고르면 빨라집니다. 이 글은 실무에서 북마크해두고 반복 사용하는 컬러/폰트 레퍼런스를 썸네일 카드(클릭 시 새 창)로 제공하고, 10분 만에 팔레트·폰트 조합·대비 검수까지 끝내는 루틴을 정리했습니다. 그대로 복붙해 워드프레스 ‘커스텀 HTML’ 블록에 넣어 쓰세요.
목차
컬러 레퍼런스(링크+썸네일)
폰트 레퍼런스(링크+썸네일)
바로 쓰는 루틴(10분 컷)
- 대표색 고정(2′): 브랜드 대표색 1개를 정해 Coolors에서 ‘Lock’ → 보조·강조색 2개만 추출.
- 대비 검수(2′): WebAIM에서 텍스트 대비 확인(본문 4.5:1, 큰 제목 3:1). 실패하면 Leonardo로 보정.
- 폰트 2종 확정(3′): 제목 1종·본문 1종(가변 폰트면 굵기만 조정). 후보는 Google Fonts/Fontshare에서 선택 후 Fontpair로 페어링 체크.
- 타입 스케일(1′): 우선 H1/H2/Body만 수치로 고정(예: H1 40/1.2, H2 28/1.3, Body 16/1.7). 나머지는 차차 확장.
- 다크 테마 미리보기(2′): Material Theme Builder로 다크/라이트 토큰 세트를 출력해 UI 두 벌을 함께 검토.
실무 팁: 다크 모드·접근성·웹 임베드
- 다크 모드: 포인트색 채도를 10~20% 낮춰 대비를 확보. 회색은 퓨어 블랙 대신
#0B0B0F~#121212계열 권장. - 버튼 대비: 배경과 텍스트 대비뿐 아니라 버튼 vs 주변 배경 대비도 3:1 이상 유지.
- 웹 임베드: Google Fonts는 woff2 +
font-display: swap. 한글 웹폰트는 서브셋 파일로 용량 최소화. - 토큰화: 최종 팔레트/타입 스케일은 디자인 토큰으로 저장(예:
--color-primary,--font-size-h1).
FAQ
- Q. 브랜드 컬러가 이미 있는데도 Coolors를 쓰나요?
A. 대표색을 고정(락)한 뒤 보조·강조색만 빠르게 파생시키는 용도로 쓰면 좋습니다. - Q. 본문 대비 4.5:1을 못 맞추면요?
A. 포인트색은 유지하고, 텍스트 컬러를 한 단계 어둡게 하거나 배경을 살짝 밝히세요. Leonardo가 자동으로 조정해 줍니다. - Q. 폰트는 꼭 2종이어야 하나요?
A. 스타트는 2종이 가장 안전합니다. 필요 시 캡션/숫자용으로 1종을 추가하세요. - Q. 다크 모드에서 색이 탁해 보입니다.
A. 동일 색상을 쓰지 말고 다크 전용 팔레트를 별도로 만드세요(채도↓·밝기↑). Material Theme Builder가 도움됩니다.
맺음말
색·폰트는 빠르게 ‘결정’하고 콘텐츠/동선에 시간을 쓰는 게 이깁니다. 위 레퍼런스와 10분 루틴으로 오늘 프로젝트의 팔레트·타입을 확정해 보세요. 더 체계적인 브랜딩 가이드를 원하시면 상담 문의로 연락 주세요. 실제 작업물은 포트폴리오에서 확인하실 수 있습니다.
답글 남기기