일段时间 동안 다듬어 온 테마를 마침내 공개했습니다. 이제 MIT 라이선스 하에서 오픈 소스로 제공됩니다. 이 테마는 반투명하고 안개 낀 유리(frosted-glass) 표면(헤더, 사이드바, 검색창)을 중심으로 한 깔끔하고 현대적인 디자인을 갖추고 있으며, 목적에 맞게 설계된 라이트 모드와 다크 모드 컬러 스킴을 지원합니다. 하드코딩된 색상은 전혀 없으며, 모든 것이 Discourse의 CSS 커스텀 프로퍼티에 연결되어 있어 라이트/다크 모드 자동 전환이 즉시 작동합니다.
레포지토리: terraboss/discourse-terraglass
주요 기능
- 안개 낀 유리(frosted glass) 표면 — 헤더, 사이드바/햄버거 메뉴, 헤더 검색 필드/드롭다운이 반투명하며, 배경 흐림 효과(backdrop blur)를 적용합니다. 투명도와 흐림 강도 모두 설정 가능합니다.
- 독립적이고 목적에 맞게 설계된 라이트 및 다크 컬러 스킴 (단일 스킴을 단순히 반전시킨 것이 아님). 텍스트와 UI 요소의 대비는 WCAG AA 기준에 맞게 검증되었습니다.
- X/Twitter 스타일의 원박스(onebox) 링크 미리보기. 얇은 테두리와 둥근 모서리를 적용했습니다.
- 에티켓(Etiquette) 스타일의 깃발/화살표 모양 태그
- 모든 기기에서 고정된 16:9 비율의 비디오 임베드
- 은은한 호버 상태를 갖춘 줄무늬(제브라 스트라이프) 토픽 목록
- 버튼, 카드, 모달, 입력 필드 전체에 적용 가능한 모서리 둥글기 설정
- 스킴 자체의 텍스트 색상을 사용하는 접근성 집중(outline) 효과. 라이트 모드와 다크 모드 모두에서 잘 보이도록 설계되었습니다.
- 위 모든 항목은 테마 설정입니다. 원하지 않는 기능을 끄거나 조정할 수 있습니다.
설치 방법
Customize → Themes → Install → From a git repository:
https://github.com/terraboss/discourse-terraglass
이렇게 설치하면 향후 "업데이트 확인"을 원클릭으로 수행할 수 있습니다.
업데이트
아래에서 처음 지적했던 backdrop-filter 흐림 문제 수정되었습니다. 실제 원인을 알려주신 awesomerobot님께 감사드립니다 (상세 내용). 이제 사이드바, 햄버거 메뉴, 검색 패널 모두 올바르게 흐림 효과가 적용됩니다.
피드백 환영합니다. 기능 요청이나 버그 리포트를 기꺼이 접수하겠습니다.
