소개
클라이언트에게 촬영 스튜디오 3곳을 정리해서 전달해야 했습니다.
기존에는 엑셀이나 카톡 메시지, 혹은 투박한 PDF로 보냈었는데,
이번에는 "웹사이트 링크" 형태로 보내서 좀 더 전문적인 인상을 주고 싶었습니다.
또한 모바일에서도 보기 편하고, 필요할 때 클라이언트가
직접 PDF로 저장할 수 있는 기능을 포함하고자 했습니다.
진행 방법
VS Code & Claude (Cline 확장 프로그램): AI가 직접 코드를 작성하고 파일을 생성하도록 '바이브 코딩' 방식으로 진행했습니다.
HTML & Tailwind CSS: 별도의 복잡한 설정 없이 브라우저에서 바로 열리는 단일 HTML 파일로 제작했습니다. 디자인은 깔끔한 에이전시 느낌을 주기 위해 Tailwind CSS를 활용했습니다.
Vercel: 완성된 폴더를 드래그 앤 드롭하는 것만으로 실제 접속 가능한 URL을 생성했습니다.
Tip: 사용한 프롬프트 전문
초기에 정보를 구조화하고 디자인 톤을 잡기 위해 사용한 핵심 프롬프트입니다.
"클라이언트한테 스튜디오 3군데 정리해서 보낼 거야. 스튜디오 이름 / 사이트 / 주소 / ROOM 정보 / 전체 대관 금액 / 주차 가능대수 정보를 포함해서 아주 세련된 제안서 웹사이트로 만들어줘. PDF 저장 버튼도 포함하고, 전체적으로 미니멀하고 고급스러운 에이전시 느낌이 났으면 좋겠어."
(이후 추가 수정 프롬프트)
"각 스튜디오 사이트 주소를 줄 테니, AI 네가 직접 분석해서 정확한 금액이랑 룸 정보를 업데이트해주고 적절한 이미지도 한 장씩 넣어줘."
코드 캡쳐
Adobe Adobe Adobe Adobe Adobe의 코드 편집기 스크린샷
결과와 배운 점
03. 결과와 배운 점
배운 점과 나만의 꿀팁
코딩 몰라도 가능: 이전에는 웹사이트를 만들려면 개발 지식이 많이 필요하다고 생각했는데, VS Code 내에서 Claude(Cline)를 활용하니 대화만으로도 수준 높은 결과물이 나왔습니다.
이미지 주소 활용: 실제 스튜디오 사이트에서 '이미지 주소 복사'를 통해 AI에게 전달하면 시각적으로 훨씬 설득력 있는 제안서가 됩니다.
과정 중에 어떤 시행착오를 겪었나요?
처음에는 Next.js 같은 어려운 프레임워크로 시작하려다 설정이 복잡해졌습니다. 단순한 index.html 파일 하나로도 충분히 훌륭한 결과물을 낼 수 있다는 것을 배웠습니다.
AI가 가져오는 정보가 100% 정확하지 않을 수 있어, 최종 금액 부분은 실제 사이트를 보며 한 번 더 검수하는 과정이 필수적이었습니다
솔직히 정말 수정 많이 했습니다 ㅋㅋ 거짓말을 넘 많이 해서;;
