컴포넌트, 로컬스타일, 로컬 변수까지 초보 실무 디자이너를 위한 가이드
UXUI디자이너, 프로덕트디자이너, PM/PO, 기획자들의 현장에서도 피그마를 모르는 분들은 거의 없으실 것 같습니다.
그러면 가장 최신화된 피그마에서는
어떠한 기능을 활용해서 생산성을 높일 수 있을까요
현재 실무에서 내가 피그마를 쓰고 있지만, 얼마나 잘 활용하고 응용하고 있는지 체크하고 싶으신 분들에게도 도움이 될 것 같습니다.
아래부터는 피그마의 "컴포넌트", "로컬 스타일", "변수"를 소개하고 각각의 차이와 사용법, 최신 업데이트를 고려한 최적화된 응용 방법을 알려드리겠습니다.
모르고 쓰면, 단순한 기능일 뿐이지만, 기능들을 조합하고 활용하면 임팩트가 커집니다. 그럼 어떻게 내 디자인과 개발 비용이 줄어들지 실용적으로 접근해 볼게요.
- 개발자가 '디자인 시스템'이 있냐고 물어볼 때, 가장 먼저 적용할 수 있는 단계는 '컴포넌트'들을 만들고 정리하고, 적용해두는 것입니다.
- 컴포넌트는 재사용 가능한 디자인 요소를 만드는 기능이고, 버튼, 카드, 입력 필드 같은 디자인 블록을 한 번 만들어두고 여러 곳에서 반복적으로 사용할 수 있어요.
- 모든 컴포넌트를 적용하는데 시간이 걸린다면 '버튼'만 먼저, '네비게이션 메뉴'부터 먼저, '아이콘', '타이포' 부터 적용해볼 수 있습니다.
예시:
- 버튼 컴포넌트 : "구매하기 버튼"을 하나 만들어서 컴포넌트 생성, 같은 디자인 파일이나 publish기능을 활용해 서로 다른 디자인 파일 페이지에서도 동일한 버튼을 사용 가능.
- 카드 컴포넌트 : 이커머스 페이지에서 상품 리스트에 들어가는 카드(이미지 + 제목 + 가격)를 컴포넌트로.
- 실시간 반영 : 마스터 컴포넌트를 수정하면 실시간으로 모든 인스턴스에 반영. 수많은 화면에 반영되어 있는 버튼 컴포넌트의 색상을 바꾸면, 해당 컴포넌트를 사용하는 모든 디자인에서 색상이 자동으로 업데이트됨.
- 일관성 유지(퀄리티 향상) : 여러 화면에서 같은 스타일을 반복적으로 사용할 때, 고객에게도 더 편안하고 정돈된 느낌을 줄 수 있어요. 개발자 입장에서도 동일한 디자인를 활용해 개발하면 1차적으로도 개발 공수를 확 줄일 수 있습니다.
- 로컬 스타일은 텍스트, 색상, 효과 등 디자인 속성을 저장하는 기능이에요. 컴포넌트로 텍스트의 내용이나 색상의 값(코드), 효과에 대한 특정 디자인 속성을 관리하기 어려워요. 컴포넌트의 기능을 보완해 줍니다.
예시:
- 색상 스타일 : "버튼 색상"으로 색상 값을 파란색(#3498db)을 저장. 앞으로 해당 값을 스포이트로 찍을 필요 없이 저장한 값을 불러와 버튼마다 같은 색상을 반복적으로 사용.
- 텍스트 스타일: 제목 글꼴: Arial, 크기 24px, 굵기 Bold. 등 자주 사용하는 텍스트 스타일 조합을 저장해두고 모든 제목 텍스트에 동일한 스타일 적용.
- 반복작업 효율화 : 디자인 속성을 반복적으로 빠르게 적용할 수 있어요. 예: "제목 스타일"을 만들어 모든 제목에 적용
- 고정된 스타일 관리에 적합 : 회사 브랜드 색상이나 로고 스타일처럼 자주 바뀌지 않는 속성을 저장.
- 변수는 하나의 값(숫자, 색상, 크기 등)을 이름으로 저장하는 기능이에요. 어떻게 보면 로컬 스타일 위주로 쓰시는 분들은 배워도 잘 안쓰게 되시죠.
- 로컬스타일로 이미 우리 제품의 디자인 작업이 해결되면 변수까지는 꼭 쓸 필요는 없어요. 변수의 장점은 특정 조건에 디자인이 ‘분기’ 되는 것들을 관리할 수 있습니다.
- 로컬스타일이 1X1 테이블이라면, 변수는 nxn 케이스처럼 디자인을 여러 케이스로 나눠 디자인해야할 경우 효과가 납니다.
예시:
- 색상 변수: $primary_color = 파란색(#3498db) 버튼, 텍스트, 배경에 동일한 색상을 사용.
- 글자 크기 변수: $font_size_header = 24px
- 제목 글자 크기를 동일하게 유지
- 값을 기준으로 수정하면, 모든 디자인에 반영돼요. 특히 숫자를 입력해서 조정하는 부분 일괄 조정.
예시를 알려드릴게요.
- $primary_color를 빨간색으로 바꾸면, 이 변수를 사용한 모든 요소가 빨간색으로 바뀝니다. 이건 써봐야 압니다. 상당히 사용성이 좋아 대박인데? 라는 느낌이 듭니다.
- 여러 상황(케이스별) 따라 값 변경이 가능합니다. 같은 주제 아래에 2가지 컬러의 값을 저장해둘 수 있어요.
다크 모드: $background_color = 검정(#000) / 라이트 모드: $background_color = 흰색(#FFF)
- 반응형 디자인도 기기의 유형별로 지정해서 저장할 수 있게 됩니다.
모바일: $font_size_header = 20px / 데스크톱: $font_size_header = 24px
- 즉, 기기 크기에 따라 글자 크기나 간격을 자동으로 조정할 수 있어, 디자인의 일관성을 유지하면서 사용자 경험을 최적화합니다.
딱히 사용안해도.. 저는 손이 빨라서.. 지금이 더 편해요.
이제는 기본이 되었습니다. 컴포넌트, 로컬스타일, 변수를 사용하지 않을때를 디자이너와 개발자, 그 사이에 테스팅까지 챙겨야하는 기획자의 공수는 상당히 복잡해지고 무거워집니다.
실제로도 1-2년 전만해도 주니어 디자이너들이 피그마로 디자인 시스템을 만드는 걸 해보고싶다! 라는 니즈가 많았다면, 이제는 기본으로 배우는 스킬이라고 생각하시는 것 같고요.
실무에서조차도 개발자들이 오히려 적용해달라고 하는 모습을 봐왔습니다. 최소 기준은 컴포넌트와 로컬 스타일입니다. 변수는 목적에 따라 요청하는데, 점점 변수 활용 추세도 늘어날 것으로 보입니다.
- 개발자가 힘든 이유: 많은 개발자들이 명확하지 않은 버전의 피그마 디자인, 뭔가 자꾸 바뀌는 디자인 에 고충이 큽니다. 하단 네비게이션 바를 디자인하는데 디자이너 입장에서 실수로 비슷해보이지만 어떤 페이지에 예전 버전 디자인을 붙여놨습니다. 개발자는 그걸 모르고 있는 그대고 개발하게 되고, 잘못된 버전의 디자인을 개발할 수 있습니다.
- 디자이너가 힘든 이유: 디자이너도 마찬가지로 수정할 때 모든 요소를 일일이 변경해야 하므로 시간이 많이 소요됩니다.
- 개발자가 힘든 이유: 텍스트 스타일이나 색상값이 1만 바뀌어도 개발자에게는 새로운 작업이 추가됩니다. 통일되지 않으면, 코드 작성 시 어떤 값을 사용해야 할지 혼란스러워요.
- 디자이너가 힘든 이유: 스타일을 새로 추가하거나 기존 디자인을 수정할 때, 동일한 스타일을 계속 새로 만들어야 하므로 시간이 낭비됩니다.
- 개발자가 힘든 이유: 컴포넌트, 로컬 스타일처럼 반복된 기준과 값을 일일이 물어보러다니거나 문서를 뒤져야하는 일이 많아집니다. 아니면 기획자/디자이너가 문서로 결국 작성해두어야 하구요.
- 디자이너가 힘든 이유: 특정 색상이나 크기를 바꿔야 할 때, 파일 전체에서 일일이 수정해야 합니다. 손이 빠른 디자이너들도 괴로워하는 작업입니다. 모든 수정이 끝났는지 확인하는 데 시간이 많이 걸리고, 누락될 가능성도 높습니다.
- 컴포넌트(Component): 반복적으로 사용하는 디자인 블록을 정의.
- 로컬 스타일(Local Styles): 텍스트, 색상, 효과 등 디자인 속성을 저장. 고정된 스타일 관리와 반복 적용
- 변수(Variables): 목적에 따라 값(색상, 크기 등)을 저장하고 여러 상황에서 유연하게 사용. 변경 시 연결된 모든 곳에 자동 반영.
해봐야 체득이 됩니다. 간단한 실습 샘플!
이번에는 실습 예제도 하나 알려드립니다.
실습 목표 : 고급 활용법: 버튼 컴포넌트 만들때 모든 개념을 적용할 수 있습니다.
- 컴포넌트 설계: 기본 버튼(Primary Button) 컴포넌트를 생성하고, 버튼 텍스트와 배경색, 간격을 포함.
- 로컬 스타일 적용:
텍스트 스타일: "버튼 텍스트 스타일"로 글꼴, 크기, 색상 저장.
색상 스타일: 버튼 배경색(#3498db)을 "Primary Button Background"로 저장
- 변수 활용:
$primary_color 변수로 배경색 연결
$spacing_small 변수로 버튼 내부 간격(12px) 적용
$font_size_button 변수로 텍스트 크기 설정
- 결합 예시:
버튼 컴포넌트는 $primary_color와 "Primary Button Background" 스타일을 동시에 사용합니다.
텍스트는 "버튼 텍스트 스타일"로 관리하면서 $font_size_button 변수로 크기를 유연하게 조정합니다.
반응형 디자인을 지원하는 버튼 컴포넌트로 설계해 기기별로 변수 크기를 조정하여 사용해봅니다.
결론은, 피그마를 최대한 활용하면 제품 개발에서의 디자인과 개발 공수를 확연히 차이가 나게 작업할 수 있고, 결론적으로 남는 시간에는 창의적인 작업 또는 사용자 중심의 니즈 해결에 대해서 많은 시간을 투자할 수 있게 됩니다.
간단한 홈페이지와 랜딩페이지를 제작할때에도 접목시킨다면, 생산성 및 추후 유지보수 비용도 줄일 수 있으니, 꼭 배워서 사용해보시길 바랍니다.
다음 시간 : ”최신 기능을 활용한 프로토타이핑 적용”이나 디자인과 개발의 간극을 줄이는 “컬러네이밍, 시맨틱하게 이름 붙이기”에 대해서도 알려드릴게요!
*작성일 : 25.01.08
*에디터 : 김로린(@loreenkim)