컬러 하나 바꾸자고 파일 전체에서 같은 색상을 쓰는 레이어를 검색해 하나씩 고쳐본 적이 있는가. 피그마 변수를 쓰지 않고 있다면 라이트 모드에서 다크 모드로 전환하는 작업은 디자인을 처음부터 다시 만드는 것과 크게 다르지 않다. 피그마가 변수 기능을 정식 출시하기 전에는 디자이너들이 스타일(Styles) 기능만으로 색상과 텍스트 규칙을 관리했는데, 스타일은 값을 참조로 연결할 뿐 모드 전환이나 조건부 값 교체 같은 동작을 지원하지 않았다. 변수는 이 한계를 넘어서기 위해 나온 기능이라는 점을 기억해두면 왜 컬렉션과 모드라는 개념이 필요한지 이해하기 쉽다.
1. 변수의 기본 단위 — 컬렉션과 모드
변수는 색상, 숫자, 문자열, 불리언 값을 하나의 정의로 관리하고, 그 값을 필요한 곳마다 연결해두는 기능이다. 값 하나만 바꾸면 연결된 모든 곳이 한 번에 바뀐다. 변수는 컬렉션 단위로 묶이고, 각 컬렉션 안에는 모드를 여러 개 만들 수 있다.
예를 들어 컬러 컬렉션 안에 라이트와 다크라는 두 개의 모드를 만들고, 같은 변수 이름에 모드별로 다른 색상 값을 지정할 수 있다. 프레임이나 컴포넌트에 어떤 모드를 적용할지 지정해두면, 모드를 전환하는 것만으로 화면 전체의 색상이 바뀐다. 숫자 변수는 간격이나 border-radius처럼 반복되는 수치를 관리하는 데 쓰고, 문자열 변수는 다국어 텍스트를 프레임별로 바꿔 미리보기할 때 유용하다.
2. 원시값과 시맨틱값 분리
변수를 잘 쓰는 팀은 대개 두 단계로 나눠 관리한다. 시맨틱 변수가 원시 변수를 참조하는 구조로 만들면, 나중에 브랜드 컬러가 바뀌어도 원시 변수 값만 교체하면 되고 컴포넌트에 적용된 시맨틱 변수 이름은 그대로 유지된다. 이 구조가 없으면 컴포넌트마다 실제 색상값이 직접 박혀 있어, 리브랜딩이나 다크모드 대응이 훨씬 번거로워진다.
원시 변수 (Primitive)
blue-500, gray-100처럼 실제 색상값을 그대로 담는 값
시맨틱 변수 (Semantic)
background-primary, text-danger처럼 용도를 이름에 담아 원시 변수를 참조
3. 다크모드 전환, 변수 모드로 해결하기
다크모드를 스타일 두 벌을 따로 만드는 방식으로 접근하면 컴포넌트 수만큼 작업량이 곱절이 된다. 변수 모드를 쓰면 컴포넌트는 하나만 만들고, 상위 프레임에서 라이트 또는 다크 모드를 지정하는 것만으로 하위의 모든 인스턴스가 알아서 바뀐다. 배경색과 텍스트색뿐 아니라 그림자나 테두리 색상까지 변수로 관리해두면, 실제 프로덕트에서 다크모드를 토글했을 때 나타나는 결과를 디자인 단계에서 미리 정확하게 확인할 수 있다.
💡 실무 포인트 — 다크모드를 나중에 추가할 계획이라도, 처음부터 원시값과 시맨틱값을 분리해 변수로 설계해두자. 나중에 스타일을 통째로 뜯어고치는 대신 모드 하나만 추가하면 된다.
4. 프로토타입과 API에서의 변수 활용
변수는 정적인 스타일 관리를 넘어 프로토타입에서 조건 로직에도 쓸 수 있다. 장바구니 합계를 계산하거나, 로그인 상태에 따라 다른 화면을 보여주는 등 변수 값을 변경하는 액션과 조건문을 조합하면 클릭 몇 번으로 이어지는 더미 프로토타입보다 훨씬 실제에 가까운 흐름을 시연할 수 있다. 또한 REST API와 플러그인 API를 통해 변수를 코드베이스와 동기화할 수 있어, 디자인 토큰을 코드에 자동으로 반영하는 파이프라인을 구축하는 팀도 늘고 있다.
원시 변수와 시맨틱 변수를 구분해 설계했는가
컬렉션과 모드 이름이 팀 전체가 이해할 수 있게 명확한가
다크모드에 필요한 배경, 텍스트, 테두리, 그림자 변수를 빠짐없이 정의했는가
컴포넌트에 실제 색상값이 아니라 변수가 바인딩되어 있는가
코드베이스와 동기화가 필요하다면 API 연동 방식을 정했는가
변수로 관리하는 값들을 컴포넌트 설계에 어떻게 연결하는지는 피그마 컴포넌트 제대로 만들기 글에서 함께 다뤘다. 원시값과 시맨틱값을 나누는 토큰 구조의 개념은 디자인 토큰이란 무엇인가에서 더 자세히 설명한다. 변수 컬렉션과 모드의 공식 개념은 피그마 공식 가이드를 참고하자.
5. 변수 도입 시 흔히 하는 실수
변수를 처음 도입하는 팀에서 자주 반복되는 실수는 구조를 정하지 않은 채 값부터 만드는 것이다. 컬렉션을 나누는 기준이나 이름 규칙을 먼저 합의하지 않으면, 인원이 늘어날수록 같은 의미의 변수가 여러 이름으로 중복 생성되어 오히려 관리 부담이 커진다.
흔한 실수
원시값 없이 시맨틱 변수에 색상을 직접 입력해, 나중에 리브랜딩할 때 결국 하나씩 찾아 고쳐야 한다
권장 접근
원시 변수를 먼저 정의하고 시맨틱 변수가 이를 참조하게 만들어, 값 교체가 한 곳에서 끝나게 한다
또 다른 실수는 모드 이름을 “Mode 1”, “Mode 2″처럼 기본값 그대로 두는 것이다. 팀원이 늘어나면 어떤 모드가 라이트이고 다크인지 매번 확인해야 해서 협업 속도가 느려진다. 모드를 만드는 시점에 바로 의미가 드러나는 이름으로 바꿔두는 습관이 필요하다.
6. 마치며
변수는 도입 초기에 구조를 잘 잡아두는 것이 관건이다. 원시값과 시맨틱값을 나누고, 모드 이름을 팀 전체가 합의된 기준으로 정해두면 다크모드 대응이나 리브랜딩처럼 큰 변경도 훨씬 가벼워진다. 지금 쓰고 있는 컬러 스타일 중 하나를 골라 변수로 옮겨보는 것부터 시작해보자.
Design Daily Life · 디자인의 일상을 기록합니다