테마 및 외관
Sudapapa Diary는 두 단계의 테마 시스템을 제공합니다.
- 앱 전체 테마 — 설정 창 자체의 라이트/다크 분위기
- 위젯 테마 프리셋 — 각 데스크톱 위젯의 배경·텍스트·요일 색상
이 페이지에서는 두 가지를 모두 다룹니다.
앱 전체 테마
Section titled “앱 전체 테마”설정 창 등 앱의 일반 UI는 CSS 변수 기반으로 작동하며, 시스템(Windows)의 라이트/다크 모드 설정을 자동으로 따라갑니다.
| 모드 | 결정 방식 |
|---|---|
| 라이트 | Windows 라이트 모드일 때 자동 |
| 다크 | Windows 다크 모드일 때 자동 |
| 수동 (향후) | 향후 업데이트에서 추가 예정 |
CSS 변수 기반
Section titled “CSS 변수 기반”앱 전체 테마는 apps/desktop/src/renderer/css/themes.css에 정의된 CSS 변수로 작동합니다. 주요 변수의 예:
| 변수 | 용도 |
|---|---|
--bg-primary | 페이지 본문 배경 |
--bg-secondary | 카드·패널 배경 |
--text-primary | 본문 텍스트 |
--text-secondary | 보조 텍스트·설명 |
--accent-color | 포인트 색상 (꾸미기에서 변경) |
--border-color | 모든 테두리 |
이러한 변수는 자동으로 라이트/다크 값으로 전환되므로, 테마 변경 시 모든 화면이 일관되게 바뀝니다.
위젯 테마 프리셋
Section titled “위젯 테마 프리셋”각 위젯은 자체적으로 4종의 프리셋을 가지며, 환경설정에서 모든 위젯에 한 번에 적용할 수 있습니다.
4종 표준 프리셋
Section titled “4종 표준 프리셋”| 프리셋 | 분위기 | 대표 색 (배경/텍스트) |
|---|---|---|
| Classic White | 깔끔한 화이트 | #ffffff / #333333 |
| Soft Pastel | 따뜻하고 부드러움 | #faf8f5 / #5a5a5a |
| Dark Modern | 차분한 다크 | #1e1e1e / #e0e0e0 |
| Dark Blue | 투명·블루 강조 | #000000 (52% 불투명) / #ffffff |
랜덤 팔레트
Section titled “랜덤 팔레트”랜덤을 선택하면 위젯에 적용할 때마다 새로운 팔레트가 생성됩니다.
- 50% 확률로 라이트/다크 톤 결정
- 색상 휠에서 임의의 기준 색조(hue) 선정
- 토요일은 파란 계열(hue 200
230), 일요일은 빨간 계열(hue 35010)로 고정 - 모든 색은 일정한 채도·명도 범위 내에서 생성되어 가독성 유지
프리셋 위젯 지원 매트릭스
Section titled “프리셋 위젯 지원 매트릭스”위젯 종류에 따라 지원하는 프리셋이 다르며, 미지원 프리셋은 폴백 로직으로 대체됩니다.
| 위젯 | classic-white | soft-pastel | dark-modern | dark-blue |
|---|---|---|---|---|
| 통합 캘린더 | O | O | O | O |
| 월간 캘린더 (대) | O | O | O | O |
| 주간 캘린더 (대) | O | O | O | O |
| 미니 월간 캘린더 | O | (대체→white) | O | (대체→dark-modern) |
| 일정 목록 | O | (대체→white) | O | (대체→dark-modern) |
| 메모 | O | (대체→white) | O | (대체→dark-modern) |
| 암호 복사 | O | (대체→white) | O | (대체→dark-modern) |
| 즐겨찾기 | O | (대체→white) | O | (대체→dark-modern) |
위젯이 요청한 테마를 지원하지 않을 때 다음 매핑을 따릅니다.
soft-pastel → classic-whitedark-blue → dark-modern위젯 투명도
Section titled “위젯 투명도”환경설정 → 위젯 테마 옆의 슬라이더로 모든 위젯의 배경 불투명도를 0~100% 범위에서 일괄 조절할 수 있습니다.
| 슬라이더 값 | 효과 |
|---|---|
| 100% | 완전 불투명 (기본값) |
| 80% | 약간 비침 — 가벼운 분위기 |
| 50% | 절반 비침 — 데스크톱 배경 강조 |
| 0% | 완전 투명 — 텍스트만 보임 |
모서리 둥글기 (Border Radius)
Section titled “모서리 둥글기 (Border Radius)”대부분의 위젯은 부드러운 모서리(8px~12px)를 기본으로 사용합니다.
| 위젯 | 기본 모서리 |
|---|---|
| 즐겨찾기 | 12px |
| 그 외 위젯 | 8px |
위젯별 ⋯ 메뉴 → 설정 → 모서리 항목에서 0~24px 범위로 조정할 수 있습니다.
위젯은 기본적으로 부드러운 그림자(드롭 섀도)를 사용합니다. 다크 테마에서는 그림자가 자동으로 옅어져 시각적 노이즈를 줄입니다.
아이콘 세트
Section titled “아이콘 세트”아이콘은 모두 SVG 기반으로 인라인 또는 외부 파일에서 로드됩니다. 색상은 강조 색상 변수(--accent-color)를 따라가므로 별도 설정이 필요 없습니다.
미리보기 동작
Section titled “미리보기 동작”테마 변경은 저장 버튼 없이 즉시 모든 창에 반영됩니다.
- 환경설정 → 위젯 테마에서 프리셋을 클릭하면 모든 위젯에 즉시 적용됩니다.
- 투명도 슬라이더는 드래그하는 동안 실시간으로 효과를 확인할 수 있습니다.
- 만족스럽지 않으면 다시 다른 프리셋을 클릭하여 즉시 되돌립니다.
개별 위젯 테마 (고급)
Section titled “개별 위젯 테마 (고급)”위젯별 ⋯ 메뉴 → 설정에서 위젯 단위로 더 세밀한 색상 조정이 가능합니다.
| 위젯 종류 | 조정 가능 항목 |
|---|---|
| 캘린더 계열 | 배경, 제목 텍스트, 요일 헤더, 토요일·일요일 색, 그리드 색, 그리드 표시 여부 |
| 메모 | 배경, 제목 버튼 색, 본문 텍스트 색 |
| 일정 목록 | 배경, 헤더 텍스트, 버튼 색, 카드 배경/텍스트 |
| 즐겨찾기 | 배경, 제목 텍스트·버튼, 모서리 둥글기 |
| 암호 복사 | 배경, 제목, 버튼, 텍스트, 테두리 |
전체 테마 설정을 기본값으로 되돌리는 절차:
- 환경설정 → 위젯 테마에서 Classic White(또는 원하는 프리셋)를 선택해 모든 위젯을 동일하게 맞춥니다.
- 투명도 슬라이더를 **100%**로 되돌립니다.
- 꾸미기 → 강조 색상에서 첫 번째 파랑(
#3b82f6)을 선택합니다. - 글꼴은 Segoe UI가 기본값입니다.
자세한 외관 통합 설정은 꾸미기 문서를, 백업·복원은 데이터 관리 문서를 참고하세요.
자주 묻는 질문
Section titled “자주 묻는 질문”Q. 라이트/다크를 수동으로 강제하고 싶어요. A. 현재 빌드는 OS 모드를 자동 추적합니다. 수동 토글은 향후 업데이트에서 추가 예정입니다.
Q. 위젯마다 다른 프리셋을 사용할 수 있나요? A. 네. 환경설정의 일괄 적용 후, 개별 위젯의 ⋯ 메뉴 → 설정에서 해당 위젯만 다른 색상으로 미세 조정할 수 있습니다.
Q. 랜덤 팔레트가 마음에 들지 않아요. A. 같은 위젯에 랜덤 옵션을 다시 적용하면 새 팔레트가 생성됩니다. 만족할 때까지 반복하거나, 마음에 든 팔레트는 위젯 설정에서 색상을 그대로 유지하면 됩니다.
Q. 투명한 위젯의 글자가 잘 안 보입니다. A. 투명도가 너무 낮으면 데스크톱 배경에 따라 가독성이 떨어집니다. 텍스트 색을 데스크톱 배경과 대비되는 값으로 직접 조정하거나, 투명도를 70% 이상으로 유지하세요.