이미지를 매력적인 랜딩 페이지로 변환하기, 코딩 없이 가능

시각적으로 매력적인 랜딩 페이지를 만들기 위해서는 개발자를 고용하거나 코딩을 배워야 했습니다. 그러나 이제 Selldone의 페이지 빌더에 ChatGPT와 Gemini의 통합으로 그러한 번거로움이 사라졌습니다.
새로운 AI 기반의 워크플로우는 기술적 경험과 상관없이 누구나 간단한 이미지나 스케치, 심지어 대략적인 아이디어를 아름답고 완전히 반응형인 온라인 스토어나 랜딩 페이지 섹션으로 변환할 수 있도록 해줍니다. 이 모든 것은 Selldone 생태계 내에서 자동으로 이루어지며, 수작업 코딩이 필요 없습니다.개인 브랜드를 구축하든 온라인 비즈니스를 관리하든, 이 방법을 통해 몇 분 안에 현대적이고 깔끔한 페이지를 손쉽게 시작할 수 있습니다.

아이디어에서 컴포넌트까지 몇 분이면 충분

마음에 드는 디자인을 발견했다고 가정해보세요. 아마도 다른 웹사이트의 제품 전시일 수도 있고, Canva에서 만든 마케팅 배너일 수도 있으며, 심지어 저장해둔 스크린샷일 수도 있습니다. 그걸 어떻게 코딩해야 할지 고민할 필요는 없습니다.
간단히 이미지를 업로드하거나 레이아웃을 설명하고, Selldone 플러그인을 사용하여 ChatGPT나 Gemini에게 랜딩 페이지 섹션으로 변환해 달라고 요청하세요. AI는 Selldone의 기술 형식과 플랫폼에서 사용되는 동적 Vue 컴포넌트의 구조를 이해합니다. Selldone의 페이지 빌더에 바로 넣을 수 있는 복사-붙여넣기 가능한 코드 블록을 받게 될 것입니다.
이 섹션에는 다음이 포함됩니다:

• 모든 텍스트와 제목
  
• 이미지와 링크
  
• 버튼, 폰트, 색상
  
• 제품 카드나 추천 글과 같은 동적 기능
  

가장 중요한 것은 데스크톱, 태블릿, 모바일에서 자동으로 반응형이라는 점입니다.

간단한 과정으로 강력한 결과를

Selldone 페이지에 이 섹션을 추가하려면, 다음 단계를 따르세요:

1. 디자인 아이디어를 ChatGPT 또는 Gemini에 업로드하거나 설명합니다.
   
2. Selldone 페이지 빌더와 호환 가능하도록 Vue 컴포넌트를 요청합니다.
   
3. 생성된 코드를 복사합니다.
   
4. Selldone의 페이지 빌더에서 코드 요소를 랜딩 페이지로 드래그 앤 드롭합니다.
5. Vue 탭에 코드를 붙여넣고 저장합니다.

1. 디자인 아이디어를 ChatGPT나 Gemini에 업로드하거나 설명합니다.

중요한 알림: Selldone ChatGPT 플러그인에 직접 접속하려면 이 링크를 사용하세요.

팁: 데스크톱에서 선호하는 디자인 이미지를 ChatGPT에 업로드하세요. 이미지와 함께 더 정확한 컴포넌트를 생성하고 향후 수정을 최소화하기 위해 자세한 설명을 제공하세요.

예제 프롬프트:

새로운 섹션이 라이브로 스타일 완비 상태로 모바일 준비 완료되었습니다.
이제 속성 패널을 통해 사용자 정의하거나 레이아웃 조정, 색상 변경, 기능 추가, 텍스트 대체 등 AI에 수정을 요청할 수 있습니다.

최상의 결과를 위한 추천 프롬프트

AI가 정확히 무엇을 필요로 하는지 이해하도록 돕기 위해, 이 프롬프트 사용을 권장합니다:

이 이미지나 설명을 바탕으로 Selldone 페이지 빌더용 반응형 Vue 컴포넌트를 생성해 주세요. 모든 텍스트, 버튼, 이미지, 색상, 글꼴은 속성 객체 내에서 정의되어야 합니다. 컴포넌트는 Vuetify 3 표준을 따라야 하며,기기별 반응형이어야 하고 Selldone의 규칙(자체 종료 태그 없음)을 따라야 합니다. 적용 가능한 경우, 제품 카드, 평점 별, 작업 버튼을 포함해 주세요. 모든 텍스트, 카드 및 버튼에 대해 색상 선택기, 글꼴 크기, 글꼴 두께, 반경을 추가해 주세요.

이 프롬프트는 섹션을 새로 생성하거나 조정할 때 언제든지 사용할 수 있습니다. 코드는 Selldone의 요구 사항에 맞게 깔끔하게 생성되도록 보장합니다.

완전히 사용자 정의 가능하고 확장 가능

섹션이 준비되면, 시작할 때 제한되지 않습니다. ChatGPT 또는 Gemini에 다음을 요청할 수 있습니다:

• 이미지 교체 또는 이동
  
• 제목 및 부제목 업데이트
  
• 새 버튼, 슬라이더, 추천글 또는 배너 추가
  
• 텍스트 스타일 및 크기 조정
  
• 다른 모양을 위한 여백 및 레이아웃 조정
  

새로운 섹션을 계속 확장할 수 있습니다. 얼마나 많은 컴포넌트를 추가하든지 제약이 없으며, 모든 컴포넌트는 동일한 안정적인 구조로 개발됩니다.
각 요소는 편집할 수 있습니다. 색상은 시각적 선택기를 사용하여 변경할 수 있으며, 이미지는 쉽게 교체하거나 업로드할 수 있습니다. 경험은 직관적으로 구성되어 있어, 페이지 빌더를 처음 사용하는 사람도 쉽게 사용할 수 있습니다.

발생 가능한 오류

오류 #1

Selldone 빌더에 코드를 붙여넣은 후 오류가 발생하면 (아래 이미지 참조), 간단히 ChatGPT 또는 Gemini에 코드를 해결해 달라고 요청하세요.해당 도구는 자동으로 응답하여 코드를 수정하기 시작할 것입니다.

오류 #2

HTML 탭에 코드를 복사해 붙여넣으면, 섹션이 빈지로 표시됩니다:이와 같이, 코드를 HTML 탭에 잘못 입력하였습니다.

오류 #3

때로는 슬라이더, 캐로셀, 또는 스크롤바를 섹션에 추가해달라고 요청할 때, 섹션 밖에 추가 점, 대쉬, 화살표 버튼과 같은 원치 않는 요소들이 나타날 수 있습니다. 이는 주로 ChatGPT가 필요한 Google Font Material Icons 대신 MDI(머티리얼 디자인 아이콘)을 사용했기 때문에 발생합니다. 이를 해결하려면 ChatGPT에게 Google의 공식 Material Icons만 사용하도록 요청하세요.

시작 전에 읽어야 할 팁:

• 도구가 응답한 후, 경우에 따라 전체 코드를 작성해달라고 요청해야 할 수도 있습니다. 변경 사항이 사소하고 원래 코드가 길 경우, 특정 줄을 교체하라는 지침을 제공해 드릴 수 있습니다.
• 각 새로운 섹션에 대해 새로운 Selldone ChatGPT 대화를 시작하는 것이 좋습니다. 이전 세션에서 계속 작업하면 도구가 새로운 컴포넌트와 관련이 없는 이전 지침을 적용할 수 있습니다.
• ChatGPT가 Selldone 컴포넌트 속성에 이미지 URL을 입력하라고 제시할 때 이미지를 컴퓨터에 로컬로 저장해 둔 경우, ChatGPT에게 요소(예: 캐러셀 또는 슬라이더)를 개체로 정의해 달라고 요청하여 URL 대신 직접 이미지를 업로드할 수 있도록 하세요.
• 이미지에 많은 시각적 요소가 포함되어 있으면 ChatGPT에 업로드한 다음 설명을 요청하세요. 그런 다음 설명을 복사하여 프롬프트로 사용하여 ChatGPT에게 컴포넌트를 생성하도록 요청하세요. 이 방법은 더 나은 결과와 정확한 결과를 가져오는 경우가 많습니다.

왜 이것이 중요한가

이 워크플로우를 통해 누구나 시각적 개념에서 반응형, 생산 준비 완료 랜딩 섹션까지 몇 분 이내에 도달할 수 있습니다. 더 이상 개발자를 기다리거나 레이아웃 빌더로 고생하거나 Vue, CSS, 반응형 디자인을 배울 필요가 없습니다.
AI가 생성하는 모든 것은 이미 모든 기기에 대해 최적화되어 있습니다. 레이아웃이 깨지거나, 이미지를 다시 사이즈 조정하거나, 스타일 규칙을 작성할 걱정을 할 필요가 없습니다. 섹션은 Selldone의 디자인 언어와 모범 사례를 기반으로 엄격한 표준을 따릅니다.
더 적은 시간으로 문제를 해결하며 더 많은 시간을 창조하는 데 사용할 수 있습니다.

오늘 직접 시도해보세요

시작하기는 간단합니다. 만들고 싶은 섹션을 선택하세요 - 다른 웹사이트에서 영감을 받았든, 스케치를 했든, 제품 전단지를 이용한다는 것을 ChatGPT 혹은 Gemini에 설명합니다. 추천된 프롬프트를 사용하여 코드를 받으면 Selldone에 붙여넣기만 하면 랜딩 페이지가 완성됩니다.빠르고 쉽고 개방적입니다.
창의성에는 한계가 없으며, 얼마나 멀리 갈 수 있는지에 대한 상한선도 없습니다. AI와 Selldone을 사용하면 강력하고 아름다운 웹 페이지를 만들기가 상상한 만큼 간단합니다.