지난 7월 초, 미국에서 CONFIG가 열렸다. 미국, 그리고 전 세계에서 피그마를 쓰는 수많은 디자이너들이 행사에 참석했고, 피그마에서는 앞으로 업데이트될 기능들을 소개했다. 당연히도(?) 나는 행사에 참석하지 못했는데, 마침 CONFIG RECAP을 한국에서 진행한다고 해서 바로 신청했다. 오프라인으로 갈까 하다가 당일에 재택이기도 해서 온라인으로 참석해서 편하게 들었다.(이때 시작 시간에 갑자기 비가 엄청 오기도 했다) 온라인(zoom 웨비나로 진행)으로 진행할 때 화질이나 음질 이슈가 있긴 했으나, 내용은 생각보다 정말 유익했다.

간단하게 피그마 APAC 고객 총괄 담당자의 오프닝이 끝나고 이후에는 피그마 공식 파트너사인 단군소프트에서 피그마에서 업데이트되는 내용들을 간단하게 리뷰했다. 그리고 CONFIG 미국 행사에 참석한 우아한형제들 이종석 디자이너(세상에 아는 얼굴이 나와서 깜짝 놀랐다)의 후기 세션이 있었고, 이다음에는 피그마와 디자인 시스템에 대한 질의응답 방식의 토크 세션, 그리고 찐 마지막으로 피그마 관련 질의응답 세션으로 진행되었다.

이미 미국에서 진행된 CONFIG에 우리나라 디자이너들 또는 관계자들이 많이 참석해서 피그마에 어떤 기능들이 업데이트되었는지 나보다 더 전문적이고 상세하게 설명했기 때문에 피그마 업데이트 내용에 대해서는 또다시 언급하진 않겠다. (나는 EO 채널의 이 영상을 보는 것을 추천한다) 이 글에서는 피그마 업데이트 관련 기능을 “피그마를 사용하는 마케팅 디자이너”의 주관적인 시점으로 어느 기능이 진짜 유용해 보이는지 리뷰하고, 이후에 있던 다른 디자이너들의 세션을 들은 후기를 적어보겠다.

*CONFIG 웨비나 진행 영상은 행사 참석자에 한해서 녹화본 링크를 메일로 공유할 예정이라고 합니다.(미참석자 공개 X)

*발표 장표는 피그마의 저작권 철퇴를 맞을까봐 별도로 공개하지 않겠습니다.

CONFIG 오버뷰 + 업데이트 내용 데모 시연

by 단군소프트 각 담당자

CONFIG RECAP 행사를 주최한 단군소프트 담당자들이 미국 행사에서 공개한 피그마 내용을 데모 시연하면서 리뷰해 주었다. 개인적으로 미국에서 발표한 내용은 나의 바닥을 친 영어 실력으로 바로바로 이해하기 어려운 지점도 있었는데 역시 한국어로 들어서 편했다. 여하튼…

이들이 말하는 피그마의 목표는 누구나 상상을 현실로 만들 수 있게, 간편하고 쉬운 디자인을 돕는 것이라고 한다. 그동안 피그마가 디자인 툴이었다면, 그보다 더 넓은 의미로 제품 개발 툴로 자리매김하고자 하는 것이 이들의 목표이다. 하지만 제품을 만드는 과정은 점점 복잡하고 어려워지고 있다. 아이디어 조율, 합의, 반복작업 등 엄청나게 많은 프로세스를 거쳐야 하는데, 피그마가 기존에는 [디자인]에만 집중했다면 이제부터는 디자인뿐만 아니라 기획, 개발(dev mode), 그리고 결과물 발표(슬라이드 기능)까지 도와주는 툴로 발전하려 하는 게 보였다.

이런 피그마의 목표를 가지고 이번에 공개한 업데이트 내용을 크게 나누자면 아래 4가지로 나눌 수 있다.

1) 복잡성을 줄이기
2) 더 나은 개발자 경험(dev 모드 업데이트)
3) AI 접목시키기
4) 피그마 기능 접목시키기

위의 4가지에 걸맞은 자세한 기능은 데모 시연으로 보여줬는데, 크게 디자인과 개발(dev) 기능으로 나눠서 시연했다. 아래는 이번에 업데이트되는 기능들 중 디자인 데모 시연을 보고 느낀 것들이다.

<오토 레이아웃(Auto layout) 제안 기능>
그동안 디자이너가 일일이 설정해야 하는 오토레이아웃을, 이제는 최선의 오토 레이아웃으로 피그마가 자동으로 세팅해 주는 기능 출시. 디자이너뿐만 아니라 비디자이너도 손쉽게 해당 기능을 사용할 수 있게 했다.

– 마케팅 디자이너 관점의 시연 소감 : 피그마가 생각하는 이상적인 구조로 배열해 주는 게 매우 신기했다. 정말 내가 원하는 오토 레이아웃을 제안할까는 살짝 의문의라 직접 써보고 판단하는 것이 제일 좋을 거 같다! 복잡한 구조도 얼마나 잘 구현해 줄지는 직접 테스트를 여러 번 해봐야 할 듯하다.

<UI3 출시 및 UI 키트 제공>
이전에 어느 사용자가 X(구 트위터)에 피그마에 점점 많은 기능이 추가되어서 기능을 덜었으면 좋겠다고 글을 썼는데, 이를 피그마 대표 딜런이 바로 리트윗 하여 반영한 것이 UI3이라고 한다. 툴바를 하단으로 내리고 패널 가로값을 줄이거나 숨김이 가능하다. 그리고 UI 키트를 제공해서 파트너사의 디자인 시스템을 사용하여 손쉽게 UI를 만들 수 있다.

– 마케팅 디자이너 관점의 시연 소감 : UI3 인터페이스를 보고 흠칫했는데, 기존의 피그마 UI에 비해 생각보다 바뀐 부분이 많아서였다. 만약 당장 업데이트되어 사용한다 하면 혼란이 올 수 있을 것 같다. 그래서 점진적 업데이트 및 사용을 진행할지도 모른다. (현재 UI3은 대기명단에 등록된 사람들 우선으로 업데이트를 진행하고 피드백을 듣고 있다) 모든 업데이트들이 그러하겠지만, 인터페이스 업데이트 후 의외로 달라지는 부분이 많다면 손에 익숙해져야 하는 시간도 충분히 필요할 것 같다.

 

<AI를 피그마 내에서 사용 가능하게 기능 추가>
아마도 CONFIG 당시 많은 사람들이 환호하지 않았을까 하는 기능인데, 거의 어도비 파이어플라이에 버금가는 기능들을 제공한다. 대충 스케치만 해도 사용자가 찾는 아이콘 파일을 찾아주거나, 이미지 누끼를 따주거나, 내가 썸네일로 사용하고자 하는 이미지를 생성해 주는 등의 기능을 제공한다. 이미지 생성 외에도 수많은 레이어 이름을 단번에 정리하하는 자동 rename 기능도 추가된다. 글로벌 서비스일 경우 텍스트를 다른 나라의 언어로 번역해 주는 기능도 추가된다.

– 마케팅 디자이너 관점의 시연 소감 : 마케팅 디자인 같은 경우 내가 만든 페이지의 피그마 파일을 png 이미지로 복사 후 붙여 넣는 경우가 많은데, 이 이미지의 피그마 원본 디자인 파일을 찾는 기능은 은근 잘 쓸 것 같다. 다만 나의 막 그린 아이콘을 제대로 된 아이콘으로 찾아주는 기능은 많이 쓸지는 모르겠다. 근데 리네임 레이어 네임은 진짜 신세계… 컴포넌트 관리하는 디자이너들에게는 엄청난 기능인 건 틀림없다. 레이어 이름을 영문으로 지정은 가능한데, 한글로 될지는 직접 해봐야 할 듯하다.

그 외에 AI 기능들은 텍스트나 이미지 더미 작업 시 유용해 보인다. 하지만 수많은 카드에 더미 데이터 말고 실제 데이터를 자동으로 집어넣는 일을 많이 하는 사람으로서 이 기능이 추가되면 참 좋겠다.(해당 기능은 플러그인으로도 있지만 아쉬운 점이 많기 때문에…) 아쉽게도 프롬프트는 영어로 작성해야 한다.
이미지 생성기능도 신선했지만, 이것도 역시 더미 작업 시 유용할 것 같다. 더 유용한 것은 배경 제거도 피그마에서 바로 가능하다는 것이다. 대체로 포토샵의 제너레이트 기능과 비슷했다. 여기서 중요한 것은 다른 AI 툴과 왔다 갔다 안 해도 된다는 것이다. 오직 피그마 안에서 모든 것이 가능하게 구현한 것이 정말 좋았다.

디자인 기능에서는 이렇게 느낀 바가 많았는데, dev 모드는 워낙에 개발자의 영역이라 솔직히 시연을 대충 봤다… 그래도 대충 봤더라도 어떤 느낌이 들었는지 간략하게 얘기하자면, 여태껏 데브 모드를 써본 적이 없었는데 이후에 개발자와의 협업을 한다는 조건 아래에 데브모드를 써봐겠다는 생각이 든다.(참고로 피그마를 본격적으로 사용한 이후 개발자와 딱 1번 일함. 그것도 디렉터로) 하지만 이전처럼 스케치와 제플린을 왔다 갔다 하는 일이 훅 줄어들 것 같다. 사실 지금도 피그마에서 가이드를 일일이 그려서 제공했는데, 프로덕트 디자이너들에게 실제 개발자에게 파일을 공유할 때 이 데브 모드를 사용하는지 물어봐야겠다.

이렇게 피그마 업데이트 목적 및 기능 시연을 보고, 이후에는 타사 디자이너들의 세션으로 진행되었다.

CONFIG 2024 행사 후기

by 우아한형제들 이종석

아니 이분이 왜 여기서 나오지?? 하고 행사 시작 전 티저 장표를 보고 놀랐다.(인스타 스토리에 신나게 종석님 태그 걸고 다님) 이 분은 미국 CONFIG 행사 때 회사의 디자이너 2명(+휴가 겸 구경온 1명)과 함께 참석했었는데, 회사에서도 행사에 다녀온 후기를 간단하게 공유 주셨지만 그 외에 현장에서 들었던 강연 내용도 함께 간략하게 얘기해 주셨다. 덕분에 “이 강연은 내가 영어를 몰라도 번역기 돌려서 듣고 싶다!”라고 생각이 들 정도로 유익한 내용이 많았다.

(종석님이 소개한 강의 중 2번째 강의 장면 중 하나. 출저 : The broken promises of design systems, 피그마 유튜브 채널 )

종석님이 인상 깊었던 강연 2가지에 대해 리뷰해 주셨는데, 난 그중 2번째로 얘기한 강연을 영상을 찾아서라도 듣고 싶을 정도로 크게 공감했다. (그리고 찾아냈다. 피그마 유튜브 채널에서 강의영상을 볼 수 있다.) 이 강연에서는 디자인 시스템은 어떻게 발전해야 하는지에 대한 고민을 얘기하는데, 효율을 중요하게 생각하는 시스템에서 크리에이티브를 만들 수 있을까 의문이 들게 했다. 예를 들면 강연에서 디자인 시스템으로만 만든 A시안, 그리고 시스템을 무시하고 자유롭게 만든 B시안을 비교했을 때 작업 시간 및 효율은 당연히 A 시안이 좋았지만 B시안에서 새롭고 흥미로운 부분이 많이 보였다고 한다. 결국 훌륭한 아이디어는 시스템으로부터 시작하는 것이 아니라 스케치, 와이어프레임, 창의적 자유로부터 시작된다고 얘기한다.  이 외에 강연 내용이 많이 있었겠지만, 풀 강의는 위의 링크에서 볼 수 있다. 참고로 영어로 진행한 강의라 영어능력자들이 보고 내용을 전파해 주길 바란다.

그 외에는 행사 전반의 경험에 대해 얘기해 주셨다. 나는 종석님 인스타에서 행사의 즐거운 분위기를 실시간을 봐서 어느 정도 알고 있었는데, 가방이나 목걸이 그리고 키링을 제공하고 티셔츠 제작 부스도 있었다고 한다. 사람이 정말 많았는데 행사장 내에는 인증샷을 남기는 등의 다양한 부대 행사가 있었고, 행사장 밖에서는 피그마의 경쟁사 중 하나인 제플린의 광고 트럭이 계속 돌고 있었다는 말에서 빵 터졌다.

종석님은 함께 간 디자이너들과 “CONFIG가 왜 디자이너들에게 매력적일까” 하는 얘기를 했을 때 피그마가 디자인이라는 도메인을 다루는 [태도] 덕분이라고 한다. 피그마의 대표가 디자인을 어떻게 보는지(디자인으로 문제를 해결하는 것, 아트와 문제해결이 함께할 때 아름답고 이것이 바로 디자인이다)가 고스란히 반영되었으며 이는 피그마가 디자인 이상의 다양한 문제들을 해결하려고 노력하는 태도로 이어진다는 것이다.

행사 외에 피그마 오피스나 행사 부스 등을 봤을 때 디자이너 특유의 무형적 자산을 중요하게 다루려 하는 게 많이 보였고, 피그마 사람들과 얘기할 때 [커뮤니티]라는 단어를 가장 많이 들었다고 한다. 그만큼 피그마가 디자이너들끼리의(또는 디자이너와 함께 일하는 다른 사람들과의) [커뮤니케이션]를 중요하게 생각하고 그 중심에 피그마가 큰 역할을 하는 것을 바라지 않을까 싶다. 아마 이후에 CONFIG 2024 같은 행사가 지속적으로 열릴 것 같은데, 앞으로 피그마에서 어떤 신선한 행사를 보여줄지 기대되는 세션이었다.

피그마와 디자인 시스템 패널토크

by 쿠팡 전상호, LG전자 고지원, 카카오페이 차승진)

이 세션은 쿠팡 전상호(이하 전), LG전자 고지원(이하 고), 카카오페이 차승진(이하 차)에서 디자인 그룹을 리드하는 3분을 모시고 피그마와 디자인 시스템에 대한 이야기를 질의응답 형식으로 진행한 세션이었다. 3분의 자기소개와 함께 세션이 진행되었으며, 질문에 대한 3분의 답변 또는 의견은 아래에 적어놓았다.

(보면서 정신없이 적느라 실제 얘기한 부분과 다를 수 있습니다. 수정 또는 삭제되어야 할 부분은 댓글로 알려주시면 고치겠습니다!)

Q1) CDO와 일반 디자인 팀장의 차이는?

– (차) 역할로 보면 사용성에 책임을 지는 사람이라 생각한다. 마케팅 디자인, UX디자인, 브랜드 디자인, 인테리어 등등등. 일단 우리 회사는 기능조직과 목적조직(비즈니스에 집중)으로 나눠져 있다. 시각적인 디자인에 매몰되지 않고 사용자와 데이터를 보게 유도하고 있고, 매출과 데이터와 사용성에 대해 균형을 잡자고 주문하고 있다.

Q2) 디자인 시스템의 중요도 변화에 대한 생각은?

 – (전) 디자인 생성이 빨라지고, 보다 크고 복잡한 문제에 대해 집중할 수 있는 환경이 구축되고, 통합된 디자인 언어를 사용할 수 있다. 비즈니스의 목표들을 빠르게 달성할 수 있도록 이 3가지의 임팩트의 흐름이 잘 맞는다고 생각한다. 점점 디자인 시스템의 역할이 더 중요해진다. 피그마가 툴이 아닌 플랫폼 수준에서 현업에서 일하는 사람들을 지원한다는 것에 영향력이 정말 크다.

 – (고) 디자인 시스템의 중요도는 예전부터 있었다. 5년 전까지만 해도 이 단어가 활성화되진 않았었다. 개발자와의 협업 그리고 사용자의 니즈가 바뀌면서 빠르게 업무를 진행하는 이 시점에서 [커뮤니케이션]을 잘하는 방법을 고민했는데, 피그마가 이 역할을 잘해주는 것 같다. 협업을 어나더레벨로 끌어올려준다.

– (차) 카카오페이에서 제일 잘한 게 피그마를 도입한 것 같다. 그 이전에는 스케치, 제플린, 앱스트랙트 조합(악마의 조합이라고….)으로 운영했다. 페이의 UX시스템(디자인시스템)이 UX의 근간이라 생각한다. 시스템을 도입하기 위해 개발자 설득하고 밋업에서 발표하고 그랬는데, 이젠 시스템이 없으면 디자인을 못 할 정도로 중요하며 계속 확장시키고 있다. 이후에는 접근성 관련해서도 시스템에 도입하고 있다.

Q3) 디자인 시스템의 고도화 과정은?

– (차) 초기에는 엄청난 챌린지가 있다. 엄청나게 설득해야 하고, 그 와중에 사람들은 이게 좋은 건지 의심하고. 얼마나 좋을지는 디자인 시스템 베타가 나오고 써봐야 안다. 그렇게 이걸 써보고 효율성이 높아진 걸 경험하면 많이 협조해 주신다. 도입 전과 후가 굉장히 다른데, 도입 후 일관성 있는 UX가 만들어지고 있다. 시스템을 계속 디벨롭하고 있는데 초반에는 일관성을 많이 강조했다.(HYO의 관점 : 이때 승진님이 감정에 북받쳐서 하마터면 선을 넘을 뻔(?)하심) 이제는 어느 정도의 디자인의 확장성을 필요로 하는 구조다. 확장성을 시스템에서 받아줄 수 있는가가 문제다. 둘이 함께 발전해야 한다. 참고로 이전에는 개발자들이 각자 쓰는 라이브러리가 있어서 설득하기 힘들었다.

– (고) 압도적인 사이즈와 다양한 곳에서 디자인 시스템을 만들기 위해서 시작을 했는데, 엄청난 챌린지였다. 처음 시작하는 거니까 리더 분들을 설득해야 하고(일관성, 효율성, 이를 쓰지 않으면 어떻게 되는지 증거제출 등등) 그래도 의심이 많은 상태에서 이걸 어떻게 성공시킬까 진행 중. 유연함과 약속의 밸런스(HYO의 관점 : 아마도 크리에이티브와 효율성을 얘기하는 것 같다. 이 말을 듣고 이거다! 싶었다)를 잘 맞춰서 소프트 랜딩을 배려해야 한다.

– (전) 디자인에 대한 약속, 지속적인 유지와 개선. 이 와중에 고민해야 할 게 많을 것 같다. 조직의 사이즈와 제품에 따라 틀리지만 시스템이 효율적으로 대응하고 지원하기 위해 심도 깊게 기본이 되는 것부터 다듬어야 한다. 단편적인 접근보다는 총체적인 관점에서 디자인 시스템을 바라보고, 디자인 언어나 요소, 제품과 어떻게 연결되는지 확인하는 것도 고도화에서 중요하게 생각하는 흐름이다. 고도화의 완성을 바라보는 것이 아니라, 우리가 지원해야 하는 고객들이 많기 때문에 이런 고객들로부터 유입되는 것들을 향해 진행하는 것. 시스템은 만들었다고 끝이 아니고 언제나 환경과 요구에 반영해서 변경될 수 있다.

Q4) 디자인 리더로서, 하고 싶은 말은?

– (전) 디자인이라는 직업을 가지고 있고 이를 가지고 커리어를 만들다 보면, 중요한 결정을 해야 하고 현재의 위치가 올바른 결정인지 의심을 풀 때가 많은 것 같다. 디자인으로서의 마인드셋은 “내가 있는 곳, 결정한 것이 배움이 있다면 믿고 의심하지 않는다”. 지나고 보면 고통스럽고 아픈 순간이 나를 성장하게 만든 것 같다.

– (고) CONFIG에서 많은 디자이너들과 네트워킹을 하는 것이 너무 중요하다고 생각하고, 이를 잊고 살았던 것 같다. 나이브함(naive. 순진하고, 쪼지 말고, 믿어주고 등등)가 중요한 것 같고, 스몰토크를 잘하는 것이 중요하다.

– (차) 디자이너들이 연차가 쌓일수록 일이나 포지션이 달라질 텐데, 그럴 때마다 디자이너들은 시야가 좁으면 안 될 것 같다. 역량도 넓어져야 한다. (데이터도 봐야 하고, 시각적인 디자인, 인문학, 심리학 등등) 스펙트럼이 넓어지면 리더가 되고 차상위 리더가 될 때 도움이 많이 된다. 디자인만 보지 말고 주변의 얘기도 많이 듣고 등등. 그렇게 좋은 디자인을 만들었다라고 하는 것이 중요해 보인다.

이렇게 길고 긴 CONFIG RECAP KOREA 행사가 끝났다. 이후에 행사 관련 질의응답 시간이 따로 있었지만, 대부분은 피그마 업데이트 일시 관련된 질문이었다. 여기서 피그마가 어떤 부분을 중요하게 생각하는지가 보였는데, 이번에 공개된 기능들을 바로 업데이트 배포하지 않고 점진적 배포를 통해 사용자들의 의견을 듣고 이를 반영해서 UI3을 발전시키려고 하는, 사용자를 중요하게 생각하고 이들의 의견을 최대한 반영하려고 하는 태도가 보였다.

피그마 행사라고 하면 주로 프로덕트 디자이너가 많이 참석한다고 생각할 텐데, 나는 마케팅 디자이너로서 이 행사를 지켜보았다. 현재 내가 가장 많이 쓰고 있는 툴이 포토샵이 아닌 피그마인 만큼, 앞으로 피그마가 어떻게 변화하는지 지켜보는 것이 중요했다. 나의 아주아주 미흡한 영어실력으로 CONFIG 내용을 어떻게 알아가지 싶었는데 마침 한국에 이런 행사를 마련해 줘서 감사할 따름이었다. (한국으로 업데이트 내용 리뷰… 감사합니다. 그리고 영어공부 꼭 하겠습니다.)

그리고 마지막 세션에서 꽤 큰 기업에서 디자인을 총괄하는 디자이너 3분의 디자인 시스템에 대한 생각을 들을 수 있어서 정말 좋았다. 앞서 <디자인 가이드의 딜레마>에서도 얘기했듯이, 마케팅 디자인에서 아무리 디자인 시스템(또는 라이브러리)과 가이드를 만들어도 다음날 사업 방향이 바뀌면서 무너지는 게 현실이다. 그리고 비주얼 크리에이티브의 비중이 높다 보니 프로덕트의 디자인 시스템보다 [새로운 아이디어]와 [확장성]이 중요해질 수밖에 없다. 그래서 “우리가 이 시스템을 도입하는 게 맞는지”에 대한 의문이 항상 있었는데 이번 세션에서 들은 내용이 이런 혼란스러운 내 마음에 어느 정도 힘이 되어주었다. (이렇게 해야 합니다!라고 강력하게 주장하는 게 중요하다고 누군가 얘기하셨는데, 이것도 큰 울림을 주었다)

이번에 부득이하게 온라인으로 참석하게 되었는데, 날이 선선해지고 연말이 다가올수록 관련 행사가 더 많아질 테니 다음에는 오프라인으로 관련 행사 또는 콘퍼런스에 참석하고 또 후기를 기록해 보겠다.

HYO의 더 많은 글이 궁금하다면? 👉 https://brunch.co.kr/@designerhyo/