by
Jun 23. 2023
Config 2023: 주요 업데이트 리뷰
대박이다, 피그마 컨퍼런스 2023.
Config 2023
https://youtu.be/yI9QVwkk2Go
Config 2023
인트로
드디어 어제 피그마 컨퍼런스, Config 2023의 첫날이 시작되었다. 라이브 영상을 보는 내내 어떻게 이런 프로덕트를 만들었을까, 그리고 어떻게 이런 방향으로 프로덕트를 고도화 해 나갈까 여러 생각이 교차되는 와중에도 피그마 데모하는 영상을 보니 가슴이 두근두근 설렜다.
결국 얘 덕분에 잠도 다 깼겠다, 이 느낌이 가시기 전에 후다닥 글을 작성하기 위해 자리에 앉았다. 이번 글은 Config 2023 첫날의 후기와 피그마에 업데이트된 기능들에 대한 짤막한 소감을 작성할 예정이다.
일단 내가 느낀 피그마 업데이트의 방향성은 1) 디자인 기능 고도화(특히 디자인 토큰과 프로토타입), 2) 개발 지향 기능 개선이었다. 첫날 오프닝 세션의 경우 2부로 구성되어, 1부에서는 피그마의 CEO인 딜런 필드가 디자인 기능에 대한 개선 내용을 말하고, 2부에서는 CTO인 크리스 라스뮤센이 개발 모드에 대한 내용을 진진행했다.
이번 글에서는 내가 관심 가는 기능들에 대한 설명과 생각을 작성할 예정이기 때문에 업데이트되는 모든 기능별 내용을 보고 싶다면 브런치의 김태길님 글을 보는 것을 추천한다.
디자이너 김태길님 ☞ Figma Config 2023 - 무엇이 달라지나
Session 1.
CEO 딜런 필드의 디자인 기능 데모
오프닝 세션의 1부는 딜런 필드가 진행한다. 피그마의 업적 그리고 Adobe 인수 등 히스토리를 짤막하게 소개한 후 세션이 본격적으로 시작된다.
딜런 필드가 머리를 흔드는 것 이후에 본격적인 데모가 시작된다. © Figma#1. Variables ( = Design Tokens )
보통 디자인 시스템을 구축할 때는 보편적으로 아토믹 디자인 방법론을 활용하는데, 여기서 디자인 토큰은 이 방법론에서 말하는 아토믹(원자)의 역할을 수행했다. 결국 디자인 토큰이 가지는 키 포인트는 반복되는 디자인 속성을 정의하여 디자이너와 개발자가 효율적으로 공유하는 것이며, 디자인이 꾸준히 변동되는 서비스일수록 디자인 토큰의 효과가 커진다. (아래 첨부한 문서를 읽어보면 두 개념에 대해 이해할 수 있을 것이다.)
*아토믹 디자인 방법론: https://yozm.wishket.com/magazine/detail/1531/
**디자인 토큰: https://yozm.wishket.com/magazine/detail/1619/
"우리는 (님들이 기대했던) Design Token 기능을 런칭하지 않을 거예요. 대신에 Variables 기능을 런칭합니다! (같은 거임)" © Figma기존에는 디자인 토큰을 활용하기 위해서 피그마의 Plugin을 사용해야 했다. 그것이 피그마에 기능으로 추가된 것. 기획자인 나는 사용할 일이 거의 없었기에 자세히 알지 못했던 기능들이었는데, 결국 디자니어↔프론트 엔지니어가 디자인 시스템을 만들 때 되게 유용하게 사용하고 있더라.
이 Variables은 결국 데이터 단위의 컴포넌트와 같은 역할을 수행하는 것 같은데, 이 때문에 피그마는 Variables에 입력된 값들을 나중에 인터랙션에도 활용하는 것을 고려하여 기능을 개발했다. 이 원리에 익숙해진다면 마스터 컴포넌트를 활용하는 것만큼 생산성을 분명 더욱 향상시킬 수 있을 듯.
[Config 2023 - 00:11:30] Variable © FigmaVariables에서 지정한 항목(Variable)을 우측 레이어 패널에서 선택하여 바꿔치기하는 것을 스코핑(Scoping)이라고 한다. 가령 아래 사진처럼 '도형 Rounding을 20, 10 타입으로 스코핑하는 것을 목적'으로 '숫자' 타입의 Variable을 2개 생성하고, 오브젝트의 Round 값에 아까 만든 숫자 타입의 Variable을 스코핑할 수 있다.
Number 타입의 Variable을 생성하고, 우측 레이어 패널의 Number 타입 데이터를 스코핑 해보자 1 ⓒ 327royNumber 타입의 Variable을 생성하고, 우측 레이어 패널의 Number 타입 데이터를 스코핑 해보자 2 ⓒ 327roy
#2. Auto layout 내 Width/Height의 최대/최솟값 지정
기존에 반응형 웹을 기획할 때 디자이너와 협의 후, "브레이크 포인트는 어느 정도로 해주세요.. 화면의 Width 최솟값은 이 정도로 해주세요.." 등 구두로 말하고 기획서에 정리하는 경우가 잦았다. 이제는 Auto layout을 걸고 해당 값을 후 우측 패널에서 바로 설정할 수 있게 되었다. 즉, 기획서에 작성할 것이 하나 줄었고, 피그마에서는 반응형 웹을 더욱 구현하기 쉬워졌다. 아래는 간단하게 찍어본 영상.
※ Auto layout에 Wrap 기능도 추가되었다. Auto layout 내의 고정된 Width 값을 가진 오브젝트들이 상위 프레임의 Width가 줄어들 때 하단으로 내려가는 형태. 예를 들어 반응형 웹을 마우스로 사이즈를 줄일 때 횡 스크롤이 생기지 않고 UI들이 하단으로 이동하는 것을 말할 수 있다.
[Config 2023 - 00:18:30] Auto layout © FigmaAuto layout 내 Width값에 Max/Min를 지정해 보자 ⓒ 327roy
#3. 프로토타입 기능 개선
피그마 프로토타입에서 인터랙션을 걸어본 적이 있다면 공감할 사진이다. 사진 보면 알겠지만 피그마 측도 자기들 프로토타입 기능이 사용하기 힘든 것을 알고 있다. 개선은 해야 했지만 우선순위를 뒤로 밀어놨었던 것일 텐데, 드디어 피그마가 프로토타입 기능에 대해 개선을 시작한 것을 보면 1) 앞서 언급한 Variables과 함께 기능을 오픈하여 시너지를 극대화 하기 위해 시기를 조정한 것과 2) 프로토타입 툴 시장 진입에 드라이브를 거는 것으로 생각된다. 아직 프로토파이 정도는 아니지만 피그마도 많이 편해졌다.
[Config 2023 - 00:22:00] Prototype AS-IS © Figma프로토타입 업데이트 때 가장 인상 깊었던 것은 Variables와 조건부(if, else)를 활용해 간단한 로직을 걸 수 있게 된 것이다. 예를 들어, 좋아요 버튼을 클릭하면 좋아요 수가 오르는 것과 같은 조건부(Conditional) 프로토타입을 피그마에서 만들 수 있게 되었다. 액슈어와 프로토파이의 장점을 쏙쏙 빼온 느낌? 컨퍼런스 영상에서는 24분부터 확인할 수 있다.
그리고 사진처럼 프로토타입을 실행할 때, 프로토타입을 창 모드로 띄울 수 있는 Preview 기능이 생겼다. 더 이상 프로토타입 실행 시 디자인 탭과 프로토타입 탭을 왔다 갔다 하지 않아도 된다.
[Config 2023 - 00:24:00] Prototype preview © FigmaSession 2.
CTO 크리스 라스뮤센의 개발자 모드 데모
오프닝 세션의 2부는 피그마의 CTO, 크리스 라스뮤센이 진행한다. 2부의 내용은 개발자 모드(Dev mode). 기존에는 일반 디자인 화면을 개발자도 확인해야 하니 불필요한 정보들까지 확인해야 하는 경우가 많았는데, 깔끔하게 개발자가 확인을 하면 되는 정보들만 추려 보여주는 모드를 피그마가 새로 업데이트했다.
좌측 패널에서 오브젝트들을 컴포넌트 단위로 확인할 수도 있고, 우측 패널에서 Jira, Storybook, Notion의 링크를 임베드할 수 있는 등의 장점들이 존재한다. 이 외에도 몇몇 장점이 더 있는데 내 글에서는 길게 언급하지 않을 예정. 이것은 영상을 보거나 김태길님 업데이트 노트를 보는 것을 추천한다.
#1. 개발자 모드 전용 레이어 패널
사진에서 보이는 것처럼 개발자 모드는 개발자자를 위한 View 형태다. 세세한 디자인 요소까지는 확인하지 않아도 되는 형태고, 개발자들이 개발 몰입을 위한 View 최적화가 이루어져 있다. 이것은 영상으로 한번 보는 것을 추천한다.
[Config 2023 - 00:32:00] Dev mode © FigmaDev mode! ⓒ 327roy
#2. 변경 내역 추적
개발자 모드의 Compared changes라는 기능을 통해 디자이너가 어떤 내용을 수정했는지 AS-IS, TO-BE 쉽게 비교할 수 있게 되었다.
[Config 2023 - 00:33:30] Compared changes © FigmaCompared changes ⓒ 327roy
#3. 그리고
이 외에 px로 보는 것뿐만 아니라 rem 형태로 볼 수 있도록 빠르게 전환하는 등 여러 기능들이 많이 추가되었다. 개발자 모드도 상당히 메리트가 있다고 느껴진다.
개인적으로 드는 생각은 개발자 모드의 Jira 등 문서 임베드 기능을 활용해서기획서를 더 '잘' 피그마에 붙이는 프로세스를 만들 수 있지 않을까 하는 생각이다. 현재는 Section 기능을 활용해서 기획서에 대한 내용을 어떻게 보기 쉽게 정리할지 고민을 하고 있는 수준이었는데, 이번 업데이트까지 함께 고려를 해보면 좋을 듯하다. 아마 조만간 회사에서도 다른 직무들도 피그마를 사용하는 형태로 대대적인 프로세스 개선이 있을 터여서 팀을 위한 교육 자료를 만들며 함께 고민해 볼 예정. (좋은 아이디어가 있으신 분들은 편히 연락 주세요.)
개발자 모드의 단점(?)은 현재 베타 단계여서 무료로 열려있을 뿐 오픈하면 따로 유료 판매될 예정이다. 영상에 보면 막판에 가격에 대해서 나오는데, 이때 박수 소리가 작아지는 것을 볼 수 있다.
그래서?
작년부터 노션만큼 사랑하는 툴 피그마가 IT 제품과 관련된 모든 이들이 협업할 수 있는 방향으로 더욱 진화하고 있다. 이번에 업데이트된 Variables, Prototype 등 디자인 기능 고도화 그리고 개발자 모드를 활용하면 기획자도 힘을 발휘할 수 있는 영역이 더욱 많아질 수 있다고 생각한다.
따라서 이제는 기획자의 보편적인 업무 영역(스토리보드 작성, 정책 작성 등)을 디자이너와 개발자가 피그마로 협업을 하는 프로세스에 어떻게 잘 엮을 수 있을지 재밌는 고민을 할 차례일 듯하다.
딜런 필드가 마지막에 한 말이 되게 인상깊다. 무엇인가를 만드는데 꼭 개발자가 되어야 하거나, 디자이너가 되어야 할 필요는 없다. 우리가 해야할 것은 재밌는 생각을 많이 하는 것과 방법을 찾아내는 것이 되지 않을까.
미래는 더 많은 생각하는 사람과 만드는 사람이 필요하다.
The future needs more THINKERS and BUILDERS.
© Figma© 327roy
