피그마 #34
피그마 #34안녕하세요. 이번에는 피그마의 변수를 배워볼게요. 피그마에서 가장 최근에 업데이트된 기능으로.. 디자인을 관리할 때 매우 중요한데요, 아직 우리가 챕터 3에서 라이브러리를 활용해서 디자인 시스템을 만들어보는걸 배워보지 않았죠. 디자인 시스템에 대해서는 다음 챕터에서 자세히 다뤄보고, 이번에는 피그마에서 제공하는 변수라는 기능에 대해서만 집중해볼게요.
변수란 무엇인가?
개발에서 “변수”는 데이터를 저장하고 참조하는 단위를 말합니다. 피그마에서는 이 개념을 디자인 토큰으로 확장해, 디자인 속성(컬러, 수치, 문자열 등)을 변수로 등록하고 이를 재사용 가능하게 만듭니다. 즉, 변수를 통해 디자인 요소의 중복을 줄이고, 변화에 빠르게 대응할 수 있습니다.
변수와 값 연결의 개념
변수는 특정 데이터를 저장하는 이름으로, 데이터를 효율적으로 관리하고 재사용하기 위해 사용됩니다. 이때, 변수 간에 관계를 설정하여 하나의 변수를 다른 변수와 연결할 수 있습니다. 이러한 연결은 참조(reference)의 개념으로, 원본 변수의 값이 변경되면 연결된 변수의 값도 함께 변경되는 특징이 있습니다.
위 이미지처럼, 나이가 25라고 했을때, 나이에 차은우 나이를 연결하면 차은우 나이는 25가 되겠죠? 이때 나이를 26으로 변경하면 차은우의 나이도 26으로 변경되는 것입니다.
피그마에서 등록 가능한 변수의 범위
피그마는 디자인에 필요한 네 가지 타입의 변수를 제공합니다.
1. Color
컬러값을 저장하여 디자인에서 반복적으로 사용 가능합니다. 예를 들어, 브랜드의 주요 색상을 변수로 등록하면, 모든 디자인 요소에서 해당 컬러를 참조할 수 있습니다. 색상이 변경되면 변수만 업데이트하면 전체 디자인이 자동으로 변경됩니다.
2. Number
사이즈, 마진, 패딩, 라운드 값 등 수치 데이터를 등록할 수 있습니다. 이를 통해 UI 요소 간의 간격, 크기 등을 일관되게 관리할 수 있습니다.
3. String
문자열 데이터를 저장합니다. 자주 사용되는 텍스트(예: 버튼 레이블, 폼의 플레이스홀더 등)를 변수로 관리하면 텍스트 변경 시 효율적으로 대응할 수 있습니다.
4. Boolean
참(True) 또는 거짓(False) 값을 반환하는 변수입니다. 특정 조건에 따라 디자인 요소를 표시하거나 숨길 수 있습니다. 반응형 디자인이나 다크 모드와 같은 상황에 유용합니다.
변수 사용의 이점
1. 일관성 있는 색상 관리
브랜드의 주요 색상을 변수로 정의하면, 모든 디자인 컴포넌트에서 동일한 색상을 참조할 수 있습니다. 만약 브랜드 색상이 업데이트된다면 변수의 값만 변경하면 모든 요소가 자동으로 반영됩니다. 이는 대규모 프로젝트에서 색상 관리의 효율성을 극대화합니다.
2. 레이아웃 및 간격 조정
패딩, 마진, 갭, 높이와 같은 레이아웃 속성을 변수로 저장하면, UI 요소 간의 간격을 체계적으로 관리할 수 있습니다. 예를 들어, 동일한 마진 값을 여러 컴포넌트에 적용한 후 변수로 관리하면, 간격 변경 시 변수를 수정하는 것만으로 전체 디자인이 업데이트됩니다.
3. 문구 관리
자주 사용되는 텍스트를 변수로 등록하면 텍스트 변경 시 일관성을 유지하면서도 손쉽게 업데이트할 수 있습니다. 다국어 지원이 필요한 경우에도 변수로 관리하면 효율적으로 텍스트를 교체할 수 있습니다.
4. 반응형 디자인과 다크 모드 관리
Boolean 변수를 활용해 반응형 UI 요소를 설정하거나, 다크 모드와 라이트 모드의 색상을 분리하여 관리할 수 있습니다. 이를 통해 다양한 화면 크기와 상황에 적합한 UI를 쉽게 구현할 수 있습니다.
컬러 변수 활용 예시
예를 들어, 브랜드의 메인 색상 #004fff를 컬러 변수로 등록하면, 버튼, 카드, 네비게이션 바 등 다양한 컴포넌트에 적용할 수 있습니다. 이후 색상을 변경할 필요가 있다면, 변수 값만 수정하면 전체 디자인이 즉시 업데이트됩니다.
변수는 디자인 시스템 구축 시 필수적인 역할을 합니다. 디자인 시스템은 브랜드의 가이드라인에 따라 색상, 텍스트, 간격 등을 체계적으로 정의하고 관리하는 도구입니다. 변수를 활용하면 디자인 시스템을 더욱 강력하고 유연하게 만들 수 있습니다. 예를 들어, 브랜드 색상 팔레트, 텍스트 스타일, 컴포넌트 간의 간격 등을 변수로 관리하면, 유지보수가 훨씬 쉬워집니다.
