AI 디자인 툴의 등장이 FrontEnd 개발에 미치는 영향
안녕하세요. AiNEWT에서 프론트엔드 개발을 담당하고 있는 유상훈 매니저 입니다.
최근 발표된 2025 Google I/O에서 공개된 Stitch는 텍스트 프롬프트나 레퍼런스 이미지만으로 UI 디자인과 프론트엔드 코드를 불과 수 초에서 수 분 안에 생성하는 것이 가능한 솔루션으로 기존의 개발자가 일일이 디자인 요소를 그리고 코드로 변환하던 작업 과정을 획기적으로 생략해 주는 것이 가능하여 향후 프론트엔드 개발에 많은 영향을 미칠 것으로 전망되고 있습니다. Stitch, 구글이 만든 UI 디자인 도구
이 외에도 Creatie나 Figma AI 등 인공지능 기술이 적용된 다양한 디자인 툴들이 등장하고 있으며, Cursor와 Windsurf 같은 개발 환경에 통합된 AI 코파일럿 도구들도 쏟아지고 있습니다. 빠르게 융합되고 있는 인공지능 기술로 '바이브 코딩'이라는 신조어도 등장하고 있는 상황에서 본 이슈를 통해 인공지능 기술의 등장과 발전에서 ‘프론트엔드 개발자는 어떻게 변화할 것인가’에 대해서 다뤄보고자 합니다.
목차
1. AI 디자인 툴
1.1 Stitch
1.2 Creatie
2. 프론트엔드 개발자의 변화
1. AI 디자인 툴
프론트엔드 개발은 전통적으로 디자이너와의 긴밀한 협업을 통해 이루어지며, UX/UI 구현은 양측의 협업 산물이었죠. 생성형 AI의 부상으로 이제 디자이너의 일부 역할을 AI가 보조 또는 부분 대체하게 되면서, 디자이너와 개발자의 협업 방식에도 변화가 나타나고 있습니다. 가장 두드러진 사례는 앞서 언급한 생성형 UI 도구들입니다.
1.1 Stitch
Google Stitch(구 Galileo AI)는 본질적으로 “AI 디자이너” 처럼 동작하여, 사람 디자이너가 초기 와이어프레임을 그리거나 스타일 가이드를 만드는 일을 도와줍니다. Stitch는 제품 디자이너와 엔지니어가 함께 고안한 프로젝트로, 디자이너의 창의성과 개발자의 기술적 요구를 동시에 만족시키는 워크플로우를 제공하는 것을 목표로 합니다. 간단한 텍스트 설명이나 이미지 입력만으로 사용자 인터페이스를 설계하고, 그 결과를 실제 프론트엔드 코드로 전환할 수 있는 AI 기반 디자인 도구입니다.
5월 20일 Google I/O를 통해 첫 선을 보인 이 도구는 Gemini 2.5 Pro 모델의 멀티모달 능력을 활용해 디자인과 개발의 간극을 좁히는 데 집중하고 있습니다. Gemini는 구글이 자체 개발한 대규모 생성형 AI 모델로, 텍스트와 이미지까지 이해 및 생성이 가능한 멀티모달(Multimodal) 역량을 갖췄습니다. Gemini가 사용자의 자연어 요구사항을 이해하거나 업로드한 와이어프레임을 시각적으로 분석합니다. 이렇게 한 가지 엔진이 언어와 이미지를 모두 다룰 수 있으므로, Stitch는 하나의 플랫폼 안에서 모두 아우르는 작업이 가능합니다.
사용자가 단순히 "Muirwoods 국립공원에 있는 organic food를 제공하는 northern California의 호텔 페이지" 정도의 문장을 입력하면, Stitch가 그 요구에 맞는 UI 레이아웃을 몇 초 만에 렌더링해 줍니다. (현재 Stitch는 실험 단계!)
수 초만에 생성된 화면
그리고, 코드(html)로 바로 복사해서 사용해 볼 수 있고, Figma로 복사 또한 가능합니다.
Figma에서 확인해보면 레이아웃이 세분화 되어있다
Figma로 복사했을 때 놀랐던 점은 단순히 통째로 이미지가 Figma에 들어간것이 아닌, 모두 수정가능한 객체로써 Figma에 삽입됐다는 점 입니다. 예를 들면, 저 각 객체들의 CSS 속성을 가져올 수도 있고, 화면 가운데에 있는 'Coastral Retreat' 글씨의 폰트를 수정할 수도 있습니다. 이러한 점에서 디자이너 입장에서는 AI가 제안하는 초기 시안들을 빠르게 검토 및 선택함으로써 아이데이션 속도가 크게 빨라질 것 같네요.
그리고, 이렇게 만들어진 디자인이 한 가지가 아니라 여러 가지 변형된 시안으로 제공될 수 있다는 점인데, Google에 따르면 Stitch는 하나의 인터페이스에 대해 다양한 스타일과 레이아웃의 다중 시안(variants)을 생성하여 창의적인 실험을 돕는다고 합니다.
페이지의 테마를 손쉽게 수정할 수 있다
위 이미지를 보면, 버튼 클릭 몇 번으로 브랜드 컬러, border-radius값, 라이트/다크 테마 전환 등 전체 테마를 쉽게 바꿀 수 있습니다. 여러 레이아웃, 컴포넌트, 스타일을 실험하며 다양한 디자인을 생성할 수 있습니다. UI 디자인의 반복적 특성을 반영해 여러 아이디어 테스트가 가능하다는 점이 가장 큰 특징이라고 생각합니다.
구글I/O에서는 디자인 일부를 캡처해 수정사항을 캡션으로 달아놓으면, Gemini가 맥락을 이해하여 실제로 수정해주는 기능을 곧 도입한다고 합니다. 이러한 기능은 디자이너와 팀원이 코멘트를 주고받으며 수정하는 작업을 AI와 하는 것처럼 느끼도록 할 수 있겠네요.
Stitch의 모토는 "From idea to app" 입니다. 아이디어를 가진 사람 누구나 실현할 수 있고, 제품화할 수 있는 미래를 지향하고 있습니다. Stitch를 통해 디자인 전문 지식이 없어도 누구나 UI를 만들 수 있게 되었듯이, 구글은 웹/앱 개발의 다른 영역에도 AI 서비스를 확장시키고 있습니다. 이러한 행보는 결국 디자인, 프론트엔드, 백엔드 개발의 전체 사이클을 AI를 통해 자동화할 수 있는 통합된 환경을 만들 것이라는 구글의 방향성 또한 돋보입니다.
참고 자료
1.2 Creatie
구글의 Stitch와 더불어 AI 디자인 툴로는 'Creatie'가 있습니다. Creatie는 기존의 디자인 툴에 AI를 접목시킨 느낌이 강합니다.
Creatie AI가 가장 뛰어난 UI 디자인 도구인 이유
figma의 시대는 지났다. 새로운 UI/UX 패러다임
Creatie에 대해 찾아보면, 'Figma의 시대가 끝났다.' '가장 뛰어난 디자인 도구' 등의 찬사가 즐비합니다. 무료버전으로 잠깐 사용해보니, 왜 Figma의 시대가 끝났다고 하는지 알 것 같기도 하네요.
처음 사용했을 때 느낀점은 Cursor와 비슷했는데, Cursor도 VSC기반으로 만들어 사용자 설정이나 extension같은 것을 그대로 계승받을 수 있습니다. 마찬가지로 Figma를 계승한 느낌인데요, 기존에 있던 Figma프로젝트를 Creatie로 이전할 수 있고(사람들에게서 가장 칭찬받는 부분), 사용하는 방법이나 UI같은 부분이 거의 Figma와 유사합니다. 사람들이 표절을 걱정할만큼 유사하기때문에, 기존 Figma를 사용하던 디자이너들은 어렵지 않게 적응할 수 있을 것으로 보입니다. Cursor의 경우처럼 Figma에 생성형 AI + 편의성 개선 + 노코드 관련 플러그인을 접목시킨 디자인 툴로써 평가받고 있습니다.
왼쪽부터 Figma/Creatie Figma와 거의 유사하다..
Stitch를 사용했을 때는 html/css로만 코드가 만들어졌었는데, Creatie의 생성형 AI 서비스인 Readdy에서는 Vue.js나 React를 선택해서 코드 생성이 가능했어요. Creatie의 생성 결과물인데, 프롬프트는 다음과 같습니다.
It's a clothes shopping page, and I want it to have round corners and give a black and white feel
생성된 결과물의 퀄리티도 괜찮은데, 놀라운 점은 상단 메인 배너의 좌/우측 이동버튼이 Swiper처럼 작동한다는 점입니다. 상품이나 버튼에 hovering시 효과도 나타나고, 가장 놀랐던 점은 특정 버튼을 클릭하면 그 버튼에 대한 Interaction도 자동으로 생성해줍니다. 예를 들면 'Add to Cart' 버튼 클릭했을 때 생기는 'Continue to Generate' 버튼을 클릭하면, LLM이 어떤 피드백을 발생시키면 좋을지 판단해서, 해당 디자인 추가/변경 사항을 화면에 반영해줍니다.
장바구니 담기를 클릭했을 때 필요한 부분 생성
이번에는 Add to Cart버튼을 클릭했을 때, Cart에 추가되었다는 알림 창을 띄우기로 결정했나보네요.
Toast메세지 생성
알림 창을 반영한 모습입니다. 이 밖에도, Color, Text, Corner, Stroke 등을 설정하면 자동으로 디자인 시스템을 만들어주기도 합니다.
Stitch와 Creatie의 차이점
Stitch와 Creatie는 방향성이 크게 다른 것 같습니다. Creatie는 먼저 프롬프트를 통해 디자인 초안을 만들어내면, 해당 초안을 통해 Figma나 Creatie로 내보내 기존의 방식으로 디자인을 수정해나가는 보조 도구(Cursor IDE와 같은)에 가까운 느낌입니다. 하지만 Stitch는 비록 실험 단계지만, AI와의 협업을 통해 사용자가 직접 디자인을 수정하는 일 없이 디자인의 완성까지, 더 나아가 Google의 AI 플랫폼을 통해 사용자의 직접적인 개입없이 서비스 배포단계까지 가능한 플랫폼을 목표로 하고 있다는 생각이 드네요.
2. 프론트엔드 개발자의 변화
인공지능의 등장으로 ‘바이브 코딩(Vibe Coding)’이라는 새로운 개념이 등장하였으며, 이는 자연어를 통해 AI와 협업하여 코드를 생성하는 새로운 프로그래밍 방식입니다. Stitch나 Creatie를 사용해보니, 바이브 코딩을 넘어 '바이브 디자인(Vibe Design)'의 시대가 온 것 같습니다.
이렇듯 자연어가 코드가 되고, 디자인이 되는 시대에 프론트엔드 개발자에게는 어떤 변화가 생겼을까요?
주니어 개발자에게 더 많은 것을 요구?
"이제는 프롬프트 한 줄이면 UI가 나오고, 버튼 하나로 코드가 완성된다는데... 그러면 주니어 개발자는 더 편해지는 거 아닌가요?" 겉보기에 맞는 말처럼 들리지만, 현실은 정반대로 흘러가고 있습니다. AI가 기본적인 생산성을 보장해주기 시작한 지금, 오히려 주니어 개발자에게 요구하는 역량은 더 많아지고 있습니다.
왜 이런 일이 벌어질까요?
기초 역량 + AI 활용 능력은 기본, 그 이상이 요구된다
옛날에는 주니어가 “HTML/CSS 잘 다루고, React에 능숙하다” 정도면 괜찮은 평가를 받지 않았을까요? 하지만 이제는 각종 Copilot이나 Creatie 같은 툴이 이런 기초적인 UI 생성부터 개발까지 거의 자동화해주기 때문에, 그 자체로 경쟁력이 되지 않습니다.
결과적으로, AI가 쉽게 해주는 일은 더 이상 “주니어의 강점”으로 작용하지 않습니다.
이제는 “AI가 만든 결과물을 분석하고 고치는 역량”, “빠르게 서비스를 A to Z로 구현해본 경험”이 훨씬 중요해졌습니다.
디자인 언어와 시스템에 대한 이해의 필요성 증가
AI가 만든 UI가 브랜드 가이드에 맞는지 평가할 수 있는 개발자가 되어야 할 것입니다. 앞으로의 프론트엔드 개발자는 시각적 감각과 구성 원리에 대한 이해도 점점 더 많이 요구받게 될 것 입니다.
교집합이 점점 넓어질 수 있다
서비스 전체 흐름을 이해하고 만들어본 경험이 필수로 여겨진다
이전에는 기획, 디자인, 백엔드, 프론트엔드가 단계적으로 나뉜 분업 구조 속에서 특정 파트를 맡는 일이 많았습니다. 하지만 AI 도구들이 디자인부터 배포까지 전방위로 지원하면서, 개인 혼자 서비스 전체를 만드는 것이 현실적으로 가능해졌습니다.
따라서 기업 입장에서는 이런 환경 속에서 작은 아이디어라도 스스로 서비스로 구현해본 사람을 선호하게 됩니다.
예: “기획 문서를 읽고 UI를 구현할 수 있는가?”보다
“아이디어를 구상하고, 피드백을 받아 개선해본 경험이 있는가?”를 더 중시하게 되는 것입니다.
결국, 더 중요한 건 '사람의 의도와 실행력'
기술적 난이도는 낮아졌지만, 아이디어를 구체화하고, 맥락을 이해하고,
프로젝트를 설계할 수 있는 능력은 여전히 사람의 영역입니다.
오히려 이 부분의 중요성은 더 커지고 있습니다.
이제는 "이 컴포넌트를 잘 짤 수 있는가?"보다
"이 서비스를 왜 만들었고, 어떤 문제를 해결하려 했는가? 그리고 그 과정에서 어떤 판단을 했는가?"가
프론트엔드 주니어에게도 중요한 평가 기준이 되었습니다.
프론트엔드 주니어 개발자에게 필요한 자세
혼자서든 팀으로든, 작은 서비스라도 처음부터 끝까지 만들어보자
요즘은 AI 덕분에 혼자서도 기획부터 프로토타입, 배포까지 가능하니,
“뭔가 만들어봤다”는 경험이 점점 더 커다란 신뢰 자산이 됩니다.
코드 작성 능력보다 ‘문제 해결 사고방식’을 키우자
당장은 코드 실력이 부족해도 괜찮습니다. 하지만 “어떤 문제를 어떻게 접근했는지”, “어떤 선택지를 고민했고, 왜 이걸 택했는지”가 설명되는 사람은 어떤 환경에서도 빠르게 성장할 수 있는 사람입니다.
협업 구조의 변화
디자이너가 빠르게 생성한 시안을 코드로 옮기거나, 개발자가 AI를 활용해 먼저 UI를 스케치하고 디자이너가 다듬는 식의 양방향 협업이 늘어나고 있습니다. “디자이너 → 개발자”의 일방향이 아니라, “AI → 디자이너 & 개발자”의 동시다발적 워크플로우가 되고 있는 셈이죠.
| 구분 | AI 도입 전 | AI 도입 후 |
|---|---|---|
| 경계 | 명확한 역할 분업 | 경계 흐림 (디자인 ↔ 개발 유동적) |
| 속도 | 느린 커뮤니케이션 반복 | 실시간 수정 및 반응 |
| 다양성 | 제한된 시안 | AI 기반 다중 시안 생성 |
| 품질보장 | 수작업 검수 의존 | 디자인 시스템 + AI 규칙 기반 자동 적용 |
| 결과물 중심 | 전달물 기반 협업 | 실행 가능한 프로토타입 중심 협업 |
AI 시대의 프론트엔드 개발자는 생산성 도구 사용자를 넘어, 경험을 설계하고 기술을 매개하는 ‘번역자’로 변화하고 있습니다. 단순한 ‘코드 작성 능력’은 평준화될 것이고, 도구를 어떻게 쓰고, 어떤 문제를 풀 것인지 아는 사람이 주도권을 가지게 될 것입니다.