UXUI 취준생의 피그마 베리어블 정복기🫡 [사전직무교육 3일차_10/22] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

---

 

 

안녕하세요~!

오늘은 벌써 사전직무교육의 절반을 지나고 있어요

앞으로 교육이 이틀만 남았고

다음주에 바로 출근이라는 사실이 믿기지 않는...🥶

좀 떨리지만 마음을 다잡아 봅니다...!

 

이번 시간에는 

피그마의 Style과 Variable 실습 위주로 진행했어요!

 

---

 

 

베리어블과 스타일은 협업할 때 아주 유용하게 작업할 수 있는 속성입니다

아래는 수업할 때 들었던 부분을 포함해서

ChatGPT에게 도움을 받아 더 꼼꼼하게 정리해본 필기예요

 

✅ 스타일(Styles)이란 무엇인가

스타일은 특정 속성(property)의 조합을 하나의 정의된 세트로 저장해 재사용할 수 있게 해주는 기능이에요.

예를 들면 텍스트 스타일, 색상 스타일, 그리드 스타일 등이 있어요.

• 예시: 텍스트 스타일 “Heading 1”에는 폰트 패밀리 + 폰트 크기 + 폰트 두께 + 줄간격 등이 포함될 수 있어요.
• 색상 스타일의 경우 단일 색상(#FFFFFF) 뿐 아니라 그라디언트, 여러 개의 채우기(fills)를 조합한 것도 가능해요.
• 스타일은 “이 요소에 이 스타일을 적용하면 이 속성들이 한꺼번에 세팅된다”라는 방식으로 쓰여요.

🎨 스타일이 좋은 상황

• 같은 유형의 UI요소(예: 버튼, 카드, 텍스트 헤딩 등)가 여러 군데 있을 때 일관된 속성 적용이 필요할 때
• 디자인 파일 내에서 빠르게 전체 요소의 속성(색상, 글꼴, 효과 등)을 변경하고 싶을 때
• 비교적 단일 모드(라이트 모드만 존재하거나)에서 테마 변형이 많지 않을 때

 

🧮 베리어블(Variables)이란 무엇인가

베리어블은 디자인 토큰(token) 개념에 더 가까운 재사용 가능한 원시값(raw value)을 저장하는 기능이에요.

색상, 숫자(spacing, 크기), 문자열, 불리언(true/false) 등이 될 수 있어요.

• 하나의 변수에는 여러 “모드(mode)”를 둘 수 있어, 예를 들어 light mode / dark mode 같은 테마별 값이 저장될 수 있어요. 
• 변수는 스타일이나 다른 변수에 참조(alias)될 수 있어요. 즉 변수 → 변수, 변수 → 스타일 이런 구조로 설계할 수 있어요.
• 스타일과 달리 한 번에 여러 속성을 포함하기보다는, 변수 하나가 원시값 하나(혹은 모드별 여러 값)인 경우가 많아요.

🔍 베리어블이 좋은 상황

• 다크 모드/라이트 모드, 브랜드 리브랜딩 등 테마 변형이 많은 디자인 시스템일 때
• 디자인-코드 간 핸드오프(handoff)에서 토큰 기반으로 값이 전달되어야 할 때
• 스페이싱, 애니메이션 지속시간, 반복 횟수 등 숫자 값이 여러 곳에서 공유되어야 할 때
• 스타일의 속성 하나하나를 변수화해서 세밀하게 제어하고 싶을 때

 

 

 

ZEP에서 열심히 들었습니다 ^^

사실 수업이 베리어블 위주로 이어졌는데

스타일과 베리어블의 차이점을 잘 이해하지 못해

채팅으로 질문을 드렸어요!

 

그랬더니 친절하게 설명해주셨습니다

간단히 정리하자면,

베리어블 - 요소 수정 자주 필요, 대규모 디자인 시스템을 작업할 때

스타일 - 한꺼번에 속성을 적용, 비교적 단순한 디자인 시스템을 작업할 때

유용하다!

 

그리고

스타일은 주로 텍스트를 사용할 때

베리어블은 브랜드 컬러, 라이트/다크 모드, 패딩, 레디어스 값 등을 관리할 때

잘 사용합니다!

 

강사님께서는 

혼합해서 사용하는 경우도 많지만

회사마다 스타일이나 베리어블 중 하나만 선택해서

협업하는 경우도 많기 때문에

회사의 업무 문화나 시스템에 맞게 활용하라고 하셨어요!

 

 

---

 

 

본격적으로 베리어블 실습이 이루어졌는데요!

 

먼저 Collection 1 이라는 카테고리를 하나 만들어줍니다

 

 

그 다음에 설정한 브랜드 컬러와

위계를 위한 그레이스케일을 입력해줍니다!

 

 

그리고 다시 Collection 2 라는 카테고리를 생성해서

이번에는 컬러값을 직접 입력하지 않고 라이브러리에서

아까 Collection 1에서 만든 컬러를 참조해와요!

아까 Collection 1에서 생성한 브랜드 컬러가 있죠?

 

 

굳이 왜 또 같은 작업을 반복해서 할까? 의문이 들었는데요

이 부분에 대해서 다른 분들도 궁금하신 것 같더라고요!

 

강사님께서

1차는 원시값 보존, 2차로 생성한 것은 협업을 위해

별도로 생성한다고 정리해주셨습니다

 

 

1) 협업에 용이함

2) 1차로 생성한 값을 2차에서 참조 가능
(1차에서 값을 변경해도 2차에 자동 반영)

로 베리어블의 주요 장점을 정리할 수 있겠네요

 

 

컬렉션 1에서 생성한 컬러값을 참조하면

이렇게 컬렉션 2가 완성됩니다

 여기서 끝나는 것이 아니라

이 컬러들을 어떤 속성에 적용할지도 별도로 지정해주어야 하는데요!

 

생성한 컬러들을 모두 드래그하여 범위를 잡고

오른쪽의 Edit variable 아이콘 클릭 후 Scope를 선택해요

 

 

그리고 적용할 속성들만 선택해줍니다

컬러는 보통 프레임이나 도형, 텍스트, 외곽선에 적용되기에

위와 같이 속성을 지정해줬어요

 

 

 

그리고 타이포그래피(폰트 패밀리)와 래디어스, 폰트 사이즈 값까지

생성해주면 베리어블 지정 완료! 👊👊👊

이런 베리어블 디자인 값들을 '디자인 토큰'이라고 합니다!

 

 

텍스트에

베리어블 속성으로 지정해본 모습입니당 ㅎㅎ

 

 

++++

추가적으로 이렇게 디자인 토큰을 만들고

협업을 위해 문서화하는 작업까지 배웠어요

'Local Print'라는 플러그인을 활용하면

 

이렇게 자동으로 문서화 할 수 있어요

깔끔하죠?☺️

 

스타일은 컬러 하나만 지정하면

플러그인을 통해서 만들 수 있더라고요!

좋은 플러그인들이 많으니

이 부분 정리는 생략!

 

저는 지금까지 디자인 작업을 하면서

스타일은 많이 사용해 봤지만

베리어블은 한 번도 사용해 본 적이 없었어요

이번에 베리어블 사용 방법과 스타일과의 차이점,

어떤 상황에 활용하면 좋은지 배울 수 있어서

너무 좋은 기회였어요🥹

 

---

 

 

점심시간에 밥 먹고 먹은 디저트🥵🥵🥵

 

아침 9시부터 저녁 6시까지 교육 중간에

점심시간은 한 줄기 빛

ㅠ.ㅠ

 

 

 

아니 점심시간 끝나고 ZEP 다시 접속하려니

갑자기 안 돼서 당황....

(무사히 해결했어요....^^)

 

 

---

 

 

그 다음으로는 Property 등록과 활용을 실습했어요

프로퍼티는 Component 와 Variant 랑 연결되는 중요한 개념...!

하나의 컴포넌트 안에서

1. 버튼의 타입 (Default / Hover / Disabled 등)

2. 아이콘의 유무 (On / Off)

3. 아이콘 인스턴스의 변경 (다른 아이콘과 Swap)

3. 텍스트(Label)의 내용 변경

을 손쉽게 할 수 있도록 도와주는게 바로 Property 입니다

 

 

 

버튼 컴포넌트를 생성하고

오른쪽의 Properties 패널에서

등록하고 싶은 속성을 등록해줍니다

총 4가지 종류의 속성이 있어요

 

특히 유용하다고 생각했던 부분은

Boolean 으로 아이콘을 넣거나 뺄 수 있는 점!

 

 

컴포넌트에서 지정한 프로퍼티는

인스턴스에서 자유롭게 조정 가능합니다

 

위 버튼의

 

[ Variant ]

상태는 Default

타입은 Fill

사이즈는 Large

 

[ Instance Swap ]

Right/Left icon 은 기존에 컴포넌트로 만든 아이콘의 인스턴스라

Instance Swap 등록으로 변경할 수 있게 했어요

 

[ Boolean ]

아이콘 On/Off 가능

 

[ Text ]

안에 들어가는 텍스트는 Label 이라는 속성으로 지정해서

들어가는 내용을 자유롭게 수정할 수 있어요

 

 

왼쪽 회색 버튼은 같은 컴포넌트이고

프로퍼티 속성을 살짝 변경해줬어요

상태는 disable로 비활성화된 버튼처럼 보이죠?

아이콘은 모두 끄고, 텍스트도 '결제하기'라고 변경했어요

컴포넌트에 오토레이아웃을 적용했기 때문에

** 외곽 프레임은 Hug contents 상태라 따라서 사이즈가 자동으로 조절 **

 

결제하기라는 버튼을 따로 다시 만들지 않고

프로퍼티만 간단하게 조정해주면 수정이 아주 쉬워지는거죠!

 

 

 

---

 

 

실습은 거의 끝나고

팀플로 기존에 선정한 서비스의

베리어블과 프로퍼티를 등록하고

활용하는 시간을 가졌어요

 

열심히 연습해본 흔적

 

저희 팀이 선정한 아이캠펑 서비스는

서비스의 유저플로우와 뎁스가 깊지 않아서

비교적 빠른 시간에 끝냈습니다!

 

강사님 설명을 놓쳐서 모르는 부분이 있으면

서로 알려주면서 작업했어요

저도 하나하나 알려드리면서 복습도 하고 좋았어요☺️

 

귀여운 우리팀....

 

++++

 

그리고 남는 시간에

저번에 서비스 분석할 때

휴리스틱 사용성 평가 부분이 부족했던 것 같아서

다같이 평가했어요 ㅎㅎ

 

휴리스틱 사용성 평가

 

 

이전 글이 보고싶다면?

👇👇👇👇👇

 

 

2025.10.22 - [UXUI 인턴 9기] - 컴포넌트 지옥에 온 걸 환영해...😈 [사전직무교육 2일차_10/21] | 스나이퍼팩토리 UXUI 인턴형 프로그램 9기

 

 

 

---

 

 

본 후기는 스나이퍼팩토리 UXUI 인턴형 프로그램 9기 과정(B-log) 리뷰로 작성 되었습니다.

 

 

#UXUI인턴형프로그램9기 #스나이퍼팩토리 #인사이드아웃 #UXUI #UX/UI디자이너 #콘텐츠디자이너 #디자이너교육 #디자이너인턴