Hero UI Chat : 생성형 AI와 대화로 웹사이트 뚝딱 만들기

 
요즘 기획자들 사이에서 ‘Vibe 코딩’이 유행하고 있어요.
정확한 명세나 코드를 몰라도, AI에게 자연어로 “이런 기능, 웹페이지 만들어줘”라고 말하면 코드로 구현해주는 방식을 말하죠.
 
예를 들어,

“고양이 카드 뽑기 페이지 만들거야.  뽑기 버튼 누르면 귀여운 고양이랑 명언 보여줘!”

이렇게만 말해도, AI가 그걸 알아듣고 실제 웹페이지를 만들어주는 시대가 온 거예요.

이처럼  기획자의 아이디어(감성+취향+방향성)만 있으면 웹이 구현되는 새로운 코딩 방식이 바로 ‘Vibe 코딩’이고, 그 대표적인 도구 중 하나가 Hero UI입니다.

이번에 Hero UI를 직접 사용하여, ‘랜덤 고양이 카드 생성기’ 웹페이지를 만들어봤는데요, 놀랍게도 제작 요청-수정-웹배포까지 5분도 안 걸렸고, 복잡한 코드 작성은 1도 필요 없었습니다.

그냥 대화 하듯이 타이핑만 했을 뿐이에요. 정말로요.
 

🔗 Hero UI Chat 바로가기

HeroUI Chat

 
 

---

오늘 만들어 볼 것

 
요즘 코딩을 배우면서 간단하게 만들어보고 싶은 아이디어가 있었어요.

바로 '랜덤 고양이 카드 생성기'라고 ‘뽑기’ 버튼을 누르면 랜덤 고양이 이미지와 오늘의 명언이 제공되는 웹페이지입니다.
 

---

Hero UI와 대화 시작

 

Hero UI Chat 입력창

처음 Hero UI Caht을 열면 구글처럼 생긴 검은 화면에 입력창 하나만 덩그러니 있어요.

뭐라고 쓸지 조금 막막했지만, 예전에 메모해둔 내용 참고하여 이렇게 5줄을 작성해 보았습니다.

랜덤 고양이 카드 뽑기 페이지

- 오늘 날짜 
- '뽑기' 버튼
-- 선택 시 랜덤 고양이 이미지 + 오늘의 명언 제공
--- 결과 하단에 공유하기, 저장하기, 다시뽑기 버튼
---- 다시 뽑기 버튼을 누르면 카드 재생성 (랜덤)

 
그러자 Hero UI가 이걸 읽고 기본 웹페이지 구조를 바로 만들어줬어요.

Hero UI로 생성한 웹페이지

좌측엔 대화창, 우측엔 웹페이지 미리보기가 제공되는 심플한 구조에요.

결과물이 바로바로 업데이트되어 확인할 수 있답니다.

---

문제 발생 → 대화로 수정

하지만 처음부터 완벽하진 않았습니다.

뽑기 전 화면과 로딩 화면(요청하지 않았던)까지 잘 구현해주었지만, 결과 화면에 고양이 이미지가 보이지 않았어요.

그래서 말했죠.

고양이 이미지가 안나오는디?

그러자 Hero UI는 사람 이미지를 좌측 정렬로 넣어줬고... 😂
 

Hero UI 수정 요청

그래서 다시 말했습니다.

이미지를 박스 안에 가운데 정렬해줘.
무료 고양이 이미지 API를 활용할 수는 없어?

그러자 드디어 랜덤 고양이 이미지가 화면에 출력되기 시작했어요!

Hero UI로 만든 웹사이트 결과

이렇게 완성된 웹사이트는 PC/Tablet/Mobile 반응형으로 만들어지고, 심지어 우측 상단의 Deploy 버튼을 눌러 바로 웹으로 배포할 수 있어요.

그리하여 5분만에 뚝딱 완성한 웹페이지는 다음과 같습니다. ('카드 뽑기'를 눌러보세요!)

 
🔗 웹페이지 바로가기

HeroUI Chat - App

 

---

아쉬운 점

 
1. 공유하기, 저장하기 버튼은 제대로 동작하지 않았어요. 아마도 제가 버튼의 역할을 구체적으로 설명하지 않아서인 것 같아요.

2. 명언도 랜덤 API로 받고 싶었는데, 그냥 고정된 몇개 텍스트만 나왔죠. 이것도 설명 부족 탓.
 
이 과정을 통해 얻은 교훈은 하나였습니다.
 

Hero UI는 말한 대로 만들어주지만,
그 ‘말’이 얼마나 구체적인지가
결과물의 퀄리티를 좌우한다.

 

다음부턴 요청사항을 디테일하게 입력해서 시행착오를 줄일 수 있을 것 같아요!
 

---

Hero UI 총평

 
이 도구를 사용하면서 가장 놀라웠던 건, 자연어로 말한 웹사이트를 '아주 빠르게' 만들어 준다는 점이었습니다. 요청하고 몇 초 지나서 바로 결과물을 확인할 수 있고, 배포까지 순식간에 된다는 점이 아주 신세계였어요. 

완성도 높은 결과물을 만들기까진 아직 조금 손봐야 할 부분이 있지만, 아이디어를 빠르게 실행하고 실험해보기엔 정말 좋은 도구예요. 앞으로 이걸 활용해서 또 뭘 만들어볼 수 있을지 벌써 기대됩니다!

이처럼 누구나 웹사이트를 쉽게 만들 수 있는 시대가 열리고 있는 지금, 정말 중요한 건 아이디어의 특별함, 날카로움, 그리고 유용함이 아닐까요?

앞으로 우리가 준비해야 할 것은 문제를 발견하는 관찰력, 그리고 그것을 해결하는 창의력이라는 생각을 해봅니다.

---

🙋🏻‍♀️ 이런 분들에게 추천해요!

✅ 아이디어는 많은데 개발에 막혀 실행을 못 했던 기획자/디자이너/창업가
✅ 빠르게 아이디어를 테스트하고 싶은 분
✅ 생성형 AI 툴에 관심 있는 얼리어답터

 
좋은 제품을 만드는 데 이 글이 조금이나마 도움이 되길 바라며 글을 마칩니다.

그럼 오늘도, 나를 위해 일하는 하루 되시길!