Figma Config 2023 - 무엇이 달라지나
피그마 컨퍼런스 2023에서 소개된 향후 업데이트 소개
발행 직후 꽤 많은 곳에서 글이 계속 공유되는 걸 보며 매우 신기했습니다.
컨퍼런스 키노트 세션의 요약글이 요즘IT의 인기 콘텐츠에도 오르면서, 돌고 돌아서 회사 동료들이 제 글을 봤다고 하더라고요. 앞으로도 피그마 관련된 이야기를 더 많이 전해드리겠습니다 :) 감사합니다.
한국 시간으로 6월 22일 오전 1시, 피그마 컨퍼런스 2023(Config 2023)이 드디어 막을 올렸습니다.
사실상 전세계 UXUI디자이너들의 축제이자, 디자인 쪽에서 가장 성대하고 큰 파티라고 할 수 있습니다.
올해 피그마 컨퍼런스는 한국 시간 기준 22일~23일 양일에 걸쳐 진행되며 자세한 내용은 공식 홈페이지를 참고해주세요.
원래는 공식 홈페이지에서 라이브를 송출할 예정이었으나,
기술적 문제로 유튜브에서 현재 라이브로 진행하고 있습니다.
+ 추가 : 현재 문제가 해결된 상태라 공식 홈페이지에서도 세션 룸을 찾아가 원하는 세션을 들으실 수 있습니다.
22일 첫날인 오늘, 오프닝 세션에서 앞으로의 업데이트 방향에 대해 소개했는데, 전체적인 업데이트의 방향은 피그마 안에서 모든 UI와 UX작업을 할 수 있도록, 또한 개발 지향적인 기능들을 통해 협업 시너지를 더 극대화하도록 하려는 걸로 보입니다. 이를 종합해보면 이전까지의 피그마와는 완전히 다른 개념의 새로운 디자인-개발 협업툴의 패러다임을 제시하는 것으로 보입니다.
그동안 디자이너들이 피그마에 그토록 원했던 핵심 기능 중 어떤 것이 업데이트 예정인지, 또 어떤 개발 지향적인 기능들을 소개했는지 라이브를 보며 간단하게 메모해봤습니다.
디자이너들이
바라고 바랐던 기능들
1. Variables(= 디자인 토큰)
시작부터 가장 강력한 업데이트를 예고했습니다. 그동안 피그마를 통해 디자인 시스템을 구축해서 사용하던 회사들은, 모두 외부 서드파티 서비스를 이용해 피그마에 구축한 디자인 시스템의 토큰값들을 끌어와서 사용하고 있었습니다. 하지만 이제 피그마 자체에서 공식적으로 지원하는 기능이 됩니다.
대신 디자인 토큰이라는 표현은 쓰지 않고, Variables라는 기능으로 추가될 예정이라고 합니다(편의 상 토큰이라고 부르겠습니다). CEO인 딜런 필드가 직접 피그마로 기능을 실행하며 소개했는데요, 간격, 곡률, 텍스트스타일, 색상, boolean 값 등 우리가 토큰으로 사용하던 모든 값들을 피그마 안에서 자체 기능만으로 다룰 수 있게 됩니다.
어우야...그동안 고생했다...잘 가라.....각 토큰들은 토큰의 데이터 형식(문자열, 숫자 등)에 따라 스코프를 정할 수 있습니다. 여기서 스코프는, 숫자라는 데이터 형식을 어떤 값에 대응시킬 거냐로 사용하는 것 같습니다. 예를 들어, Number 토큰을 만들게 되면, 이 토큰의 숫자값을 border-radius에 스코핑할 것인지, width & height에 스코핑할 것인지를 정하게 됩니다. 즉, 숫자 형식의 토큰을 만들고, 피그마 안에 존재하는 모든 숫자 형식의 데이터에 그 토큰을 대입할 수 있게 됩니다.
색상 역시 마찬가지인데, 라이트 모드와 다크 모드를 토큰으로 관리할 수도 있고, 이전에는 매우 복잡하고 스타일만으로는 사용하기 어려웠던 색상 토큰값들을 value, system token, reference token 등으로 관리하기 쉬워집니다. 또한 설정한 토큰값들은 레이어 패널에서 드롭다운으로 바로바로 적용할 수 있게 됩니다.
Variables 관리 화면. 토큰 기능은 Pro 와 Organization 플랜에선 4가지 모드를 지원하며, Enterprise 플랜은 무려 40가지 모드와 REST api까지 지원하게 됩니다.
2. 최소/최대 높이 및 너비
그동안 반응형 웹을 작업하며 최소값과 최대값을 항상 개발자와 코멘트로 관리하는 어려움이 있었는데, 프레임의 min/max height와 width를 설정할 수 있게 됩니다. 이에 따라 반응형 웹을 작업하는 디자이너들은 화면이 줄어들 때 이 이상 줄어들지 않아야 하는 길이를 설정할 수도 있고, 더 늘어나면 안 되는 길이를 설정할 수도 있게 됩니다. 앞으로 반응형 웹 디자인에 더 편의성을 가져다 줄 것으로 보이네요!
프레임 패널에 추가된 최소/최대 길이값.3. Auto layout - Wrap
항상 있었으면 했는데 없어서 짜증났던 부분이 드디어 업데이트 예정입니다. 오토 레이아웃으로 묶어둔 컨테이너의 너비가 줄어들었을 때 넘치는 자식 개체들이 아래줄로 자동으로 넘어가도록 하거나, 컨테이너가 커지면 자동으로 윗줄로 넘어오는 flex container를 드디어 만들 수 있습니다. 2번 항목인 최소/최대 값과 같이 사용하면 드디어 완벽한 반응형 레이아웃을 피그마만으로 만들 수 있게 될 것 같군요.
우측 오토레이아웃 패널을 잘 보면 기존엔 없던 2줄로 된 아이콘과 수직/수평이 아닌 제3의 방향이 있다.4. 프로토타이핑에서의 대대적인 변화
많이 하지도 않았어요...한 10개 씬만 해도....피그마에서 프로토타이핑하는 걸 피하고 최대한 프로토파이를 쓰거나, 아니면 프로토타이핑할 일을 안 만들었던 가장 큰 이유는 아직 피그마가 프로토타이핑에 힘을 주지 않았었기 때문입니다. 웹에서 기본적으로 구현되어야 하는 인터랙션들 구현하려면 프레임 여러 개로 꼼수 부려야 되기도 했고, 애초에 인터랙션 가짓수도 많이 없어서 사실상 화면 넘어가는 플로우만 확인하는 용도로만 사용하기 바빴습니다.
드디어 피그마가 완전한 UI/UX 디자인 + 프로토타입 툴로써의 제대로 된 시작을 하는 것으로 보입니다. 놀라운 사실은, 디자인 토큰으로 부르는 Variables 안에 프로토타입에 사용할 수 있는 변수까지 저장하게 됩니다(사실 Variable이 변수라는 뜻이긴 하지만 디자인 시스템의 토큰 개념과 이 변수를 합칠 줄은 상상도 못했...!).
변수를 활용하면, + 아이콘을 눌러 상품의 갯수가 추가되게 할 수 있고, 이에 따라 구매금액이 바뀌게도 할 수 있습니다. 즉, Conditional(조건부) Prototyping이 가능해집니다. 영상으로 유추해보면, 로그인했을 때와 하지 않았을 때도 특정 변수값에 0 또는 1을 줌으로써, 조건부 분기를 만들 수 있게 됩니다. 이걸 활용하면 같은 디자인 안에서 특정 조건을 만족할 때의 디자인을 별도로 만들지 않아도 되게 됩니다.
또한 프로토타입 액션에도 Conditional을 도입합니다. 예를 들어, On Tap 으로 버튼을 눌렀을 때, 조건 분기를 통해 특정 변수를 만족해야 진행되도록 할 수 있게 됩니다. 활용해본다면, 비밀번호 칸을 채웠을 때만 로그인 화면으로 넘어갈 수 있게 됩니다
프로토타입에서 On tap 트리거에 Conditional 액션을 설정하는 화면.이정도면 사실 프로토파이...까지는 아직은 당연히 안 되지만, 프로토파이까지 굳이 갈 이유가 많이 사라질 것 같네요! 이제 커뮤니티엔 피그마에서 프로토타이핑하는 주제로 질문이 한 5배는 늘겠는데....
아니 그런데 생각해보니까 이건 다 지원하면서
스크롤에 따라 헤더 바뀌는 건 왜 아직도 지원 안 해줌?
이건 왜 안 해주냐고!!!!!! 이거 때문에 맨날 프레임을 몇개씩 만들고 스마트 애니메이트 꼼수 부리는데!!뭐, 본격적으로 공개되면 이것도 될 거라고 믿습니다^^^^^^^^^^
5. Mark as Ready for dev
사실 진짜 별거 아닌데, 디자이너 입장에서는 매우 고마운 업데이트입니다. 항상 개발자와 소통하면서 어떤 프레임이 완성본인지, 어떤 화면을 기준으로 해야 하는지 이야기하는 것도 어렵고, 나름의 규칙을 정하고 플러그인을 써서 하곤 했습니다. 이제는 피그마에서, 프레임에 Mark as ready for dev 라는 기능이 추가됩니다. 이 부분을 체크하면 해당 프레임의 이름 앞에 초록색 </> 기호가 붙으며, Ready for dev 라는 태그가 붙게 됩니다. 이 기능은 페이지 단위로도 가능한 것으로 보입니다.
+ 추가
실제로 업데이트 적용 이후 경험해보니, 프레임 단위로는 적용하는 건 아직(?) 불가능한 것으로 보입니다.
Mark as ready for dev는 섹션 기준으로 적용할 수 있고, 선택된 섹션 이름 옆에 아이콘이 등장합니다.
만약 페이지 안에 마크된 섹션이 1개 이상 존재하면, 다른 섹션들의 마킹 여부와는 상관 없이 페이지 이름 앞에도 </> 아이콘이 등장합니다.
개발 지향 업데이트와
콜라보레이션 강화
피그마 CTO인 크리스 라스무센이 배턴을 이어 받아 소개합니다.
Dev Mode
이름부터 어마어마한 기능입니다. 기능이라기 보다는, 이 하나가 거대한 기능이라, 지금까지 피그마는 Design 툴에 개발자가 view mode로 참여하는 성격이었다면, 이제 개발자는 view mode가 아니라 dev mode라는 새로운 모드로 접근하게 됩니다.
이 거대한 기능 하나로 이제 피그마는 Design mode 쪽에선 디자이너의 도구로, Dev mode 쪽에선 개발자의 도구가 될 것 같군요!
데브 모드 소개 장면. 거의 애플 아이폰 소개하는 듯한 임팩트.딜런 필드가 마지막으로 소개해준 Mark as ready for dev로부터 시작하게 되는데요,
데브 모드에는 어떤 기능들이 있는지, 하나하나 간단하게 설명해봅니다.
1. 레이어 패널의 변화
데브 모드에서 레이어 패널은 개발자를 위한 속성 패널로 변경됩니다. 사실 개발자분들과 소통해보면, 레이어 패널을 거의 안 보시긴 합니다. 디자이너 입장에선 레이어가 디자인 요소들을 정리하는 기준이 되지만, 개발자분들에겐 사실 중요하지 않은 부분이긴 했습니다. 따라서 이 부분을 조금 더 개발자들이 활용할 수 있는 기능들로 채운 것 같습니다. 이전에는 뷰 모드에서도 레이어 패널을 두고 일일히 눌러 컴포넌트를 확인했지만, 이제 레이어 패널은 하나의 속성으로 축약되고, 개발자가 확인해야 하는 속성값들로 채워집니다.
기존 레이어 패널이 있는 곳이 사뭇 다르다.프레임 목록과 편집된 시점을 볼 수도 있고, 이전 프레임과 변경된 디자인 사양을 확인할 수도 있습니다. 변경 사양을 확인할 때, 수정된 건지, 삭제된 건지, 추가된 건지 역시 라벨을 통해 확인할 수 있습니다.
2. Improved Inspect and Selection
Inspect로 눌러보면, 디자인에서 의도한 것과는 다르게 컨테이너나 프레임이 잡히는 경우가 꽤 많았습니다. 피그마 역시 이 부분을 매우 잘 알고 있었던 것으로 보이는데요, 그에 따라 Inspect 에서 레이어를 선택하는 기능을 강화했습니다. 더블 클릭하지 않아도 이젠 레이어의 아웃라인을 잡아주고, 단순히 호버링하는 것만으로도 오토레이아웃 컨테이너는 자동으로 간격 및 패딩 등 을 보여주게 됩니다. 이때 간격이나 사이즈 등을 디자인 토큰으로 설정했다면, 그 변수값들도 동시에 볼 수 있습니다.
스읍 슬슬 디자이너보다 개발자가 피그마 더 공부해야 될 거 같은데 이제3. Unit Customization
인스펙트로 디자인을 확인할 때, 지금까지는 px 단위로만 볼 수 있었습니다. 하지만 반응형이나 특정 상황에선 상대값으로 단위를 설정할 필요가 있었는데, 지원하지 않아서 일일히 계산하거나 개발자가 곤혹스러웠던 경우가 많았습니다. 하지만 이제 px 뿐만 아니라 상대단위인 rem로 볼 수 있습니다. 또한 rem 단위 사용에 핵심인 root size를 임의로 설정할 수도 있습니다.
4. Variable Inspection
선택한 영역에 사용된 디자인 토큰값들 역시 인스펙트 패널에서 바로 확인할 수 있습니다.
5. Component Playground
디자인 시스템 관점에서, 디자이너는 컴포넌트의 variant에 다양한 프로퍼티를 만들어두고, 프로토타이핑으로 연결해둡니다. 문제는 개발자가 프로퍼티들과 그 인터랙션들을 알기 어렵다는 점이었습니다. 이 문제는 결국 디자이너와 개발자가 디자인 시스템을 두고 또 소통해야하는 불편함을 이중으로 만들었는데, 이제는 컴포넌트 플레이그라운드라는 기능을 통해 개발자 역시 디자이너가 구현해둔 컴포넌트의 상태값, 프로퍼티들을 모달 창에서 실험하고 눌러볼 수 있습니다.
오 이건 나도 재밌겠당6. Dev Resources
디자인을 개발 환경에 연결해 효율적으로 관리할 수 있도록 공식 지원하게 됩니다. 지금까지는 서드 파티 플러그인을 쓰는 걸로 했었지만, Edit 모드에서 가능했기 때문에 View mode를 주로 쓰는 개발자들은 플러그인의 존재를 모르고 사용해왔습니다. 이제 Dev mode를 쓰는 개발자들은, 플러그인을 쓰는 건 물론, 디자인 환경을 Github이나 Jira, Storybook으로 연결해 티켓을 관리할 수 있게 됩니다.
7. Improved Code Snippet
코드 스니펫을 강화합니다. 하지만 사실 얼마나 효용이 있을지는 조금 의문이긴 합니다. 여전히 개발 사양은 각 회사가 모두 다르고, 컨벤션도 달라 코드를 바로 긁어 사용하는 경우가 드물긴 하기 때문입니다. 이전에는 코드 덩어리로 나왔지만, 이제는 레이아웃/스타일/컬러 등으로 코드를 나눠서 볼 수 있습니다.
8. Plugins for Dev mode
드디어 개발자들도 플러그인 쓴다! 플러그인을 사용하면 기존의 CSS/iOS/Android 로만 볼 수 있던 코드를, 서드 파티 플러그인을 통해 Angular, React, Vue 등으로도 볼 수 있고, 또는 Typescript 등으로도 볼 수 있습니다. 또 만약 Dev Resource에서 지라를 연결해두고, 지라 플러그인을 설치하면, 피그마 내에서 바로 이슈 티켓을 관리할 수도 있습니다.
지라 이슈 티켓을 피그마에서 바로 관리해보이는 크리스. 아 피그마 이제 그냥 개발 툴 하라고 ㅋㅋ 아 ㅋㅋ9. Figma for VS Code
이정도면 피그마는 개발 툴로 보는 게 맞다 싶을 정도로 엄청난 편의 기능을 제공하는데, VS Code 플러그인으로 Figma를 만들었습니다. 이제 VS Code 안에서 피그마 패널을 열어 디자인과 코드를 동시에 볼 수 있고, VS Code 안에서 피그마를 보면 개발에 필요한 패널들로만 재구성되어 보여줍니다.
근데 개발자분들 다 듀얼모니터라서 굳이 이렇게 안 보실 거 같긴 합니다그 외에도 Wayfinding, Section status 등의 편의 기능을 제공할 예정입니다.
데브 모드는 정말 칼 갈고 준비한 만큼, 2023년은 베타로 모든 유저에게 제공되지만 2024년부터는 유료 플랜의 에디터들만 데브 모드를 사용할 수 있습니다(이제 개발팀 계정 하나 에디터로 파서 데브 모드 붙박이로...)
그 외 마이너하지만 안 마이너한 업데이트
딜런 필드 CEO of Figma
1. 피그마 메인(파일 브라우저 화면)의 소소한 변화
좀 불편한 감은 있었던 파일 브라우저 화면이자 피그마 메인 화면이 조금은 더 파일 브라우징에 적합한 형태로, 그리고 조금 더 메인화면 답게 변합니다.
2. Font picker
드디어 폰트 미리보기를 할 수 있습니다....
3. AI Support
피그마 역시 생성형 AI의 물결을 피해가지 않습니다. 디자인 시스템을 만들고 웹사이트를 구축하는 모든 과정에서 피그마의 AI를 사용할 수 있게 됩니다. 피그마 AI의 이름은 Diagram입니다!
여기까지가 2023년에 예정된 피그마의 업데이트를 소개하는 키노트 세션이었습니다.
크게 Variables, Prototyping, Auto layout, Dev mode 총 4가지 핵심 기능의 추가라고 보면 되는데요, 이번 피그마 컨퍼런스 2023의 키노트 세션을 크게 2줄기로 요약해볼 수 있을 것 같습니다.
첫번째론, UI 디자인 시장을 확보 괴물 피그마가 이제 손 놓고 있던 프로토타이핑을 슬슬 잡아먹으려는 것, 그리고 두번째론 디자인만큼이나 개발자 역시 피그마를 쓰는 사용자로써 중요하다는 것이 아닐까 합니다.
??? : 와씨 쫌 쫄리는데 이제디자이너가 지금까지 피그마를 써왔듯, 앞으로 개발자 역시 중요한 사용자 중 하나로 피그마를 더 많이 사용하게 될 것으로 보이는데요, 이번 피그마 컨퍼런스 2023은 디자이너에게 매우 만족스러운 키노트 세션으로 시작하지 않았나 생각이 듭니다. 내일까지 있을 피그마 컨퍼런스 2023를 계속 지켜보고, 디지털 제품 디자인의 미래에 대해 또 어떤 인사이트를 얻을 수 있는지 살펴보면 좋을 것 같군요 :)
