DbGate의 새로운 테마 시스템
Published: 2026-01-23
수년 동안 DbGate는 동일한 테마 시스템을 유지해 왔습니다. 7.0.0 버전부터는 JSON 파일을 기반으로 한 완전히 새로운 테마 시스템을 도입했습니다. 안타깝게도 플러그인 형태로 구현된 기존 커스텀 테마는 더 이상 지원되지 않습니다.
DbGate 커뮤니티 구성원들이 DbGate를 위해 테마를 만들어 주신 것에 깊이 감사드리며, 이전에 만들어진 테마들이 더 이상 지원되지 않게 된 점을 매우 안타깝게 생각합니다. 이런 이유로 이 결정을 오랫동안 미뤄 왔습니다. 그러나 시간이 지날수록 디자인을 발전시킬 수 없는 상황은 점점 더 지속 불가능해졌습니다. 결국 우리는 과감한 변화를 선택해 테마 시스템을 완전히 재설계하기로 결정했습니다.
이 글에서는 우리가 왜 이런 변화를 선택했는지, 그리고 새로운 테마 시스템이 어떻게 동작하는지 설명하겠습니다.
6.x 버전까지 DbGate의 고정된 테마 시스템
6.x 버전까지 DbGate는 비교적 단순한 테마 시스템을 사용했습니다. 소수의 CSS 변수로 색상을 정의하는 방식이었고, 이 CSS 변수들은 특정 UI 요소에 연결된 것이 아니라 --font-color-1, --font-color-2, --background-color-1, --background-color-2 같은 보다 일반적인 형태였습니다. 이 방식은 새로운 테마를 만들기에는 쉬웠지만, 기능적으로는 상당히 제한적이었습니다. 개별 UI 요소에 대해 독립적으로 스타일을 정의하는 것이 불가능했고, 색상 CSS 변수를 변경하면 특정 부분이 아니라 애플리케이션 전체에 영향을 주었기 때문에, 결과적으로 애플리케이션의 디자인을 고정시켜 버리는 효과가 있었습니다.
DbGate 7.0.0의 요소 기반 테마 시스템
DbGate 7.0.0에서는 JSON 파일을 기반으로 한 완전히 새로운 테마 시스템을 도입했습니다. 새로운 시스템에서는 각 UI 요소가 색상, 테두리, 기타 스타일 속성을 정의하는 자체 CSS 변수 세트를 가집니다. 이를 통해 테마를 훨씬 더 유연하게 정의할 수 있습니다. 이제 테마는 훨씬 더 많은 CSS 변수로 정의되며, 각각은 --data-browser-font-color, --data-browser-background-color, --button-font-color, --button-background-color처럼 특정 UI 요소와 직접적으로 연결됩니다.
AI 생성 콘텐츠의 시대에, 우리는 AI를 사용해 커스텀 테마를 쉽게 만들 수 있기를 바랐고, 이를 위해서는 애플리케이션 외형에 대한 더 세밀한 제어가 필요했습니다. 또한 이제는 AI가 이러한 작업을 처리할 수 있기 때문에, 더 많은 CSS 변수를 유지 관리하는 비용은 사실상 무시할 수 있는 수준이 되었고, 그에 따른 디자인 유연성의 이점은 매우 커졌습니다.
AI로 테마 생성하기
DbGate Premium 에디션에는 새로운 Theme AI assistant 기능이 포함되어 있습니다. 이 기능을 사용하면 AI를 통해 커스텀 테마를 만들 수 있습니다. 원하는 테마를 자연어로 설명하기만 하면, AI assistant가 그 설명을 바탕으로 테마를 생성합니다. 또한 원하는 변경 사항을 자연어로 설명하는 것만으로 생성된 테마를 계속 수정할 수도 있습니다.
DbGate Cloud를 통한 테마 공유
우리는 커스텀 테마 공유를 지원하기 위해 DbGate Public knowledge base를 확장했습니다. 테마를 만들고(JSON 파일에서 CSS 변수를 정의) 공유하면 됩니다. Solarized light 테마의 소스 코드에서 영감을 얻을 수도 있습니다. 첫 번째 버전의 테마를 만들 때는 AI assistant를 활용하는 것을 권장합니다. 배포를 위해서는 DbGate Public knowledge base 저장소에 pull request를 생성하기만 하면 됩니다. PR이 머지되면, 여러분의 테마는 모든 DbGate 사용자에게 테마 선택기에서 제공되며(테마에 정의된 색상을 기반으로 한 미리보기와 함께 표시됩니다).