러버블 + ChatGPT로 회사 홈페이지 처음 만들기 도전기

소개

중학교 시절 나모웹에디터, 이후 워드프레스로 간단한 웹페이지를 만들었던 경험은 있었지만, 이번에는 러버블과 ChatGPT라는 새로운 조합으로 회사 소개 웹페이지를 제작해보았습니다. AI의 도움을 받아 정말 손쉽게, 그리고 생각보다 퀄리티 높은 결과물을 만들 수 있었어요. 🙌

진행 방법

사용한 도구

러버블 (Lovable)
ChatGPT (프롬프트 구성 및 방향 설정용)

주요 작업 순서

러버블 초보자를 위한 프롬프트 요청

안녕? 넌 러버블로 웹페이지 생성을 위한 프롬프트 전문가야.
회사 홈페이지를 러버블로 만들어보고 싶은데, 러버블을 한번도 사용해 본적이 없는 초보자야.
내 수준을 감안해서 러버블로 웹페이지를 만들려면 어떻게 해야하는지 상세하게 알려줘.

회사 소개서를 바탕으로 콘텐츠 구성 방향 요청
- PPT 슬라이드를 전달하고, 그 내용을 어떤 메뉴 구성으로 넣으면 좋을지 GPT에게 요청

GPT가 정리한 콘텐츠 맵핑 기반 웹페이지 기획

예: Home, About, Services, Contact 등의 구조로 구성

아래와 같은 추가 프롬프트도 사용함:

첨부한 이미지는 회사 CI야. CI 색을 기반으로 홈페이지 전체 기본 색상을 구성하고 싶어.
홈페이지 구성해야하는 색상들 톤은 어떻게 기준을 잡고 가면 좋을지, 내가 제공했던 회사소개서 내용을 기반으로 홈페이지 전체적인 분위기는 어떻게 가면 좋을지 감안해줘.
콘텐츠 매핑은 아래와 같이 진행 할거야. 이거에 맞는 러버블 랜딩페이지 생성을 위한 프롬프트 구성해줘.
-----------------------
#콘텐츠 매핑
1. Home
Hero 영역

GPT가 작성해준 CI 활용 예시 코드:

• Header 섹션  
  – 좌측 상단에 자산 ‘logo-ci.png’를 로고로 배치  
  – 로고 높이: 60px, 링크: 홈페이지 최상단  
  – 우측에 메뉴(Home, About Us, Services, …)

CI 색상 기반으로 웹사이트 색상 톤 구성
- GPT에게 색상 조화 기준 제안 받음
- primary 색이 실제 페이지에서 푸르게 보여서 색상 코드 재조정
러버블에 프롬프트 입력하여 랜딩페이지 생성
- 생성된 결과물 확인 후 콘텐츠 보완 및 색상 재수정
기호 위치 수정 이슈
- 동그라미 기호 위치 오류 발생 → 화면 캡처해서 수정 요청하는 방법으로 해결