피그마(Figma): UI 기획자가 '변수' 기능으로 다크 모드와 라이트 모드 시안을 1초 만에 전환하는 비법

아직도 시안을 '복제'해서 다크 모드를 만드는가?

과거의 UI 기획자나 디자이너들은 라이트 모드 시안을 다 완성한 뒤, 프레임을 통째로 복사해 일일이 컬러 코드를 수정하며 다크 모드 시안을 만들었다. 이 과정에서 발생하는 휴먼 에러는 치명적이다. 라이트 모드에서 버튼의 라운드 값을 8px에서 4px로 수정하면, 다크 모드 시안에서도 똑같이 4px로 고치는 수고를 반복해야 했다. 만약 페이지가 100장이 넘는 대규모 프로젝트라면? 그야말로 노가다의 연속이다.

하지만 2026년 현재, 피그마의 '변수(Variables)' 기능을 제대로 다루는 파워 유저에게 이런 작업은 구시대의 유물일 뿐이다. 이제는 디자인 요소에 '색상'을 입히는 것이 아니라 '의미(Token)'를 부여한다. 이 글에서는 단순한 기능을 넘어, 실무에서 즉시 써먹을 수 있는 '변수 기반 모드 전환 워크플로우'​의 정수를 파헤쳐본다.

1. 변수의 핵심 원리: 'Primitive'와 'Semantic'을 구분하라

피그마 변수를 단순히 "컬러를 저장하는 통"으로 생각한다면 아직 하수다. 진정한 전문가의 라이브러리는 2단계 구조로 설계된다. 이 구조를 이해하지 못하면 다크 모드 전환 시 예외 케이스(Edge case)에 대응하지 못해 결국 다시 수작업으로 돌아가게 된다.

원시 토큰 (Primitive Tokens)

가장 원천이 되는 색상 값이다. Blue/500, Gray/100처럼 색상의 이름과 명도 단계를 그대로 사용한다. 여기에는 모드의 개념이 없다. 오직 절대적인 색상 정보만 담는다.

시맨틱 토큰 (Semantic Tokens) - 핵심 포인트

실제 디자인 요소에 할당하는 변수다. Bg/Primary, Text/Default, Button/Active와 같이 '이 색상이 어디에 쓰이는가'​라는 의미를 담는다.

"라이트 모드일 때 Bg/Primary는 White이지만, 다크 모드 모드일 때 Bg/Primary는 Gray/900이다." 라는 논리를 이 단계에서 설정한다. 이렇게 설계하면 디자이너는 시안을 작업할 때 "이건 배경색이니까 Bg/Primary를 써야지"라고 생각할 뿐, 현재가 라이트인지 다크인지 고민할 필요가 없어진다.

Photo by TourBox on Unsplash

2. 1초 만에 전환되는 다크 모드 구축 가이드 (Step-by-Step)

이제 실전이다. 아래 순서를 그대로 따라가면 클릭 한 번으로 분위기가 반전되는 시안을 완성할 수 있다.

1단계: 변수 컬렉션 생성 및 모드 추가

1. 피그마 우측 패널의 [Local Variables] 아이콘을 클릭한다.
2. Color 타입의 변수를 생성하고 이름을 설정한다 (예: Surface/Main).
3. 컬렉션 설정 우측 상단의 + 버튼을 눌러 'Mode'​를 추가한다.
4. 첫 번째 열의 이름을 Light, 두 번째 열의 이름을 Dark로 변경한다.

2단계: 모드별 값 할당

• Light 모드 열에는 밝은 배경색을, Dark 모드 열에는 어두운 배경색을 지정한다.
• 주의: 텍스트 컬러는 반대로 설정해야 한다. 라이트 모드에서 Black이라면 다크 모드에서는 White 계열로 지정해야 가독성이 확보된다.

3단계: 디자인 요소에 변수 적용

프레임, 텍스트, 버튼 등을 선택하고 Fill(칠) 속성에서 방금 만든 시맨틱 변수를 연결한다. 이때 절대로 원시 컬러(Hex 코드)를 직접 입력하지 않는 것이 파워 유저의 철칙이다.

4단계: 모드 스위칭의 마법

이제 마법이 일어나는 순간이다. 섹션(Section)이나 프레임(Frame)을 선택하고 우측 패널의 [Layer] 섹션을 보면 작은 아이콘이 생긴 것을 볼 수 있다. 여기서 Change variable mode를 선택해 'Light'에서 'Dark'로 바꾸는 순간, 내부의 모든 요소가 정의된 변수 값에 맞춰 일제히 변한다.

3. 피그마 요금제별 변수 기능 비교

피그마는 강력한 기능을 제공하지만, 안타깝게도 모든 기능을 무료로 풀지는 않았다. 특히 변수 모드(Mode) 기능은 요금제에 따라 제한이 크므로, 팀의 규모와 프로젝트 성격에 맞는 선택이 필수적이다.

💡 ​TIPS: Professional 요금제만 되어도 4개의 모드를 쓸 수 있다. 이는 Light, Dark뿐만 아니라 Mobile, Desktop에 따른 간격(Spacing) 변수까지 제어하기에 충분한 숫자다.

4. 실전에서 마주치는 한계와 우회 전략 (Pros & Cons)

필자가 2026년까지 수많은 프로젝트를 진행하며 느낀 점은, 변수가 만능은 아니라는 점이다.

치명적인 단점: 복잡도와 성능 저하

수천 개의 변수가 얽힌 대형 프로젝트에서는 시안 로딩 속도가 현저히 느려질 수 있다. 특히 변수 안에 변수를 참조하는 'Aliasing'이 3단계 이상 깊어지면 피그마 자체가 버벅거리는 현상이 발생한다.

• Workaround: 변수의 깊이를 최대 2단계(Primitive -> Semantic)로 제한하라. 컴포넌트 레벨의 토큰(예: Button-Primary-Bg-Hover)까지 만드는 것은 관리 지옥으로 가는 지름길이다.

이미지 에셋의 한계

색상은 변수로 쉽게 바뀌지만, 이미지는 변수 모드에 따라 자동으로 교체되지 않는다. (2026년 현재도 피그마에서 이 기능은 제한적이다.)

• Workaround: 다크 모드 전용 이미지가 필요하다면 'Component Props'의 'Instance Swap' 기능을 변수와 조합하여 사용해야 한다. 혹은 이미지를 감싸는 프레임에 어두운 오버레이(Overlay) 변수를 적용해 명도를 낮추는 기법을 권장한다.

Photo by Alvaro Reyes on Unsplash

5. 파워 유저를 위한 'Scoping' 꿀팁

변수를 만들 때 가장 많이 놓치는 것이 '스코핑(Scoping)'​이다. 텍스트 컬러로 만든 변수가 버튼의 Fill(칠) 목록에 나타나면 작업 효율이 떨어진다.

1. 변수 설정 아이콘(Edit Variable)을 클릭한다.
2. Scopes 메뉴에서 해당 변수가 어디에 나타날지 체크한다 (Text, Fill, Stroke, Gap 등).
3. 예를 들어, 간격용 변수는 오직 Gap과 Padding에서만 보이도록 설정하라. 이렇게 하면 우측 패널의 선택 리스트가 훨씬 깔끔해진다.

"디자인 시스템의 완성도는 얼마나 많은 요소를 만들었느냐가 아니라, 얼마나 적은 선택지로 얼마나 일관된 결과를 내느냐에 달려 있다."

결론: 당신의 시간을 아껴주는 기술에 투자하라

피그마의 변수 기능을 정복하는 것은 단순히 '다크 모드를 빨리 만드는 법'을 배우는 것이 아니다. 이는 디자인의 로직화​를 의미한다. 2026년의 UI 기획자는 그려내는 사람이 아니라, 시스템을 설계하는 사람이 되어야 한다.

이런 사람에게 추천한다:

• 수백 페이지의 디자인 가이드를 관리해야 하는 시스템 디자이너.
• 개발자와의 원활한 소통(디자인 토큰 전달)이 필요한 기획자.
• 단순 반복 작업에서 벗어나 고차원적인 UX 설계에 집중하고 싶은 프로페셔널.

이런 사람은 아직 필요 없다:

• 단발성 이벤트 페이지나 랜딩 페이지 위주의 작업을 하는 경우.
• 디자인 시스템이 고착화되지 않은 초기 스타트업의 초단기 프로토타이핑.

지금 당장 [Local Variables] 패널을 열고 첫 번째 시맨틱 토큰을 만들어보라. 한 번 이 효율성을 맛본다면, 다시는 수동으로 컬러를 바꾸던 과거로 돌아가지 못할 것이다. figma의 가격이 결코 저렴하지 않음에도 불구하고, 수많은 전문가가 Professional 플랜을 결제하는 이유는 바로 이 1초의 전환이 주는 압도적 생산성 때문이다.