일관성, 생산성을 위한 피그마 핵심 기능

로컬 변수 활용 방법 알아보기

앱을 디자인하거나 개발하다 보면, 유지보수가 쉬운 구조와 일관성 있는 사용자 경험을 만드는 것이 중요하다는 것을 자주 느낍니다. 프로젝트 초기에 명확한 원칙을 정하고 이를 체계적으로 관리하지 않으면, 시간이 지날수록 디자인 시스템이 복잡해지고 유지보수 비용이 증가하기 때문입니다.

특히, 앱이 여러 플랫폼(모바일, 웹)에서 동작하거나 테마(다크 모드, 라이트 모드)를 지원해야 하는 경우, 초기 설계에서 변수를 활용한 체계적인 관리는 필수적입니다. 피그마(Figma)의 로컬 변수(Local Variable)는 이를 효과적으로 구현할 수 있는 강력한 도구입니다. 이번 글에서는 로컬 변수란 무엇인지, 왜 활용해야 하는지, 그리고 로컬 변수를 활용하면 얻을 수 있는 이점에 대해 이야기해 보겠습니다.

‍

로컬 변수(Local Variable)란 무엇인가?

피그마의 로컬 변수(Local Variables) 기능은 2023년 5월에 열린 Figma Config 2023 행사에서 발표되었습니다. 이 기능은 디자인 시스템의 효율성을 높이고, 프로토타이핑 과정에서 변수 활용을 가능하게 합니다.

로컬 변수(Local Variable)는 디자인 시스템 내에서 재사용 가능한 속성 값을 정의하고 관리할 수 있는 기능입니다. 예를 들어, 색상, 타이포그래피 스타일, 간격(margin/padding) 등의 요소를 변수로 설정하면, 이를 프로젝트 전반에서 일관되게 사용할 수 있습니다.

로컬 변수는 피그마 파일 내에서 정의되며, 컴포넌트와 연결하여 디자인 작업을 더욱 체계적이고 효율적으로 만들어줍니다. 이를 통해 변수 값만 수정해도 연결된 모든 디자인에 즉각적으로 반영할 수 있습니다.

‍

‍

로컬 변수의 주요 특징

1. 속성의 중앙 관리: 색상, 폰트, 간격 등을 한 곳에서 관리할 수 있습니다.
2. 빠른 업데이트: 변수를 수정하면 연결된 모든 요소에 즉시 반영됩니다.
3. 컴포넌트와의 연동: 로컬 변수는 컴포넌트와 결합되어 재사용성을 높입니다.
4. 다양한 상태 지원: 상태별 디자인(Hover, Active 등)에도 변수를 활용할 수 있습니다.

‍

로컬 변수를 활용해야 하는 이유

1. 유지보수가 용이한 디자인 시스템 구축

디자인 작업이 복잡해질수록 중앙에서 모든 속성을 관리할 수 있는 체계가 필요합니다. 로컬 변수는 프로젝트 내에서 색상, 타이포그래피 등의 변경이 필요할 때 개별 요소를 수정하지 않아도 되게 만들어줍니다.

• 예: 브랜딩 색상을 업데이트해야 하는 경우, 변수 하나만 변경하면 전체 디자인에 반영됩니다.

2. 디자인의 일관성 유지

앱의 화면이 여러 개로 확장될수록, 동일한 요소(버튼, 텍스트 필드 등)가 여러 곳에서 반복적으로 사용됩니다. 로컬 변수를 활용하면 모든 요소가 동일한 속성을 따르기 때문에 **일관된 사용자 경험(UX)**을 보장할 수 있습니다.

3. 개발자와의 협업 효율성 증가

디자인 시스템에서 정의한 변수는 개발자가 사용하는 변수와 유사한 역할을 합니다.

• 예: "Primary Color" 변수를 정의하고 이를 버튼이나 텍스트의 색상으로 사용하면, 개발자는 동일한 변수를 코드에서도 재사용할 수 있습니다.이를 통해 디자이너와 개발자 간의 의사소통이 간소화되고, 작업 속도가 빨라집니다.
• 또한 리브랜딩 등의 이유로 디자인의 룩앤필이 변경할 때, 쉽게 해결할 수 있습니다.

4. 다양한 테마와 상태 관리

앱에서 다크 모드와 라이트 모드를 지원하거나 특정 페이지마다 다른 테마를 적용해야 할 경우, 로컬 변수는 효율적인 테마 관리 도구가 됩니다.

• 예: 다크 모드에서는 라이트 모드에서 사용하는 컬러를 반전시켜 정의한다면 전체 디자인에 변경 사항이 반영됩니다.

5. 반응형 디자인의 효율적 지원

데스크탑, 태블릿, 모바일 등 다양한 화면 크기를 지원할 때, 로컬 변수는 간격(margin/padding)이나 폰트 크기와 같은 속성을 플랫폼별로 구분하여 관리할 수 있습니다.

• 예: 모바일에서는 버튼의 패딩을 좁게, 데스크탑에서는 넓게 설정하는 변수를 정의할 수 있습니다.

‍

로컬 변수 실제 활용 방법

아래는 제가 피그마에서 로컬 변수를 실제로 적용한 방법입니다.

컬러 지정하기

저는 컬러의 코드를 지정하기 보다는 컬러의 사용 용도를 정의하고 지정하는 편입니다. 브랜드를 디자인할 때, 정말 많은 컬러들을 지정하게 되는데요, 이 컬러 중 상당수의 컬러는 UX/UI디자인을 할 때에 필요하지 않기 때문이죠. 또한, 오히려 브랜드디자인을 할 때, 사용하지 않았던 컬러들을 사용하게 되는 경우도 있습니다. 가령, hover, pressed와 같이 인터랙션과 관련된 컬러가 그러하고, 텍스트나 배경에 사용하는 회색들도 그러합니다. 제가 지정하는 컬러들은 아래와 같습니다.

• CTA: 클릭 가능함을 의미하는 컬러
  • 기본 상태, 호버(hover), 누르는 중(pressed), 비활성화
  • Secondary button의 호버(hover), 누르는 중(pressed)일 때 사용하는 배경색
• Destructive: 파괴적인 액션을 의미는 컬러
  • 기본 상태, 호버(hover), 누르는 중(pressed), 비활성화
  • Secondary button의 호버(hover), 누르는 중(pressed)일 때 사용하는 배경색
• Status: 상태를 나타내는 컬러
  • 좋음 / 중간 / 나쁨 (3~5단계)
• Gray: 텍스트와 배경에 사용하는 회색 계열
  • 흰색 ~ 검은색 (10~12단계)

‍

다크모드 적용하기

로컬 변수로 컬러를 지정하면 가장 좋은 것이 다크모드를 디자인 하는 데에 필요한 노력을 엄청나게 많이 아낄 수 있다는 것입니다. 컬러 규칙을 잘 셋업한 후부터는 다크모드는 클릭 몇 번으로 마칠 수 있습니다. 다크모드 컬러를 지정하기 위해서는 로컬 변수에서 열(Column)을 추가하면 됩니다. 대신, 로컬 변수로는 그래디언트(Gradient)를 지정할 수 없는 것이 로컬 변수의 단점입니다.

‍

사이즈 지정하기

작년 여름부터 저는 디자인시스템에 일부 치수를 지정하기 시작했습니다. 반응형디자인을 할 때, 적용하는 시간을 단축하기 위함입니다. 제가 지정하는 값들은 아래와 같습니다.

• 타이포 사이즈: 사용되는 글자의 크기를 지정합니다.
• 간격(Margin, Padding): 화면 내의 간격을 지정합니다.
• 아이콘, 버튼, 칩 등의 크기: 해당 요소들의 크기를 지정합니다.
• Radius 값: 버튼, 카드 등의 모서리 둥글기를 지정합니다.

타이포와 간격은 반응형디자인에 있어 특히 중요한 요소입니다. 모바일의 화면은 데스크탑 화면에 비해 그 공간이 매우 협소하기 때문입니다. 가령, 32px 정도의 제목 텍스트는 모바일에서 매우 커 보이지만, 데스크탑에서는 다소 작게 느껴집니다. 또한, 간격 역시 마찬가지입니다. 데스크탑에서는 종종 80px 이상의 간격을 사용하는 경우가 있는데, 모바일에서 간격이 이정도로 된다면 사용할 수 있는 화면의 절반 가까이가 빈 여백이 될 수도 있습니다.

아이콘, 버튼, 칩 등의 크기와 Radius 값은 반응형디자인과 관련이 없습니다. 데스크탑과 모바일에 동일한 사이즈를 적용하고 있거든요. 하지만 디자인시스템을 다른 프로젝트에 적용할 때 큰 도움이 됩니다. UI디자인에서 다른 브랜드 디자인을 적용하려고 할 때 가장 많이 활용하는 것들이기 때문이죠. 이 변수들을 조절함으로써, 컴포넌트들의 별도 수정 없이도 새로운 느낌을 낼 수 있거든요. 디자인시스템은 하나의 프로젝트를 일관성 있게 유지해나가는 데에도 필수적이지만, 새로운 서비스를 준비하는 인하우스 디자이너나 다양한 클라이언트의 서비스를 디자인하는 외주 디자이너의 생산성을 위해도 반드시 필요합니다.

‍

‍

반응형디자인 적용하기

다크모드를 적용하는 것보다는 다소 복잡하지만, 반응형디자인 역시 쉽게 적용할 수 있습니다. 아래는 데스크탑 기준으로 디자인된 화면을 모바일용으로 변경하는 과정인데요, 오토레이아웃을 통해 요소들을 수직으로 배열하고, 설정된 사이즈들을 모바일 기준으로 변경하면 반응형디자인 과정이 모두 끝납니다.

‍

마치며…

저는 로컬 변수(Local Variable)는 피그마에서 디자인 효율성과 일관성을 유지하기 위한 핵심 기능이라고 생각합니다. 로컬 변수를 활용하면 다크 모드와 반응형 디자인의 적용, 타이포그래피와 간격을 플랫폼별로 구분하여 관리하는 작업에서 일관성과 효율성을 부여하기가 더 쉬워지기 때문입니다. 이것은 개발팀과의 소통 과정이 편해진다는 것을 의미하기도 하고요.

디자인과 개발이 점점 더 복잡해지고 다변화되는 현대의 디지털 환경에서, 로컬 변수는 단순한 관리 도구를 넘어 팀 전체의 생산성을 높이는 기반이 됩니다. 디자이너는 반복 작업에서 벗어나 더 창의적인 작업에 집중할 수 있고, 개발자는 명확한 변수 체계를 바탕으로 코드 구현 과정을 간소화할 수 있습니다.

이번 글에서 소개한 로컬 변수 활용 방법은 단순히 프로젝트 내부에서 일관성을 유지하는 데 그치지 않습니다. 여러 클라이언트를 동시에 관리하거나, 새로운 서비스를 구축해야 하는 경우에도 유지보수 비용을 줄이고, 변화에 빠르게 대응할 수 있는 체계를 제공합니다. 앞으로 디자인 시스템을 구축하거나 기존 시스템을 확장하려는 디자이너와 개발자들이 로컬 변수를 적극 활용해 더 나은 협업 환경과 효율적인 워크플로우를 만들어가길 기대합니다.