브랜드와 마케팅은 다크 모드에서도 색상 곡선을 유지한 그라데이션을 원하고, 컴플라이언스는 본문·배경 대비를 숫자로 남기길 원합니다.OKLCH는 사람의 시각에 가까운 L(명도)·C(크로마)·H(색상)로 색을 표현해 전통 HSL보다 디자인 토큰에 적합합니다.color(display-p3 …)는 Apple 디스플레이가 오래 제공해 온 광색역을 CSS에서 직접 노리는 방법입니다. Eleventy·Hugo처럼 한 번 빌드·긴 캐시를 쓰는 정적 사이트는 런타임 테마 엔진이 없으므로, 토큰과 폴백을 빌드 단계에서 고정하는 게 핵심입니다. 이미 정적 마케팅 HTML의 CSS 서브그리드로 레이아웃 QA 리듬을 만든 팀이라면 같은 주간 실기 슬롯을 색으로 확장하는 것이 가장 빠릅니다.
이 글에서는 회의에 제시할 브라우저 매트릭스, 복사해 쓸 @supports 패턴, 크로마 상한·트래픽 비율 등 인용 가능한 수치, 그리고 단기 Mac mini 렌탈로 검증 비용을 줄이는 절차를 정리합니다.
정적 사이트가 OKLCH에 유리한 이유
HSL은 명도를 고정한 채 채도만 움직일 때 노랑과 파랑의 체감 차가 커서, 곧바로 “같은 규칙·서로 다른 수동 hex” 부채가 생깁니다. OKLCH는 L을 조금 내리는 것만으로도 호버와 다크 전환이 시각적으로 맞춰지기 쉽고, 정적 빌드에서 :root로 펼치면 모든 페이지에 전파됩니다. 예: 기본 oklch(0.72 0.11 250), 호버 oklch(0.62 0.09 250).
크로마 C는 클수록 좋지 않습니다. 중간 명도에서 0.37 전후를 넘기면 sRGB로 매핑될 때 클리핑·밴딩이 잦습니다. 브랜드 가이드에 “허용 최대 C”를 적어두면 주니어 구현의 과포화를 막습니다.
정적 사이트는 CI에서 oklch() 토큰을 순회하며 본문과의 대비가 WCAG 2.2 일반 텍스트 4.5:1을 만족하는지 자동 판정해야 합니다. 모니터끼리 눈대중보다 재현성이 높습니다.
한글 제목은 라틴 제목보다 글자 밀도가 높아 같은 글자 크기라도 더 무겁게 보입니다.L을 +0.02~0.04만 올리는 편이 두께를 건드리는 것보다 자연스럽고 다국어 템플릿에서도 재사용하기 쉽습니다.
사진 위 스크림에는 color-mix(in oklch, …)로 혼합 비율을 고정하고 README에 수치를 남기세요. 다음 캠페인 교체 때 대비가 무너지는 사고를 줄입니다.
display-p3와 @supports 점진 강화
먼저 :root에 sRGB로 안전한 hex 또는 hsl을 두고, 기능 쿼리로 덮어씁니다.
:root {
--brand: #2563eb;
}
@supports (color: color(display-p3 1 1 1)) {
:root {
--brand: color(display-p3 0.22 0.45 0.98);
}
}정적 CSS는 캐시 수명이 길어 덮어쓰기 블록을 토큰 정의 바로 아래에 두고, 수십 개 유틸 파일에 흩뿌리지 않는 편이 장기 유지보수에 유리합니다. 선형 그라데이션은 sRGB 안에 들어가는 스톱을 먼저 쓰고, @supports (background: color(display-p3 0 0 0)) 안에만 고크로마판을 넣는 이단 구조가 안전합니다.
히어로 비디오나 WebGL 배경 위 텍스트는 같은 OKLCH라도 디코딩 경로에 따라 가장자리 대비 체감이 달라집니다. 수치만이 아니라 실기 스크린샷을 증락으로 남기세요.
인쇄 스타일은 P3 변수를 sRGB 등가로 되돌리는 것이 무난합니다. 사무용 복합기는 광색역을 해석하지 못하는 경우가 많고 잉크 추정도 어긋납니다.
이메일·배너 등 다른 채널이 있다면 “웹 토큰과 인쇄·배포 스와치는 별도 관리”라고 명시하고, 구형 HTML 메일용으로 평면 PNG를 준비하세요.
2026년 기준 호환 표
| 기능 | Chromium | Firefox | Safari(macOS) | 정적 QA 관점 |
|---|---|---|---|---|
| OKLCH 색 | 111+ | 113+ | 15.4+ | 저L 고C에서 클립·밴딩. |
| color(display-p3 …) | 지원 | 지원 | 지원 | 참조 PNG와 2×에서 비교. |
| oklch의 color-mix | 111+ | 113+ | 16.2+ | 마이너 업 후 재검증. |
| 강제 색상/고대비 | 부분 | 부분 | OS 주도 | macOS 대비 강화를 주간으로. |
릴리스 노트에 엔진 버전을 적어두면 클레임 시 “브랜드가 광색역으로 간 것인지”“브라우저 폴백인지”를 빠르게 가릴 수 있습니다.
Safari 실기와 클라우드 Mac mini
Playwright WebKit은 구문 오류에는 강하지만 글리프 스무딩·색 관리는 실제 Mac과 같지 않습니다. 반복마다 25~40분, 안정판 Safari로 외부 서명, STP로 선행 디버깅이 현실적입니다. 디지털 컬러미터로 히어로 영역을 재면 설득이 빨라집니다.
조달이 늦으면 며칠만 클라우드 Mac mini를 빌리세요. MacHTML Apple 실리콘 인스턴스는 대략 하루 $16.9 전후부터이며 SSH로 빌드 투입, VNC로 육안 비교가 가능합니다.
스테이징은 본과 동일한 color-scheme, meta theme-color, 폰트 URL을 맞추세요. 광학 크기 누락은 수치가 같아도 체감을 바꿉니다.
PR에는 1280px·430px 짧은 화면 녹화와 “대비 증가”를 켠 클립을 첨부하면 정적 diff보다 빨리 합의됩니다.
CDN 키는 OKLCH가 들어간 CSS 해시와 동기화하세요. HTML과 CSS 캐시 불일치는 “Safari만 색이 이상하다” 오신고의 전형적 원인입니다.
대비·강제 색상·투명도 감소
WCAG 2.2 대비는 sRGB 상대 틀입니다. P3에서 sRGB 밖까지 밝은 파랑을 쓰면 “sRGB로 사영한 비”와 “의도한 색역 내 비”를 둘 다 기록하고 감사에서 무엇을 쓸지 정하세요.
macOS “투명도 줄이기”는 반투명을 불투명으로 바꿉니다. OKLCH 스크림이 한꺼번에 탁해지므로 @media (prefers-reduced-transparency: reduce)에서 L↑ C↓ 대체 토큰을 두세요.
Windows 고대비는 저자 색을 무시하는 경우가 많습니다. 포커스 링은 시스템 키워드 경로를 남기세요.
지역에 따라 2026년 초에도 세션의 6~9%가 OKLCH 미지원 브라우저에 있을 수 있습니다. 자사 통계로 줄일 수 있을 때까지 hex/hsl 폴백을 유지하세요.
색 리팩터와 같은 릴리스에서 그림자·blur를 건드리면 포커스 가시성이 함께 깨지기 쉽습니다. 키보드 회귀도 묶어서 테스트하세요.
정적 생성 파이프라인 연동
Eleventy/Hugo/Astro 모두 빌드에서 YAML 토큰을 읽어 :root로 펼칠 수 있습니다. 소스 오브 트루스는 OKLCH로 통일하고 비즈니스가 hex로 말해도 컴파일 시 변환하며 L·C 소수 셋째로 diff 노이즈를 줄입니다.
CMS에서 강조색을 고르는 UI가 있다면 승인된 크로마 슬라이스 밖은 빌드 실패로 막아 인라인 스타일 우회를 방지합니다.
Linux CI의 Storybook에는 “sRGB 베이스라인” 라벨을 달고, 야간 잡으로 토큰 PNG와 기준의 색차(Lab 환산 ΔE 2.0 초과)를 감지하면 디자인 시스템 채널로 알립니다.
엣지에서 다크 클래스만 주입하는 실험은 hex뿐 아니라 OKLCH mix도 재계산해야 합니다. data-theme="dark"만 먼저 켜이고 광색역 오버레이는 밝은 채로 남는 이중 사고가 흔합니다.
핫픽스 후 CDN을 원자적으로 갱신하지 못하면 오래된 CSS에 새 HTML이 섞입니다. 토큰 변경은 캐시 퍼지와 묶고 Safari 전량 확인 뒤에 TTL 연장이 안전합니다.
FAQ
정적 사이트는 2026년에 OKLCH를 기본으로 써야 하나요?
토큰 주 형식으로는 권장하지만, 최저 지원 브라우저가 허용하기 전까지 본문 색은 OKLCH만 쓰지 마세요.
Safari display-p3는 Chromium과 같나요?
사양은 같지만 체감은 다를 수 있습니다. 실기가 최종입니다.
색 QA 시간은 얼마나?
Safari 중심 25~40분, 접근성 설정 약 15분입니다.
Apple 실리콘 Mac mini는 WebKit 색 논쟁을 끝내는 현실적인 장비입니다: 통합 메모리로 브라우저와 로컬 처리를 함께 돌리기 쉽고, 장시간 육안 리뷰에도 서열이 읽기 쉽습니다.MacHTML은 SSH/VNC가 포함된 클라우드 Mac mini를 제공해 OKLCH·display-p3 검증을 단기 렌탈로 돌릴 수 있습니다. 스프린트 단위로 켜고 증락을 남긴 뒤, 안정화되면 내리는 방식이 캡엑스 증가를 피합니다.