베리어블 & 디자인 시스템

라이트/다크 모드 컬러 페어링

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

질문사항

라이트 모드에서 하나의 컬러가 두 가지 역할을 수행하는 경우가 있는데, 다크 모드에서는 각각 다른 컬러를 사용해야 하는 상황이 발생할 수 있습니다. 이 경우, 라이트 모드에서 사용하던 컬러를 다크 모드에서 1:1 대응이 아닌 새로운 컬러로 페어링해도 괜찮을까요?

답변

네, 전적으로 괜찮습니다. 오히려 시멘틱 컬러 시스템의 유연성을 활용하는 올바른 접근 방식입니다.

시멘틱 컬러의 핵심:

시멘틱 컬러는 색상 자체의 이름(예: `gray-100`)이 아니라, UI에서의 역할과 의미에 따라 이름을 부여합니다(예: `surface-default`, `text-primary`, `border-subtle`). 이 역할은 라이트 모드와 다크 모드에서 동일하게 유지되지만, 그 역할에 할당되는 실제 색상 값은 각 모드의 시각적 맥락에 따라 달라질 수 있습니다.

예시:

라이트 모드:

`surface-default`: `white (FFFFFF)`

`surface-elevated`: `white (FFFFFF)` (그림자로 구분)

다크 모드:

`surface-default`: `dark-gray (121212)`

`surface-elevated`: `slightly-lighter-dark-gray (212121)` (배경과 구분하기 위해 다른 색상 사용)

위 예시처럼, 라이트 모드에서는 `surface-default`와 `surface-elevated`가 동일한 `FFFFFF` 값을 가질 수 있지만, 다크 모드에서는 배경과의 대비를 위해 `surface-elevated`에 `surface-default`와 다른, 더 밝은 다크 그레이를 할당할 수 있습니다.

결론:

시멘틱 컬러 시스템의 목적은 어떤 모드나 테마에서도 UI 요소가 의도한 시각적 계층과 가독성을 유지하도록 하는 것입니다. 따라서, 라이트 모드에서 1:1 대응되던 컬러가 다크 모드에서 시각적으로 적절하지 않다면, 해당 시멘틱 토큰에 새로운 컬러 값을 페어링하여 최적의 사용자 경험을 제공하는 것이 바람직합니다.