techlist.io
KREN
figma

코드 생성이 (진짜) (새 탭에서 열림)

figmadesign-systemsdesign-to-codecomponent-librarydeveloper-toolscode-snippetscodegenai-code-generation

코드 생성(codegen)은 디자인-개발 과정을 완전히 자동화하기보다, 개발자가 더 빠르고 정확하게 작업하도록 돕는 확장 도구로 활용할 때 가장 효과적이다. 특히 AI 코드 생성 결과는 정확성과 유용성에 한계가 있으므로, 개발자를 대체하기보다 적절한 컴포넌트·속성·코드 패턴을 제안해 초기 작업을 앞당기는 방향이 현실적이다. Figma는 이를 “0에서 1”이 아닌 “0에서 0.5”로 빠르게 이동시키는 도구로 설명한다.

코드 생성의 범위와 현실

  • 코드 생성은 정해진 규칙이나 명세를 바탕으로 코드를 자동 생성하는 과정이다.
  • 범위가 넓으며 다음과 같은 형태를 포함한다.
    • IDE의 자동 완성 기능
    • 반복적인 코드 패턴을 위한 스니펫과 템플릿
    • Bubble 같은 비주얼 프로그래밍·노코드 도구
    • GitHub Copilot, Replit Ghostwriter 같은 AI 기반 코드 생성 도구
  • Stack Overflow 2023 조사에서 개발자의 82%가 AI 도구를 사용해 코드를 작성한다고 답했다.
  • 반면 AI 도구의 정확성을 매우 신뢰한다고 답한 비율은 3%에 불과했다.
  • 따라서 코드가 생성된다는 사실보다, 실제 프로젝트의 프레임워크와 코드베이스에 맞고 개발자가 유용하게 사용할 수 있는지가 더 중요하다.

디자인을 코드로 그대로 변환하기 어려운 이유

  • Figma는 Dev Mode를 처음 개발할 때 디자인을 코드로 자동 변환하는 것을 목표로 했다.
  • 초기 결과는 가능성을 보였지만, 다양한 개발자의 요구와 프레임워크를 모두 만족하는 코드를 만들기는 어려웠다.
  • 자동 생성된 코드가 문법적으로 맞더라도 팀의 컴포넌트 구조, 네이밍 규칙, 상태 관리 방식과 맞지 않으면 실무에서는 유용하지 않을 수 있다.
  • 이에 따라 Figma는 디자인을 코드로 직역하는 방식보다, 디자인과 개발 사이의 해석과 협업을 보조하는 방식으로 방향을 전환했다.

개발자를 대체하는 도구가 아닌 지능 증폭 도구

  • 코드 생성은 개발자를 대신하는 자동화 시스템보다 개발자의 능력을 확장하는 도구로 보는 편이 적절하다.
  • 글은 이를 **지능 증폭(Intelligence Amplification, IA)**으로 설명한다.
    • 복잡한 문제를 이해하고
    • 필요한 정보를 빠르게 찾으며
    • 해결책을 도출하는 인간의 능력을 강화하는 접근이다.
  • AI가 기술이 주도하는 미래를 상징한다면, IA는 사람이 주도권을 유지한 채 기술의 도움을 받는 방식이다.
  • 개발자는 최종 구조와 구현 방식을 결정하고, codegen은 탐색·반복·초기 작성에 드는 시간을 줄인다.

“0에서 0.5”까지 빠르게 이동하기

  • 디자인 시스템과 컴포넌트 라이브러리를 사용하는 제품에서는 codegen이 핸드오프 과정의 추측을 줄일 수 있다.
  • 디자인 요소에 대응하는 컴포넌트 이름이나 속성 값을 제안해 개발자가 어떤 도구를 사용할지 빠르게 판단하도록 돕는다.
  • 디자인 시스템을 공구 상자에 비유하면, codegen은 상황에 맞는 공구와 사용법을 추천하는 역할을 한다.
  • 완성된 코드를 제공하기보다는 빈 화면에서 작업을 시작할 수 있는 출발점을 만들어 준다.
  • 즉, “0에서 1”까지 완성하는 자동화보다 “0에서 0.5”까지 빠르게 진입하게 하는 보조 기능에 더 큰 가치가 있다.

팀과 코드베이스에 맞춘 구체적인 활용

  • codegen의 효과는 일반적인 자동화 도구보다 특정 팀·회사·워크플로에 맞게 적용할 때 커진다.
  • 디자인 시스템과 컴포넌트 라이브러리가 이미 Figma에 있다면 별도의 완전 자동화 디자인-코드 변환 앱이 반드시 필요하지 않다.
  • 대신 다음 기능을 활용하는 편이 실용적이다.
    • 디자인 토큰과 변수 참조
    • 컴포넌트 및 속성 문서 확인
    • 팀 전용 codegen 플러그인 구축
    • 프로젝트 규칙에 맞춘 사용자 정의 코드 스니펫 생성
  • 이러한 정보와 힌트는 개발자가 디자인을 빠르게 해석하고 직접 코드를 작성하도록 돕는다.

실용적인 결론

codegen은 생성된 코드를 그대로 채택하는 자동화 수단이 아니라, 팀의 디자인 시스템과 개발 규칙을 이해한 상태에서 적절한 컴포넌트와 구현 방향을 제안하는 보조 수단으로 사용하는 것이 좋다. 특히 토큰, 문서, 컴포넌트 메타데이터, 사용자 정의 스니펫을 코드베이스와 연결하면 개발자의 판단을 유지하면서 반복 작업과 초기 탐색 시간을 크게 줄일 수 있다.