피그마 Config 2023: 컨퍼런스 세션 정리
오랫만에 만나보는 디자인 중심 컨퍼런스
지난 '피그마 Config 2023: 신기능 출시' 글에 이어 2편으로 컨퍼런스에서 있었던 여러 세션들에 대해 간략하게 정리해보았습니다. 전세계적으로 대면으로 전환이 되면서, 오프라인 컨퍼런스 행사들이 하나둘 개최되고 있습니다. 피그마 컨퍼런스 또한 대면으로 진행이 되면서 굉장히 많은 세션들이 진행되었습니다. 고맙게도 모든 세션들이 오프라인 세션 이후에 영상으로 유튜브와 공식 채널을 통해 공개가 되어 차근차근 하나씩 살펴보고 있습니다. 무척 유익한 내용이 많으니 본 글에서 소개하는 내용 외에도, 하단의 컨퍼런스 플레이리스트를 살펴보고 흥미로운 주제의 영상은 한 번 보시는 것도 추천드립니다.
본 글은 시리즈 연재로 작성되고 있으며, 2편에 해당하는 글입니다. 이후 나머지 시리즈 글도 연재예정이니 본 주제와 내용에 관심있으신 분들께서는 좋아요와 구독 눌러주시면 이후에도 손쉽게 확인하실 수 있습니다.
시리즈 연재 리스트
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은 메인 키노트를 포함하여 총 54 개의 세션으로 진행이 되었습니다. 피그마 컨퍼런스이기는 하지만, 피그마 자체의 기능 시연 외에도 디자인 리더십, 디자인 시스템, 프로젝트 매니지먼트, 디자인 스킬업, 인공지능, 프로토타이핑, 콜라보레이션 등 다양한 주제로 진행되어 여러가지로 많은 지적인 자극을 받을 수 있는 컨퍼런스였습니다.
여러 주제이지만 크게 총 6개로 구분해보았습니다.
1. 피그마 주요 기능 소개 및 시연
2. 디자인 시스템
3. 프로토타이핑
4. 개발자 모드 DevMode
5. 디자인 분야의 인공지능 도입과 생성형AI
6. 비즈니스와 디자인 리더십
그리고 아래에는 각 주제별로 추천드리는 영상과 간략 요약 내용을 정리해보았습니다. 추후 시리즈 아티클을 통해서 해당 내용을 조금 더 디테일하게 적어드리도록 하겠습니다. 그 전까지 관심있으신 분들께서는 유튜브를 통해 해당 영상을 보시는 것도 추천드립니다.
주제 1. 피그마 주요 기능 소개 및 시연
피그마 주요 기능 소개 및 시연만으로도 충분히 보고 싶은 내용들로 가득합니다.
1. Config 2023 Product Launch Keynote - Dylan Field, Kris Rasmussen
- 피그마 메인 키노트 영상
- 2023 대표 기능 업데이트인 베리어블, 어드밴스드 프로토타이핑, 개발자모드 소개
주제2. 디자인 시스템
이번에 소개된 베리어블로 인해 프로토타이핑에는 대대적인 변화가 있었습니다.
1.Let your design system take Flight: building a design system simulator - Jana Choi (38분)
- Jana Choi는 Capital One에서 디자인 시스템을 도입한 사례를 설명해줌
- 디자인 시스템은 조직에 큰 영향을 미칠 수 있음, 그렇지만 실제로 적용하기는 쉽지 않음
- Staggered Code Delivery, Complex Adoption Journeys, Working models from
Legacy Systems 이슈로 인해 새로운 디자인 시스템 도입이 쉽지 않음
- 일반적으로 디자인 시스템을 Code, Design Assets, Documents로 보는 경향이 있음
- 그래서 디자인 시스템 도입을 위해 시뮬레이터 형식으로 피그마 디자인 시스템 구성 진행함
- 디자인 시스템 교육을 제공하여 디자이너들이 익숙해질 수 있도록 함
- 교육 프로그램을 콘텐츠 마케팅의 요소로도 활용하여 관심을 더욱 갖도록 함
- 총 3가지 범주로 교육 프로그램을 나눔: Tooling Proficiency, Design Quality,
System-Specific Concepts
- 작은 팀 구성으로 교육을 진행하고 온라인 교육 과정도 제공하였음
- 교육 과정을 재미있게 진행할 수 있도록 교육 과정 자체에도 브랜딩을 적용해서 흥미롭고도
재미있게 진행할 수 있도록 구성을 하였음
- 진도에 따라 10-15분 소요 시간이 걸리는 수준으로 단계별 미션을 제공하였음
- 교육 완료가 되었다고 종료가 아니라 이후에도 지속적으로 관리하며 관심을 가져야 함
- 최종적으로 디자인 시스템이 보유해야 할 '컴포넌트, UI 패턴, 콘텐츠 패턴', 외에도
'교육 과정, 지원, 도입 가이드' 등의 많은 업무를 진행해야 함을 강조함
주제 3. 프로토타이핑
이번에 소개된 베리어블로 인해 프로토타이핑에는 대대적인 변화가 있었습니다.
1. Advanced prototyping with less complexity with variables - Miggi, Ricky R, Garrett M (45분)
- 유튜브 피그마 강의로 얼굴이 친숙한 Miggi가 발표하는 세션
- '아이디어 → 디자인 → 프로토타이핑 제작과 공유'의 단계로 진행하는 과거의 방식을 공유
- 개발 이전에 리얼한 프로토타입을 제작하다보면 너무 많이 혼란스러워지는 상황이 발생
- 특정 단계 이후로는 프로토타이핑 자체는 손을 대기 어려울 정도로 복잡해짐
- 적은 프레임, 쉬운 이해, 쉬운 관리를 위해 베리어블을 사용할 수 있음
- 이로 인해 '아이디어 → 반복수정 (디자인 & 프로토타이핑) → 공유'로 프로세스가 달라짐
- 베리어블로 인해 달라진 프로토타이핑
- 핵심 주제 : 베리어블, 익스프레션, 컨디션, 베리어블 + 컴포넌트 세트
- 베리어블 : 넘버, 스트링, 불리언, 컬러 값을 가질 수 있음
- 라이브 세션(1) 베리어블 사례 시연
- 라이브 세션(2) 인터랙션 타입 → 익스프레션 → 오퍼레이션 사례 시연
- 라이브 세션(3) 컨디션 (if-else), 멀티플 액션 설정
- 라이브 세션(4) 인터랙티브 컴포넌트 베리언츠 스테이츠
- 라이브 세션(5) 모드
주제 4.개발자 모드 DevMode
개발자를 위한 모드가 새로 생겨남으로서 앞으로 개발자들과 디자이너 간의 협업이 더욱 쉬워지게 되었습니다.
1. Designer and developer workflows unlocked using Dev Mode - Jake A, Avantika G, Lauren A, Jenny L (51분)
- 디자인 프로세스는 일반적으로 Design → Refine → Test → Inspect → Build로
설명되지만, 실제로는 모든 단계가 복잡하게 얽혀서 진행됨
- 1명의 디자이너만 진행하는 것이 아니라 수없이 많은 담당자들과 역할들이 있음
- 피그마는 디자이너의 툴이지 개발자들의 툴이 아니라서 개발자들이 쓰기에 불편하였음
- 이에 개발자를 위한 '개발자 모드 DevMode'가 만들어지게 됨
- 개발자는 여러 페르소나가 있기 때문에 1개 형태로만 대응할 수 없어 여러 대응을 하였음
- 개발자는 여러 기술을 사용해서 각기 다른 방식으로 개발을 진행함
- 목표 1. 무엇이 중요한지 명확하게 알게하자
→ 쉬운 위치 이동, Ready for Dev, Compare Changes 기능 개발
- 목표 2. 디자인과 코드를 가깝게 만들자
→ 좌표, 간격, 비주얼 가이드, 에셋, 코드 등을 시각적으로 명확하게 표기
→ Component Playground 개발
- 목표 3. 개인화가 가능하도록 하자
→ 피그마 플러그인으로 디자이너들이 개인화하는 것처럼 개발자도 그럴 수 있도록 하자
→ Component Inspector 개발, Inspect 설정 부분에서 원하는 설정으로 변경 가능
→ https://www.figma.com/developers 피그마 디벨로퍼 사이트 참고
- 목표 4. 사용자들이 있는 곳에 피그마가 있을 수 있게 하자
→ 참고하는 여러 리소스를 공유할 수 있도록 Dev Resources 영역을 추가함
→ DevMode내에 다양한 플러그인을 통해 워크프로세스를 손쉽게 만들자
(Jira, VS-Code 연계)
주제 5. 디자인 분야의 인공지능 도입과 생성형AI
개발자를 위한 모드가 새로 생겨남으로서 앞으로 개발자들과 디자이너 간의 협업이 더욱 쉬워지게 되었습니다.
1. AI and the future of design: Designing with AI - Noah L, Jordan S, Andrew P, Vincent van der Meulen (42분)
- Noah Levin은 피그마의 주요 3단계 프로세스인 Brainstorm-Design-Build에서
인공지능의 역할과 주요 태스크에 대한 내용을 적절한 사례와 함께 잘 설명함
- How can AI enhance our process? : Understand-Communicate-Discover
관점에서 이해해야 한다고 설명함
- 이후 Diagram의 창업자인 Jordan Signer 대표가 다음 세션으로 발표하며,
피그마의 Multiplayer - Web-based - 그 다음은 'Intelligence'로 제기함
- 피그마 플러그인API, 디자인 시스템, 챗GPT의 모델을 통해 피그마에서 인공지능을 구현함
- 단순 Automation 단계를 넘어서 Intelligence를 구현하기 시작함
- Magician (플러그인) 세부 내용에 대한 소개
- Genius (플러그인) 세부 내용에 대한 소개
- 인공지능과 챗GPT를 활용하여 서포트 역할로 디자인 업무에 활용하는 방법을 보여줌
2. Designing with AI: building the flagship GPT-4 language product - Edwin B, Megan B (38분)
주제 6. 비즈니스와 디자인 리더십
디자인 중심의 비즈니스 전개에 대해 다루는 세션이 있어 무척 흥미로웠으며, 창업자가 디자이너로 있는 에어비엔비의 CEO Brian Chesky 강연이 무척 인사이트 깊은 내용이었습니다.
1.Leading through uncertainty: A design-led company - Brian Chesky
https://youtu.be/Dkfijg7s76o
- Rrian Chesky는 디자이너와 HR 출신의 사람들은 기업을 창업하지 않는 특성을 얘기함
- 그렇지만 자신은 로드아일랜드 디자인 대학 출신임
- 애플은 스티브 잡스와 조너선 아이브가 디자인 중심의 회사를 운영하고 있는 점을 강조함
- 에어비엔비는 IPO를 앞두고 있었는데, 2020 비대면 여파로 80%의 비즈니스를 잃게됨
- 그렇게 되니 기업에서 취할 것과 버릴 것을 명확하게 볼 수 밖에 없었음
- 따라서 비즈니스 중심의 조직을 기능 중심의 조직으로 재편하게 되었음
- A-B 테스트를 없애고 디자이너=프로덕트 매니저의 관점에서 가장 자신있는 것을
출시하는 것으로 방향을 잡았고 이는 애플이 하는 것과 같음
- 프로덕트 매니지먼트와 마케팅을 일원화 하였음
- 이후 매출이 잘 나오게 됨
- 디자이너는 단지 픽셀 작업만 잘 할 수 있는 것이 아니라는 점을 알게 되었음
- 더 적은 업무를 함에도 더 많은 매출이 나오는 것을 보게 되었음
- 디자이너들 마음 속 깊이 사랑하는 일을 하자 동시에 사람들이 좋아하는 것을 만들게 되었음
- Design Driven Strategy = Design as a Function
- 회계사, 변호사 등은 자신의 업무나 일에 대해 주변에 설명할 필요가 없으나, 디자이너는
스스로도 자신의 업무에 대해 정당화를 해야 하는 특성이 있음
- 애플에서 디자인하는 것처럼, 디자이너는 자신의 일을 할 때 핵심을 이해하고 정수를 만들기 위한 노력을 해야하며, 개발자는 디자이너와 함께 해야 한다고 강조함
- 항상 가설을 중심으로 디자인 및 업무를 진행해야 함
- "디자인은 기술에 도전하고 (Design challenges technology), 기술은 아트에 영감을 준다 (Technology inspires art)"
-
- Rrian Chesky는 디자이너와 HR 출신의 사람들은 기업을 창업하지 않는 특성을 얘기함
- 그렇지만 자신은 로드아일랜드 디자인 대학 출신임
- 애플은 스티브 잡스와 조너선 아이브가 디자인 중심의 회사를 운영하고 있는 점을 강조함
- 에어비엔비는 IPO를 앞두고 있었는데, 2020 비대면 여파로 80%의 비즈니스를 잃게됨
- 그렇게 되니 기업에서 취할 것과 버릴 것을 명확하게 볼 수 밖에 없었음
- 따라서 비즈니스 중심의 조직을 기능 중심의 조직으로 재편하게 되었음
- A-B 테스트를 없애고 디자이너=프로덕트 매니저의 관점에서 가장 자신있는 것을
출시하는 것으로 방향을 잡았고 이는 애플이 하는 것과 같음
- 프로덕트 매니지먼트와 마케팅을 일원화 하였음
- 이후 매출이 잘 나오게 됨
- 디자이너는 단지 픽셀 작업만 잘 할 수 있는 것이 아니라는 점을 알게 되었음
- 더 적은 업무를 함에도 더 많은 매출이 나오는 것을 보게 되었음
- 디자이너들 마음 속 깊이 사랑하는 일을 하자 동시에 사람들이 좋아하는 것을 만들게 되었음
- Design Driven Strategy = Design as a Function
- 회계사, 변호사 등은 자신의 업무나 일에 대해 주변에 설명할 필요가 없으나, 디자이너는
스스로도 자신의 업무에 대해 정당화를 해야 하는 특성이 있음
- 애플에서 디자인하는 것처럼, 디자이너는 자신의 일을 할 때 핵심을 이해하고 정수를 만들기
위한 노력을 해야하며, 개발자는 디자이너와 함께 해야 한다고 강조함
- 항상 가설을 중심으로 디자인 및 업무를 진행해야 함
- "디자인은 기술에 도전하고 (Design challenges technology),
기술은 아트에 영감을 준다 (Technology inspires art)"
-
정리
이렇게 해서 여러 세션들을 알아보았습니다. 이번 컨퍼런스를 통해 일반적으로 생각하기 어려운 신기능들을 대거 선보이며, 더욱 차별화된 피그마 프로그램이 되었습니다.
다만, 실무 디자이너 입장에서 실제로 경험한 부분을 공유드리자면, 피그마 프로그램이 SaaS 방식이라 컨퍼런스 발표 이후에 바로 업데이트가 강제적으로 반영이 되었기 때문에 진행 중인 프로젝트에서 워크 프로세스를 급작스럽게 대응해야 하는 이슈가 생겨서 곤란한 상황이 있었습니다. 또한 DevMode는 자동으로 모든 상황에 적용되는 것이 아니라, DevMode의 방식에 적합하도록 프로젝트 디자인 리소스를 적합하게 구성해야 하는 점이 있다는 점도 명심해야 합니다. 기존에는 개발자가 별도로 비용을 지불하지 않더라도 링크를 공유 받아 리소스를 다운 받거나 좌표 값 등을 체크했다고 하면, 내년의 정식 버전 출시 이후에는 FigJam처럼 DevMode도 별도의 요금이 발생하는 점도 주의해야 하겠습니다.
프로젝트를 진행하게 되면 공용으로 리소스를 사용하게 되는 경우가 많은데, 베리어블과 베리어블을 활용한 어드밴스드 프로토타이핑은 프로그래밍이나 코딩의 개념을 이해하지 못하면 적용하기 어려울 수 있습니다. 결과적으로 피그마 내에서의 '상급' 기술이 출현하게 되었다고 말할 수 있겠는데, 이러한 상급 기술을 모두가 다 이해서 쓸 수 있는 수준이 되려면, 그리고 어떠한 경우에 적용해야 하고 그렇지 말아야 하는지 등에 대해서도 논의가 필요할 것입니다.
위디엑스 이종원 씀
참고 웹사이트는 아래 내용을 참고해주시고, 다음에도 좋은 글로 찾아뵙겠습니다.
부가적인 정보가 필요하신 분은 위디엑스, 디자인엑스클래스의 링크를 참고해주세요.
글 외에도 영상, 온라인 교육 과정, 오프라인 교육 과정도 제공하고 있으며, 기업 교육도 제공하고 있으니 별도의 제안이나 기업 교육이 필요하신 분은 아래 연락처를 참고 해주세요.
문의 및 제안, 기업교육 및 프로젝트 : jwlee@wedesignx.com 02-3462-8881
참고 웹사이트
1. 피그마 공식 컨퍼런스 웹사이트 : https://config.figma.com
2. 피그마 유튜브 내 Config 2023 컨퍼런스 플레이리스트 바로가기
: https://youtube.com/playlist?list=PLXDU_eVOJTx61IdqXh3jrvopJN8HGkS5F
위디엑스 관련 사이트
- 웹사이트 : https://wedesignx.com
- 유튜브 : https://youtube.com/@wedesignx
- 인스타그램 : https://instagram.com/wedesignx
- 페이스북 : https://facebook.com/wedesignex
디자인엑스클래스 관련 사이트
- 웹사이트 : https://designxclass.com
- 유튜브 : https://youtube.com/@designxclass
- 인스타그램 : https://instagram.com/designxclass
- 페이스북 : https://facebook.com/designxclass
디자인엑스클래스 온라인 과정
- 피그마 펀더멘탈 : https://designxclass.com/courses/figma-fundamentals
- XR프로젝트 & UX UI 디자인 : https://designxclass.com/courses/xr-project-uxui-design
