랜딩 페이지 제작 가이드  단계별 안내

소개

코드를 한 줄도 작성하지 않고 아름답고 반응형인 랜딩 페이지 섹션을 디자인하고 싶었던 적이 있나요? Selldone Plugin in ChatGPT과 함께라면 그 꿈이 현실이 됩니다.

이 가이드에서는 영감 이미지에서 시작해 Selldone의 Page Builder 내부에 바로 적용 가능한 전체 반응형 섹션을 AI의 도움으로 단계별로 만드는 방법을 알려드립니다.

끝까지 따라 하면 Selldone 사이트에 바로 게시할 수 있는 전문적으로 디자인된 섹션을 얻게 될 것입니다.

💡 참고: Selldone의 Page Builder는 Vuetify (Vue 3) 기반으로 제작되어 있으며, 플러그인이 생성하는 모든 섹션은 Selldone의 최신 반응형 프론트엔드 프레임워크와 완벽하게 호환됩니다.

1단계  영감 디자인 준비

먼저 영감을 주는 섹션 디자인을 찾으세요. 이 튜토리얼에서는 참조 예제로 국내 주요 전자상거래 사이트인 Coupang(쿠팡) 홈페이지의 섹션을 사용합니다. 깔끔하고 모던한 레이아웃으로 상품을 강조하는 이미지와 명확한 CTA가 특징입니다.

그 Coupang 섹션의 스크린샷을 찍어두세요. ChatGPT에서 Selldone Plugin을 사용할 때 시각적 참조로 활용할 것입니다.

💡 팁: 구조가 잘 잡히고 시각적으로 균형 잡힌 섹션을 선택하세요. 디자인이 명확할수록 ChatGPT가 분석하고 재현하기가 더 쉬워집니다.

⚠️ 공정 사용 안내: 여기서 사용한 Coupang 스크린샷은 교육 및 예시 목적으로만 사용되었습니다. 모든 상표, 이미지 및 레이아웃은 Coupang의 자산이며, 이 튜토리얼은 Coupang과 제휴하거나 승인을 받은 것이 아닙니다.

2단계  Selldone 플러그인으로 ChatGPT 열기

ChatGPT에서 Selldone Plugin이 활성화되어 있는지 확인하세요:

1. ChatGPT → Settings → Beta Features → Plugins로 이동해 플러그인을 활성화합니다.
2. Plugin Store에 접속하여 Selldone Plugin을 설치합니다.
3. 플러그인이 활성화된 상태로 새 채팅을 시작하세요.

채팅창 옆에 Selldone 로고가 보이면 준비가 완료된 것입니다.

3단계  참조 디자인 업로드

스크린샷을 업로드한 뒤 명확한 프롬프트를 입력하세요. 예를 들어:

상단 메뉴에서 최신 버전의 ChatGPT를 사용하고 있는지 확인하세요.

“이 이미지처럼 섹션을 만들고 싶습니다. 반응형 글꼴 크기, 커스터마이징 가능한 글꼴 및 카드 색상, 카드 모양은 원형 또는 라운드형 사각형으로 선택 가능하게 해주세요.”

ChatGPT(및 Selldone)는 이미지를 분석해 Selldone의 Page Builder와 완전히 호환되는 Vuetify (Vue 3) 기반 코드를 생성합니다.

Selldone에서 새 랜딩 페이지 만들기

맞춤 섹션을 추가하기 전에 Selldone에서 새 랜딩 페이지를 먼저 생성합니다.

1. 상단 메뉴에서 Pages → Landing → Add New Landing으로 이동합니다.
   
2. 이 화면에서 기본 제공되는 세 가지 랜딩 페이지 템플릿이 표시됩니다.
3. 원하는 템플릿을 클릭해 Landing Page Designer에 들어갑니다. 디자이너 내부의 왼쪽 패널에서 “Code” 요소를 찾아 Page Builder 영역으로 드래그하세요. 이 “Code” 요소가 ChatGPT가 생성한 섹션 코드를 붙여넣거나 가져오는 곳입니다.
4. Code 상자 안을 클릭하면 툴바가 활성화됩니다 — 상단 툴바가 나타나면 자주 사용하게 됩니다.

- 첫 번째 아이콘 (<>)은 코드 편집기를 열며, 여기서 ChatGPT가 생성한 HTML 및 Vue 기반 섹션 코드를 붙여넣거나 편집할 수 있습니다.- 두 번째 아이콘은 속성(Properties)을 열어 섹션의 레이아웃, 간격 및 시각적 설정을 조정할 수 있습니다.

4단계  ChatGPT가 생성한 초기 코드를 편집기에 붙여넣기

버전이 잘못 될 수 있음

이제 ChatGPT가 처음 생성한 코드 버전을 복사해야 합니다.
스크린샷에서 보듯 결과가 참조 이미지와 달라 보일 수 있습니다 — 이는 ChatGPT가 잘못된 버전을 생성했기 때문입니다. 이런 경우는 정상이며 걱정할 필요가 없습니다.수정하려면 참조 이미지를 다시 전송하고 다음과 같이 요청하세요:

“위에서 보낸 이미지에 집중해 주세요. 이미지를 다시 보냅니다.”

이제 ChatGPT가 다시 시작해 새로운 코드를 생성합니다. 이 버전이 최종본은 아니며 이후 추가 요청과 조정이 필요할 수 있습니다.이제 코드를 복사하여 코드 편집기에 붙여넣고 Apply를 누르세요:

중요 참고: 코드 편집기의 기본 모드는 HTML입니다. 반드시 Vue 옵션으로 전환해야 합니다 — 그렇지 않으면 빈 결과가 나타납니다.

이제 ChatGPT가 생성한 첫 번째 올바른 섹션 버전을 볼 수 있습니다. 툴바의 두 번째 항목을 눌러 속성 메뉴를 열어 조정하세요. 보시다시피 비즈니스에 맞게 섹션을 맞춤 설정할 수 있는 다양한 옵션이 제공됩니다.

기본값으로 재설정(RESET TO DEFAULT) 옵션:

때때로 업데이트된 코드를 붙여넣었는데도 변화가 보이지 않을 수 있습니다. 이런 경우에는 편집이 근본적인 변경을 요구할 때 발생합니다. 이럴 때는 Reset to Default 옵션을 클릭해야 합니다. 이 옵션을 사용하면 모든 사용자 지정 설정(새 텍스트, 색상, 글꼴 크기, 업로드한 이미지 등)이 삭제되며, 말하자면 공장 초기화와 같습니다 🙂.따라서 변경 사항이 제대로 적용되지 않을 때만 이 옵션을 사용하세요.

5단계  섹션 조정하기

ChatGPT는 이 방법을 통해 섹션을 만든 다른 사용자들의 대화 내용을 학습하여 이제 보다 포괄적인 레이아웃을 생성합니다 — 따라서 모든 요소를 하나씩 요청할 필요는 없습니다. 대화를 길고 명확하게 유지할수록 ChatGPT는 디자인 취향을 더 잘 이해하고 더 완성도 높은 결과를 제공합니다.기본으로 생성된 코드는 이미 꽤 반응형이지만, 글꼴 크기, 글꼴 굵기, 섹션 또는 카드의 높이와 너비, 기타 시각적 요소 등은 여전히 조정할 수 있습니다.
예를 들어, 데스크탑 큰 화면에서는 한 줄에 카드 8개, 태블릿에서는 4개, 모바일에서는 2개를 표시하도록 설정할 수 있습니다.
ChatGPT가 이러한 조정을 어떻게 해석하고 적용하는지 확인해 보세요 — 다음 단계에서 몇 가지 추가 편집이나 요청이 필요할 수 있습니다.이 경우 더 나은 레이아웃을 위해 섹션 최대 너비(Section Max Width)를 1400px로 변경하고, 카드 표시 수를 데스크탑/태블릿/모바일에 각각 8, 4, 2로 설정하는 것을 권장합니다.
간격을 세밀하게 조정하려면 데스크탑의 카드 간격(Cards Gap)을 약 12px로 줄여 보세요. 또한 카드 높이를 180px에서 160px으로 줄이거나 이미지 크기를 조정해 디자인에 맞출 수 있습니다.

설정값을 바꿔가며 실험하는 것이 중요합니다 — 숫자를 조금씩 조정하면서 가장 잘 맞는 스타일을 찾아보세요.

결과를 더 잘 확인하려면 직접 이미지를 업로드하세요. 투명 배경 이미지를 권장합니다. 이렇게 하면 Card Background Color 옵션이 모든 카드에 균일하게 적용되어 섹션이 더 깔끔하고 전문적으로 보입니다.이미지를 업로드하고 텍스트를 편집한 뒤 모든 작업을 마쳤으면 저장 버튼을 클릭하거나 Windows에서는 Ctrl + S를 눌러 즉시 저장하세요.
이제 Live Page를 열어 섹션이 실제로 어떻게 보이는지 확인할 차례입니다.
라이브로 확인하려면 Live Preview 옵션을 사용하거나 랜딩 페이지 이름이 표시된 버튼을 클릭하면 구매자 보기로 페이지가 열립니다. 다만 Live Preview는 다양한 기기에서의 반응형 특성을 완전히 반영하지 못할 수 있으므로 최종 확인용으로만 사용하기보다는 아래에서 설명할 전체 테스트 방법을 권장합니다.이것이 코드 결과입니다. 이제 여러 화면 크기에서 제대로 동작하는지 테스트해야 합니다.
Windows 브라우저에서 Web Developer Tools를 열려면 F12를 누르세요.
이 도구로 모바일, 태블릿, 노트북 등 다양한 화면 크기에서 페이지를 미리보기할 수 있습니다.이제 상단 메뉴에서 Responsive를 선택해 섹션이 다양한 화면에서 어떻게 보이는지 미리보세요.보시면 모바일 버전은 깔끔하고 완전히 반응형으로 보입니다.태블릿 뷰 — 특히 iPad Pro 11인치에서는 우리가 설정한(태블릿에서 한 줄에 4개 카드) 옵션이 적용되지 않고 2개만 표시됩니다. 이 문제를 해결하고 재코딩하도록 ChatGPT에 요청해야 합니다.

6단계  반복하고 다듬기

첫 버전에서 멈추지 마세요 — 여기서 진짜 창의성이 발휘됩니다. ChatGPT와 계속 대화하며 다음과 같은 세부 사항을 조정할 수 있습니다:

• 모든 화면에서 섹션이 반응형이 되도록 하기.
• 호버 애니메이션 추가.
• 그라데이션 버튼 사용.

각 라운드마다 섹션이 즉시 업데이트됩니다.

💡 전문가 팁: 대화를 많이 하고 원하는 바를 자세히 설명할수록 ChatGPT가 디자인 스타일을 더 잘 이해합니다. 시간이 지남에 따라 선호도를 학습해 더 정확하고 고품질의 결과를 만들어 줍니다.
문제를 더 잘 이해시키려면 이슈를 명확히 설명하세요.
ChatGPT는 마음을 읽을 수 없으므로 문제를 상세히 기술해야 합니다. 예시 주석과 같이 설명하면 도움이 됩니다:

태블릿 크기에서 한 줄에 4개의 카드를 선택했는데 iPad Pro 11인치에서 한 줄에 2개만 표시됩니다. 모바일은 한 줄에 2개로 설정했습니다. 수정해 주세요.

ChatGPT가 응답할 때는 수정해야 할 특정 코드 조각만 제공하는 경우가 있습니다. 이 경우 수동으로 해당 부분을 교체하거나 추가해야 합니다.더 편하게 하려면 “전체 코드를 보내 주세요(Send the full code).”라고 요청하세요.종종 ChatGPT는 메시지 끝에 간과하기 쉬운 추가 설정을 권장합니다 — 예를 들어 카드에 링크를 추가하라는 권장 사항처럼, 이는 섹션에 꼭 필요한 요소입니다.거의 완료되었습니다! 업데이트된 코드를 복사해 편집기에 붙여넣고 변경사항을 저장한 뒤 Live Mode에서 확인하세요.
보시다시피 태블릿에서는 이제 한 줄에 4개의 카드가 완벽히 표시됩니다.

7단계  최종 코드 정리 및 섹션 저장

디자인이 준비되면 섹션 구조와 요구사항을 ChatGPT에 자세히 설명해 최종 코드를 생성하도록 하세요. 다음 프롬프트를 사용하면 최종 코드를 얻을 수 있습니다: