어떻게 JavaScript로 OS의 선호 색상 스키마를 감지할 수 있는가?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자, 특히 반응형 디자인 및 디자인 접근성에 관심 있는 중급 개발자
핵심 요약
- CSS 미디어 쿼리를 사용하여
prefers-color-scheme
를 감지할 수 있음 - JavaScript의
matchMedia
메서드로 사용자 선호도를 동적으로 확인 가능 - Stripe Elements 같은 UI 요소는 감지된 색상 스키마에 맞춰 조건부 스타일 적용 필요
섹션별 세부 요약
1. CSS로 색상 스키마 감지
@media (prefers-color-scheme: dark)
와@media (prefers-color-scheme: light)
쿼리 사용body
의color
와background
속성 동적으로 조정 가능- 사용자 OS의 어두운 모드 설정 시 편안한 브라우징 경험 제공
2. JavaScript로 색상 스키마 감지
window.matchMedia('(prefers-color-scheme: dark)').matches
로 사용자 선호도 확인isDarkMode
변수로 조건 분기 처리 (예:if (isDarkMode) { ... }
)console.log
로 디버깅 및 스타일 조정 로직 적용 가능
3. Stripe Elements 스타일 커스터마이징
COLORS
객체로 색상 변수 정의 (예:darkGrey
,icyWhite
)stripeElementStyles.base
에isDarkMode
조건에 따른 색상 설정::placeholder
,:-webkit-autofill
등의 키워드에 조건부 스타일 적용
4. 접근성 및 UI 일관성 고려
- 대비 비율 검증 (예: WebAIM Contrast Checker 도구 사용)
- 테두리, 그림자, 활성 상태 등 다른 UI 요소도 스키마에 맞게 조정
- 유연성과 일관성 유지로 사용자 경험 향상
결론
prefers-color-scheme
미디어 쿼리와matchMedia
를 결합하여 사용자 선호도에 맞는 디자인 구현- 접근성 기준 준수 (대비 비율 검증) 및 UI 요소 일관성 유지가 필수
- Stripe Elements 등 제3자 UI 요소도 조건부 스타일 적용으로 통합 가능한 디자인 구현