2025년 5월의 디자이너

2025년 5월 6일 Figma Config 2025가 개최되었습니다. 2024년 3월 15일에 한국을 방문한 Dylan Field(CEO, Co-founder of Figma)는 연설에서 아래와 같은 질문을했습니다.

피그마는 디자인 저작도구일까요? 그는 피그마는 플랫폼이라고 이야기했습니다. 또한, 피그마는 생산 프로세스의 모든 영역에 걸쳐서 사용하고 있으며, 미국 사용자의 80%는 디자이너가 아닌 사용한다고 했습니다.

이후 그해 겨울 파워포인트와 같은 발표용 도구와 같은 Figma Slide 가 출시 되었고, 이번 2025년 5월에는 Slide를 포함한 4개의 제품 (Figma Design, FigJam, Slides, Dev Mode)에서 8개의 제품으로 포트폴리오를 두 배로 확장하며 도구의 경계를 넓혔습니다. 아래에서 이중 2개를 살펴보겠습니다.

Figma Site

Figma Site에서는 제품을 모바일, 데스크탑, 타블릿과 같은 다양한 화면에서 열람할 수 있습니다. 2가지 큰 특징으로 첫째는 코드 레이어를 사용해 DEV모드 또는 Plugin을 사용해 Export 하던 Code를 더 쉽게 네이브에서 제공한다는 계획입니다. 둘째는 위 코드를 확장해 CMS 기능 또한 대체할 수 있게 한다는 계획입니다.

국내 B2C에서 프로모션과 같은 정적 웹페이지의 경우 Figma나 Sketch에서 반복 사용하는 객체를 등록하고 이를 프로모션 페이지 운영에 사용하는 것을 볼 수 있었습니다. Fimga Site를 사용해 더 체계적으로 페이지 운영을 할 것 같습니다. Figma Site

Figma Make

Figma Make는 기존 디자인을 가져와 프롬프트 기반으로 완전한 코드 프로토타입을 생성할 수 있습니다. Figma Make를 사용하면 채팅 인터페이스를 사용하여 기능적 프로토타입, 웹 앱, 인터랙티브 UI 등을 제작할 수 있습니다. Figma Make는 AI 기반으로, 몇 가지 예시를 공유하거나 짧은 대화를 나누는 것만으로도 간편하게 나만의 인터랙티브 프로토타입을 제작할 수 있습니다. 대화를 이어가며 기능적 프로토타입과 웹 앱을 편집하거나 개선할 수 있으며, 미리보기와 코드를 직접 편집할 수도 있습니다. Figma Make

그 외도 피그마는 AI를 사용해 에이전틱한 서비스를 만들어 나가고 있었습니다.

경험과 사례

저는 4월 28일 블로그에 "Agent AI 시대의 UX 변화 - 빠르게 진화하는 AI 에이전트의 현황"글에서 Figma의 Firtst Draft 기능 사용한 페이지 만들기와 MCP를 사용한 페이지 만들기를 비교해 봤습니다. Figma의 Draft가 이는 속도, 품질, 사용성 측면에서 모두 더 우수했습니다. 이는 구조적으로도 MCP(Model Context Protocol)를 사용해 AI에 프롬프트와 함께 처리를 의뢰하고 다시 AI는 코드를 생산하듯 Fimga에 오브젝트를 하나씩 그립니다. 이러한 처리 방법은 네트워크 사용 시간과 최적화 되지 않은 환경에서 속도와 퀄리티 차이가 발생합니다. AI를 사용한 개발은 음악, 그림, 글쓰기, 연구 등 많은 분야에서 80%~90%는 클릭 한번으로 빠르게 완성하는 것을 경험할 수 있었습니다. 하지만, 남은 10%~20%를 채우는 데는 전문가의 기술이 필요하며, 이때는 AI를 사용한 개발은 더 느리거나 끝내 기대수준에 도달하지 못할 수 있습니다.

최근 닐슨 노만 그룹의 아티클에서도 비슷한 의견을 볼 수 있었습니다. AI Design Tools Are Marginally Better: Status Update

2025년 5월 피그마에서 발표한 새로운 기능이 데모만틈 훌륭하다고 하더라도, 전문가들은 아직 AI에 대체될 위기에 처해 있지 않습니다. 닐슨 노만 그룹에서는 AI의 사용이 UX설계와 같이 사용 맥락과 Business goal, User goal 과 같이 다각적인 해석과 같이 광범위한 입력을 받아들여서 판단하는데는 어려움이 있으며, 레이어명 일괄 변경과 같은 깊고 좁은 범위에 작업에 유용하다고 합니다.

사례1: 프로토타입

위 프로토타입은 4가지 유형의 인터랙션을 소개한 프로토타입니다. 프로젝트 초반 빠르게 업무를 협의하고 방향을 맞추기 위해 제작한 것입니다. 어려운 기술 없이 화면과 화면을 드래그해서 연결한 것으로 위 이미지와 같이 흐름선이 복잡하게 연결되어 있습니다. 피그마에서 단순하게 화면과 화면을 연결하는 것만으로 프로토타입할 수 있는 기능을 2017년 7월 25일에 제공했으며 아직도 매우 훌률한 기능으로 사용할 수 있습니다. 프로토타입은 잠겨 있습니다.

사례2: Base resoulution

레티나 디스플레이 수준의 고밀도는 아니지만 고밀도인 220ppi를 사용하는 프로젝트의 개발을 소개합니다. 이와 같이 특수한 고해상도의 경우 두가지 해상도로 작업을 합니다. 정보량과 크기와 위치를 중요시하는 UX에서는 Base resolution인 160ppi로 작업합니다. 160ppi를 사용하면 다음과 같은 이점이 있습니다. pt개념을 사용할 수 있으며, 이는 종이로 출력시 같은 크기를 만들 수 있습니다. 또한 여러 이해관계자 자주 노출된 치수 단위로 대략적인 크기의 감을 갖을 수 있습니다. 하지만 GUI의 경우 정확한 픽셀 정렬(pixel perfect)이 중요합니다. 그렇지 않은 경우 오브젝트가 흐릿한 상태로 표시됩니다. 이를 위해 Figma의 Variable 을 사용해 (0.73%) 배율을 조정해 사용합니다.

이외도 위 프로젝트는 Input 12-bit를 사용한 패널로 디더링한 PNG를 열람하기 위해 2025-05-17-RetroColorConverter Private or Broken Links
The page you're looking for is either not available or private!
플러그인을 개발 했습니다. 이러한 프로젝트 계획과 구조 전략을 AI가 Zero shot과 같이 짧은 프롬프트로 만들어진 못합니다.

마치며

프로젝트를 위한 좋은 도구는 많습니다. AI는 많은 작업을 간소화해 주기도 하고 못하던 일을 확장해주고 있습니다. 프로젝트를 어떻게 보고 해결해 나가는가에 대한 방향성이 제시되야 그에 맞는 AI를 사용할 수 있습니다. 아직은 AI를 사용하는 것이 많은 분야에서 80% 수준이라는 것도 고려해야할 점입니다. 코딩과 같이 정확한 결과가 있고 패턴이 있는 분야의 경우 조금 더 높은 결과를 얻을 수 있으나, 이것도 비전문가가 바라본 코드와 전문가가 코드의 기대 품질이 다릅니다. 또한, 쉽게 해결할 수 있는 코드를 AI의 경우 해결하지 못하고 불필요한 코드를 생산하기도 합니다. 하지만, 리서치, 분석, 디자인, 코딩 등 많은 분야에서 빠르게 80% 수준으로 빠르게 만들고 이를 기반으로 수정할 수 있다는 것은 역량의 확장을 의미하기도 합니다.

참고 자료

• Figma Make
• Figma Site
• AI Design Tools Are Marginally Better: Status Update
• Retro Color Converter
• mcp2025-04-02-mcp Private or Broken Links
  The page you're looking for is either not available or private!