<span style="color:rgb(82,84,88);font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Noto Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Twemoji Mozilla, Android Emoji;font-size:16px;font-style:normal;font-weight:400;letter-spacing:-0.16px;text-indent:0px;text-transform:none;word-spacing:0px;white-space:normal;background-color:rgb(255,255,255);float:none;">안녕하세요, 국내 AI 웹빌더 재밋(Zaemit)으로 웹사이트를 제작해보았습니다.</span>
<span style="color:rgb(82,84,88);font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Noto Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Twemoji Mozilla, Android Emoji;font-size:16px;font-style:normal;font-weight:400;letter-spacing:-0.16px;text-indent:0px;text-transform:none;word-spacing:0px;white-space:normal;background-color:rgb(255,255,255);float:none;">국내에 V0, lovable 같은 서비스는 재밋(Zaemit)외에는 없는것 같아 간단하게 제작 후기 작성 해보겠습니다. </span>
국내에도 이런 서비스가 있구나 정도로 생각하시고 가볍게 봐주시면 될 것 같습니다.
<img src="https://vibecode.kr/data/editor/2603/3731781418_n63bOYlK_1774489825.png" alt="프롬프트" width="514">
서비스 홈페이지 들어가면 대문짝만한 프롬프트가 있습니다. 여기에 만들고 싶은 홈페이지에 대해 작성하면 됩니다.
저는 회사 홈페이지를 만든다고 가정하고 '우리 회사'를 클릭했더니 예시 템플릿이 사진과 같이 프롬프트에 자동으로 입력되었습니다.
하단의 import from 을 보면 URL, 이미지, PDF도 첨부할 수 있는것 같네요. (Figma는 아직 안되는 것 같습니다.)
<img src="https://vibecode.kr/data/editor/2603/3731781418_VW2JiSUg_1774490287.png" alt="gpt" width="514">
저는 디자인을 좀 이쁘게 만들고싶어서 gpt에게 힙한 홈페이지를 만들기 위해 프롬프트에 입력할 디자인 템플릿을 요청했습니다.
무슨 디자인인지는 모르겠는데 암튼 저게 힙한 디자인이겠죠? ㅎㅎ
<img src="https://vibecode.kr/data/editor/2603/3731781418_7PMCLTOo_1774490493.png" alt="프롬프트_디자인" width="514">
gpt가 말한 내용을 그대로 복붙하고 생성버튼을 눌렀습니다.
<img src="https://vibecode.kr/data/editor/2603/3731781418_A25gED0T_1774490745.png" alt="생성중" width="514" />
생성버튼을 누르자 AI가 실시간으로 요청사항을 분석하고 디자인합니다.
저는 3개의 AI모델 중 Maker2.0 모델을 사용하였고 약 3분정도 걸렸네요.
<img src="https://vibecode.kr/data/editor/2603/3731781418_0lW9ZNrS_1774491024.png" alt="초안" width="514">
초안이긴 하지만 이정도면 훌륭한것 같습니다. 텍스트나 이미지등의 세부 내용도 한번 바꿔보겠습니다.
영상으로 보여드리고 싶은데 아쉽네요 ㅎㅎ
<img src="https://vibecode.kr/data/editor/2603/3731781418_y6J1sh8b_1774491391.png" alt="편집" width="514">
간단한거는 이렇게 직접 편집할 수 있습니다. 저는 CTA 를 '데모 요청하기' 에서 '문의하기'로 바꿨고
솔루션 살펴보기의 CTA 색상을 주황색으로 변경하였습니다.
<img src="https://vibecode.kr/data/editor/2603/3731781418_VBz6fySI_1774491585.png" alt="편집_이미지생성" width="514">
이미지 생성도 외부에서 할 필요없이 바로바로 되더라구요.

<img src="https://vibecode.kr/data/editor/2603/3731781418_QpvGd2cC_1774491907.png" alt="편집_AI대화2" width="514">
직접 편집하기 복잡한 것들이나 애매한것들은 AI를 통해 바이브코딩으로 수정이 가능했습니다.
마무리하며)
국내에도 웹 한정이긴 하지만 수준 높은 바이브코딩 서비스가 있었습니다.
웹사이트 필요하시거나 궁금하신 분들은 체험 삼아 한번 만들어보셔도 좋을 것 같아요.
로그인 없이도 바로 만들어볼 수 있더라구요.
궁금한 점 있으시면 댓글 남겨주세요!
긴 글 읽어주셔서 감사합니다 :)
콘텐츠를 불러오는 중..

댓글목록
vibecode님의 댓글
와~ 멋진데요. 쇼케이스에 등록해 주시면 좋겠습니다.
9dbc0976님의 댓글의 댓글
넵 감사합니다! ㅎㅎ
셀린님의 댓글
멋진 글 감사합니다! 바이브코딩으로 웹사이트를 만들어 보신 아이디어가 흥미롭고 이해하기 쉬웠어요. 구현 팁이나 예제가 더 있다면 공유해 주세요. 앞으로의 업데이트도 기대합니다.
9dbc0976님의 댓글의 댓글
넵 자주 공유 하겠습니다. 감사합니다!