준비물 : 랜딩 페이지에 들어갈 이미지 필요한 툴 (사이트) : 챗GPT (+ 추후 출판을 위해서는 Vercel, GitHub의 계정 생성은 필수입니다만 이번 작업까지는 필수는 아닙니다.)
랜딩 페이지 레퍼런스들을 아카이빙 해 둔 사이트에서 참고할 사이트들을 서치합니다. GitHub에서 직접 소스를 찾는 방법, 소스 코드/템플릿 참고용 사이트에서 참고하기 좋은 자료들을 찾을 수도 있지만 초심자에겐 약간 진입 장벽이 있는 방법입니다. 내가 생성한 이미지, 또는 우리 브랜드와 제품을 잘 보여줄 수 있는 구조의 레퍼런스 사이트를 서치하여 해당 페이지의 주소를 보관해둡니다.
| 사이트 | 주소 | 용도 |
|---|---|---|
| Lapa Ninja | https://www.lapa.ninja/ | 랜딩페이지 디자인 레퍼런스 대형 아카이브 |
| Land-book | https://land-book.com/ | 감도 좋은 웹사이트 디자인 갤러리 |
| Godly | https://godly.design/ | 요즘 UI/UX, 웹 레이아웃 레퍼런스 |
| One Page Love | https://onepagelove.com/ | 원페이지 랜딩사이트 레퍼런스 |
| Curated Design | https://www.curated.design/ | 세련된 웹디자인 큐레이션 |
| Siteinspire | https://www.siteinspire.com/ | 브랜드/스튜디오/포트폴리오 사이트 참고 |
| Awwwards | https://www.awwwards.com/ | 고퀄리티 인터랙티브 웹사이트 레퍼런스 |
| Httpster | https://httpster.net/ | 개성 있는 독립 브랜드/스튜디오 웹사이트 |
| Commerce Cream | https://commercecream.com/ | Shopify 기반 이커머스 사이트 레퍼런스 |
| Admire The Web | https://www.admiretheweb.com/ | 오래된 웹디자인 레퍼런스 아카이브 |
저의 이번 작업의 목표는 단순한 홈페이지가 아니라, 제가 브랜딩한 가상의 브랜드 MONTEVE 의 무드와 제품 세계관을 보여주는 에디토리얼형 랜딩페이지를 제작하는 것이었습니다.
MONTEVE는 여성복/남성복과 향수를 함께 다루는 브랜드로 설정했고, 계절성이 강한 캠페인 페이지보다는 시간이 지나도 사용할 수 있는 영속성 있는 브랜드 랜딩페이지를 목표로 잡고 이미지를 생성했습니다.
제가 생각한 랜딩 페이지의 핵심 방향은 다음과 같습니다.
**- 제품 구매가 가능한 페이지지만, 너무 상업적으로 보이지 않을 것
이런 방향성에 부합하는 레퍼런스 사이트를 찾았고, 저는 아래의 사이트를 픽했습니다.
단 고급 인터랙션이 들어간 사이트를 100% 복제하는 작업, Webflow/Framer처럼 복잡한 CMS 구조의 사이트는 클로드 코드, 코덱스 없이 지피티 만으로 작업하기 어려울 수도 있습니다.
챗 지피티에서 아래 프롬프트를 입력하고 준비해 둔 이미지들을 첨부합니다.
랜딩 페이지의 코딩부터 vercel 를 통한 출판까지 한번에 손쉽게 끝내려면 클로드 코드, 코덱스를 이용하면 가장 좋습니다. 하지만 모든 수강생분들이 지피티와 클로드를 유료결제 중이신 건 아니기 때문에 또 웹페이지 작업이 처음이신 분들은 내 브랜드와 잘 어울리는 UI가 어떤 형식일지 감이 바로 오지 않으실 수 있기 때문에 토큰을 아끼는 방법 중 하나로 GPT를 통해 우선 작업을 해보는 간단한 방법을 안내드립니다. :-)
대괄호에 들어가는 부분은 내 브랜드, 내 레퍼런스에 맞게 수정해주시면 됩니다.
나는 [브랜드명]이라는 브랜드의 랜딩페이지를 만들고 싶어.
레퍼런스 사이트 주소와, 랜딩 페이지에 들어갈 이미지는 같이 첨부할게.
이미지의 수량이 부족할경우 일단 place holder 로 처리해줘.
브랜드 무드:
[예: 미니멀, 조용한 럭셔리, 여성복, 향수, 에디토리얼]
참고하고 싶은 사이트의 주소와 구조: [사이트 주소]
[예: 럭셔리 커머스 랜딩페이지, 룩북형 브랜드 사이트]
페이지 구성:
1. 상단 안내 바
2. 헤더 / 로고 / 메뉴
3. 히어로 섹션
4. 제품 카드
5. 브랜드 철학
6. 룩북 그리드
7. 뉴스레터
8. 푸터
디자인 조건:
- 배경색: [HEX 컬러 코드]
- 로고는 넓은 자간의 산세리프
- 전체적으로 미니멀하고 고급스럽게
- 모바일 반응형 포함
- HTML 파일 하나로 실행 가능하게
위 조건으로 index.html 페이지를 만들어줘.
위의 해당 프롬프트는 제가 선택한 레퍼런스 사이트와 제가 머리속으로 구상한 랜딩 페이지에 맞춤 셋팅한 프롬프트로 다른 형식의 사이트로 생성하시길 원하시는 경우 페이지 구성과 디자인 조건 부분을 수정해서 사용하셔야 합니다. 그 경우 아래의 프롬프트를 사용하여 분석 후 위의 프롬프트를 적절하게 수정하여 사용합니다.
이 [사이트 주소] 사이트를 레퍼런스로 참고하여
브랜드 [브랜드명]의 랜딩페이지를 만들어보고 싶어.
위 사이트의
1. 전체 구조
2. 핵심적인 시각 요소
3. 레이아웃 특징
4. 텍스트 스타일
5. 인터랙션 요소
6. 디자인 키워드
를 분석해줘.
MONTEVE 랜딩 페이지 링크 를 클릭하시면 실제 생성된 웹사이트를 보실 수 있습니다. 추가로 참고하시면 좋을만한 MONTEVE 랜딩페이지의 워크플로우 md 파일을 첨부해드렸습니다. 다운 받으셔서 GPT에 첨부하신, 다음 브랜드 명과 메뉴를 수정하셔서 사용하셔도 좋습니다.