디자인과 개발, 그 영원한 간극을 좁히는 피그마의 새로운 혁신
Published Jun 25, 2026
여러분은 혹시 디자인과 개발 사이의 보이지 않는 장벽 때문에 답답했던 경험이 있으신가요? 디자이너가 밤새 공들여 만든 아름다운 시안이 개발자에게 넘어가는 순간, “이건 구현이 어렵다”, “디자인과 다르다”는 피드백과 함께 수많은 수정 요청이 오가는 일은 어쩌면 너무나 익숙한 풍경일지도 모릅니다. 이 간극을 좁히는 것이야말로 프로덕트 개발 팀의 오랜 숙원이었죠. 그런데 최근, 이 간극을 완전히 허물어버릴 만한 대담한 시도가 디자인 툴의 선두 주자인 **피그마(Figma)**에서 이뤄졌습니다. 과연 피그마는 디자인과 개발의 세계를 어떻게 하나로 묶어내려 할까요?
디자인, 코드를 품다: 코드 레이어의 등장 🤯
피그마는 오랫동안 디자인과 코드의 통합을 위해 노력해왔습니다. 작년에는 AI 기반의 프로토타이핑 툴인 ‘피그마 메이크(Figma Make)‘를 선보였고, 클로드 코드(Claude Code) 및 코덱스(Codex)와의 통합을 통해 디자인 핸드오프(handoff) 과정을 개선하려 애썼죠. 하지만 이번 업데이트는 한 차원 다른 접근 방식을 보여줍니다. 바로 **코드 레이어(code layers)**를 협업 캔버스에 직접 추가한 것입니다.
솔직히 말해서, 이 소식을 처음 들었을 때 저는 깜짝 놀랐습니다. 디자인 툴에 코드를 직접 넣는다고? 이게 무슨 의미일까? 핵심은 팀이 레포지토리(repositories)를 클론(clone)하고, 코드에서 디자인 레이어로 흐름(flows)을 추출하여 테스트할 수 있도록 돕는다는 점입니다. 피그마의 최고 제품 책임자(CPO)인 유키 야마시타(Yuhki Yamashita)는 이 코드 레이어가 디자이너, 제품 매니저, 프로그래머가 프로덕션에 투입될 완벽한 코드를 만드는 데 집중하기보다는 아이디어를 빠르게 반복(iterate)하는 데 더 집중하게 만들 것이라고 강조했습니다.
그는 이렇게 말했습니다. “멀티플레이어 캔버스는 코드의 품질에 대해 신경 쓰지 않는 환경이기 때문에 정말 강력하다고 생각합니다. 만약 새로운 방향을 신속하게 탐색하거나 여러 가지를 시도해야 한다면, 이 공간적인 방식(spatial way)으로 그렇게 할 수 있습니다. 우리는 이 기능이 디자이너뿐만 아니라 엔지니어, PM들에게도 다른 행동 양식을 만들어내기를 바랍니다.”
이 부분에서 개인적으로 주목할 점은, 피그마가 코드 레이어를 통해 ‘완벽한 코드’가 아닌 ‘탐색을 위한 코드’의 가치를 역설하고 있다는 것입니다. 전통적으로 개발자들은 깔끔하고 효율적인 코드를 작성하는 데 많은 시간을 할애합니다. 하지만 초기의 아이디어 탐색 단계에서는 때때로 이런 ‘완벽주의’가 발목을 잡을 수 있죠. 피그마는 코드 레이어를 통해 디자이너나 PM들도 개발 환경과 유사한 공간에서 아이디어를 구체화하고, 개발자들은 디자인 툴 안에서 코드 기반의 피드백을 즉시 제공하며 협업의 밀도를 극대화할 수 있게 됩니다. 이는 단순히 디자인-개발 간의 핸드오프 문제를 넘어, 초반부터 개발적 관점의 사고방식을 디자인 프로세스에 자연스럽게 녹여내는 혁신적인 시도라고 생각합니다. 마치 언어가 다른 두 팀이 한 자리에서 같은 언어를 쓰며 대화하는 듯한 변화랄까요?
움직임과 생명력을 불어넣다: 애니메이션 & 3D 지원 🎨
사용자 경험에서 동적인 요소는 그 중요성이 날마다 커지고 있습니다. 미려한 애니메이션과 전환 효과, 그리고 입체적인 3D 요소는 사용자에게 훨씬 몰입감 있고 즐거운 경험을 선사하죠. 하지만 피그마 디자이너들에게 이는 늘 쉽지 않은 작업이었습니다. 기존에는 다른 소프트웨어에서 애니메이션을 만들고, 이를 다시 피그마가 이해할 수 있는 코드로 변환해야 하는 번거로운 과정을 거쳐야 했습니다.
이제는 달라집니다. 피그마는 이번 업데이트를 통해 애니메이션, 전환(transitions), 그리고 **3D 변환(3D transforms)**을 직접 지원합니다. 디자이너들은 이제 외부 툴을 오갈 필요 없이, 피그마 안에서 바로 역동적인 UI 요소를 만들 수 있게 된 것이죠. 게다가 AI의 도움을 받아 이러한 애셋(assets)들을 생성하고, 쉐이더(shader) 효과와 채우기(fills)를 추가하는 것도 가능해졌습니다. 이는 디자인 프로세스의 효율성을 극대화하고, 디자이너들이 더욱 창의적인 아이디어를 제약 없이 구현할 수 있도록 돕는 중요한 발전이라고 할 수 있습니다.
AI, 디자인의 새로운 지평을 열다 🧠✨
피그마의 이번 업데이트에서 가장 눈에 띄는 부분 중 하나는 역시 AI 기능의 대폭 강화입니다. 단순히 이미지를 생성하는 수준을 넘어, 디자인 워크플로우 전반에 걸쳐 AI의 역할이 깊어진 것을 확인할 수 있습니다.
작년에 피그마는 노드 기반 툴인 **위비(Weavy)**를 인수했는데, 위비는 디자이너가 다양한 모델을 통해 워크플로우를 실행하고 그 결과를 비교할 수 있도록 돕는 도구입니다. 올해 말 예정된 업데이트에서는 사용자들이 피그마 내에서 위비 워크플로우를 직접 생성할 수 있게 될 것이라고 합니다. 이는 복잡한 디자인 의사결정 과정에 AI 기반의 데이터와 비교 분석 능력을 더해준다는 점에서 매우 흥미롭습니다.
피그마의 AI 어시스턴트 또한 협업 캔버스에서 더욱 유용해질 수 있도록 새로운 ‘스킬(skills)‘이 추가되었습니다.
- 이제 텍스트 프롬프트를 사용하여 AI 에이전트가 활용할 수 있는 반복 가능한 스킬을 만들 수 있습니다. 예를 들어, 특정 패턴의 UI 요소를 자동으로 생성하거나, 특정 스타일 가이드에 맞춰 텍스트를 정리하는 등의 작업을 AI에 맡길 수 있다는 의미입니다.
- 또한, 노션(Notion), 그라놀라(Granola), 엑셀(Excel), 깃허브(GitHub)와 같은 외부 툴을 연결하거나 파일을 첨부하여 AI 봇에게 작업에 필요한 **더 많은 문맥 정보(context)**를 제공할 수 있게 되었습니다.
이것이 왜 중요할까요? 단순히 ‘똑똑한 AI’를 넘어, 우리 팀의 특성과 프로젝트의 맥락을 이해하는 **‘맞춤형 AI 비서’**를 가질 수 있게 된다는 뜻입니다. 외부 데이터와의 연동은 AI가 보다 정확하고 유의미한 결과물을 내놓을 수 있는 기반이 됩니다. 특정 디자인 시스템의 규칙이나 프로젝트 히스토리를 AI가 학습하고 작업에 반영할 수 있게 되는 것이죠. 개인적으로는 이 부분이 피그마가 단순한 디자인 툴에서 벗어나 ‘지능형 디자인 자동화 플랫폼’으로 진화하고 있음을 명확히 보여주는 지점이라고 생각합니다. 디자인 시스템 관리, 반복적인 컴포넌트 생성, 심지어는 접근성(accessibility) 검사 같은 복잡한 작업까지 AI의 손을 빌릴 수 있게 된다면, 디자이너들은 훨씬 더 본질적인 창작과 문제 해결에 집중할 수 있을 것입니다.
뿐만 아니라, 레이아웃 생성기(layout generators)나 벡터 경로 추적기(vector path tracers)와 같은 사용자 정의 플러그인(custom plug-ins)을 프롬프트만으로 생성하는 기능도 추가됩니다. 이는 코딩 지식이 없어도 필요한 기능을 직접 만들어 사용할 수 있게 함으로써, 피그마의 확장성과 유연성을 극대화하는 동시에 커뮤니티의 잠재력을 폭발시킬 수 있는 기능이라고 할 수 있습니다.
결론적으로, 피그마의 이번 업데이트는 단순히 몇 가지 새로운 기능을 추가하는 것을 넘어, 디자인과 개발의 경계를 허물고 AI의 지능을 워크플로우 깊숙이 통합하려는 대담한 비전을 보여줍니다. 코드 레이어를 통해 개발 프로세스와의 간극을 줄이고, 애니메이션과 3D 지원으로 디자인의 표현력을 강화하며, AI를 통해 개인화된 자동화와 무한한 확장성을 제공하는 것이죠. 앞으로 피그마는 단순한 디자인 툴이 아닌, 프로덕트 개발 팀 전체를 위한 진정한 협업 허브이자 지능형 창작 파트너로서 그 입지를 더욱 공고히 할 것입니다. 기술과 디자인의 융합이 만들어낼 미래가 사뭇 기대됩니다.
출처
- 원문 제목: Figma adds code layers, support for animations, more AI features in new update
- 출처: AI News & Artificial Intelligence | TechCrunch
- 원문 기사 보러가기
