소개
그 동안 오프라인에서 만난 주변 기업들과 일을 해와서 제대로 된 회사 홈페이지가 없었는데, B2B마케팅과 세일즈를 적극적으로 하기 위해서는 당사 서비스와 역량을 더 자세하게 소개할 수 있는 홈페이지가 절실히 필요한 상황이었습니다. 홈페이지에 대한 구성과 아이디어가 부족했고, 우선순위에 밀려 미루고 있었는데 이번 베스트 사례 발표를 보고 한번 원하는 홈페이지의 프로토타입을 만들어 보기로 했습니다
진행 방법
챗GPT 4o GPTs, 챗GPT o1, lovable이용
1. 프롬프트 고도화 작업 진행 : 챗GPT 4o -> 프롬프트 만들기 GPTs 활용(곽은철님)
프롬프트: (회사소개자료 pdf파일을 첨부하고) 첨부한 자료를 회사소개서인데 해당 회사인 '큐엠앤이이노베이션'의 홈페이지를 만들려고 합니다
(제공된 프롬프트 일부)
2. 웹 사이트 콘텐츠 구성안 작성: 챗GPT4o
프롬프트: 웹사이트 콘텐츠 구성안 작성해주세요
아래와 같은 콘텐츠 구성안을 받았습니다
(제공된 콘텐츠 구성안 일부)
3. 웹 사이트에 대한 회의록 작성: 챗GPT o1
프롬프트: 생성해준 구성안을 복붙하여 회의록 작성을 요청했습니다
아래와 같은 회의록을 받았습니다
(제공된 회의록 일부)
4. 웹 사이트에 대한 2차 회의록 작성: 챗GPT o1
회의록 내용을 보니 회사 소개서 내용을 다시 한번 숙지하는 것이 좋을 것 같아서 첨부하고, 원하는 기능에 대한 논의가 빠진 것 같아서 추가해서 다시 회의록 작성을 요청했습니다
프롬프트: 회의록에 추가하고 싶은 사항은 정규진대표가 개발한 "신사업/신제품 기회발굴도구와 창의적 문제해결안 도출에 관한 여러가지 GPTs를 활용하여 사용해볼 수 있도록하고, 그를 통해 고객 정보를 확보하는 기능을 추가하는 것임" 그것을 포함하여 2차 회의록을 작성해줘. 2차 회의시 첨부한 회사소개서를 다시 한번 참조해서 기획해줘. 1차 회의내용을 보면 핵심 서비스들에 대한 내용이 부족한데. 각각의 서비스에 대해 더 자세하게 소개해야할 것
5. 웹 사이트에 대한 3차 회의록 작성: 챗GPT o1
2차 회의록 내용을 보니 회사서비스에 대한 구분이 명확하지 않은 것 같아 그 부분을 보완하여 3차 회의록 작성을 요청했습니다
프롬프트: 회사의 서비스로 1) 제품,기술 난제해결 2) Data Science&AI모델개발 3)생성형AI를 활용한 R&D 혁신 으로 구분해서 정리해줘 그 구분을 반영하여 3차 회의록 작성해줘
6. 웹 사이트에 대한 PRD 작성: 챗GPT o1
3차 회의록 내용을 보니 요청한 사항이 모두 반영되었으므로 PRD작성을 요청했습니다
프롬프트: 위의 1,2,3차 회의록을 종합하여 '큐엠앤이이노베이션'의 홈페이지에 대한 Product Requirement Document(PRD)만들어줘
(제공된 PRD 일부)
7. 웹 사이트 생성: Lovable
작성된 PRD를 입력하여 웹사이트를 생성했습니다
회사로고를 첨부하고 PRD내용을 입력한 후 실행을 시키니 홈페이지를 만들기 시작합니다
프롬프트:
8. 웹 사이트 수정 및 보완: Lovable
생성된 웹페이지에 요청한 사항 중 반영되지 않은 것도 있고, 특히 첨부해야할 사진 이나 도표, 자료 등이 많기 때문에 그러한 사항을 수차례 요청했습니다
요청사항들의 내용을 보면
- 오류사항 수정, 문구수정
- 링크되는 페이지 생성
- 추가로 작성되어야 하는 정보제공
- 그림이나 사진, 도표 제공하여 반영요청
추가한 이미지 중 메인페이지 대문 컴포넌트에 등록된 이미지는 Lovable에서 제공해준 이미지가 적당하지 않았기 때문에 genspark에서 몇가지 생성해보고 가장 적당한 것으로 선정하여 업로드 했습니다
수정과정 중에 에러도 많이 발생하여, 에러수정을 계속 요청해가면서 프로토타입 홈페이지를 거의 완성했으며 게시도 하였습니다.
큐엠앤이이노베이션 홈페이지 게시링크: qm-innovation-hub (https://qm-innovation-hub.lovable.app/#team)
폰에서도 잘 작동됩니다.
블로그 마케팅 스터디에서 배운대로 랜딩페이지 역할을 하기위해서는 리드정보를 확보하는 것이 가장 중요한데 그것을 위해서 당사에서 만든 “이노베이션 과제 수행 지원하는 GPTs 를 체험하도록 하고, 그것을 통해 고객정보를 확보할 수 있도록 하려고 합니다”
결과와 배운 점
Lovable을 사용하여 홈페이지를 수정하면서 알게된 점들을 몇가지 정리했습니다
Lovable를 사용해서 홈페이지를 만들면서 알게된 점
1. 처음 Chat GPT에서 여러 번의 회의를 거쳐 만든 Product Requirements Document(텍스트) 를 올려서 처음 홈페이지를 만들어도 기본적으로 잘 만들어줌
2. 하지만 그 이후 더 필요한 페이지와 기능을 요청하면서 에러가 자주발생함. 특히 그림으로된 첨부화일(pdf파일을 인식할 수 없어서 삽입을 원하는 내용이 있는 파워포인트 파일을 챕쳐한 후 그림으로 복붙을 하여 첨부함) 이 있거나 몇 개를 한꺼번에 올리면 에러가 나거나, 원하지 않는 위치에 삽입된 결과를 얻기도 함
3. 그림 포맷의 파워포인트 페이지내 텍스트는 잘 인식하여 홈페이지내에 텍스트로 잘 반영함
4. 기능적인 요청사항은 에러 없이 잘 수행하는 편인데, 첨부 그림을 올리던가, 교체한다던가 그러면 에러가 자주 발생
에러 수정하다가 하루 공짜 사용량을 모두 소진하여, 월 20달러 유료회원 가입
5. 이미지가 원하지 않는 곳에 배치되면 나중에 수정이 더 어려워지므로 처음부터 하나씩 요청하는 게 더 바람직할 듯
6. 더 바림직한 것은 PRD를 더욱 자세하게 만들어서 이후 최소한으로 수정할 수 있도록 하는 것임. 하지만 첨부할 그림이나 도식들은 처음부터 어떻게 첨부해야 하는 지는 알지 못함
(하나씩 차근차근 수정할 때 요청문 예시)
“메인페이지의 Certification 컴포넌트에서 우수사례 표창장 등록 이미지를 첨부한 이미지로 교체해줘”
제품.기술 난제 해결 페이지의 QM&E 이노베이션 3대 핵심역량 컴포넌트에 등록한 이미지를 제거해줘
도움 받은 글 (옵션)
민경준님의 사례 '강아지 영양제 추천 서비스 웹페이지'사례를 완전 따라함
블로그 마케팅 팀에서 배운 '디지털 마케팅'강의에서 배운내용 반영
B2B세일즈 팀에서 배운 리드확보에 대한 내용 반영