안녕하세요, 재밋 마케팅팀 제이입니다.
저는 입사 2개월 차구요, 아직 탕비실 커피머신 버튼도 헷갈리는 신입이지만 이 블로그에서 재밋 소식을 전해드리게 됐습니다. 자주 뵙겠습니다!
이번 글은 재밋의 핵심인 'MCP 연동' 기능을 보여드리기 위함이에요. 재밋의 새로운 서비스 개시 기념으로 클로드로 재밋을 통해 홈페이지를 제작하는 과정을 직접 보여드리려고 합니다. 제가 직접 하는건 아니구요, 디자인팀에서 특별히 MCP 연동 시연을 해주신다고 합니다.
벌써부터 기대가 되네요!
여기서 오늘의 주인공, 미미님을 소개합니다!
미미: 안녕하세요!
제이: 안녕하세요 미미님, 간단히 자기소개 부탁드릴게요.
미미: 네, 저는 현재 디자인팀에서 재밋의 웹사이트 디자인을 맡고 있습니다. 다양한 사이트를 직접 만들며 고객님들이 만족할 수 있는 퀄리티의 결과물을 얻을 수 있도록 매 순간 노력하고 있습니다.
제이: 오늘 무엇을 보여주실건지 간단하게 설명 가능할까요?
미미: 네, 요즘 SNS 보면 AI로 웹사이트 제작해서 릴스나 쇼츠로 공유하는 사례가 꽤 보이죠. 근데 대부분 보면 화려한 디자인만 보여주지, 어떻게 만들었는지, 어떤 기능이 있는지, 또 그 기능을 어떻게 만들었는지는 보여주지 않아요. 그래서 오늘은 디자인도 디자인이지만, 운영 가능한 홈페이지를 클로드를 통해 '하루만에' 제작하는 방법에 대해 말씀드리도록 하겠습니다. 코드를 한 줄도 쓰지 않고 말이죠.
제이: 코드 없이 하루만에요??
미미: 네, 하루만에요 ㅎㅎ 불가능은 없습니다. '재밋'과 '클로드'와 함께라면 말이죠.
Chapter 1. MCP 연동하기
미미: 우선, 어떤 홈페이지를 제작할지 정해볼까요?
제이: 미미님 최근에 러닝 시작하셨잖아요. 러닝화 브랜드 홈페이지 만들어보죠!
미미: 좋습니다. 그러면 러닝화 브랜드 홈페이지를 하나 제작해볼게요.
제이: 오 벌써 기대가 됩니다. 준비물은 따로 없나요?
미미: 준비물은 별거 없습니다. 영롱한 '재밋'과 재밋을 더 영롱하게 만들어줄 클로드만 있으면 됩니다. 준비가 됐다면 MCP 연동을 진행하면 됩니다. 연동하는 방법은 재밋 홈페이지에 상세히 설명해놨으니 나중에 필요하면 참고해주세요!
미미: 그러면 바로 프롬프트 입력해보겠습니다.
미미: 제이님께 꿀팁 하나 알려드릴게요. 프롬프트는 구체적이면 구체적일수록 좋아요. 원하는 방향성과 색감 등을 구체적으로 전달할수록 더 나은 결과물이 탄생한답니다. 물론 베이스만 잡고 수정을 해도 되지만, 퀄리티 있는 초안을 제작하는게 더 효율적이잖아요.
제이: 오 구체적으로 프롬프트를 작성한다. 메모했습니다. 근데 작성하신 프롬프트는 매우 간략하신데요?
미미: 오늘은 만들어진 홈페이지를 보면서 수정하는 작업을 보여드릴테니 간단한 대화로 시작할게요.
(잠시 후)
러닝화 홈페이지 초안
미미: 어떤가요? 초안치고 잘 뽑혔죠?
Chapter 2. 홈페이지 수정하기
뉴스탭 / 이벤트 신청 폼 추가
미미: 전체적으로 한 번 보면서 구조 확인할게요. 다행히 러닝화 홈페이지에 필요한 기본 섹션이 구성되어 있네요. 상단에는 브랜드와 제품을 소개하고, 페이지를 아래로 내리면 스크롤한만큼 km별 화면이 변하는 것을 볼 수 있네요.
제이: 오? 이게 되네요!
미미: 이제 여러 가지 기능들을 추가해볼게요. 우선, 홈페이지 상단에 뉴스탭 기능을 추가하겠습니다. 클로드에 입력해줄게요.
뉴스탭 프롬프트와 추가 질문
미미: 뉴스탭 구조를 물어보네요. 뉴스탭을 만들고 뉴스와 공지사항을 따로 모아두는 섹션으로 구성해볼게요. 클로드가 어떻게 만들었는지 볼까요?
뉴스탭 첫 시도 - 레이아웃이 깨진 상태
제이: 미미님, 이게 뭘까요..?
미미:
미미: 클로드가 정신 못 차린 것 같으니 따끔하게 한 마디 할게요.
뉴스탭 수정 프롬프트
제이: 이제 잘 되겠죠?
미미: 제이님. 말로 안하겠습니다. 결과로 보여드릴게요.
재요청 후 완성된 뉴스탭
미미: 완성했습니다. 이렇게 프롬프트를 입력한대로 바로 나오면 좋지만, 그렇지 않았다면 클로드와 함께 수정하면 됩니다.
제이: 이게 되네..
미미: ㅋㅋㅋㅋㅋㅋ 다른 기능도 추가해볼까요?
제이: 러닝화 브랜드면 주기적으로 이벤트를 진행하잖아요? 이벤트 신청할 수 있는 페이지를 만들면 좋을 것 같아요.
미미: 좋아요. 클로드에게 프롬프트 입력해줄게요.
이벤트 섹션 추가 프롬프트
이벤트 섹션
미미: 이벤트 탭에 행사와 행사 참여 신청 탭이 나왔네요. 기능은 잘 구현이 된 것 같은데 디자인만 조금 손 볼게요. 그리고 여기서 놀라운 포인트 하나 짚어드릴게요.
제이: 그게 뭐죠?
미미: 여기 보이는 행사 참여하기 신청하기 폼은 데이터 연동이 자동으로 이루어집니다. 폼을 채우고 참여 신청하기를 클릭하면 데이터가 자동으로 워크스페이스의 데이터베이스로 이동해요.
제이: 오 신기해요! 데이터 연동 장면은 어디서 확인할 수 있나요?
미미: 직접 보여드릴게요. 우선 행사 참여 신청폼을 접수해볼게요.
행사 참여 신청폼
미미: 접수 후, 워크스페이스에서 해당 프로젝트의 관리자 화면을 열어줍니다. 그리고 좌측 '문의·신청 폼'의 '행사 참여 신청' 탭에 들어가 접수 내용을 확인해줄게요.
신청폼 접수 내역이 워크스페이스 DB에 자동 적재된 모습
미미: 연동이 잘 됐죠!
제이: 오! 엄청 간편하네요. 문의 폼이 제작 됐을 때 자동으로 데이터 연동까지 이어지면 생성자 입장에서 매우 편할 것 같아요.
미미: 접수 폼 생성만으로도 관리하기 간편한 데이터베이스가 구축되는 게 재밋 서비스의 큰 메리트 중 하나죠!
Chapter 3. 홈페이지 수정하기(심화)
갤러리 / 지도 블록 생성
제이: 이제 제법 브랜드가 운영하는 홈페이지 같아요.
미미: 네 맞아요. 그래도 아직은 조금 부족한 것 같으니 이번에는 갤러리를 만들어볼게요. 브랜드가 그동안 활발히 활동을 했다고 가정하고 진행했던 행사들을 전시하는 갤러리 섹션을 만들게요.
제이: 갤러리 섹션은 왜 만드는건가요?
미미: 브랜드가 쌓아온 경험들을 홍보함으로써 고객에게 신뢰를 줄 수 있는 중요한 섹션이기 때문에 만드는 것이 도움이 됩니다. 제이님이라면 갤러리에 무슨 사진을 전시하면 좋을 것 같아요?
제이: 저라면 행사 사진을 볼 수 있는 갤러리를 추가할거예요.
미미: 그러면 제이님 요청대로 대화창에 입력할게요.
갤러리 제작 프롬프트와 추가 질문
미미: 2번 질문에 '별도 갤러리 탭으로' 옵션을 클릭할게요.
갤러리 섹션 초안
미미: 상단에 'GALLERY' 탭이 생겼고 6개의 행사 사진들이 보이죠?
제이: 깔끔하게 잘 나왔네요. 사진들이 더 많고 레이아웃을 더 넓게 설정하면 보기 더 좋을 것 같아요!
미미: 제이님 요청대로 수정해볼게요. 프롬프트에 레퍼런스를 주고 수정 방향성을 입력할게요.
갤러리 섹션 수정 프롬프트
수정된 갤러리 섹션
미미: 어떤가요?
제이: 훨씬 좋아요!
미미: 좋습니다! 이번에는 마지막으로 행사 탭에서 행사가 어디서 진행되는지, 지도블록을 생성해보고 마무리할게요.
제이: 네 좋습니다!
미미: 프롬프트 입력해볼게요.
지도 블록 생성 프롬프트
지도 블록 초안
미미: 홈페이지 톤과 맞게 지도 디자인을 수정하고 지도에 표시된 불릿 아래 장소 이름이 나오게끔 수정할게요.
지도 디자인 수정 프롬프트
디자인 수정된 지도 블록
제이: 오! 실제로 길찾기를 클릭했을 때 제대로 나오는지 확인해보죠!
지도 블록 - 길 찾기 기능 오류
제이: 미미님, 이거 한 번 봐주세요!
미미: 이럴 때는 침착하게 클로드에게 수정을 부탁하면 돼요.
길 찾기 수정 프롬프트
수정된 지도 블록
미미: 길찾기 옆에 네이버지도 탭도 생겼네요. 어떻게 달라졌는지 한 번 볼까요?
길 찾기 기능이 수정된 지도 블록
미미: 설정한 값이 성공적으로 네이버지도로 검색이 되네요.
제이: 대단합니다!
미미: 이렇게 오늘은 클로드와 재밋을 활용해서 러닝화 홈페이지를 제작해 보았는데요, 제이님 어떠셨나요?
제이: 여러모로 흥미로운 요소들이 많았어요. 클로드로 홈페이지를 제작부터 수정까지 하는 일련의 과정이 매우 간편하다고 보였고, 기능을 추가하거나 미흡한 부분들을 코드 없이 대화창을 통해 수정하는 것이 인상적이었습니다. 디자인도 생각 이상으로 잘 뽑혀서 신기했고 저도 혼자 홈페이지를 제작할 수 있을 것 같은 자신감이 생겼어요!
미미: 그러면 제이님이 따로 홈페이지 만들어보실래요? 이건 제가 특별히 업무를 드리도록 하겠습니다. 저보다 잘 만들면 커피 사드릴게요.
제이: 좋습니다! 커피를 위해 열심히 만들어 보겠습니다!
미미: 오늘 같이 제작한 홈페이지는 링크를 첨부해둘테니, 필요하면 참고하면서 해보세요. 그럼 파이팅입니다!
커피 내기 결과가 궁금하다면?
제이가 만든 결과물을 확인해보세요! -> "홈페이지 혼자 만들기"