2025-05-18
5 min read
2025년 5월 6일 Figma Config 2025가 개최되었습니다. 이 글에서는 Figma의 최근 변화와 확장된 제품 포트폴리오, 그리고 AI 시대에 디자이너의 역할에 대해 살펴보겠습니다.
2024년 3월 15일에 한국을 방문한 Dylan Field(CEO, Co-founder of Figma)는 연설에서 아래와 같은 질문을 했습니다.
피그마는 디자인 저작도구일까요? 그는 피그마는 플랫폼이라고 이야기했습니다. 또한, 피그마는 생산 프로세스의 모든 영역에 걸쳐서 사용하고 있으며, 미국 사용자의 80%는 디자이너가 아닌 사람들이 사용한다고 했습니다.
Figma의 확장된 제품 포트폴리오
24년 6월에 Figma Slide가 출시되었고, 이번 2025년 5월에는 기존 제품 Figma Design, FigJam, Slides, Dev Mode에 추가로 4개(Draw, Buzz, Sites, Make)를 더해 8개의 제품으로 포트폴리오를 두 배로 확장하며 도구의 경계를 넓혔습니다. 이중 Site와 Make를 자세히 살펴보겠습니다.
Figma Site: 디자인에서 웹사이트로
Figma Site에서는 제품을 모바일, 데스크탑, 타블릿과 같은 다양한 화면에서 열람할 수 있습니다.
2가지 큰 특징으로 첫째는 코드 레이어를 사용해 DEV모드 또는 Plugin을 사용해 Export 하던 Code를 더 쉽게 네이브에서 제공한다는 계획입니다.
둘째는 위 코드를 확장해 CMS 기능 또한 대체할 수 있게 한다는 계획입니다.
국내 B2C에서 프로모션과 같은 정적 웹페이지의 경우 Figma나 Sketch에서 반복 사용하는 객체를 등록하고 이를 프로모션 페이지 운영에 사용하는 것을 볼 수 있었습니다. Fimga Site를 사용해 더 체계적으로 페이지 운영을 할 것 같습니다. Figma Site
Figma Make: AI 기반 프로토타입 생성
Figma Make는 기존 디자인을 가져와 프롬프트 기반으로 완전한 코드 프로토타입을 생성할 수 있습니다.
Figma Make를 사용하면 채팅 인터페이스를 사용하여 기능적 프로토타입, 웹 앱, 인터랙티브 UI 등을 제작할 수 있습니다. Figma Make는 AI 기반으로, 몇 가지 예시를 공유하거나 짧은 대화를 나누는 것만으로도 간편하게 나만의 인터랙티브 프로토타입을 제작할 수 있습니다. 대화를 이어가며 기능적 프로토타입과 웹 앱을 편집하거나 개선할 수 있으며, 미리보기와 코드를 직접 편집할 수도 있습니다.
Figma Make
AI 디자인 도구의 현재와 한계
피그마뿐만 아니라 다양한 도구들이 AI를 활용한 기능을 확장하고 있습니다. 저는 4월 28일 "Agent AI 시대의 UX 변화 - 빠르게 진화하는 AI 에이전트의 현황" 글에서 Figma의 First Draft 기능과 MCP(Multimodal Cloud Platform)를 사용한 페이지 만들기 경험을 비교했습니다. Figma의 Draft가 이는 속도, 품질, 사용성 측면에서 모두 더 우수했습니다.
이러한 차이는 구조적인 이유가 있습니다. Figma의 First Draft가 네이티브 환경에서 최적화된 반면, MCP는 LLM(Large Language Model)에 프롬프트와 함께 처리를 의뢰하고 LLM이 코드 생성처럼 이미지를 하나씩 그리는 방식입니다. 네트워크 사용 시간과 최적화되지 않은 환경에서 속도와 퀄리티 차이가 발생합니다.
AI를 사용한 개발은 음악, 그림, 글쓰기, 연구 등 많은 분야에서 80%~90%는 클릭 한 번으로 빠르게 완성하는 것을 경험할 수 있습니다. 하지만, 남은 10%~20%를 채우는 데는 전문가의 기술이 필요하며, 이때는 AI를 사용한 개발이 더 느리거나 끝내 기대 수준에 도달하지 못할 수 있습니다.
최근 닐슨 노만 그룹의 아티클에서도 비슷한 의견을 확인할 수 있습니다: AI Design Tools Are Marginally Better: Status Update
2025년 5월 피그마에서 발표한 새로운 기능이 데모만큼 훌륭하다고 하더라도, 전문가들은 아직 AI에 대체될 위기에 처해 있지 않습니다. 닐슨 노만 그룹에서는 AI의 사용이 UX설계와 같이 사용 맥락과 Business goal, User goal과 같이 다각적인 해석과 광범위한 입력을 받아들여서 판단하는 데는 어려움이 있으며, 레이어명 일괄 변경과 같은 깊고 좁은 범위의 작업에 유용하다고 합니다.
AI 도구의 한계와 디자이너의 전문성
앞서 소개한 Figma의 AI 기능들은 디자인 작업을 크게 효율화할 수 있지만, 모든 디자인 과정을 대체할 수는 없습니다. 아래는 AI 도구만으로는 해결하기 어려운, 디자이너의 전문성과 경험이 필요한 접근 방법 사례입니다.
사례1: 복잡한 인터랙션 프로토타입
위 프로토타입은 4가지 유형의 인터랙션을 소개한 프로토타입입니다. 프로젝트 초반 빠르게 업무를 협의하고 방향을 맞추기 위해 제작했습니다. 이미지에서 볼 수 있듯이, 화면과 화면을 드래그로 연결하여 복잡한 흐름선이 형성되어 있습니다.
이러한 복잡한 인터랙션 흐름은 현재 AI 도구가 이해하고 자동 생성하기 어려운 영역입니다. 피그마에서는 2017년 7월 25일부터 단순하게 화면과 화면을 연결하는 프로토타입 기능을 제공했으며, 아직도 매우 훌륭한 기능으로 사용되고 있습니다.
사례2: 고해상도 디스플레이를 위한 Base Resolution 전략
레티나 디스플레이 수준은 아니지만 220ppi의 고밀도 디스플레이를 사용하는 프로젝트 개발 사례입니다. 이러한 특수 고해상도 프로젝트에서는 두 가지 해상도로 작업합니다:
-
정보 설계용 Base Resolution (160ppi): UX 관점에서 정보량, 크기, 위치를 중요시할 때 사용합니다. 160ppi를 사용하면 pt 개념을 활용할 수 있어 종이 출력 시 같은 크기를 유지할 수 있고, 이해관계자들이 익숙한 치수 단위로 대략적인 크기감을 파악할 수 있습니다.
-
픽셀 퍼펙트 GUI를 위한 실제 해상도 (220ppi): GUI 작업 시 정확한 픽셀 정렬이 중요합니다. 그렇지 않으면 오브젝트가 흐릿하게 표시됩니다. 이를 위해 Figma의 Variable을 사용해 배율(0.73%)을 조정합니다.
이 프로젝트는 추가로 Input 12-bit를 사용한 패널의 디더링된 PNG를 열람하기 위해 RetroColorConverter 플러그인을 직접 개발했습니다.
이러한 프로젝트 계획과 구조 전략은 AI가 Zero-shot(짧은 프롬프트만으로)으로 생성하기 어려운 전문적인 영역입니다. 다양한 해상도 전략, 픽셀 퍼펙트 작업의 중요성, 그리고 특수 디스플레이 환경에 대한 깊은 이해가 필요합니다.
마치며
프로젝트를 위한 좋은 도구는 많습니다. AI는 많은 작업을 간소화해 주고 이전에는 못하던 일을 가능하게 해주고 있습니다. 하지만 프로젝트를 어떻게 보고 해결해 나갈지에 대한 방향성이 먼저 제시되어야 그에 맞는 AI 도구를 효과적으로 활용할 수 있습니다.
앞으로 디자이너의 역할은 AI 도구를 능숙하게 활용하면서도, 사용자 맥락 이해, 복잡한 디자인 의사결정, 다양한 이해관계자 조율과 같은 AI가 아직 해결하지 못하는 영역에서 가치를 창출하는 방향으로 발전할 것입니다. AI는 강력한 도구이지만, 디자인 사고와 전략적 접근은 여전히 디자이너의 몫입니다.
여러분은 디자인 작업에 AI 도구를 어떻게 활용하고 계신가요? 그리고 AI 시대에 디자이너로서 어떤 역량을 강화하고 계신지 공유해 주세요.
