개발자와 함께 만드는 디자인 시스템 - page variables

Figma가 디자인 시장에 등장한 지도 어느덧 9년이 되었습니다. 그동안 디자인 생태계에는 많은 변화가 있었고, 2014년 처음 공개된 Google의 Material Design System 역시 이제는 Figma 상에서도 손쉽게 구현할 수 있게 되었습니다. 2023년, Figma에 Page Variables 기능이 도입되면서 디자인 시스템 구축 방식에 큰 전환점이 생겼습니다. 디자인을 보다 세밀하게 설계할 수 있게 되었고, 특히 개발 친화적인 구조를 통해 디자이너와 개발자 간의 오차를 크게 줄일 수 있게 되었습니다. 이번 글에서는 개발 측면을 고려한 디자인 시스템을 어떻게 구성할 수 있는지, 그 핵심인 Page Variables 중심으로 알아보겠습니다.

1. 왜 Page Variables를 써야 할까?

아직도 많은 디자이너들이 Local Style 기반으로 작업하고 있습니다. 물론 Local Style도 어느 정도 개발에 반영하는 데 문제가 없지만, 유연성 측면에서는 여러 한계가 있습니다. 예를 들어, 18px 폰트를 사용하는데 Bold와 Semibold 두 가지 굵기를 적용하고 싶다면 어떨까요? Local Style에서는 이 두 스타일을 각각 등록하거나, 스타일을 깨고 수동으로 설정해야 합니다. 하지만 Page Variables는 size, weight 등을 독립된 값으로 관리하기 때문에 하나의 텍스트 스타일 안에서 훨씬 유연하게 조합할 수 있습니다. 이는 개발자가 실제로 CSS 변수나 디자인 토큰을 활용하는 방식과 동일합니다.

무엇보다 오늘날 UI는 대부분 반응형입니다. PC와 Mobile에서 서로 다른 폰트 크기를 사용하는 것은 이제 일반적입니다. Local Style에서는 이를 한 스타일에서 처리할 수 없습니다. 반면 Page Variables를 사용하면 하나의 이름으로도 디바이스에 따라 서로 다른 값을 매핑할 수 있습니다.

2. Page Variables의 기본 개념

페이지에서 아무것도 선택하지 않으면 오른쪽 패널이 위 이미지와 같이 표시됩니다. 여기서 Variables라는 메뉴를 클릭해 Page Variables를 설정하게 됩니다.

Figma의 Page Variables는 개발자가 사용하는 CSS 변수와 매우 유사합니다. "변수"란, 약속된 값이며 언제 어디서나 동일한 의미를 가집니다. 예를 들어, blue-500이라는 변수를 #0000ff로 지정했다면, 어디서든 blue-500을 사용하면 #0000ff가 적용됩니다. 이러한 개념을 바탕으로 Page Variables에서는 아래와 같은 항목들을 변수로 정의할 수 있습니다:

• 색상
• 글꼴, 폰트 크기, 폰트 두께
• 행간 (line height)
• 굴곡률 (radius)
• 여백, 간격 (padding)
• 텍스트

Page Variables은 기본적으로 Collection 이라는 단위로 구분됩니다. Collection은 변수 들을 담는 일종의 폴더 역할을 합니다. 이 Collection 안에서 group, name, value, mode 등을 조합해 여러가지 상황에 맞는 값들을 설정할 수 있습니다.

개발자들이 Variables를 등록할때 대부분 케밥케이스와 소문자만을 사용하게 됩니다. 따라서 Variables에서도 케밥 케이스(Kebab-case)와 소문자를 사용해 이름을 지정하는 것이 좋습니다. 숫자를 표현할때도 개발자들은 “01”처럼 표기합니다. 이는 “99”까지의 숫자를 고려한 표기이므로 역시 동일하게 해주는 편이 좋습니다.

3. 컬러 시스템 등록

가장 먼저 컬러 시스템을 등록합니다. 컬러 시스템에서 사용하는 네이밍 방법은 크게 Primitive와 Semantic이 존재합니다. 필자는 기본 적으로 Primitive를 명명하고 시작합니다. Semantic 방식은 각 변수의 역할과 의미에 따라 이름을 부여해야 하므로, 상황에 따라 명명규칙을 정하기가 상대적으로 복잡할 수 있기 때문입니다. 그렇기에 Primitive를 기본으로 사용하고 일부 간단한 것들만 Semantic을 명명하고 있습니다. 가장 먼저 폴더의 단위가 되는 Collection을 생성한뒤 이름을 Primitive Color로 명명합니다.

위의 값은 블로그에 적용된 Primitive Color 값입니다. 보통은 100~900 단위를 사용하지만, 블로그에서는 하위 단위를 추가할 것 같지 않았기에 10~100을 사용했습니다. Variables에서 그룹을 만드는 방법은 “/” 입니다. 이름을 명명할때 “gray/10” 으로 적으면 “gray” 라는 그룹이 생성됩니다. 위 이미지에서 명명된 Variables는 개발단에서 다음과 같이 적용됩니다.

:root{
    --color-white: #ffffff;
    --color-block: #000000;
    --color-gray-10: #f2f2f2;
    --color-gray-20: #e6e6e6;
    --color-gray-30: #cccccc;
    --color-gray-40: #b3b3b3;
    --color-gray-50: #999999;
    --color-gray-60: #808080;
    --color-gray-70: #666666;
    --color-gray-80: #4d4d4d;
    --color-gray-90: #333333;
    --color-gray-100: #1a1a1a;
}

4. 폰트 시스템 등록

폰트와 관련된 Variables를 등록할때는 Collection을 2개 사용해야합니다. 폰트 크기는 mode를 사용해야 하기 때문입니다. 먼저 폰트 크기부터 살펴보겠습니다.

Google Material Design Guide를 참고해 위와같이 구성했습니다. 모바일의 경우 PC보다 화면이 작기 때문에 subtitle과 heading계열은 사이즈를 줄이게 되었습니다. 반면 body나 caption의 경우 PC보다 굉장히 작게 렌더링 되기 때문에 사이즈를 키우게 되었습니다. 위와 같이 적용한 후 프레임에서 해당 Variables를 사용하게 되면 프레임 별로 Mode를 선택 할 수 있게 됩니다.

이 기능은 Page 자체의 Variables Mode를 바꾸지 않아도 프레임 단위로 Mode를 지정 하게 해줍니다. 이 기능을 이용해서 PC화면을 디자인한 프레임은 PC Mode를, Mobile 화면을 디자인 한 프레임은 Mobile Mode를 설정해 작업을 하게됩니다.

폰트, 굵기, 행간입니다. 폰트를 별도로 등록해서 사용하고 있습니다. 현재 블로그는 간단한 디자인이기 때문에 하나의 폰트만을 사용했지만, 랜딩페이지가 존재하는 경우 강조용의 폰트를 사용할때가 많습니다. 그럴때 폰트를 추가해서 사용하고 있습니다. 굵기는 기본적으로 제공하는 값을 넣어놨습니다. 폰트마다 지원하는 굵기가 다르므로 사용할때 유의해야합니다.

행간은 %값을 사용하고 있지만, 아쉽게도 이 글을 작성하는 시기에는 아직 Page Variables에 %수치를 지원하지 않습니다. 그럼에도 불구하고 적어놓은 이유는 작업할때 잊지 않기 위해서입니다.

5. 기타 항목 등록

Radius, Padding, Gap 등 사용하는 값을 ETC라는 Collection에 기입해두었습니다. 블로그에서는 Radius 만 레벨별로 등록해두었습니다.

지금까지 여러 Variables를 등록했습니다. 이제 작업을 더욱 효율적으로 만들어 줄 중요한 설정이 하나 남았습니다. 기본적으로 모든 Variables는 사용이 가능한 모든 항목에서 선택 할 수 있게 되어있습니다. 하지만 폰트 크기 변수를 간격 이나 너비 값으로 사용하지 않을 것입니다. 이러한 설정을 하는 것이 바로 Scope 입니다.

Scope는 해당 Variables를 어디에서 사용할 수 있는지 결정하는 기능입니다. Radius 값의 경우 Corner radius 라는 곳에서만 사용 가능하도록 해 주었는데요. 이렇게 되면 다른 값들과 섞이지 않아 작업하기 편해집니다.

이번 글에서는 Figma의 Page Variables를 활용하여 색상, 타이포그래피, 간격 등 디자인 시스템의 가장 기초적인 단위를 작성하고 체계화 하는 방법을 알아보았습니다. 이처럼 견고하게 설계된 변수(Variable) 시스템은 디자이너와 개발자 간의 소통 비용을 줄이고, 앞으로 만들어갈 모든 결과물의 일관성을 보장하는 핵심적인 기반이 됩니다.

다음 글에서는 오늘 우리가 만든 이 변수들을 실제 UI에 어떻게 적용하는지, 재사용 가능한 “컴포넌트(Component)”를 구성하는 방법에 대해서 다루어 보겠습니다.