brunch

You can make anything
by writing

C.S.Lewis

by 이종원 Jun 25. 2023

피그마 Config 2023: 신기능 출시

다양한 기능의 출시로 많은 부분이 달라진 피그마

피그마의 연례행사인 Config 2023이 성황리에 진행되었습니다. 2020년 이후, 다시 오프라인 행사도 개최하게 되어 미국 현지에서는 엄청난 인파가 몰린 것을 확인할 수 있었습니다. 미국 뿐만이 아니라 전세계적으로도 이제는 피그마가 디자인 영역을 넘어서 프로젝트 커뮤니케이션, 개발 영역까지 점차 확장되어가고 있습니다.

특히 이번 행사에서 소개한 신 기능들은, 컨퍼런스 이후에 즉시 피그마 프로그램에 반영이 되었으므로, 개인적으로 원하지 않더라도 강제적(?!)으로 대응해야 하는 만큼 현업 실무에서 사용하시는 분들께서는 본 업데이트를 확인하고 반영할 수 있어야 하겠습니다. 이에 위디엑스에서는 시리즈 게시물로 피그마 Config 2023 업데이트를 다룰 예정이며, 추후 커뮤니티 이벤트와 책자 발간 등을 통해서도 업데이트 내용을 전달드리도록 하겠습니다.

시리즈 연재 리스트

(본 글)
1편 - 피그마 Config 2023 신기능 소식: Variables & Advanced Prototyping, DevMode

2편 - 피그마 Config 2023: 컨퍼런스 세션 내용 정리

3편 - 피그마 Config 2023: Deep Dive - DevMode

4편 - 피그마 Config 2023: Deep Dive - Variables

5편 - 피그마 Config 2023: Deep Dive - Advanced Prototyping

6편 - 피그마 Config 2023: 디자인 시스템 컨퍼런스 세션

7편 - 피그마 Config 2023: 디자인 트렌드 컨퍼런스 세션

추가 소식
* 피그마 Config 2023: 미니 도서 출간! (예정)

* 위디엑스 / 디자인엑스클래스 커뮤니티 데이에서 오프라인 강연 (예정)

* 디자인엑스클래스 - 피그마 펀더멘탈 Config 2023 이후 인터페이스로 재촬영 (진행 중)

* 디자인엑스클래스 - Config 2023 신기능 학습 과정 출시 (예정)

이번 신기능 소식 편에서는 피그마 Config 2023 메인 키노트 세션에 소개된 주요 내용을 알려드리도록 하겠습니다. 메인 키노트에서는 디자인 토큰의 개념에 기반한 Variables(변수), 그리고 변수에 기반한 Advanced Prototyping, 그리고 DevMode(개발자 모드)가 소개되었습니다.

주요 업데이트에 대해 알려드리기 전에 우선 눈에 띄는 주요 이슈부터 살펴보도록 하겠습니다. 더불어 피그마는 SaaS 방식의 서비스형 프로그램이므로, 적용 요금제에 대해서도 주목해야 합니다.

이슈 1. 이제는 UI 기획자도 개발을 배워야 프로토타이핑을 만들 수 있음 (Pro 요금제부터 가능)
Variables 기능이 추가되면서 이제는 UI 기획자나 UI 디자이너, 혹은 기존에 프로토타이핑을 제작하던 실무자가 프로토타이핑을 위한 개발을 배워야 하는 상황이 되었습니다. 기존에 복잡한 인터랙션 선들이 화면을 뒤덮은 상황은 벗어날 수 있겠지만, 다수의 작업자가 프로토타이핑을 제작하게 되는 경우에는 프로토타이핑에 대한 별도의 문서나 가이드, 규정 등을 만들어야 할 것으로 보입니다.

제가 강의를 하거나, 실제 프로젝트를 진행할 때 매번 하는 이야기 중 하나가, 프로젝트 관계자에 따라서 적용 스킬의 난이도를 결정해야 한다고 하는데, 개발 형식의 변수를 설정한 후 이를 기반으로 프로토타이핑을 만들어야 한다면, 고급 스킬 수준까지 가능한 실무자라면 괜찮겠지만, 일반적인 경우에는 있는 것을 알면서도 사용하지 못하는 기능이 될 수도 있을 것으로 우려가 되는 부분입니다.

주* - Variables 기능은 무료 요금제인 Starter에서는 불가능하고 Professional 요금제부터 사용할 수 있는 것으로 표기되어 있습니다.

이슈 2. 개발자도 또 다른 주요 유저로 인식하여, 개발자 워크 프로세스도 포함하는 프로그램으로 진화 (2023년까지 무료 / 2024년부터 유료 요금제부터 사용 가능 (Org, Ent 별도요금)

실무진들이 이 중에서 가장 주목할 부분은 아무래도 워크 프로세스의 큰 변화를 주게 되는 DevMode로 평가합니다. 직접 화면을 설계하거나 디자인을 하는 기획자, 디자이너 외에도 주요 관계자가 참여하여 커뮤니케이션을 하는 부분까지 감안하여 이전에 출시한 FigJam 및 커멘트와 같은 기능들이 큰 역할을 하였습니다. DevMode 출시 이전까지, 개발자들은 피그마 프로그램의 Inspect 기능을 통해서 제공되는 이미지들만을 다운로드 할 뿐이었다면, DevMode가 출시된 후로는 개발자 친화적인 인터페이스와 플러그인, 연계 Extension의 활용 등 다양한 부분에서 효율적인 업무를 진행할 수 있을 것으로 예상됩니다.

주* - DevMode는 2023년말까지는 무료로 공개되어 누구나 사용할 수 있지만, 2024년부터는 유료 요금제 (Editor권한부터) 사용할 수 있으며, Organization, Enterprise 요금제를 사용하는 프로젝트에 연계된 개발자는 별도 요금을 지불해야 합니다. 즉, 개발자가 무료로 (Can View 권한으로 프로젝트를 이용하는 경우) 사용하는 것은 이제 어렵게 되었습니다.

피그마 Config 2023

신 기능 소개 1. Variables (변수)

디자인 진행시, 각각의 디자인의 세부 사항 및 요소들을 총칭하여 디자인 토큰 design token으로 부르고 있으며, 이렇게 설정해둔 디자인 토큰을 활용하여 세부적인 디자인 요소들을 일관성 있게 디자인을 하였습니다. 피그마에서는 플러그인을 사용해야지만 세부적인 사항들을 관리할 수 있었는데, 이번 Config 2023에서 디자인 토큰보다 더욱 다양한 방식으로 활용이 가능할 수 있도록 Variables (베리어블/변수)를 출시하였습니다.

Variables에는 컬러 값, 숫자 값, 스트링 값, 불리언 값과 같은 총 4가지의 변수를 가질 수 있으며, 이를 적용하고 활용함으로서 다양한 방식으로 사전에 설정해둔 형태로 자동 적용이 될 수 있습니다. 상속 Inheritance, 모드 Modes, 스코프 Scoping 등의 개념을 통해 사전에 설정해둔 언어로 바꾸거나 디자인 테마를 바꾸거나 레이아웃을 바꾸는 등의 작업을 손쉽게 할 수 있습니다.

신 기능 소개 2. Prototyping with Variables (변수를 활용한 프로토타이핑)

인라인 뷰어, 화면상 수정은 요금제 상관없이 사용 가능하나, Variables 변수는 프로페셔널 요금제부터 사용이 가능합니다.

앞 서 소개한 Variables는 변수를 사용함으로서 여러 가지 조건에 맞춘 대응을 할 수 있게 되므로, 이를 응용하여 프로토타이핑에도 적용함으로 Advanced Prototyping (상급 프로토타이핑)을 구현할 수 있게 됩니다. 일반적인 프로토타이핑은 하나의 레이어 혹은 오브젝트를 선택하며, 그에 연결된 인터랙션 설정과 대상에 따라 화면을 이동하되, 좁은 범위의 표현만이 가능했습니다. Variables 변수는 여러 가지 값을 가질 수 있으므로, 그에 따라 보다 다양한 방식의 프로토타이핑을 구현할 수 있게 되었습니다. 따라서 선만으로 복잡하게 얽힌 형태가 아니라 심플하게 몇 개의 화면만으로도 값이 변화되는 방식의 프로토타이핑을 만들 수 있게 되었습니다.

고도화된 프로토타이핑의 공포감을 불러 일으키는 모습을 Variables 변수를 사용하면 이제 안보게 될 수도 있습니다. (대신 Variables를 배워야 합니다;)

신 기능 소개 3. DevMode 개발자 모드 출시

피그마 Config 2023에서 소개한 신 기능 중에 가장 큰 변화는 개발자를 프로젝트 구성원으로서, 주요 기능을 수행하는 한 축으로의 역할을 본격적으로 부여한 점입니다. 본 기능 소개 이전에는 단순히 피그마 인터페이스에서 Inspect 탭을 누른 후 오브젝트 간 간격을 확인하거나 단순 기본 코드만을 확인하는 소극적인 개념이었다면, 이번 신기능을 통해서는 구체적인 워크프로세스 및 업무와 역할 배분까지 구체적으로 적용해야 하는 개념으로 바뀌게 되었습니다. 컨퍼런스 이후에 즉시 해당 업데이트로 프로그램이 업데이트가 되었으므로, 현재 프로젝트를 진행 중인 경우에는 적지 않은 혼란이 야기되었으며, 해당 기능이 추후 Organization, Enterprise 요금제에만 별도의 유료 요금을 지불해야 사용이 가능한 점은 2024년에 본격적인 도입 후에 이슈가 될 것으로 보입니다.

개발자 모드 진입 후, 디자인 프레임 선택시 이전 버전과 변경된 부분을 페이지 단위로 확인할 수 있습니다.

코드 스니핏, 간격 확인, 디자인 페이지 이동 등의 많은 개선 사항이 눈에 띄는 DevMode.

신 기능 소개 4. 전반적인 인터페이스 개선 등

자주 사용하는 오토 레이아웃에서 최소/최대 값 지정 및 자동 줄 나눔(Wrap) 기능이 생겼습니다.

주요 기능 출시 외에도,

오토 레이아웃에서 최소/최대 값 지정 및 자동 줄 나눔(Wrap) 기능 생성

최초의 진입 화면인 파일 브라우저의 레이아웃 변경 및 버튼 이동

애플이 피그마 커뮤니티에 합류함으로서, iOS 17, iPadOS 17, Spatial OS 등의 디자인 리소스가 공유되었습니다.

최초의 진입 화면인 파일 브라우저의 레이아웃 변경 및 버튼 이동 등이 업데이트되었습니다.

이제 폰트 프리뷰가 가능합니다.

피그마 Config 2023 메인 키노트 세션에서 발표한 주요 기능 출시 및 업데이트 사항들에 대해서 알아보았습니다. 이 후에도 시리즈로 관련 내용을 포스팅할 예정이니 많은 관심 부탁드리며, 피그마에 대해 학습하고자 하시거나 UX UI 디자인에 대해 배우고자 하시는 분들께서는 위디엑스에서 운영하는 디자인엑스클래스 온라인 러닝 플랫폼과 커뮤니티 이벤트에도 관심 부탁드립니다.

다음에도 유익한 내용으로 뵙겠습니다.

위디엑스 이종원 씀

참고 링크 :

1. 피그마 Config 2023 메인 키노트 유튜브 링크 : https://youtu.be/yI9QVwkk2Go