ABOUT ME

-

  • Config 2024 키노트 요약
    UXUI 공부 2024. 6. 28. 19:25

    1년 중 가장 기다리는 행사인 피그마 컨퍼런스, Config 2024가 시작됐다.

    작년에도 몇 세션을 통해 좋은 인사이트를 얻고 피그마 활용에 큰 도움이 되었는데, 기록 차 키노트 내용을 정리해본다.

     

     

     

    Config 2024 키노트 주제는 다음 3가지이다.

    1. Reducing complexity (제품의 복잡성 줄이기)

    2. Better developer experience (더 나은 개발 경험 제공)

    3. AI for Figma Design (AI로 디자인 생산성 높이기)

     

    여기에 히든 카드 하나가 숨어있어, 총 4개의 주제가 다뤄졌다. 히든 카드에 대해서는 제일 마지막에 이야기해보고자 한다.

     

     


     

     

    1. Reducing complexity (제품의 복잡성 줄이기)

    어떤 제품도 피해갈 수 없는 숙명이 바로 시간이 지날수록 복잡해진다는 것이다. 기능 업데이트와 복잡성은 뗄래야 뗄 수 없는 관계인데, 8년차 제품인 피그마도 이 숙명을 피해가진 못했다. 디자이너들을 위한 디자인툴을 만드는 이들은 이 문제를 어떻게 해결했을까? 복잡성 줄이기 업데이트의 상세 내역은 다음과 같다.

     

    • 7:14~ 피그마 리디자인 (UI3) - 메뉴바 사이즈 조절 가능한건 좋다. 하지만 개인적으로는 굳이...? 나도 사람이다 보니 익숙한 UI가 변경되는 것이 마냥 좋지는 않다(왜 모든 툴은 익숙해질만하면 바뀌는지ㅠㅠ) 특히 하단 AI툴은 포토샵의 AI 플로팅 버튼이랑 똑같이 생겨서 거부감이 드는데 그래도 피그마니까(=어도비는 아니니까) 베타 서비스를 통해 좋은 경험을 제공해줄거라 믿어본다.
    • 11:17~ suggest autolayout - 와 이건 진짜 신기하고 대단하다. 어떻게 이게 자동화가 가능한지 궁금하다. 물론 요소가 굉장히 많이 들어가고 자의적인 해석이 필요한 컴포넌트는 원하는 대로 구현이 안되겠지만, 일반적인 카드 정도는 오토레이아웃 구성하는 시간 확 줄듯!
    • 15:26~ ios+mui 최신 버전 디자인 키트 - light/dark 모드 스위칭이 클릭 한번으로 가능한 것도 굿
    • 17:24~ 다른 회사랑 프로젝트 공유+admin 컨트롤

     

     

    2. Better developer experience (더 나은 개발 경험 제공)

    디자이너만큼 피그마를 많이 보는 직군이 바로 개발자이다. 작년 업데이트된 Dev mode를 우리 회사 개발자분들도 굉장히 잘 써주시고 계셔서 이번 업데이트도 많은 기대를 했고, 키노트를 본 후 바로 개발팀에 따로 공유해드렸다 :)

    실제로 개발자 한분은 바로 사용해볼 수 있냐고 관심을 가지심 ㅎㅎ

     

    • 22:22~ dev모드에서 나(개발자)에게 assign된 컴포넌트만 모아보기 - 나야 당연히 피그마 파일을 처음부터 끝까지 만든 사람이니까 어느 위치에 뭐가 있는지 다 알지만, 개발자들은 어디에 뭐가 있는지 모르는 경우가 많다. 기존에는 위치별로 담당 개발자를 태깅하여 코멘트를 남기는 방식으로 작업했는데 이 기능을 통해 다수의 개발자들과 좀 더 편리하게 소통이 가능해졌다. 물론 개발자 입장에서도 내가 만드는 것만 보면 되니까 부담감이 덜하시지 않을까? 기대 중 ㅎㅎ
    • 24:07~ 프로토타입에서 반응형 모드 - 외부 플러그인 써야하는데 이젠 피그마에서 바로 가능 (기존엔 responsive 플러그인 사용)
    • 26:12~ 코드 연결 - vscode에서 코드를 작성하면 그걸 피그마 파일에 연결할 수 있는 기능
    • 28:34~ 스포티파이 개발팀에서 실제로 코드 연결 기능을 사용하여 개발하는 영상

     

     

    3. AI for Figma Design (AI로 디자인 생산성 높이기)

    이 파트, 예상은 했지만 좀 더 충격적이다. 사실 나는 그래픽 작업에 AI가 쓰이는 것에 불신이 더 큰데(물론 어떤 영역에서는 효과적으로 쓰고 있지만...) 피그마가 생각한 AI 도입은 예상과는 전혀 달랐다. 기존의 AI가 짜집기 이미지 생성에 가까웠다면, 피그마의 AI 기능은 시간 단축+완성도 높이기를 목표로 하는, 굉장히 실용적인 기능들이다. 베타 버전을 써봐야 알겠지만, 몇가지 기능은 추가 요금이 아깝지 않을 만큼 생산성을 올려줄 것 같다.

     

    • 32:25~ gemini를 이용한 ai 디자인 기능 - 레이아웃부터 에셋까지 다 그려줌
    • 39:00~ 스크린샷으로 피그마 파일 위치 찾기 - 스케치 그리면 아이콘 생성해주는 기능도 있음
    • 43:08~ 컴포넌트 복붙하면 텍스트 내용 다양하게 바꿔주기 - 이거 대박... 이 기능이 젤 맘에 든다 ㅠㅠㅠㅠㅠ 진짜 꼭 필요한 기능
    • 45:20~ 시안 자동 번역 기능 - 이거도 해외 랜딩페이지 만들때 바로 적용 가능
    • 47:25~ 프로토타입 자동 연결 - 이거도 빨리 써보고 싶음 그동안 하나씩 연결하느라 시간없을땐 포기했던 영역인데...

    *덧붙여 AI 컨텐츠 트레이닝에 내 작업물을 허용할지 고를 수 있다. 예민한 문제인데 이런거까지 신경쓰다니 감동...

     

     

     

    4. Figma Slides (PPT를 대체할 프레젠테이션 도구)

    물론 PPT와 구글슬라이드라는 걸출한 도구가 있지만, 디자이너 입장에서 내 손발처럼 움직이지 않는 도구이기도 하다(글자 정렬 맞출 때 가 제일 답답하다). 그래서 나에게 가장 익숙한 도구인 피그마로 슬라이드처럼 만들어서 프로토타입으로 연결해서 발표하는 짓을 자주 하는데, 역시 사람 생각 다 똑같다. 작년 한해에 350만개가 넘는 슬라이드가 생성되었고 피그마는 이 기능을 정식 제품으로 출시했다. 

     

    피그마 슬라이드가 프레젠테이션 도구로서 가지는 이점은 다음과 같다.

    1. 익숙한 방식으로 뛰어난 슬라이드 애니메이션 제작 가능 (프로토타입 기능으로 애니메이션 만드는거 진짜 재밌고 쉽다)

    2. 디자인적 자유도가 완벽에 가까움

    3. 슬라이드 내부에 실시간 투표 폴을 생성할 수 있음

    4. 기존 프레젠테이션 도구 대비 부족한 부분을 모두 개선 (발표자 모드라던가, 슬라이드에서 좀 더 익숙한 UI 제공 등)

     

    이 기능 덕에 앞으로 구글 PPT와 좀 더 멀어질 것 같은데 좋아해야 할지 싫어해야 할지 ㅎㅎ... 빨리 써보고 싶다.

     

     


     

     

    키노트를 보고 느낀 점은 확실히 사용자가 반복적으로/많이 하는 행동을 측정하고 그걸 원클릭으로 완벽하게 자동화해주는 기능들이 많았다는 점이다. 그런 기능들에서 박수소리는 더 크다 ㅎㅎ

    GPT 이름만 갖다쓴 어설픈 자동화가 아니라 갈고 닦아 정말 완성도 높고 실무에 바로 투입 가능한 자동화인 점이 최고로 맘에 든다. AI라는 명칭을 쓰려면 이정도는 해야 된다. 나 역시 제품을 만들면서 사용자들이 마법을 원한다고 생각할 때가 많은데, 이번에 피그마는 진짜 여러 차례 눈 앞에서 마법을 펼치는 느낌을 들게 해줬다. 한명의 사용자로서 빨리 저 마법을 써보고 싶단 생각이 듦과 동시에, 나도 사용자에게 문제를 해결하는 마법같은 기능을 제공하도록 노력해야겠다!

Designed by Judy.