프론트 디자인, 왜 이렇게 시간이 오래 걸릴까
개발자라면 한 번쯤 이런 경험이 있을 것입니다. 기능 구현은 자신 있는데, 막상 디자인 기획부터 시작하려니 손이 안 움직이는 상황입니다. 디자인 기획, 프로토타입 제작, 프론트 설계, 그리고 실제 구현까지 — 이 과정을 처음부터 혼자 진행하면 생각보다 훨씬 많은 시간이 소요됩니다.
저도 포트폴리오 웹사이트를 만들면서 같은 문제를 겪었습니다. 기능보다 디자인 잡는 데 시간을 더 쓰고 있었고, 뭔가 더 빠른 방법이 없을까 찾아보기 시작했습니다.
그러다 발견한 것이 Google AI Studio였습니다.
Google AI Studio가 뭔가요?
Google AI Studio는 구글의 Gemini 모델을 기반으로 한 AI 개발 도구입니다. 텍스트 프롬프트만으로 웹 앱의 프론트엔드 코드를 생성해주는 기능이 포함되어 있어서, 디자인과 코드를 동시에 빠르게 뽑아낼 수 있습니다.
처음에는 반신반의했습니다. “AI가 만든 코드가 실제로 쓸 만할까?” 하는 의심이 있었습니다. 그래서 직접 포트폴리오 웹사이트를 만들어보며 테스트해봤습니다.
실제 사용 과정 — 이렇게 진행했습니다
1단계 — 디자인 레퍼런스 스크린샷 준비
먼저 원하는 디자인 방향을 잡기 위해 Mobbin이나 Framer 같은 디자인 템플릿 사이트에서 마음에 드는 레이아웃을 찾았습니다. 그리고 해당 페이지를 풀스크린 캡처해서 이미지로 저장했습니다.
이 스크린샷을 Google AI Studio에 그대로 붙여넣기 하면 AI가 해당 디자인을 참고해서 코드를 생성해줍니다. 텍스트로만 설명하는 것보다 이미지를 함께 넣었을 때 원하는 결과물에 훨씬 가깝게 나왔습니다.
저는 디자인 레퍼런스로 Spline(스플라인) 3d 랜딩페이지 템플릿 https://spline.design/ 을 활용해보았습니다.
Spline(스플라인)에서는 추출 기능도 지원하기 때문에 작업하는 것이 더욱 수월했습니다.
2단계 — 프롬프트 작성
이미지만 넣는다고 끝이 아닙니다. 프롬프트를 얼마나 구체적으로 작성하느냐에 따라 결과물의 퀄리티가 크게 달라집니다. 제가 실제로 사용한 프롬프트 구성 방식을 공유해드리겠습니다.
색상 지정
메인 컬러, 서브 컬러, 폰트 컬러를 구체적으로 입력합니다. “파란색 계열”처럼 모호하게 쓰는 것보다 hex 코드나 “네이비 블루, 화이트 배경” 식으로 명확하게 지정하는 것이 좋습니다.
스타일 레퍼런스 지정
“네이버 스타일”, “인스타그램 같은 카드형 레이아웃” 처럼 익숙한 서비스를 레퍼런스로 언급하면 AI가 의도를 더 정확하게 파악합니다.
AI 특유의 디자인 방지
이 부분이 핵심입니다. 프롬프트에 “AI 특유의 generic한 디자인 요소 사용 금지” 를 명시했습니다. AI가 아무 지시 없이 만들면 어디서 본 듯한 뻔한 디자인이 나오는 경우가 많습니다. 이 규칙을 추가하는 것만으로도 결과물의 완성도가 달라졌습니다.
3단계 — 생성 및 수정
프롬프트를 입력하면 AI가 프론트엔드 코드를 생성해줍니다. 속도가 상당히 빠릅니다. 처음부터 기획하고 설계하는 시간과 비교하면 체감상 몇 배 이상 차이가 납니다.
다만 한 번에 원하는 결과가 나오는 경우는 드뭅니다. 생성된 결과물을 보면서 부족한 부분을 프롬프트로 조금씩 수정해 나가는 과정이 필요합니다. “헤더 높이를 줄여줘”, “버튼 색상을 더 진하게 변경해줘” 같은 식으로 대화하듯 다듬어 나가면 됩니다.
써보고 느낀 솔직한 장단점
좋았던 점
속도가 압도적입니다. 디자인 기획부터 프로토타입, 프론트 구현까지 기존 방식대로 진행했다면 며칠이 걸렸을 작업을 몇 시간 안에 기초 구조를 잡을 수 있었습니다. 특히 포트폴리오처럼 빠르게 결과물을 보여줘야 하는 상황에서 큰 장점이 됩니다.
디자인 감각이 없어도 됩니다. 레퍼런스 이미지와 프롬프트만 잘 준비하면 디자인 툴을 따로 배우지 않아도 그럴듯한 결과물이 나옵니다.
아쉬웠던 점
하드코딩이 많습니다. 생성된 코드를 열어보면 텍스트나 이미지 경로가 직접 박혀있는 경우가 많습니다. 소규모 프로젝트나 개인 포트폴리오라면 크게 문제없지만, 추후 유지보수가 필요한 프로젝트라면 코드를 상당 부분 다시 정리해야 합니다.
대규모 프로젝트에는 적합하지 않습니다. 생성된 코드의 구조가 복잡한 프로젝트를 염두에 두고 설계된 것이 아니기 때문에, 규모가 커질수록 한계가 드러납니다. 이 경우에는 디자인 참고 용도로만 활용하고 실제 코드는 직접 작성하는 것을 추천합니다.
이런 분들께 추천합니다
- 포트폴리오 웹사이트를 빠르게 만들고 싶은 개발자
- 디자인보다 기능 구현에 더 익숙한 백엔드 개발자
- 프론트엔드를 처음 접하는 비개발자
- 소규모 개인 프로젝트를 진행 중인 분
반대로 대규모 서비스나 유지보수가 중요한 프로젝트라면 Google AI Studio로 만든 코드를 그대로 쓰기보다는 디자인 레퍼런스 용도로만 활용하시는 것을 권장합니다.
마치며
Google AI Studio는 완벽한 도구는 아닙니다. 하지만 빠르게 프론트 구조를 잡아야 할 때, 혼자 디자인부터 구현까지 해야 할 때 시간을 크게 절약해주는 도구임은 분명합니다.
개발자라면 모든 것을 처음부터 직접 만들어야 한다는 생각을 잠시 내려놓고, 이런 도구들을 적극적으로 활용해보시기 바랍니다. 중요한 것은 도구를 잘 쓰는 능력도 개발자의 역량 중 하나라는 점입니다.
다음 글에서는 Stitch, Manus 등 다른 AI 프론트 생성 툴들과 비교해보겠습니다.
