Webflow AI 코드 컴포넌트 훑어보면서 든 생각
Webflow가 AI로 React 컴포넌트를 만드는 기능을 발표했다. App Gen이 사라지고 재사용 컴포넌트 중심으로 바뀐 이유를 공부해봤다.
Webflow 블로그에서 AI 코드 컴포넌트 기능 발표가 있었다. 처음 제목만 봤을 땐 비슷한 걸 어디서 본 것 같아서 별로 눈에 안 들어왔는데, 읽다 보니 App Gen이라는 기능을 공식적으로 접는다는 얘기가 나왔다. 그 이유가 좀 흥미로워서 더 읽어봤다.
App Gen은 Webflow 캔버스 안에서 프롬프트 하나로 간단한 앱을 만들어주는 기능이었다. 이번에 개발이 종료되고 Site Settings 안쪽으로 밀어넣어졌다. 그 자리를 “AI 코드 컴포넌트”가 채우는 구조였다.
1️⃣ 이게 뭐냐?
원하는 컴포넌트를 텍스트로 설명하면 AI가 React 컴포넌트를 만들어주는 기능이다. pricing calculator나 on-page quiz, search filter 같은 식으로 입력하면 Webflow 캔버스 위에 올릴 수 있는 형태로 생성된다.
그냥 코드 생성에 그치지 않는다. 사이트의 폰트, 색상, 스페이싱을 자동으로 읽어서 브랜드 톤에 맞게 생성한다고 한다. 생성 후에는 AI와 계속 대화하며 수정하거나, 코드 에디터로 직접 편집하는 것도 가능하다. Shared Libraries를 통해 여러 사이트에서 재사용하는 것도 된다고 한다.
App Gen이 사라진 이유는 발표에서 직접 나왔다. 사용자들이 일회성 앱보다 재사용 가능한 컴포넌트를 원했다는 것이다. 만들어두고 계속 쓸 수 있는 부품이 필요했다는 거다.
👉🏻 일회성 생성에서 재사용 컴포넌트 중심으로 방향이 달라진 셈이다.
2️⃣ 내가 든 생각
디자이너 입장에서 가장 흥미로웠던 건 사이트 컨텍스트를 자동으로 읽는다는 부분이었다. 보통 AI가 만든 UI 결과물은 브랜드 톤이 따로 놀아서 손을 또 봐야 했는데, 기존 스타일을 읽어서 맞춰준다면 그 간극이 좀 좁혀질 수도 있겠다 싶었다. 물론 실제로 어느 정도인지는 써봐야 알겠지만.
💡 여기서 드는 질문: 브랜드 컨텍스트를 AI가 읽어서 컴포넌트를 만들어준다면, 디자이너는 어느 지점부터 손을 대야 할까?
프론트엔드를 공부하는 입장에서는 다른 부분이 걸렸다. Webflow가 굳이 “코드 컴포넌트”라는 이름을 쓴다는 게 눈에 들어왔다. 그냥 UI 블록이 아니라 React 컴포넌트를 만들겠다는 건데, Webflow의 사용자층이 코드를 안 쓰는 쪽에 가까웠다는 걸 생각하면 방향이 꽤 달라진 것 같다.
Shared Libraries로 여러 사이트에서 재사용한다는 것도 인상적이었다. 코드를 직접 짜지 않아도, 재사용 가능한 부품 단위로 생각하는 방식이 자연스럽게 스며드는 구조인 것 같아서.
3️⃣ 앞으로 어떻게 쓸까?
지금 당장 쓸 상황은 아니지만, 인터랙티브한 UI 요소를 빠르게 테스트하고 싶을 때 써볼 만하겠다는 생각은 들었다. 특히 브랜드 색상이 명확한 사이트에서 결과물이 어떻게 나오는지 궁금하다.
코드 에디터로도 수정이 된다고 하니, AI가 생성한 React 코드를 직접 읽으면서 공부하는 방식으로도 써볼 수 있을 것 같다.
⭐️ 마지막으로, 프론트엔드를 공부하며 느낀 점
정리해보니 이 기능에서 중요한 건 “AI가 코드를 만들어준다”라기보다 “재사용 가능한 부품을 어떻게 구성할 것인가”에 가까운 일이었다.
App Gen이 사라진 이유도, 브랜드 컨텍스트를 읽는 것도, Shared Libraries도 — 전부 한 번 쓰고 버리는 게 아닌 계속 쓸 수 있는 부품을 만드는 방향이었다. 코드를 직접 짜든 프롬프트로 만들든, 좋은 컴포넌트를 만드는 기준 자체는 결국 비슷한 것 같다는 인상이었다.