lovable로 랜딩페이지 만들기

회사 랜딩페이지를 다양한 생성형 AI 도구를 활용해 제작해보았습니다. 특히, 커뮤니티에서 추천받은 lovable이라는 툴을 사용했습니다.

진행 방법

• ChatGPT
  
  1. chatGPT와 대화하면서 랜딩페이지 기획

ALT

한국 문자 메시지의 스크린 샷

2 chatgpt 결과

ALT

한국어 텍스트가있는 화면 스크린 샷

• lovable
  
  1. 회사 브로슈어와 자료를 업로드하고 그리고 chatgpt내용까지 입력
  2. 자동으로 랜딩 페이지를 만듬. 그 후 이것저것 수정함.
  3. 몇번 수정 안했는데 벌써 제한 ㅠㅠ
  

  

  ALT

  한국어 텍스트가있는 검은 색 화면

  4. 일단 GitHub로 연결 시도함.
  
  

  

  ALT

  한국어 텍스트가있는 웹 페이지의 스크린 샷

  
  
  
  
  

• trae:
  
  1. 15CTO 오픈채팅방에서 장그래님이 소개한 툴 (중국판 Cursor 느낌)
  
  2. 오호~~ 무료 사용이 가능하다니. 일단 테스트 진행함.

  

  ALT

  한국어 텍스트가있는 페이지

  
  3. https://www.trae.ai/ 프로그램 다운로드 후 실행
  

  

  ALT

  나무로 더 빨리 배송합니다

  
  4. trae에서 내 PC에 있는 파일을 불러와서 상세 페이지 디자인과 문구를 수정함
  (사전작업: GitHub에 있는 파일 내 PC에 저장함. )

  

  ALT

  Adobe Acrobat의 코드 편집기 스크린 샷

lovable 랜딩페이지 일부

ALT

한국어가있는 페이지의 스크린 샷

trae를 통해 수정 한 화면

ALT

한국 웹 사이트의 스크린 샷

결과와 배운 점

• 하나의 도구만으로는 작업을 마무리하기 어려울 수 있다는 점을 체감

• 도구 간 기능 제약이 존재하므로, 여러 툴을 조합하여 연결하면 유연하게 대응 가능함

• GitHub 연동이 작업 연속성을 유지하는 데 큰 도움이 되었음

• 다양한 AI 도구가 협업하듯 사용될 수 있다는 것을 직접 체험함

도움 받은 글

• 15CTO 오픈채팅방의 장그래님이 소개한 trae 툴 덕분에 후반 작업을 수월하게 진행할 수 있었습니다 🙌