피그마 #17
피그마 #17안녕하세요. 이번에는 변수(Variables)를 배워보겠습니다. 변수는 피그마에서 디자인을 효율적으로 관리하는 데 매우 중요한 역할을 합니다. 나중에 챕터 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를 컬러 변수로 등록하면, 버튼, 카드, 네비게이션 바 등 다양한 컴포넌트에 적용할 수 있습니다. 이후 색상을 변경할 필요가 있다면, 변수 값만 수정하면 전체 디자인이 즉시 업데이트됩니다.
변수는 디자인 시스템 구축 시 필수적인 역할을 합니다. 디자인 시스템은 브랜드의 가이드라인에 따라 색상, 텍스트, 간격 등을 체계적으로 정의하고 관리하는 도구입니다. 변수를 활용하면 디자인 시스템을 더욱 강력하고 유연하게 만들 수 있습니다. 예를 들어, 브랜드 색상 팔레트, 텍스트 스타일, 컴포넌트 간의 간격 등을 변수로 관리하면, 유지보수가 훨씬 쉬워집니다.
