Figma의 다크 모드 도입은 단순한 색상 변경을 넘어, 수년간 쌓인 레거시 코드의 하드코딩된 색상 값을 체계적인 디자인 토큰 시스템으로 전환하는 대규모 엔지니어링 프로젝트였습니다. 이들은 수천 개의 색상 변수를 수동으로 수정하는 대신, 의미론적(Semantic) 명명 규칙과 자동화된 코드 수정 도구를 활용해 유지보수가 용이한 아키텍처를 구축했습니다. 결과적으로 Figma는 단일 테마의 제약에서 벗어나 다크 모드를 포함한 멀티 테마를 유연하게 지원할 수 있는 기술적 기반을 마련했습니다.

디자인 토큰 시스템 구축

하드코딩된 헥스(Hex) 코드 대신 의미를 담은 '디자인 토큰'을 도입했습니다. 단순한 색상값(예: #FFFFFF)이 아니라 역할(예: bg-primary)에 기반한 이름을 부여했습니다.
토큰 구조를 '기본 값(Base)', '의미론적 값(Semantic)', '컴포넌트 특정 값(Component-specific)'의 계층으로 나누어 관리함으로써 확장성을 높였습니다.
JSON 형식을 사용하여 디자인과 엔지니어링 팀 간의 단일 진실 공급원(Single Source of Truth)을 구축하고, 이를 통해 다양한 플랫폼에 일관된 색상을 적용했습니다.

하드코딩된 레거시 코드의 자동화된 마이그레이션

코드베이스 내에 흩어져 있던 수천 개의 하드코딩된 색상 값을 찾기 위해 정규 표현식과 추적 도구를 활용했습니다.
'코드모드(Codemods)'를 제작하여 수동 수정의 위험을 줄이고, 기존의 Hex 코드를 적절한 CSS 변수(Variable)로 자동 교체했습니다.
단순 일대일 매칭이 불가능한 경우(같은 흰색이라도 배경인지 경계선인지에 따라 토큰이 달라지는 경우)를 해결하기 위해 엔지니어가 직접 문맥을 확인하는 프로세스를 병행했습니다.

CSS 변수 기반의 실시간 테마 전환

런타임에서 테마를 즉각적으로 변경하기 위해 CSS 커스텀 프로퍼티(Custom Properties)를 사용했습니다.
최상위 루트 요소에 테마를 결정하는 클래스(예: .theme-dark)를 부여하고, 하위 요소들이 해당 스코프 내의 CSS 변수 값을 참조하도록 설계했습니다.
DOM 요소뿐만 아니라 HTML Canvas와 같이 CSS 변수를 직접 사용할 수 없는 복잡한 렌더링 환경에서도 테마 시스템이 연동될 수 있도록 별도의 브릿지 로직을 구현했습니다.

기술적 부채 해결과 향후 확장성

다크 모드 프로젝트를 통해 발견된 수많은 유령 색상(사용되지 않거나 중복된 색상)을 정리하여 코드의 청결도를 높였습니다.
새롭게 구축된 시스템은 향후 '고대비 모드'나 '브랜드 테마' 등 또 다른 테마를 추가할 때 최소한의 코드 수정만으로 대응할 수 있는 구조를 갖추게 되었습니다.

실용적인 제언 Figma의 사례는 대규모 서비스에서 다크 모드를 도입할 때 단순한 스타일 추가가 아닌 **'의미론적 토큰화'**가 선행되어야 함을 보여줍니다. 초기 구축 단계에서 자동화 도구(Codemods)를 적극 활용하고, 디자인과 엔지니어링이 공통으로 사용하는 토큰 관리 체계를 만드는 것이 장기적인 유지보수 비용을 줄이는 핵심입니다.