안녕하세요, 재밋 마케팅팀 제이입니다.
지난 번, 디자인팀에서 하루 만에 브랜드 홈페이지를 만드는 걸 보고 저도 직접 한 번 해봤습니다.
놀랍게도 개발을 모르는 제가, 홈페이지를 혼자 4시간만에 만들었습니다.
도구는 지난번과 같이 재밋과 클로드를 사용했습니다. 재밋은 대화만으로 홈페이지를 만드는 AI 웹빌더로, 클로드와 ChatGPT 같은 AI에 MCP로 연결해 채팅창에서 바로 사이트를 만들고 고칠 수 있습니다.
저는 휴가철에 가고 싶은 독채 스테이 홈페이지를 만들었어요. 실제로 운영 가능한 수준으로 만들기 위해 소개·공간·어메니티·요금·이용안내에 예약 문의 폼, 후기 게시판, 영문 페이지까지 붙였습니다.
결론부터 말씀드리자면, 홈페이지를 만들고 기능을 추가하는 건 대부분 한 번에 해결됐지만, 오래 걸린 건 이미지를 선별하고 내용과 형식을 수정하는 일이었습니다. 제작 중, 침실 이미지에 침대가 없는 사진이 들어가기도 했고, 영문 표현을 직역하는 상황이 발생하기도 했습니다. 이번 글을 통해, 재밋과 클로드를 통해 홈페이지를 제작한 과정을 공개하겠습니다. 어떤 기능을 추가했고, 어떤 문제점이 있었고, 어떻게 수정했고, 어디서 시간이 오래 걸렸는지, 세세하게 말씀드릴게요!
항목 | 내용 |
|---|---|
만든 것 | 독채 스테이 홈페이지 (제이 하우스) |
도구 | 재밋 MCP + 클로드 |
기능 | 예약 문의 폼 · 후기 게시판 · 한국어/영어 다국어 |
총 소요 시간 | 4시간: 주제 정하기 20분 + 초안 제작 10분 + 수정 3시간 30분 |
이 글의 목차
코딩 없이 홈페이지 혼자 만들 수 있나?
홈페이지 초안 제작까지 걸린 시간은?
기능 붙이기: 예약 폼·후기 게시판·영문 페이지
수정한 내용들
최종 요약
노코딩으로 혼자 홈페이지 만들기, 비개발자도 가능한가요?
가능합니다. 이 글은 개발을 모르는 마케터가 작성한 AI 홈페이지 제작 후기입니다. 이번 홈페이지를 만들며 코드를 사용한 적은 한 번도 없었습니다. 하지만, 단순히 사이트를 제작하는 것과 사이트를 운영할 수 있게 제작하는 것은 달랐습니다. 사이트 뼈대는 금방 나왔지만, 고객에게 서비스를 제공하는 수준까지 기능을 구현하는 데에는 시간이 더 소요됐습니다.
홈페이지 초안이 나오기까지 얼마나 걸리나요?
10분 걸렸습니다. 문장 한 줄을 넣고 만들어질 때까지 기다렸습니다. 기능을 추가하고 디자인을 수정하는 작업을 위해 첫 요청을 간략하게 하고자 했어요.
MCP로 기깔난 독채 스테이 웹사이트 홈페이지 제작해줘.
저는 "기깔난" 디자인을 원했기에 해당 요청사항을 프롬프트에 입력했습니다.
어떤가요? 초안치고 괜찮지 않나요?
프롬프트 입력 후, 소개·공간·갤러리·어메니티·이용안내 다섯 개 메뉴에 히어로 문구와 공간 소개 글, 요금 안내까지 채워진 사이트가 나와 있었습니다. "비우러 오는 집"과 같은 카피는 보기 어색했지만, 만들고자 하는 홈페이지 유형에 맞게끔 기능 탭이 자동으로 추가된 것은 인상적이었습니다.
예약이나 후기 게시판 같은 기능도 붙일 수 있나요?
가능합니다. 심지어 쉬웠습니다.
예약 문의 폼 생성 방식
예약을 어떤 방식으로 받을지, 폼에서 어떤 항목을 받을지, 신청이 들어오면 알림을 어떻게 받을지에 대해 물어봤고, 저는 각각 예약 문의 폼, 기본 4항목, 관리자 화면에만으로 답했어요.
만들고 나서 수정도 가능하지만 클로드가 사전에 질문을 통해 요청 사항을 확인했기에 수정 작업이 불필요했습니다.
그리고 요청하지 않았지만 추가된 내용들도 있었어요. 개인정보 수집·이용 동의 체크박스, 인원 직접 입력 대신 2인 / 3인 / 4인 / 기타 선택지, 요청사항 칸의 "기념일 여부, 도착 예정 시간 등 미리 알려주실 내용"과 같은 내용은 재밋과 클로드가 자체적으로 추가한 정보들이었어요.
데이터가 원활히 축적되는지 확인하기 위해 예약 문의 폼에 임의로 정보를 입력하고 제출했어요. 결과적으로, 데이터베이스를 따로 만들거나 연결 요청을 하지 않았지만 정상적으로 데이터 연동이 되는 것을 확인했어요. 관리자 화면에서 문의 폼을 확인해보니 이름과 연락처에는 자물쇠 표시가 붙어 있었는데 암호화해서 저장된다는 표시였습니다. 따로 요청한 적이 없었지만, 필요한 항목들이 알아서 추가된게 매우 놀라웠어요!
후기 게시판 생성 방식
후기 게시판도 홈페이지에 넣으려고 했어요. 클로드는 리뷰를 누가 쓸지, 작성된 리뷰의 노출 방식과 리뷰에 넣을 항목을 물어봤습니다. 클로드는 "누구나(비회원 가능)" 리뷰를 작성할 수 있는 구조를 추천했으나 숙소 후기를 아무나 쓴다면, 후기의 신뢰도와 사이트 운영 차원에서 어려움이 발생할 것을 우려하여 "회원만"으로 했습니다. 결과적으로 게시판에 "작성 방법: 로그인 후 글쓰기"라는 안내가 붙었어요. 손님이 후기를 남기려면 회원가입을 해야 한다는 뜻입니다. 실제로 운영한다면 조금 더 고민할 지점이라고 생각했어요. 그와 별개로 "후기"라고 표현하기보다 "머무신 분들의 이야기"라고 표현한게 홈페이지 감성과 잘 어울린다고 생각돼서 가장 마음에 들었어요!
영문 페이지 생성 방식
아래 프롬프트 한 줄을 넣었어요.
홈페이지에 다국어 기능 추가해줘. 외국인 손님도 예약 문의할 수 있게 하고 싶어클로드는 어떤 언어를 추가할지, 예약 문의는 어떻게 받을지 물어봤어요. 각각 영문, 같은 폼을 공유하는 선택지를 골랐어요. 그렇게 하여 영문 폼 라벨이 이름/Name, 연락처/Phone or WhatsApp처럼 두 언어로 나오고, 인원 선택지도 2인 / 2 guests 가 됐습니다. 영문 페이지에서도 제출한 내용이 성공적으로 데이터에 쌓였어요.
수정한 내용들
이미지 교체
공간 소개 섹션에 거실·침실·주방·욕실 네 개의 이미지가 모두 빈 공간 사진이었습니다.
처음에는 사이트 톤을 제대로 설명하지 못해 생긴 상황이라고 생각해서 이렇게 요청했어요.
SPACE 이미지의 톤이 제각각이야. 아래 기준으로 전부 다시 골라줘.
- 따뜻한 우드톤, 자연광, 채도 낮게, 사람 없이 공간 위주
- 같은 집에서 찍은 것처럼 보이게
- AI 생성 스톡은 쓰지 말고 Unsplash 실사만이후 생성된 이미지는 톤은 맞았지만 빈 방이 계속 나왔습니다. 이 상황을 해결하기 위해 요청사항을 조금 더 구체적으로 원하는 방향에 맞게 수정했어요. 먼저 영어 검색어를 직접 입력했어요. 아무래도 사진 검색이 영어로 진행돼기 때문에 번역 과정에서 오류가 발생했다고 판단했어요. 그리고 이미지를 넣기 전에 한 번 검토해달라고 명시했습니다.
SPACE 섹션의 사진 4장이 각 공간 설명과 맞지 않아. 아래 검색어로 다시 골라줘.
넣기 전에 사진을 실제로 확인해서 해당 공간이 맞는지 검증하고 넣어줘.
- 거실: minimal living room, high ceiling, large window, wooden interior
- 침실: minimal bedroom, wooden bed frame, white bedding, morning light
- 주방·다이닝: wooden dining table, minimal kitchen, warm interior
- 욕실: bathtub by the window, quiet bathroom, warm wood
전체 톤 통일: 따뜻한 우드톤, 자연광, 채도 낮게, 사람 없이 공간만.이렇게 프롬프트를 입력하자, 클로드가 거실, 침실, 주방, 욕실 각각의 공간에 적합하다고 판단한 이미지를 4개씩 선별한 후, 제게 사용할 이미지를 고르라고 했어요. 이번에는 클로드가 이미지를 모두 요청 사항에 맞는 것을 골랐어요. 제일 적합한 사진으로 선정했습니다.
어떤가요? 제법 머물고 싶은 공간처럼 보이지 않나요?
제작하는 것보다 사진을 고르는 데 시간이 더 걸렸습니다.
영문 직역 문제
영문 페이지는 금방 제작됐습니다. 하지만 번역이 직역으로 되어 있었기에 일부 표현들은 어색했습니다.
한국어 원문이 은유적일수록 영어로 옮겼을 때 이상해졌어요.
If you close the door,
A day that finally slows down
...
In a space that focuses on letting go rather than filling up,
take some long postponed rest with you
보시다시피 한국어 문장 구조에 영어 단어를 그대로 갈아 끼우다보니 문장이 어색했습니다.
특히, 거실 설명은 이랬어요.
Even if I bury my body in the sofa and just look out the window,
an hour flies by in no time.
"소파에 몸을 묻고"라는 표현을 "bury my body in the sofa"로 옮긴 문장입니다. 어색하죠?
그래서 요청을 했습니다.
현재 영어버전의 표현들이 좀 어색한게 있는 것 같아. 영어버전 표현들이 자연스럽도록 수정해줘.
요청 후, 표현이 보다 더 자연스러워졌습니다!
정리하며
코드를 쓰지 않고 비개발자 마케터가 독채 스테이 홈페이지를 혼자 만드는 데 4시간이면 충분했어요. 주제 정하는데 20분, 초안 제작하는데 10분, 수정하는데 3시간 30분이 걸렸어요.
"MCP로 기깔난 독채 스테이 웹사이트 홈페이지 제작해줘."를 초안 프롬프트로 초안을 만들었습니다.
대부분의 기능은 한 번에 생성됐어요. 클로드가 자체적으로 필요한 내용들을 물어봤고 연락처 암호화나 개인정보 등의 체크박스처럼 몰라서 요청하지 못한 부분까지 구현됐습니다.
가장 오래 걸린 건 사진을 선별하는 일이었어요. 클로드가 이미지를 확인하지 않고 키워드로만 고르기 때문에 영어 검색어를 직접 입력하고 검토를 요청한 이후에야 조건에 맞는 이미지를 고를 수 있었어요.
다국어 홈페이지의 경우, 번역한 내용이 자연스러운지 확인하는 작업이 병행돼야 했습니다.
마지막으로
재밋과 클로드 덕분에 홈페이지를 만드는 건 문제가 아니었어요.
실제로 어려웠던 건 전부 선별하고 수정하는 일이었습니다. 사진 적합성, 문장의 어색함, 메뉴 구성 순서의 자연스러움은 제작자인 제가 판단해야했습니다. 결국, 중요한 건 제작하고자 하는 홈페이지의 의도와 방향성을 설정하는 일이었습니다.
만든 사이트는 여기서 보실 수 있습니다.
https://wv1786696915471115.zaemit.ai/
직접 해보고 싶으신 분들은 재밋에서 계정을 만들고, 쓰던 AI에 MCP를 연결하면 이 글과 같은 방식으로 시작할 수 있어요.
디자인팀이 만든 1편은 클로드로 홈페이지 제작하기 편에서 보실 수 있어요. 같은 도구지만 사람이 바뀌었을 때 결과가 어떻게 달라지 비교해 보셔도 좋겠습니다!
(미미님과의 내기는 제가 졌습니다 ^^)