디자인과 코딩의 경계가 점점 흐려지고 있습니다. 인공지능의 급속한 발전으로 디자이너들은 코드를 직접 작성하지 않고도 인터랙티브한 웹사이트를 만들 수 있게 되었고, 개발자들은 더 직관적인 방식으로 코드를 작성하게 되었습니다. 최근 Figma와 Zed가 발표한 새로운 AI 기능들은 이러한 변화를 더욱 가속화하고 있습니다. 이 글에서는 Figma의 새로운 AI 도구들과 Zed 코드 에디터의 특징, 그리고 이들이 디자인-코딩 시장에 미치는 영향을 살펴보겠습니다.
Figma의 새로운 AI 기능들
이미지 출처: Figma (via TechCrunch)
Figma는 5월 7일, Config 2025 행사에서 디자인과 개발 프로세스를 혁신적으로 변화시킬 수 있는 새로운 AI 기반 도구들을 대거 발표했습니다. 이 중 가장 주목할만한 기능은 ‘Figma Make’와 ‘Figma Sites’입니다.
Figma Make: 자연어로 인터랙티브 프로토타입 제작
Figma Make는 정적인 디자인을 자연어 프롬프트만으로 인터랙티브한 프로토타입으로 변환할 수 있는 도구입니다. 디자이너가 “이 버튼이 클릭되면 애니메이션을 실행시켜” 또는 “이 요소가 스크롤에 반응하도록 해줘”와 같은 간단한 명령을 내리면, AI가 이를 실행 가능한 코드로 변환합니다.
Figma Make는 Anthropic의 Claude 3.7 Sonnet 모델을 기반으로 작동하며, 향후 다른 모델들도 지원할 예정입니다. 이 도구는 단순한 애니메이션과 인터랙션뿐만 아니라 동적 데이터 통합, 반응형 레이아웃 조정 등의 기능도 제공합니다. 또한 디자이너, 제품 관리자, 개발자가 실시간으로 협업할 수 있어 구조와 정확성을 유지하면서 작업할 수 있습니다.
Figma Sites: 프로토타입에서 웹사이트로
이미지 출처: Figma (via TechCrunch)
Figma Sites는 프로토타입에서 직접 웹사이트를 배포할 수 있게 해주는 도구입니다. Figma Make와 통합되어 “디자인에서 코드 생성” 버튼 클릭 한 번으로 프로덕션 수준의 인터페이스를 만들 수 있습니다. 곧 출시될 CMS 지원 기능을 통해 콘텐츠 관리까지 가능해질 예정입니다.
이 도구는 전환, 애니메이션, 스크롤 효과를 추가하면서 웹사이트를 반응형으로 만들 수 있습니다. 또한 블로그 포스트를 직접 생성할 수 있는 기능도 포함되어 있어, 사이트 디자인 내에서 포스트를 편집하고 썸네일이나 슬러그와 같은 기타 자산을 관리할 수 있습니다.
기타 새로운 기능들
Figma는 이 외에도 여러 새로운 기능들을 발표했습니다:
- Grid: Figma의 Auto layout 시스템에 실시간 반응형 동작과 세밀한 레이아웃 제어 기능을 추가하여 중첩된 프레임이나 임시 방편 없이도 복잡한 레이아웃을 만들 수 있습니다.
- Figma Draw: 고급 일러스트레이션 도구로, 쉐이프 빌더, 패스 위의 텍스트, 노이즈 효과 등을 제공하며 구조적인 디자인과 표현적인 디자인 사이의 간격을 좁힙니다.
이미지 출처: Figma (via TechCrunch)
- Figma Buzz: 브랜드 및 마케팅 팀을 위한 에셋 생성, 템플릿, 대규모 콘텐츠 관리를 위한 전용 작업 공간입니다. 디자이너가 만든 브랜드별 디자인 템플릿을 마케팅 담당자가 쉽게 활용할 수 있고, AI를 사용해 이미지를 생성하거나 배경을 변경할 수도 있습니다.
Zed 코드 에디터의 차별화 전략
이미지 출처: Zed
Figma가 디자인 도구에 AI를 접목시켜 혁신을 이루는 동안, 코드 에디터 시장에서도 비슷한 변화가 일어나고 있습니다. 그 중심에는 Zed가 있습니다.
VS Code 포크가 아닌 Rust 기반 오픈소스 접근
Zed는 Cursor나 Windsurf 같은 AI 코딩 도구들과 달리 VS Code의 포크가 아닌 완전히 새로운 코드 에디터입니다. Rust 언어로 구축되어 매우 빠른 성능을 제공하는 것이 특징입니다. 특히 최근 Zed는 자신들을 “가장 빠른 AI 코드 에디터”라고 주장하며 새로운 Agentic Editor 기능을 출시했습니다.
Agentic Editor 기능과 속도 우위
Zed의 Agentic Editor는 오픈소스 AI Agent Panel을 기반으로 하며, 사용자가 설정이나 인덱싱 없이도 코드베이스 전체에 걸쳐 변경을 지시할 수 있게 해줍니다. AI 도구는 기본적으로 로컬에서 실행되며, 사용자가 명시적으로 선택하지 않는 한 대화를 저장하지 않습니다. 또한 각 세션마다 Claude나 Gemini와 같은 모델 중 어떤 것을 사용할지 선택할 수 있습니다.
Agentic Editor의 주요 기능들은 다음과 같습니다:
- 자연스러운 작업 위임: 에이전트와 채팅을 통해 프로젝트 전체의 소스 코드를 탐색하고 수정할 수 있습니다.
- 자동 컨텍스트 검색: 에이전트가 필요한 정보를 스스로 찾아 컨텍스트를 파악합니다.
- 실시간 협업: 에이전트가 코드베이스를 탐색할 때 그 위치를 실시간으로 추적할 수 있습니다.
- 손쉬운 변경 검토: 에이전트의 작업을 완전히 편집 가능한 통합 차이점으로 검토할 수 있습니다.
- 백그라운드 작업: 에이전트가 백그라운드에서 작업하고 완료되거나 입력이 필요할 때 알림을 받을 수 있습니다.
완전한 통제를 선호하는 개발자를 위해 Zed는 Ollama를 통한 커스텀 모델을 지원하고, 프로필을 통해 에이전트의 권한을 제한하거나 확장할 수 있게 해줍니다.
사용자들의 반응과 평가
Composio의 기술 스태프 멤버인 Siddharth Balyan은 “Zed는 VS Code 포크의 무거움 없이 매우 빠르고 가볍습니다. 특히 Mac에서 Cursor로 큰 파일을 편집할 때 느리다고 느꼈는데, Zed에서는 그런 문제가 없었습니다.”라고 말했습니다.
또한 X(구 트위터)의 한 사용자는 “진지하게, 여러분이 Zed를 사용하지 않는다면 정말 놓치고 있는 겁니다. 깔끔하고, 빠르고, 가볍고, 시각적으로 매력적입니다. VS Code가 좋은 제품 관리자를 두고 범위를 단단히 고정했다면 이렇게 됐을 것입니다.”라고 평가했습니다.
Pinata의 개발자 관계 책임자인 Steven Simkins는 Neovim에서 Zed로 전환한 이유로 “Zed를 사용하면서 가장 두드러지게 느낀 점은 ‘모든 것이 그냥 작동한다’는 것”이라고 설명했습니다. 그는 또한 Zed의 내장 Vim 모드, 반응형 UI, 통합 언어 서버 프로토콜(LSP)이 마음에 든다고 강조했습니다.
한계점과 성장 가능성
그러나 Zed에는 일부 한계점도 있습니다. UserJot의 창립자 Shayan Taslim은 “Zed는 지금 AI 물결에 뛰어들 큰 기회가 있습니다. 훌륭한 제품이고, 사용하기 좋으며, 저 밖의 모든 VS Code 포크들과 경쟁할 모든 잠재력을 가지고 있습니다. 하지만 매번 시도할 때마다 AI 기능에 좌절하고 Cursor로 돌아갑니다.”라고 말했습니다.
또한 일부 사용자들은 자동 완성 기능이 유료 구독 뒤에 숨겨져 있다는 점을 문제로 지적했습니다. X의 한 사용자는 “Zed가 매월 많은 비용을 지불하지 않으면 어떤 종류의 자동 완성도 제거했습니다.”라고 불만을 토로했습니다.
그럼에도 불구하고 Zed는 VS Code를 복제하려 하지 않고 독자적인 접근 방식을 취하기 때문에 코드 에디터 시장에서 흥미로운 존재로 남아 있습니다.
AI 통합 디자인-코딩 도구의 미래
시장 경쟁 구도 변화
Figma의 새로운 AI 도구들과 Zed의 Agentic Editor는 디자인과 코딩 도구 시장의 경쟁 구도를 크게 변화시키고 있습니다. Figma는 이제 단순한 디자인 도구를 넘어 웹사이트 생성과 프로토타이핑, 마케팅 자산 제작까지 영역을 확장하며 WordPress, Wix, Hostinger, Canva, Adobe 등과 경쟁하게 되었습니다.
이는 작년에 Canva가 Canva Code를 통해 디자인 내에서 인터랙티브한 경험을 만들 수 있는 기능을 출시한 것과 맥을 같이합니다. 시장 리더들이 모두 AI를 통해 디자인과 코딩 사이의 간격을 좁히려는 노력을 기울이고 있는 것입니다.
한편, 코드 에디터 시장에서는 VS Code와 그 포크들이 여전히 지배적이지만, Zed와 같은 새로운 접근법이 출현하면서 다양성이 증가하고 있습니다. 특히 AI 통합이 더욱 중요해지면서 에디터의 속도와 효율성, 프라이버시 등이 중요한 차별점으로 부각되고 있습니다.
디자이너와 개발자 워크플로우의 통합 가능성
Figma Make와 Sites는 디자이너가 개발자의 도움 없이도 인터랙티브한 프로토타입과 실제 웹사이트를 만들 수 있게 함으로써 전통적인 디자인-개발 워크플로우를 크게 변화시킬 가능성이 있습니다. 마찬가지로, Zed와 같은 AI 코드 에디터는 개발자가 코드의 구조와 논리에 더 집중할 수 있게 하여 생산성을 높일 수 있습니다.
이러한 도구들은 디자이너와 개발자 사이의, 그리고 디자인과 개발 단계 사이의 전환을 더 원활하게 만들어, 궁극적으로는 더 빠르고 효율적인 제품 개발 사이클을 가능하게 할 것입니다.
AI 기반 노코드/로코드 솔루션으로의 발전 방향
Figma Make와 Sites는 본질적으로 노코드/로코드 솔루션의 특성을 가지고 있으며, 이는 앞으로의 발전 방향을 시사합니다. AI의 발전으로 코드 작성이 점점 더 추상화되어 더 많은 사람들이 복잡한 인터랙티브 어플리케이션을 만들 수 있게 될 것입니다.
그러나 이것이 개발자의 역할이 사라진다는 의미는 아닙니다. 오히려 더 복잡하고 특화된 문제 해결에 집중할 수 있게 되면서, AI 도구를 효과적으로 활용하고 그 결과물을 최적화하는 역할이 더욱 중요해질 것입니다.
결론
Figma의 새로운 AI 도구들과 Zed의 혁신적인 접근법은 디자인과 코딩의 경계가 점점 허물어지고 있음을 보여줍니다. 이러한 변화는 디자이너, 개발자, 그리고 제품 팀 전체의 작업 방식을 근본적으로 변화시킬 잠재력을 가지고 있습니다.
AI의 발전으로 인해 디자인과 코딩 도구는 더욱 직관적이고 접근 가능해지고 있으며, 이는 더 많은 사람들이 디지털 제품을 만들고 혁신할 수 있게 한다는 점에서 매우 긍정적입니다. 동시에, 이러한 도구들의 효과적인 활용을 위해서는 여전히 깊은 전문 지식과 경험이 필요하다는 점을 잊지 말아야 합니다.
앞으로의 발전을 지켜보면서, 우리는 이러한 도구들이 어떻게 디지털 제품 개발 과정을 더욱 민주화하고 혁신적으로 만들어갈지 주목해야 할 것입니다.
Comments