프로토타입 제작, 현직 디자이너는 '피그마 변수'를 이용해 시간을 단축합니다.

디자인을 가장 수월하게 설명할 수 있는 방법은 프로토타입을 제작하는 것입니다. 그러나 많은 디자이너들이 사용하는 피그마에서는 프로토타입을 제작하기 어려웠습니다. 그래서 많은 디자이너들이 디자인은 피그마를, 프로토타입 제작은 프레이머 등 다른 서비스를 이용하며 디자인 과정에서 여러 툴을 익혀야 하는 불편이 있었습니다.

이에 올여름 피그마는 대규모 업데이트를 진행했습니다. 이번 업데이트로 인해 프로토타입 기능의 활용 용도가 대폭 높아져 피그마 하나로 디자인의 모든 과정을 아우를 수 있게 되었습니다. 그동안 피그마는 그래픽 기반의 툴 베이스로 디자인에 특화된 기능이 대다수고, 상대적으로 프로토타입 기능에는 힘을 싣지 않았습니다.

프레이머나 프로토파이처럼 실제 동작하는 프로토타입이 아닌 그저 여러 프레임을 연결시켜 마치 실제 작동하는 것처럼 눈속임으로 인터랙션을 보여주는 방식이었습니다.

프레임이 두 세장이라면 문제없지만 조금만 인터랙션이 복잡해져도 필요한 프레임의 수는 기하급수적으로 늘어나게 되어 불편했었죠.
 

 <업데이트 전 / 이미지 출처 : Figma Config 2023>

 <업데이트 후 / 이미지 출처 : Figma Config 2023>

따라서 피그마는 이 문제점을 해결하고 보다 간편한 인터랙션을 위해 이번 업데이트에서 개발의 조건문 로직을 적용했습니다. 이제 인터랙션을 위해 무수히 많은 프레임을 가져올 필요가 없어졌습니다. 단순 눈속임 수준의 인터랙션이 아닌 실제 동작하는 인터랙션을 구현할 수 있게 되었으니까요! 인터랙션을 구현하기 위해 먼저 Variable(변수) 기능에 대해 알아보겠습니다.

Variable(변수)

프로토타입을 사용하기 위해서는 변수가 필요합니다. 이번에는 4가지 종류의 변수 타입에 대해 알아보겠습니다.

 <이미지 출처 : Figma Config 2023>

Variable 즉, 변수는 프로토타입에서 왜 필요할까요? 피그마에서 변수는 색상, 텍스트, 치수와 같은 속성을 나타내는 저장된 값입니다. 기존 Style 기능과 유사하게 디자인의 일관성을 강화하는 데 사용할 수 있지만 프로토타입에서 막강한 효율을 얻을 수 있습니다.

변수를 쓰지 않았던 기존의 프로토타입에서는 숫자 카운트를 올리거나 토글을 껐다 켜는 등 변화하는 화면 상태를 나타내기 위해 수많은 프레임과 연결을 복제해야 했습니다. 

하지만 이제 이러한 단순 반복 작업은 필요 없어졌습니다. 프로토 타이핑 액션으로 변수값을 설정하고 수정하여 단일 프레임과 두어 번의 상호작용으로 동적 프로토타입을 만들 수 있습니다. 이제 각각의 변수 타입에 대해 살펴보겠습니다.

- Color(색상)

모든 화면 변화에 공통적으로 쓸 수 있는 변수입니다. 예를 들어, 버튼을 클릭하는 동작에서 클릭 전은 버튼 배경 컬러 값이 #ffffff(white)에서, 클릭 후 #000000(black)으로 바뀔 수 있겠죠. 이러한 상황에서 널리 쓰이는 변수 타입입니다.

- Number(숫자)

숫자 변수는 변화하는 숫자를 표현하는 데 쓸 수 있는 변수입니다. 예를 들어, 장바구니에 아이템을 담으면 남은 아이템의 숫자가 낮아져야겠죠. 이러한 동작을 표현할 수 있는 변수 타입입니다.

- String(문자열)

Color 변수와 마찬가지로 모든 화면 변화에 공통적으로 쓸 수 있는 변수입니다. 예를 들어, 수량의 한계로 인해 장바구니 담기 버튼이 비활성화될 때 ‘Add to cart’라는 문자열을 ‘Unavailable’로 변경할 수 있습니다.

- Boolean(부울)

true, false를 표현할 수 있는 변수입니다. 대표적인 부울 버튼이 toggle입니다. 간단하게 두 가지 옵션을 on/off 할 수 있는 변수라고 생각하면 됩니다. 이제 본격적으로 이런 변수들을 사용해서 프로토타입을 만들어보겠습니다. 기본적으로 프로토타입 작동은 아래의 규칙을 기억하면 됩니다.

[예제 1] Chip에 따라 변하는 검색창 만들기

칩과 검색창은 화면에서 자주 사용하는 UX인데요, 칩 내용이 검색창에 적용되는 프로토타입 예시를 보여드리겠습니다. 

앞에서 말씀드린 대로 이전에는 해당 UX를 보여주기 위해 수많은 프레임을 이어붙여야 했다면 이제 단 한 프레임만으로 해당 동작을 구현 가능합니다. 위와 같은 결과물을 만들기 위해 필요한 프레임은 단 한 프레임입니다.

이 프로토타입 결과물을 만들기 위한 과정은 다음과 같습니다.

1. Search 텍스트 영역을 클릭, 우측 Text 설정 패널에서 Variable 아이콘(육각형 모양)을 클릭, 변수값을 생성한다.

2. 칩 컴포넌트 영역을 클릭, 우측 프로토타입 패널에서 Interaction + 버튼 클릭해 Set variable 항목을 선택한다.

3. 1번에서 생성한 변수값을 선택, 변경할 텍스트를 입력한다.

이렇게 변수 연결 표시가 떴다면 이제 Shift + Space를 눌러 프로토타입이 제대로 동작하는지 확인하면 됩니다.

[예제 2] 

장바구니 담기 버튼을 통해 장바구니 카운트 적용하기 

카운트를 적용하는 UX도 보여드리겠습니다. 좋아요 수, 장바구니 아이템 수 등 UX에서 정말 많이 사용되는 프로토타입인데요. 

여기에서도 프레임을 이어붙이는 단순 반복 작업 없이 단 한 프레임만으로 해당 동작을 구현할 수 있습니다. 

이 프로토타입 결과물을 만들기 위한 과정은 다음과 같습니다.

1. 우측 Design 패널의 Local variables에서 Variable filter 아이콘을 클릭, Number 변수값을 생성한다.

 2. 변수명은 cart item count, value는 0으로 설정한다. (아이템을 담기 전에는 카트의 수가 0이겠죠?)

3. UI 화면 내 숫자 ‘4’를 선택한 후 우측 Text 설정 패널에서 Variable 아이콘(육각형 모양)을 클릭, 2번에서 생성한 cart item count 변수를 연결한다.

이렇게 연결되었다면 성공입니다.

4. 버튼 컴포넌트에서 hovered 처리된 버튼을 클릭, 우측 프로토타입 패널에서 Interaction + 버튼 클릭해 Set variable 항목을 선택한다.

5. cart item count 변수를 선택한 후, Addition 항목을 선택한다. (아이템을 담을수록 숫자가 커져야겠죠?) 추가된 + 뒤에 숫자 단위를 입력한다. (ex: + 1)

마찬가지로 Shift + Space를 눌러 프로토타입이 제대로 동작하나 확인하면 됩니다.

[예제 3] day/night 토글 버튼 만들기

토글 버튼으로 모드를 전환하는 UX도 보여드리겠습니다. 테마 변경, 기능 on/off 등 자주 사용되는 프로토타입 예시입니다. 마찬가지로 여기에서도 프레임을 이어붙일 필요 없이 단 한 프레임만으로 해당 동작을 구현할 수 있습니다. 이 프로토타입 결과물을 만들기 위한 과정은 다음과 같습니다.

 1. 우측 Design 패널의 Local variables에서 Variable filter 아이콘을 클릭, Boolean 변수값을 생성한다.

 2. 변수명은 time mode, value는 true로 설정한다.

 3. 토글 버튼 컴포넌트(day)를 선택한 후, 우측 프로토타입 패널에서 Variable 아이콘(육각형 모양)을 클릭, 2번에서 생성한 time mode 변수를 연결한다. 이후 우측 상단 + 버튼을 클릭해 Change to 항목을 선택, night와 연결해준다.

4. 마찬가지로 토글 버튼 컴포넌트(night)를 선택한 후, 우측 프로토타입 패널에서 time mode 변수를 연결한다. 이후 우측 상단 + 버튼을 클릭해 Change to 항목을 선택, day와 연결해준다. 마찬가지로 Shift + Space를 눌러 프로토타입이 제대로 동작하나 확인하면 됩니다.

피그마 변수를 사용한 프로토타입 제작 방법 어떠셨나요?

프로토타입을 위해 새로 추가된 Variable(변수)를 잘 활용한다면 디자인 시안에 대한 이해도가 높아져 디자인을 설명하는 데 드는 시간도 줄일 수 있을뿐더러 다양한 디자인을 보다 쉽게 구현할 수 있습니다. 어려워 보이더라도 몇 가지 규칙만 기억하시면 무수히 많은 디자인에서 쉽게 적용하실 수 있을 터이니 따라해 보시고 업무 효율이 올라가는 성과를 누리시길 권해드립니다. 

2023년에 업데이트 된 Figma의 새로운 기능들이 궁금하다면?

▶️ Figma config 2023 리뷰 2 - Dev Mode를 통한 개발 기능 강화 보러가기

Figma Style과 Section을 활용한 시간 단축 노하우가 궁금하다면?

▶️ 피그마 사용법 - Stlye과 Section 기능을 활용한 시간 단축 노하우 보러가기

성공적인 커리어를 위한 디자인 프로젝트를 찾으시나요?

대한민국 No.1 IT 프리랜서 매칭 플랫폼 이랜서에 회원가입하고

최신 디자인 프로젝트를 수주해 보세요!

대한민국 No.1 IT 프리랜서 매칭 플랫폼 이랜서는?

이랜서는 IT 프리랜서들이 찾는 딱 맞는 프로젝트 매칭을 위해 23년의 노하우와 데이터를 활용하는 대한민국 No.1 IT 프리랜서 매칭 플랫폼입니다. IT 프리랜서로서 성공적인 커리어를 꿈꾸며 도전하는 프리랜서가 원하는 프로젝트를 매칭 받을 수 있도록 프리랜서를 지원하며 기업/프로젝트의 성향과 프리랜서의 매칭 데이터를 활용해 약 56,000건 이상의 프로젝트에 IT 프리랜서를 하고 있습니다.

대기업부터 중견/중소, 스타트업까지 다양한 프로젝트 구성

다양한 프로젝트와 함께 매력적인 복지를 누리며 업무 경험을 높일 스타트업이나 안정적인 포지션과 함께 규모가 큰 프로젝트를 다뤄볼 매력적인 기회의 대기업 프로젝트까지 이랜서에는 다양한 프로젝트가 등록되어 있습니다. 이랜서에 회원가입하고 이력서를 업데이트해보세요. IT 프리랜서가 원하는 방향과 성향까지 고려한 맞춤형 IT 프로젝트 매칭 서비스로 가장 적합한 곳에 프로젝트를 매칭해립니다.

‘오토폴리오’로 경력 기술서 작성도 1초만에

IT 프로젝트를 수주할 때, 어려운 부분! 바로 ‘경력 기술서’ 작성이죠? 원하는 기업에 들어가기 위해 이력과 경력이 잘 정리된 경력 기술서가 필요하지만, 프로젝트 진행하느라 작성할 시간도 부족하고 언제 어떤 이력부터 정리해야 될지 막막하기만 한데요. 이랜서 회원이라면 그런 걱정은 없습니다. 왜냐면 ‘오토폴리오’가 있기 때문이죠.

초기 1회만 업데이트하면 15종의 이력서 파일을 자동으로 분류/변환해서 다운로드 및 보내기까지 가능하고, 업무 순서대로 자동으로 정리되어 별도의 작성 없이도 경력 기술서가 작성됩니다. 이제 경력 기술서 작성은 이랜서 ‘오토폴리오’에게 맡기시고 편하게 달리기하러 다녀오세요!

이랜서가 IT 프리랜서에게 달리기를 권하는 이유!

▶️ 달리기, 프리랜서로 롱런하고 싶다면 지금 당장 시작하세요 보러가기

맞춤형 옷같이 딱 맞는 매칭 서비스!

실력있는 프리랜서라면 이랜서를 강력하게 추천합니다!

“원하는 금액부터 조건까지 딱 맞는 프로젝트를 빠른 시간 내에!

필요한 게 있을 때마다 언제든지 확인해 주는 맞춤형 서비스와

매칭 한 번으로 끝나지 않는 이랜서만의 프리랜서 케어 서비스.”

대한민국 No.1 IT 프리랜서 매칭 플랫폼 이랜서, 

실력 있는 프리랜서라면 이랜서를 강력하게 추천합니다!

ㅡ 박일환 개발 프리랜서 ㅡ

 프로젝트 수주, 이제 이랜서에게 맡기시고, 

달리기하러 가세요!