준비물 : 키 비주얼 이미지 (없다면 생략) 필요한 툴 (사이트) : 핀터레스트, 챗GPT

랜딩 페이지 제작에 앞서 가장 필요한, 가장 중요하면서 선행되어야 할 부분은 랜딩 페이지에 들어갈 비주얼(이미지)들을 생성하는 작업입니다. 아래 전체 프로세스 중 오늘은 1, 2 단계인 레퍼런스 수집과 키비주얼, 이미지 제작을 오직 ‘핀터레스트’와 ‘챗 지피티’ 를 이용하여 쉽게 끝내는 방법을 안내드립니다. 저는 키비주얼을 미드저니로 생성하였으나 수강생 분들께서 따라하시기 가장 쉽고 스트레스가 없는 방법을 연구하여 안내드리니 여러분들은 오늘은 미드저니를 잠시 닫아두셔도 됩니다! 😊

<랜딩 페이지 제작 전체 프로세스>

**→ 레퍼런스 수집
→ 키 비주얼, 이미지 제작**
→ 룩북 / 레이아웃 스킬 정리
→ 랜딩페이지 구조 설계
→ HTML/CSS 제작
→ 반응형 구조 적용
→ 파일 테스트
→ 배포 준비

1. 레퍼런스 이미지 수집 or 기존 이미지 준비하기

핀터레스트, Cosmos 등에서 레퍼런스 이미지들을 수집합니다. :-) 키워드 ‘aesthetic instagram feed’ 를 검색하시면 이미 한가지 공통된 무드로 묶어둔 여러가지의 피드 구성 이미지들을 확인하실 수 있습니다. 실제 내 브랜드 제품의 촬영 사진을 사용하고 싶은 경우 이를 레퍼런스 이미지로 준비합니다.

강의 자료를 만드는 저는, 저작권 법을 준수하기 위해 9장 모두 제가 새롭게 생성한 이미지로 준비하여 아래의 3x3 그리드의 피드 이미지로 제작했습니다. 😊 제가 만든 이미지이니 레퍼런스 이미지로 아래 이미지를 저장하여 사용하셔도 괜찮습니다.

저는 저채도의 패션 에디토리얼 무드로 방향성을 잡고 레퍼런스 이미지들을 직접 생성했습니다. 저와 추구미, 방향성이 다르신 분들은 다른 레퍼런스 이미지를 수집하시면 되세요!

2. 레퍼런스 이미지를 첨부 후 프롬프트를 입력하기 (IN ChatGPT)

레퍼런스 이미지로 수집한 한장의 그리드 이미지를 챗지피티에 첨부 후 아래의 프롬프트를 입력합니다. 프롬프트의 구조와 내용을 알아보시기 쉽게 한글로 작성하였습니다. :-) 저와 추구미, 생성하고자 하는 이미지의 방향성이 같다면 아래 프롬프트를 그대로 사용하셔도 되시고 여러분이 원하시는 그리드 갯수, 비율, 무드로 수정하여 사용하셔도 좋습니다. 다만 한꺼번에 너무 많은 그리드 갯수로 이미지를 생성할 경우 단독 추출시 이미지의 디테일에 변형이 일어날 수 있기 때문에 2x2, 3x3 그리드를 추천합니다.

정확한 기획으로 각 그리드에 어떤 이미지가 들어갈 지 한장 한장 지시하는 것도 가능합니다만 오늘은 작업의 편의성을 위해 방향성만 지시하는 프롬프트를 사용했습니다.