ChatGPT로 웹사이트 랜딩 페이지 만들기

안녕하세요 스터디 3기 수상생 입니다.
오늘은 제품에 대한 설명과 함께 랜딩페이지 웹사이트를 만드는 작업을 한번 해봤습니다.
아래의 과정으로 진행 하였고 랜딩페이지의 경우 어느정도 정형화가 되어 있어 간단하지만 괜찮은 결과가 나왔습니다

- ChatGPT에게 원하는 제품 설명 하기
- ChatGPT에게 Section 정의와 함께 요구사항을 주며 코드 작성 요청하기
- ChatGPT에게 부족한 코드 작성 요청
- ChatGPT에게 비어 있는 코드 작성 요청
- ChatGPT에게 오류 알려주고 오류 수정 하기
- 테스트 및 수정 보완 작업


1. ChatGPT에게 원하는 제품 설명 요청

ChatGPT프롬프트
write 친환경 에코백 product description (한글로)

2. ChatGPT에게 Section 정의와 함께 요구사항을 주며 코드 작성 요청하기

I'm trying to develop a simple landing pages with nextjs, typescript, tailwindcss, modern ui/ux style, component based, responsive. give me the step by step guide with code example.

1. landing page topic
- 친환경 에코백
2. Pages
1) Home
- Sections: Hero Sections, Features, CTA sections, Blog sections, News letter sections,
2) Price
- Sections: pricing Sections,
3) Blog
- Sections: Blog sections
4) About
- Sections: About sections, Testmonicals,
5) Contact

3. ChatGPT에게 부족한 코드 작성 요청

한번에 좋은 결과가 나오기에는 아직 ChatGPT의 길이 한계로 인해 쉽지 않습니다. 그래서 아래와 같이 부족한 부분의 코드 작성을 요청 합니다.

write code for remaining components and pages.

나머지 과정도 따라 해보시면 아래와 같은 간단한 랜딩페이지가 만들어집니다.

자세한 내용은 아래 블로그 내용을 참고 해보시면 됩니다.
https://blog.naver.com/daddy-bear-life/223088495986

아래 데모 페이지 링크도 첨부 합니다.
https://study-examples-product-landing-page.vercel.app/

이미 간단한 웹페이지를 만들어주는 서비스들이 많지만 직접 개발 하더라도 제품 설명을 주고 간단한 랜딩 페이지 웹사이트를 만드는게 쉬워 졌다는 생각이 들었습니다.