AI로 랜딩페이지 만들어 보기

초보자를 위한 상세 가이드

소개

안녕하세요! 오늘은 AI를 활용해 랜딩 페이지를 빠르게 만들고 배포하는 방법에 대해 상세히 알아보겠습니다. 코딩 경험이 전혀 없는 분들도 쉽게 따라 할 수 있도록 단계별로 설명드리겠습니다.

랜딩 페이지란 무엇일까요? 간단히 말해, 웹사이트의 첫 페이지입니다. 주로 제품 홍보나 마케팅 캠페인을 위해 만들어지며, 방문자의 관심을 끌고 행동을 유도하는 역할을 합니다.

이 가이드에서는 가상의 마케팅 회사인 '크리에이티브 웨이브'의 랜딩 페이지를 만드는 과정을 통해 AI를 이용한 웹사이트 제작 방법을 상세히 설명하겠습니다.

 

1. AI를 이용한 웹사이트 개발

사용 도구

• ChatGPT: AI 언어 모델로, 기본 HTML, CSS, JavaScript 코드를 생성합니다.
• Tailwind CSS: CSS 프레임워크로, 미리 정의된 클래스를 사용해 쉽게 스타일을 적용할 수 있습니다.
• Replit: 온라인 코드 에디터로, 코드를 작성하고 실시간으로 결과를 확인할 수 있습니다.

단계별 가이드

1. ChatGPT 접속하기:
   • https://chat.openai.com 에 접속합니다.
   • 계정이 없다면 회원가입을 진행합니다.
2. ChatGPT에 프롬프트 입력하기:
   • "마케팅 회사 '크리에이티브 웨이브'의 랜딩 페이지를 위한 HTML, CSS (Tailwind 사용), JavaScript 코드를 작성해 주세요. 회사 소개, 서비스 목록, 연락처 양식을 포함해 주세요."라고 입력합니다.
3. 생성된 코드 확인 및 복사:
   • ChatGPT가 생성한 코드를 검토합니다.
   • 전체 코드를 복사합니다.
4. Replit에서 새 프로젝트 만들기:
   • https://replit.com 에 접속합니다.
   • 새 프로젝트를 만들고 "HTML, CSS, JS" 템플릿을 선택합니다.
5. 코드 붙여 넣기 및 수정:
   • Replit의 index.html 파일에 ChatGPT가 생성한 코드를 붙여 넣습니다.
   • 필요한 경우 코드를 수정합니다. 예를 들어, 이미지 URL을 실제 이미지로 교체하거나 텍스트를 수정할 수 있습니다.
6. 결과 확인:
   • Replit의 "Run" 버튼을 클릭하여 웹사이트를 미리 봅니다.
   • 디자인이나 내용이 마음에 들지 않으면 ChatGPT에 수정을 요청하고, 위 과정을 반복합니다.

2. 문의 기능 자동화

사용 도구

• Make (구 Integromat): 다양한 앱과 서비스를 연결하여 자동화 워크플로우를 만드는 도구입니다.
• Google Sheets: 온라인 스프레드시트 서비스로, 데이터를 저장하고 관리합니다.

단계별 가이드

1. Make 계정 만들기:
   • https://www.make.com에 접속하여 계정을 만듭니다.
2. 새 시나리오 생성:
   • 대시보드에서 "Create a new scenario" 버튼을 클릭합니다.
3. 웹훅 설정:
   • "Add a module" 클릭 후 "Webhooks" 선택합니다.
   • "Custom webhook" 선택합니다.
   • 웹훅에 이름을 부여합니다 (예: "크리에이티브 웨이브 문의").
   • "Save" 버튼을 클릭하면 고유한 웹훅 URL이 생성됩니다.
4. Google Sheets 연결:
   • "Add another module" 클릭 후 "Google Sheets" 선택합니다.
   • "Add a new row" 액션을 선택합니다.
   • Google 계정에 연결하고 사용할 스프레드시트와 시트를 선택합니다.
5. 데이터 매핑:
   • 웹훅에서 받은 데이터를 Google Sheets의 열과 매핑합니다.
   • 예: 이름, 이메일, 메시지 등
6. 시나리오 활성화:
   • 우측 하단의 토글스위치를 켜서 시나리오를 활성화합니다.
7. 랜딩 페이지에 웹훅 URL 추가:
   • Replit로 돌아가 HTML 코드의 form 태그에 action 속성으로 웹훅 URL을 추가합니다.

3. 웹사이트 배포

  웹사이트 배포는 여러가지가 있는데 오늘은 Tiny Host에 대해서 알아 보겠습니다.

사용 도구

• Tiny Host: 간단한 정적 웹사이트 호스팅 서비스
• 도메인 등록 서비스 (예: Namecheap, GoDaddy 등)
• Cloudflare: DNS 관리 및 보안 서비스

단계별 가이드

1. Tiny Host에 사이트 업로드:
   • https://tinyhost.com에 접속하여 계정을 만듭니다.
   • 새 프로젝트를 생성하고 Replit에서 만든 파일들을 업로드합니다.
2. 도메인 구매:
   • 원하는 도메인 등록 서비스에서 도메인을 구매합니다.
3. Cloudflare 설정:
   • https://www.cloudflare.com에 접속하여 계정을 만듭니다.
   • "Add a site"를 클릭하고 구매한 도메인을 입력합니다.
   • Cloudflare가 제공하는 네임서버 정보를 복사합니다.
4. 도메인 등록 사이트에서 네임서버 변경:
   • 도메인을 구매한 사이트의 관리 페이지로 이동합니다.
   • 네임서버 설정을 찾아 Cloudflare에서 제공한 네임서버로 변경합니다.
5. Cloudflare에서 DNS 설정:
   • Cloudflare 대시보드의 DNS 섹션으로 이동합니다.
   • "Add record" 클릭 후 A 레코드를 추가합니다.
   • Tiny Host에서 제공한 IP 주소를 입력합니다.
6. Tiny Host에서 커스텀 도메인 설정:
   • Tiny Host 대시보드에서 프로젝트 설정으로 이동합니다.
   • 커스텀 도메인 섹션에 구매한 도메인을 입력하고 저장합니다.
7. SSL 인증서 설정:
   • Cloudflare에서 SSL/TLS 섹션으로 이동합니다.
   • "Full" 모드를 선택하여 SSL을 활성화합니다.

결론

장황하게 하는것 보다 요약정리 좋아요!!
이렇게 하면 AI의 도움을 받아 전문적인 랜딩 페이지를 만들고, 문의 기능을 자동화하며, 실제 도메인으로 배포까지 완료할 수 있습니다. 코딩 경험이 없어도 이 과정을 따라 하면 나만의 웹사이트를 만들 수 있습니다.

처음에는 복잡해 보일 수 있지만, 한 번 해보면 생각보다 쉽다는 것을 알 수 있을 거예요. 계속 연습하고 실험해 보세요. 여러분의 비즈니스나 개인 프로젝트에 큰 도움이 될 것입니다. 파이팅!