베리어블 & 디자인 시스템

다크/라이트 모드 컬러 대응

피그마 오픈카톡방2026. 3. 7.

질문사항

다크 모드/라이트 모드 컬러 시스템을 구축할 때, 1:1 컬러 대응이 항상 필요한가요? 특히 라이트 모드에서 그림자로 배경과 분리하던 모달이 다크 모드에서 1:1 대응 컬러를 사용하면 배경에 묻히는 경우, 시멘틱 컬러 관점에서 새로운 컬러를 페어링해도 괜찮을까요?

답변

네, 다크 모드/라이트 모드 컬러 시스템을 구축할 때 1:1 컬러 대응이 항상 필요한 것은 아니며, 오히려 상황에 따라 유연하게 새로운 컬러를 페어링하는 것이 시멘틱 컬러의 핵심 원칙입니다.

시멘틱 컬러 (Semantic Color)의 이해:

시멘틱 컬러는 색상 자체의 이름(예: `red-500`, `blue-200`) 대신, UI에서의 역할이나 의미(예: `primary-button-background`, `surface-default`, `text-on-primary`)를 기반으로 이름을 지정하는 방식입니다. 이 방식의 가장 큰 장점은 테마(Theme)나 모드(Mode)에 따라 실제 색상 값을 유연하게 변경할 수 있다는 점입니다.

질문 상황에 대한 답변:

1:1 대응의 한계: 라이트 모드에서 `surface-default`가 `white (FFFFFF)`이고 다크 모드에서 `surface-default`가 `dark-gray (121212)`로 1:1 대응된다고 가정해 봅시다. 하지만 모달처럼 배경과 분리되어야 하는 컴포넌트의 경우, 다크 모드에서 `dark-gray`를 사용하면 배경과 구분이 어려워질 수 있습니다.

시멘틱 컬러의 유연성: 이럴 때 시멘틱 컬러는 빛의 환경(라이트/다크 모드)에 따라 다른 실제 색상 값을 할당할 수 있도록 해줍니다.

라이트 모드에서 `modal-background`는 `surface-default` (FFFFFF)를 사용하고, 그림자로 깊이감을 표현합니다.

다크 모드에서 `modal-background`는 `surface-default` (121212)보다 약간 더 밝은 색상 (예: `dark-gray-light (212121)`)을 사용하거나, 테두리(Stroke)를 추가하여 배경과 분리감을 줄 수 있습니다. 이 경우, 다크 모드의 `modal-background`는 라이트 모드의 `modal-background`와 1:1 대응되는 색상 값이 아닐 수 있습니다.

결론:

시멘틱 컬러 시스템에서는 각 UI 요소의 역할에 따라 최적의 시각적 경험을 제공하는 것이 중요합니다. 따라서 라이트/다크 모드 전환 시, 단순히 1:1 색상 값을 매칭하기보다는, 각 모드에서 해당 컴포넌트가 의도한 시각적 계층과 가독성을 유지할 수 있도록 가장 적절한 색상 값을 페어링해야 합니다. 이는 시멘틱 컬러의 본질적인 목적과 일치합니다.