소개
2주전 베스트사례로 공유드렸던 '강아지 영양제 추천 웹사이트' 따라서 회사 홈페이지 만들기의 2탄으로 지난번 만들었던 프로토타입을 기반으로 후속 작업을 진행하여 드디어 회사 도메인 주소를 사용한 실제 홈페이지를 완성했습니다.
Lovable를 사용하여 수정하는 동안 에러도 많이 나오고, 속도도 느려지고, $20/월 플랜의 Credit도 모두 소진하여 포기를 하고 외주 전문가에게 의뢰를 할까 했으나… 기존에 Lovable에 만들었던 페이지가 디자인도 좋고, 70%정도는 만들었다고 생각해서 그것을 최대한 살리고 싶어서 크몽에서 몇 분 컨택을 해봤는데 기존에 만들어 놓은 것에 이어서 작업해 줄 전문가도 찾기 어려웠고, 새로 개발하는데는 200만원 정도의 견적이 나와서,
다시 도전하기로 결심하고 $50/월 플랜으로 변경하여 다시 시도한 결과, 원하는 기능이 모두 구현된 멋진 홈페이지를 완성하여 퍼블리싱할 수 있게 되었습니다. https://qmeinno.com/
지난번 홈페이지를 프로토타입 작성 이후에 완성하기까지 과정을 공유하면 좋을 것 같아 올립니다
진행 방법
홈페이지 프론트엔드 lovable.dev, 백엔드는 lovable과 잘 연동되는 supabase
홈페이지에 삽입될 디자인과 사진은 gen spark, ChatGPT Sora, Google AI Studio,
진행 중 뭘 어떻게 해야할 지 모를 때는 Google AI Studio Stream 기능
지난번 1차로 만든 프로토타입 홈페이지는 에러가 너무 많고 페이지수가 많아서 포기하고 새 프로젝트를 만들어서 PRD입력부터 다시 시작했습니다.
1. 홈페이지 생성
프롬프트
이전에 만든 큐엠앤이이노베이션 홈페이지 구축 Product Requirement Document(PRD) 문서내용 입력주요내용: 프로젝트 개요, 배경 및 필요성, 목표 및 범위, 핵심기능 요구사항, 시스템.기술 요구사항, Constraints 등
프롬프트
회사로고와 어울리게 전체적으로 검은색과 파란색 계열 색상으로 변경하는데, 파란색 계열의 색상과 검은색,회색 색상을 다양하게 사용하여 단조롭게 느껴지지 않게 해줘홈페이지 생성 후에는 수정을 할 때는 왼쪽 아래에 있는 Edit 버튼을 누르면 홈페이지 화면을 스캔 한 후 특정 영역을 선택할 수 있도록 됩니다. 그러면 그 영역을 선택한 후 프롬프트에 요구사항을 입력하면 됩니다
배경색을 #F9FCFF로 바꿔줘
글자색을 #767677로 바꿔줘2. 컴포넌트의 삭제나 추가
이 컴포넌트는 없애줘
이 버튼 없애줘
~~섹션 만들어줘3. 제목이나 글에 대한 수정
에디트 메뉴로 글 박스를 선정하여,
직접 글을 고칠 수 있는 경우와
그 글을 고치기 위해 프롬프트에 어떤 글을 써달라고 명령하는 경우로 나뉩니다
아마도 그 글자에 어떤 효과들이 연결되어 있으면 프롬프트에 써달라고 하는 것 같습니다
4. 사진이나 이미지 업로드, 그래프와 수정
이미지를 교체하거나 입력할 때도 해당 영역에 클릭을 하고 프롬프트 창에 이미지를 복사붙여 넣기를 한 후에 명령하면 됩니다
이 그림을 넣어줘, 이 그림으로 교체해줘, 이 그림 삭제해줘동영상이나 GIF파일도 업로드 가능한지 물었더니, 직접 업로드는 안되고 유튜브에 올린 후 링크버튼을 만드는 게 좋다고 합니다
(인물사진 업로드)
사진을 올릴 때 고생했던 것은 제가 가지고 있는 사람들 사진은 여권사진 종류가 많은데, 사진을 업로드하는 자리가 가로로 길어서(아마도 스마트폰에서도 문제없이 볼 수 있도록 세팅을 해야하기 때문에 그 사이즈에 맞게하기 위한 것 같습니다) 사진을 편집하는데 어려움이 있었습니다.
세로사진을 그냥 넣으면 머리가 잘리고 얼굴이 엄청 크게 나오고, 가로가 긴 사진을 만들려고 ChatGPT, Sora에서 가로가 긴 사진으로 만들면, 얼굴이 전혀 다른 사람이 되어 나와서… 그래도 얼굴변화가 가장 작았던 방법은 Google AI Studio에서 작업한 것있습니다.
덕분에 표정이 안좋은 외국분의 사진을 웃는 모습으로 만들어 넣기도 했네요
(이미지생성 및 업로드)
입력된 이미지 생성에서 어려웠던 점은 gen spark가 디자인은 가장 예쁘게 이미지를 만들어 주는데 철자가 틀리고 글씨가 깨지는 점 이었습니다. 그래서 gen spark에서 디자인 이미지를 생성한 후 ChatGPT. Sora로 가지고 와서 글자를 읽으라고 한 후 철자를 맞추어 이미지에 추가해 달라고 요청해서 해결했습니다
(그래프 수정)
입력된 그래프의 숫자등을 수정하는 것도 해당영역을 선정한 후 프롬프트에 숫자를 입력한 후 수정해 달라고하면 쉽게 수정됩니다
5. 토큰을 절약하면서 수정할 수 있는 요령
Lovable에게 토큰은 어떻게 차감되냐고 물었더니, 프롬프트 명령을 내릴 때 마다 차감된다고 하더군요. 처음는 에러가 날까봐 겁먹에서 글이나 그림도 별도로 한개씩 지시하여 고쳤는데, 그렇게 하면 매 지시마다 토큰이 차감되는 것 같습니다. 그래서 나중에는 한 영역을 선정한다음에 그 영역에 해당하는 지시를 한꺼번에 입력하여 동일한 수정을 하더라고 토큰 차감량을 줄였습니다.
6. Supabase를 연결한 백엔드 연결
고객문의 데이터나 GPT체험자 데이터를 DB화하기 위해 백엔드 구축이 필요하는 이 기능은 lovable과 잘 연동되는 Supabase를 활용하면 됩니다. Supabase는 오픈소스기반의 Backend서비스 제공 플랫폼이라고 하네요.
사용자 정보수집등 하기위해 어떻게 해야하는지 Lovable에게 물었습니다.
무료 플랜 제공: 500MB 데이터베이스와 월 5만 명의 사용자 인증 등 강력한 무료 플랜을 지원한다고 합니다
Supabase 주요 기능
사용자 인증: 안전한 로그인 및 회원가입 기능 구현
데이터 저장: 애플리케이션 데이터를 클라우드 데이터베이스에 저장
Edge Functions: AI 기능, 결제 처리, 이메일 통합 등 고급 기능 추가
역시 Supabase에 통합하라고 하네요. 기능구현을 위해서 오른쪽 상단 노색 Supabase버튼을 눌러서 연결하라고 알려주십니다.
Supasbase에 가서 가입하고,
프로젝트를 만들고,
Lovable과 연결을 합니다
그런데 Supabase와 연결을 하다가 에러가 났습니다. 에러를 해결하는 방법을 Lovable이 가르쳐줍니다. 그런데 무슨 소리를 하는건지, 어디로 가서 뭘 입력 하라는 건지 도통 모르겠습니다.
이제는 Google AI Studio Stream/Share Screen의 도움을 받아야합니다. Lovable과 Supabase두개 화면을 띄워놓고 Google AI Studio와 문답을 해가며 시도를 해서 문제 를 해결했습니다.
그 결과 아래와 같이 홈페이지에 문의를 남긴 분들의 데이터가 Supabase Table에 잘 저장됩니다
7. 배포와 회사 도메인 연결
퍼블리시는 이버튼을 눌러서 하면됩니다. 그냥 lovable앱주소로 하면 그것으로 완료되고
외부 도메인에 연결할꺼면, Custom domain에 연결하는 메뉴를 선택 후에 요청하는대로 도메인 주소 넣고, 진행하다가 보면 나중에는 네임서버를 수동으로 설정할 때 필요한 호스트명과 IP주소를 알려줍니다
저희회사 도메인은 후이스에서 받은 것이라서, 후이즈에 전화해서 서비스 도음을 받아 연결 시켰습니다. 테스톱은 물로 스마트폰에서도 잘 작동됩니다. 이제 완성!!
결과와 배운 점
다시 시도한 결과, 원하는 기능이 모두 구현된 멋진 홈페이지를 완성하여 퍼블리싱할 수 있게 되었습니다. https://qmeinno.com/
결론적으로 이제 회사의 B2B세일즈를 할 수 있는 외부커뮤니케이션 허브가 생겼습니다. 이 홈페이지를 어떻게 더 잘 활용할지도 더 고민해야겠죠?
실제 외부에 큰 비용을 들이지 않고 스스로 구축한 점도 좋았으며, 앞으로도 웹 호스팀 회사에 의존하지 않고 내가 직접 관리, 수정, 개선할 수 있다는 점도 매우 매력적이었습니다. 이번 경험을 바탕으로 그 동안 어렵게만 느꼈던 웹이나 앱을 도구로 훨씬 편하게 사용할 수 있을 것 같은 생각이 들었습니다
Lovable을 사용하여 홈페이지를 수정하면서 알게된 점들을 몇가지 정리했습니다
Lovable를 사용해서 홈페이지를 수정,완성하면서 알게된 점
1. 기본적으로 Lovable은 홈페이지를 아주 빠르게 세련된 홈페이지를 만들어 줍니다. 디자인이 좋습니다
2. 홈페이지 생성시 원하는 색상이나 로고를 넣고 로고와 어울리게 만들어달라고 하면 잘 만들어 줍니다
3. 하지만 그 이후 디테일한 부분을 수정해가면서 시간과 노력이 투입되는데, 수정을 최소화하려면 처음에는 페이지 수와 섹션을 가볍게 가지고 가는데 더 좋을 것 같습니다. 기능이나 페이지는 언제든지 더 추가할 수 있습니다.
4. 수정하다가 보면 에러가 자주 발생하는데, 코드를 모르는 입장에서는 가장 두려운 에러가 발생해도 Fix the error버튼이 있기 때문에 그것만 누르면 스스로 수정하니 염려하지 않아도 됩니다
또 에러가 발생하여 잘 수정되지 않더라도 원하는 어느시점 돌아가는 기능이있으므로 염려하지 않아도 됩니다
5. 경험적으로 볼 때 수정시 error가 발생하는 경우를 보니, 애니메이션 효과 등 무언가 기능이 들어간 것들을 수정 요청했을 때 error가 발생되고, 그 error를 수정하느라 시간과 토큰이 많이 소요됨으로, 처음에 홈페이지 생성시부터 애니메이션 효과는 넣지 말라고 하는 것이 좋습니다. 그래서 이번에 홈페이지를 새로 빌드하면서 PRD(Product Requirement Document)에 Constraints 항목을 추가하여 “업로드된 이미지는 반응형 애니메이션 효과를 적용하지 말 것, 반응형 애니메이션을 효과는 필요한 경우 추후 추가 예정”이라는 지시를 포함했습니다.
6. 모든 AI가 마찬가지이지만 내가 더욱 디테일하고 구체적으로 수정사항을 지시할수록 에러가 발생할 확률이 줄어듭니다
7. 비개발자 입장에서 무언가 문제가 발생했을 때 해결에 도움을 줄 수 있는 ‘Google AI Studio; Stream 중 Share Screen’이 있으니 뭔가 새로운 것을 훨씬 편하 게 도전해볼 수 있을 것 같습니다
도움 받은 글 (옵션)
(베스트사례) 강아지 영양제 추천 서비스 웹사이트 만들어보기(강아지 영양제 추천 서비스 웹사이트 만들어보기)
(스터디게시글)AI로 진화하는 노코드 웹 앱 개발 - Lovable.dev & Supabase 완벽 가이드(AI로 진화하는 노코드 웹 앱 개발 - Lovable.dev & Supabase 완벽 가이드)
홈페이지만들기 1부 베스트사례 '강아지 영양제 추천 웹사이트' 따라서 회사 홈페이지 만들기(베스트사례 '강아지 영양제 추천 웹사이트' 따라서 회사 홈페이지 만들기)
(유튜브)Lovable 플스택 개발 가장 빠르게 시작하기 https://youtu.be/2ko3f9rPAoQ?si=DhYEYZtFP091SOZv