Figma AI에서 프론트엔드 코드로: 개발자가 AI를 통해 제품 인도 속도를 높이는 방법

본론에 들어가기에 앞서 솔직하게 고백하자면, 디자이너들이 "Figma에서 AI가 코드를 생성한다"라고 말할 때 저는 약간 눈을 흘기곤 했습니다. 개발자로서 저는 이전에도 다양한 형태로 그런 약속을 들어왔고, 그것은 대개 절약된 5분당 15분의 정리 작업을 의미했기 때문입니다. 하지만 최근 Figma AI를 실제 프론트엔드 (Frontend) 코드와 연결하는 워크플로 (Workflow)가 눈에 띄게 덜 고통스러워졌으며, 무엇이 실제로 작동하고 무엇이 여전히 대부분 마케팅에 불과한지에 대해 제대로, 꾸밈없이 살펴볼 가치가 있다고 생각합니다.

이 글은 "AI가 프론트엔드 개발자를 대체할 것이다"라는 글이 아닙니다. 오히려 그 반대입니다. 솔직히 말해서, 이 글은 AI가 제품 인도 (Product Delivery) 과정에서 진정으로 마찰을 제거하는 지점이 어디인지, 그리고 여전히 평범한 사람처럼 직접 앉아서 코드를 작성해야 하는 지점이 어디인지에 관한 것입니다.

Figma-to-Code 파이프라인에서 실제로 변화된 점

몇 년 전만 해도, Figma-to-code 도구들은 아무도 건드리고 싶지 않은 마크업 (Markup)을 생성했습니다. div soup, 곳곳에 흩어진 인라인 스타일 (Inline styles), 의미론적 구조 (Semantic structure)의 부재 같은 것들 말이죠. 기술적으로는 디자인을 렌더링 (Rendering)했지만, 이를 유지보수하는 것 자체가 일종의 형벌이었습니다.

현재 세대는 컴포넌트 (Component) 패턴을 인식하는 능력이 의미 있게 향상되었습니다. 만약 디자인 파일에 제대로 구조화된 컴포넌트(정의된 상태를 가진 버튼 변형, 카드, 폼 입력창 등)가 있다면, 생성된 코드는 일회성 스타일이 적용된 div 대신 실제 컴포넌트와 유사한 형태로 나올 가능성이 훨씬 높습니다. 이것은 마법이 아니라, 더 깨끗한 디자인 시스템 (Design system) 입력을 바탕으로 학습된 더 나은 패턴 인식 (Pattern recognition)의 결과일 뿐이지만, 풀 리퀘스트 (Pull request)를 검토하는 입장이 되면 그 실질적인 차이를 즉시 체감할 수 있습니다.

다음은 현재 생성된 버튼 컴포넌트의 모습과 과거의 모습이 대략 어떻게 다른지 보여주는 예시입니다:

// 우리가 이전에 얻었던 결과물
<div style={{padding: '12px 24px', background: '#1a73e8', borderRadius: '8px'}}>
  <span style={{color: 'white', fontSize: '14px'}}>Submit</span
...

여전히 검토가 필요합니다. 실제 코드베이스 컨벤션 (codebase conventions)에 맞춘 조정도 필요합니다. 하지만 이제는 파일을 열자마자 삭제해 버리는 일회용 스캐폴딩 (scaffolding)이 아니라, 진정한 시작점이 될 수 있습니다.

실제 프로젝트에서 실제로 시간을 절약해 주는 부분

솔직히 말해서 시간 절약 효과는 주로 두 가지 영역에서 나타납니다: 초기 스캐폴딩 (scaffolding)과 디자인 토큰 (design-token) 동기화입니다. 디자이너가 깔끔한 Figma 파일과 함께 새로운 기능을 전달할 때, 해당 파일에서 즉시 대략적인 1차 컴포넌트 구조를 생성하는 것은 매번 빈 컴포넌트에서 시작하는 것보다 훨씬 낫습니다. 처음부터 작성하는 것이 아니라 편집하고 수정하는 것이며, 이는 인지적으로 의미 있게 다르고 (그리고 더 빠른) 작업입니다.

디자인 토큰 (Design tokens), 색상, 간격, 타이포그래피 스케일 (typography scales)을 Figma에서 CSS 변수나 Tailwind 설정 (Tailwind config)으로 자동 동기화하는 것 또한, 디자인과 코드 사이의 불일치 (drift)를 끊임없이 유발했던 정말 짜증 나는 수동 단계를 제거해 줍니다. 누군가 Figma에서 브랜드 색상을 업데이트하고 아무에게도 말하는 것을 잊어버리면, 3주 뒤 프로덕션 환경에는 미세하게 다른 두 가지 색상의 파란색이 공존하게 됩니다. AI 지원 토큰 동기화는 이제 이러한 불일치의 상당 부분을 자동으로 잡아내며, 출시 직전 밤 11시에 정확히 그런 종류의 불일치를 디버깅해 본 사람으로서 저는 이를 진심으로 높게 평가합니다.

만약 여러분이 클라이언트 빌드를 위해 협력하는 website development company Ludhiana 팀과 함께 작업하고 있다면, 이러한 자동화된 토큰 파이프라인 (token pipeline)은 이제 있으면 좋은 부가 기능이 아니라 프로젝트 범위 산정 (project scoping) 시 꽤 표준적인 작업이 되어가고 있습니다.

여전히 한계가 있는 부분

복잡한 상호작용 상태 (Complex interactive states)는 여전히 미흡합니다. 조건부 렌더링 로직 (conditional rendering logic), 복잡한 폼 유효성 검사 (form validation), 또는 까다로운 상태 관리 (state management)가 포함된 모든 작업은 구조적으로는 유사하지만 기능적으로는 거의 매번 불완전하게 생성됩니다. 겉보기에는 올바른 컴포넌트를 얻을 수 있지만, 그 뒤에 실제 로직을 연결하려고 시도하는 순간 바로 깨져버립니다.

접근성 (Accessibility) 또한 예외 없이 매번 수동 검토가 필요합니다. 생성된 마크업 (markup)에는 기본적인 ARIA 속성이 포함되기도 하고 포함되지 않기도 하며, 그 일관성이 부족하여 맹목적으로 신뢰할 수 없습니다. AI가 생성한 접근성 속성은 검증해야 할 초안으로 취급해야 하며, 결코 완성된 구현으로 간주해서는 안 됩니다. 스크린 리더 (screen reader) 테스트에는 여전히 사람이 직접 수행하는 과정이 필요합니다.

그리고 솔직히 말해서, 진정으로 커스텀된 상호작용 패턴, 비표준 캐러셀 (carousel), 기묘한 드래그 앤 드롭 (drag-and-drop) 흐름 등 일반적인 컴포넌트 패턴을 벗어나는 모든 것은 AI 도구들이 대부분 추측에 의존하며, 그 추측은 종종 틀립니다. 그 틀린 부분을 디버깅하는 데 걸리는 시간이 처음부터 직접 작성하는 것보다 더 오래 걸리는 방식으로 틀리곤 합니다.

현재 팀들이 실제로 활용하고 있는 실질적인 워크플로우 (Workflow)

최근 제가 본 프로젝트들에서 잘 작동하고 있는 방식은 대략 다음과 같습니다: 디자이너가 Figma에서 깔끔하고 이름이 잘 지정된 컴포넌트를 구축합니다 (이 부분은 사람들이 생각하는 것보다 훨씬 중요합니다. 지저분한 Figma 파일은 지저분한 생성 코드를 만들어내며, 여기서 'Garbage in, garbage out' 원칙은 매우 강력하게 적용됩니다). 해당 파일에서 즉시 1차 코드 스캐폴드 (scaffold)를 생성합니다. 개발자는 레이아웃과 스타일링은 대부분 깔끔하게 변환되므로 그대로 둔 채, 실제 로직이 필요한 부분만 검토하고 다시 작성합니다. 생성 도구가 무엇을 처리했다고 주장하든 상관없이 접근성 체크는 수동으로 실행합니다.

고객 제품을 구축하는 Ludhiana의 UI UX 디자인 회사와 협업하는 팀들은 점차 다운스트림 코드 생성 (downstream code generation)을 염두에 두고 Figma 파일을 구조화하고 있습니다. 즉, 적절한 컴포넌트 명명 (component naming), 일관된 오토 레이아웃 (auto-layout) 사용, 정의된 베리언트 (variants) 등을 적용하고 있는데, 이는 생성된 코드가 개발 측면에서 얼마나 사용 가능한지에 직접적인 영향을 미치기 때문입니다. 이는 디자인 측면에서의 작은 프로세스 변화이지만, 엔지니어링 측면에서 눈에 띄는 보상을 가져다줍니다.

이 워크플로우를 실제로 도입해야 할까요?

만약 팀이 이미 준수한 Figma 파일 위생 (file hygiene), 컴포넌트, 베리언트, 일관된 명명 규칙을 갖추고 있다면, 네, 우선 리스크가 낮은 기능부터 시범적으로 도입해 볼 가치가 있습니다. 만약 Figma 파일이 그룹화되지 않은 레이어와 일회성 스타일로 엉망이라면 (비난하려는 것은 아닙니다, 우리 모두 그런 파일을 물려받은 적이 있으니까요), 그것부터 먼저 해결하십시오. AI 도구는 디자인 프로세스에 이미 존재하는 규율을 증폭시킬 뿐, 존재하지 않던 규율을 만들어내지는 않습니다.

최근 제가 대화한 Ludhiana의 UI UX 디자인 스튜디오는 이를 잘 표현했습니다. AI는 그들의 프로세스를 크게 바꾼 것이 아니라, 엉성한 프로세스의 비용을 더 빠르고 명확하게 드러나게 만들었습니다. 관점에 따라 다르겠지만, 이는 코드 생성 그 자체보다, 애초에 더 깨끗한 디자인 파일을 만들도록 강제하는 기능 (forcing function)으로서 팀에 가장 유용한 역할을 했을지도 모릅니다.

이 워크플로우가 일으킨 실제 버그 (그리고 나에게 가르쳐준 것)

유용한 사례라고 생각하기에 짧은 실전 경험담을 공유합니다. 최근 프로젝트에서 가격 카드 (pricing card)를 위해 생성된 컴포넌트가 시각적으로는 완벽해 보였지만, 미묘한 버그가 있었습니다. "가장 인기 있는" 배지가 prop에 따라 조건부 렌더링 (conditionally rendering)되는 대신, 모든 카드에 보이도록 하드코딩 (hard coded)되어 있었던 것입니다. 시각적으로는 모든 디자인 리뷰를 통과했습니다. 왜냐하면, 배지가 활성화된 단 하나의 카드만 보여주는 Figma 파일과 정확히 일치했기 때문입니다.

QA 과정에서 이를 발견하는 데 약 20분이 걸렸고, 수정하는 데 또 10분이 걸렸습니다. 재앙 수준은 아니었지만, 유용한 교훈을 남겼습니다. AI가 생성한 코드(AI-generated code)는 당신이 논리적으로 실제로 필요로 하는 것이 아니라, 눈에 보이는 것과 일치한다는 점입니다. 디자인 파일은 정적 상태(static state)를 보여주었습니다. 하지만 코드에는 동적 동작(dynamic behavior)이 필요했습니다. 이 둘은 서로 다른 문제이며, 도구는 첫 번째 문제만을 설득력 있게 해결했을 뿐입니다.

시각적 충실도(visual fidelity)와 기능적 정확성(functional correctness) 사이의 이러한 간극은, 단순한 프레젠테이션 컴포넌트(presentational components) 이상의 작업에 이 워크플로우(workflow)를 의존하기 전에 내재화해야 할 아마도 가장 중요한 사항일 것입니다. 생성된 모든 로직(logic) 조각은 당신이 직접 조건부 경로(conditional paths)를 추적해 보기 전까지는 검증되지 않은 것으로 취급하십시오.

이것이 프로젝트 일정 및 고객 기대치에 미치는 영향

클라이언트 업무를 관리하고 있다면 주의 깊게 살펴볼 점이 하나 있습니다. 이 도구의 도입을 모든 항목에 대해 일률적인 퍼센트 감소로 간주하여 일정 추정치(timeline estimates)에 반영하지 마십시오. 시간 절약 효과는 실재하지만 불규칙합니다. 스캐폴딩(scaffolding)과 스타일링(styling)에는 효과가 크지만, 로직이 중심이 되는 기능(logic-heavy features)에는 효과가 미미하거나 거의 없습니다. 복잡한 상호작용(interactions)이 80%를 차지하는 프로젝트는 단순한 프레젠테이션 UI가 80%인 프로젝트만큼의 속도 향상을 경험하지 못할 것입니다.

저는 팀들이 단순한 컴포넌트에서의 초기 성과를 바탕으로 프로젝트 전체의 빠른 인도를 약속했다가, 더 어렵고 로직이 집중된 화면들이 동일한 낙관적인 일정에 부딪히며 압박을 받는 것을 보았습니다. 클라이언트 미팅에서 제안이 아무리 매력적으로 들리더라도, 일괄적인 배수(multiplier)를 가정하기보다는 기능별로 범위를 산정(scoping)하는 것이 가치가 있습니다.

website designing company in Ludhiana가 추천하거나 파트너십을 맺을 수 있는 에이전시 및 프리랜서의 경우, 검증되지 않은 속도 향상을 원래 견적에 포함시켜 전체 빌드 과정에서 고르게 나타나기를 기대하기보다는, 로직이 집중된 부분에 대해서는 보수적으로 견적을 내고 AI 보조를 통한 절감 효과는 더 단순한 화면에서 기분 좋은 깜짝 선물처럼 나타나도록 하는 것이 아마도 더 현명할 것입니다.

어쨌든, 제가 보기에는 상황이 이렇습니다. 혁명적인 것은 아니지만, 디자인 파일이 AI에 제대로 입력될 수 있을 만큼 충분히 깔끔하다면 도구 상자에 추가할 만한 진정으로 유용한 기능입니다. 다른 분들도 같은 패턴을 보고 계시는지, 아니면 여러분의 스택이 제가 겪은 것보다 로직 중심의 작업(logic-heavy stuff)을 더 잘 처리하고 있는지 궁금합니다.