평수 계산기는 Material Design 3의 Dynamic Color 시스템을 적용하여, 사용자가 원하는 색상으로 전체 UI를 커스터마이징할 수 있습니다. 이 가이드에서는 테마 색상을 변경하는 방법과 관련 기능을 상세히 안내합니다.
테마 색상 변경하기
색상 선택 패널 열기
화면 우측 상단에 있는 팔레트 모양 아이콘을 클릭하면 색상 선택 패널이 나타납니다. 이 패널에서 다양한 방법으로 테마 색상을 선택할 수 있습니다.
프리셋 색상 선택
가장 간단한 방법은 미리 준비된 8가지 프리셋 색상 중 하나를 선택하는 것입니다:
| 색상 | 이름 | 특징 |
|---|---|---|
| 파랑 | Blue | 기본 테마, 신뢰감과 안정감 |
| 보라 | Purple | Material Design 3 기본 색상 |
| 초록 | Green | 자연친화적, 편안한 느낌 |
| 청록 | Teal | 모던하고 세련된 느낌 |
| 주황 | Orange | 활기차고 따뜻한 느낌 |
| 분홍 | Pink | 부드럽고 친근한 느낌 |
| 빨강 | Red | 강렬하고 역동적인 느낌 |
| 남색 | Indigo | 깊이감 있고 고급스러운 느낌 |
원하는 색상을 클릭하면 즉시 전체 UI에 해당 색상 테마가 적용됩니다.
커스텀 색상 지정
프리셋에 없는 색상을 원한다면 커스텀 색상을 직접 지정할 수 있습니다:
-
컬러 피커 사용: 색상 선택 패널의 컬러 피커(사각형 색상 박스)를 클릭하여 원하는 색상을 선택합니다.
-
HEX 코드 입력: 정확한 색상 코드를 알고 있다면 텍스트 필드에 직접 입력할 수 있습니다. 예:
#FF5722,#9C27B0
입력한 색상이 유효한 HEX 코드인 경우 즉시 테마에 반영됩니다.
다크모드와 테마 색상
독립적인 설정
테마 색상과 다크모드는 서로 독립적으로 작동합니다. 원하는 테마 색상을 선택한 상태에서 다크모드를 켜거나 끌 수 있습니다.
자동 색상 조정
선택한 색상은 라이트모드와 다크모드 각각에 최적화된 색상 팔레트로 자동 변환됩니다. Material Design 3의 색상 알고리즘이 배경색, 텍스트 색상, 컨테이너 색상 등을 조화롭게 조정해줍니다.
예를 들어, 밝은 파란색을 선택하면:
- 라이트모드: 진한 파란색 버튼, 밝은 배경
- 다크모드: 밝은 파란색 버튼, 어두운 배경
이렇게 같은 색상이라도 모드에 따라 가독성과 접근성이 최적화됩니다.
설정 저장 및 복원
자동 저장
선택한 테마 색상은 브라우저의 로컬 스토리지에 자동으로 저장됩니다. 별도의 저장 버튼을 누를 필요가 없으며, 다음에 사이트를 방문할 때도 설정이 유지됩니다.
참고사항:
- 같은 브라우저에서만 설정이 유지됩니다
- 시크릿 모드에서는 설정이 저장되지 않습니다
- 브라우저 데이터를 삭제하면 설정도 초기화됩니다
기본 테마로 복원
커스텀 테마가 적용된 상태에서 기본 테마로 돌아가려면:
- 색상 선택 패널을 엽니다
- 하단의 ‘기본 테마로 복원’ 버튼을 클릭합니다
- 즉시 기본 파란색 테마로 복원됩니다
이 버튼은 커스텀 테마가 적용되어 있을 때만 표시됩니다.
기술적 배경
Material Design 3 Dynamic Color
평수 계산기는 Google의 Material Design 3에서 소개된 Dynamic Color 시스템을 사용합니다. 하나의 소스 색상(Source Color)에서 전체 색상 팔레트가 자동으로 생성됩니다.
생성되는 색상 역할:
- Primary: 주요 버튼, 강조 요소
- Secondary: 보조 버튼, 칩
- Tertiary: 추가 강조 요소
- Surface: 배경, 카드
- On-Surface: 텍스트, 아이콘
접근성 고려
생성된 색상 팔레트는 WCAG 2.1 접근성 기준을 충족하도록 설계되어 있습니다. 배경색과 텍스트 색상 간의 대비율이 자동으로 조정되어, 어떤 색상을 선택하더라도 가독성이 보장됩니다.
자주 묻는 질문
Q: 모바일에서도 테마 색상을 변경할 수 있나요?
네, 모바일 브라우저에서도 동일하게 사용할 수 있습니다. 화면 우측 상단의 팔레트 아이콘을 탭하면 색상 선택 패널이 나타납니다.
Q: 여러 기기에서 같은 테마를 사용하려면?
현재는 각 브라우저별로 설정이 저장됩니다. 다른 기기에서 같은 테마를 사용하려면 해당 기기에서도 동일한 색상을 선택해 주세요. 향후 계정 연동 기능이 추가되면 기기 간 동기화가 가능해질 예정입니다.
Q: 특정 요소만 색상을 바꿀 수 있나요?
현재는 전체 테마 색상만 변경 가능합니다. 개별 요소의 색상 커스터마이징은 지원하지 않습니다. Dynamic Color 시스템은 일관된 디자인 경험을 위해 전체 UI를 조화롭게 조정합니다.
Q: 색상 변경이 적용되지 않아요
다음 사항을 확인해 주세요:
- 브라우저가 최신 버전인지 확인
- JavaScript가 활성화되어 있는지 확인
- 시크릿/프라이빗 모드가 아닌지 확인
- 페이지를 새로고침(Ctrl+F5 또는 Cmd+Shift+R)
문제가 지속되면 브라우저 캐시를 삭제하고 다시 시도해 주세요.