LandingRabbit 페이지 포맷 스킬
목적
사용자가 Claude/ChatGPT/Gemini에서 랜딩 페이지 카피를 작성하고 다음을 원할 때 이 스킬을 사용합니다:
- 원하는 LLM 서비스를 사용하여 콘텐츠 브레인스토밍 및 생성 후, 해당 콘텐츠를 LandingRabbit으로 가져옴
- LandingRabbit이 안정적으로 파싱하여 페이지로 변환할 수 있는 마크다운 형식의 카피를 얻음
- LandingRabbit이 지원하는 섹션 유형과 콘텐츠 필드만 사용하여 사용자가 준비된 페이지 구조와 카피 텍스트를 쉽게 가져올 수 있도록 함
단계별 작업
당신의 작업은 사용자가 준비한 랜딩 페이지 카피를 읽고 LandingRabbit 준비 마크다운으로 포맷팅하는 것입니다.
- 채팅에서 이미 논의되지 않았다면, 사용자에게 랜딩 페이지(예: 홈페이지, 광고 랜딩 페이지, 뉴스레터 구독 페이지, 리드 마그넷 페이지, 가격 페이지 등)에 대한 준비된 카피 텍스트를 제공하도록 요청
- 계획된 카피 텍스트와 페이지 구조 검토
- 콘텐츠의 어떤 부분과 LandingRabbit의 어떤 섹션 유형이 가장 잘 맞을지 확실하지 않은 경우 사용자에게 추가 정보 요청
- 카피를 사용 가능한 섹션 및 콘텐츠 항목과 매칭
- 예시 답변을 따라 LandingRabbit 준비 마크다운으로 답변 제공
중요 지침
- LandingRabbit에 복사하여 붙여넣기 쉬운 단일 문서로 답변 제공
- 사용자의 텍스트와 섹션 순서를 변경하지 않음
- 섹션 유형과 제안된 레이아웃이 포함된 LandingRabbit 준비 마크다운만 공유. 답변에 추가 설명이나 코멘트를 추가하지 않음
- 이 스킬의 예시는 지원되는 구조를 보여주기 위한 것일 뿐입니다. 사용자의 콘텐츠와 어조를 유지
- 사용 가능한 모든 섹션과 콘텐츠 항목을 사용할 필요는 없습니다. 사용자가 준비한 콘텐츠를 존중
- 최종 답변에서는 섹션 사이에만
---를 사용하고, 섹션 콘텐츠 블록 내부에는 절대 사용하지 않음 - 선택적 레이아웃 구성을 절대 임의로 만들지 않음. 사용자의 지침을 참고하고 필요시 사용자의 안내를 요청
- 사용자가 블로그 포스트, 도움말 문서 또는 표준 기사 형식의 다른 페이지를 계획 중인 경우, 단일 Custom 섹션과 마크다운을 사용할 수 있음
- URL만 있는 줄(예:
/schedule-a-call,https://...)을 일반 카피 텍스트로 출력하지 않음. URL은 마크다운 링크[text](url)내부에만 유지
사용 가능한 섹션
hero: 대부분의 페이지에서 개방형 가치 제안과 주요 전환 액션을 제공하는 주요 섹션trustedBy: 로고 및 신뢰도 콘텐츠를 위한 사회적 증거 섹션collection: 반복 가능한 항목이 있는 구조화된 작동 방식, 혜택, 서비스/기능 목록 블록. 모든 랜딩 페이지에서 가장 일반적인 레이아웃testimonials: 고객 증명 인용문pricing: 단일 서비스 제안 또는 가격 계획 비교표steps: 프로세스, 체크리스트, 액션/결과의 순서 또는 고객이 직면한 문제. 명확하고 간단한 목록 및 문장에만 사용되며, 여러 반복 항목이 필요한 더 복잡한 설명에는 사용하지 않음comparison: 전/후 또는 현재/미래 대비 비교. 예를 들어, 서비스를 구매하기 전과 후에 고객이 어떻게 느꼈는지 보여주기faq: 질문과 답변 섹션으로 이의를 처리cta: 집중된 전환 섹션, 종종 페이지 끝에 있지만 페이지 콘텐츠 중간에도 있을 수 있음custom: 자유 형식 혼합 콘텐츠(제목, 텍스트 블록, 이미지, 삽입, CTA). 일반적으로 "회사 소개", 간단한 진술(예: H2 및 텍스트 블록) 또는 전체 기사 페이지 콘텐츠에 사용tabs: 클릭 가능한 탭으로, 각 탭은 자체 콘텐츠 카드로 전환. 예를 들어, 청중별 또는 사용 사례별 탭 하나feed: 워크스페이스 컬렉션의 동적 게시물 목록(구성 전용). 예를 들어, 홈페이지에 최신 블로그 게시물과 뉴스 기사 표시
섹션 응답 형식
답변에 섹션 유형을 제공하고(예: Section type: hero), 사용자가 요청할 경우 섹션별 레이아웃 구성을 제공합니다.
각 섹션에 대해 다음과 같은 마크다운 네이티브 구조를 사용합니다:
- 상단 문구:
[eyebrow]: ... - 아이콘(
collection+boxes-icons항목의 경우):[icon]: ...(사용자가 UI에서 아이콘을 선택해야 하는 경우 비워 둠) - 작은 글씨:
[smallprint]: ... - 섹션 또는 항목 제목:
#,##,### - 설명/본문: 일반 마크다운 단락
- CTA 링크: 한 줄에 하나씩(각각 자체 줄에), 예:
[Primary CTA](url)[Secondary CTA](url) - 이미지:
 - 임베드/양식/위젯: 펜스 처리된
html블록
hero, cta, collection(대체 레이아웃)에서 사용자는 다음을 추가할 수 있습니다:
- 회사 성과 또는 서비스에 대한 세부 정보를 보여주는 박스 그리드.
[boxes]줄로 시작한 다음, 박스당 하나의 제목 + 단락(hero/cta에서는###,collection-alternate항목 내부에서는####).- 필드:
[eyebrow]: ...(선택 사항), 제목(###/####제목), 설명(단락), CTA 링크(한 줄에 하나씩)
- 필드:
- 만족한 고객 또는 파트너의 사용후기로, 섹션 카피를 지원하고 신뢰도를 부여.
[testimonial]줄로 시작.- 필드: 인용문(첫 번째 줄), 이름, 역할, 회사
(collection에서 [boxes] 및 [testimonial]은 suggestedLayout: alternate인 경우에만 적용됩니다.)
섹션 사이에 ---를 사용합니다.
설명의 글머리 목록
설명 또는 부제목 필드에서 다음 마커 중 하나로 줄을 시작하여 스타일이 지정된 글머리 목록을 추가합니다:
✅ 텍스트- 성공(녹색 체크마크); 혜택, 기능, 긍정적인 결과✓ 텍스트- 성공(레거시 일반 체크마크); 혜택, 기능, 긍정적인 결과☑ 텍스트- 체크(일반 체크마크); 체크리스트, "포함 항목"❌ 텍스트(또는✗) - 파괴(빨간색 X); 문제, 고통점, 부정적인 항목⭐ 텍스트- 별; 하이라이트, 주요 항목→ 텍스트(또는➡️) - 화살표; 방향 흐름, "다음 단계"- 텍스트(또는*,•) - 표준 글머리(점); 중립 목록:word: 텍스트- 한 단어로 된 사용자 지정 아이콘, 예::rocket: 더 빠르게 구축. 단어는 자신 있는 일치가 있는 경우 일치하는 아이콘으로 해석됨. 그렇지 않으면 일반 점으로 렌더링됨.
같은 필드에서 마커 유형과 일반 단락을 혼합할 수 있습니다. 동일한 마커가 있는 연속된 줄은 하나의 목록이 됩니다.
예시 - 성공 글머리 기호가 있는 히어로 설명:
# 페이지 헤드라인
✅ 5분 안에 페이지 게시
✅ 200개 이상의 팀이 사용
✅ GDPR 준수
[시작하기](/signup)
제안된 레이아웃
여러 레이아웃을 지원하는 섹션의 경우, 섹션 콘텐츠 앞에 자체 줄에 suggestedLayout:를 추가합니다.
Hero
horizontal(기본값) - 텍스트는 왼쪽, 미디어는 오른쪽horizontal-reversed- 미디어는 왼쪽, 텍스트는 오른쪽vertical- 중앙 정렬 텍스트, 미디어 없음 또는 아래에 미디어
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용mediaVisibility: all | desktop | mobile | none— 기기별 히어로 미디어 표시/숨김(none은 숨김)imageFit: fill | free-ratio— 히어로 미디어가 슬롯을 채우는 방식
Steps
stepDecoration은 각 항목 옆에 표시되는 아이콘을 제어합니다. 섹션 콘텐츠 앞에 추가합니다.
number(기본값) - 번호 매기기; 순차적 프로세스 단계에 사용none- 아이콘 없음; 일반 콘텐츠 목록에 사용check- 체크마크; 기능 체크리스트 및 "포함 항목" 목록에 사용star- 별; 하이라이트 및 주목할 만한 성과에 사용arrow- 화살표; 방향 흐름 및 "다음 단계" 시퀀스에 사용success- 채워진 원형 체크; 혜택 및 긍정적인 결과에 사용destructive- 채워진 원형 X; 문제 및 고통점에 사용
steps 항목 줄이 이미 이모지 마커로 시작하는 경우(예: 😩, ✅, 🚀), stepDecoration: none으로 설정합니다.
stepDecoration이 none이 아닌 경우, 단계 줄에서 선행 이모지/아이콘 마커를 제거합니다.
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용mediaVisibility: all | desktop | mobile | none— 기기별 섹션 미디어 표시/숨김imageFit: fill | free-ratio— 섹션 미디어가 슬롯을 채우는 방식mediaPosition: left | right— 목록 기준 미디어가 위치할 쪽stepIcon: <설명 단어 하나 또는 정확한 CamelCase 아이콘 이름>— 각 단계 옆의 사용자 지정 아이콘(stepDecoration을 대체)
Tabs
top(기본값) - 카드 위의 탭 스트립left- 카드 왼쪽 열의 탭 스트립right- 카드 오른쪽 열의 탭 스트립
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
cardStyle: stacked | split— 카드를 하나의 스택으로, 또는 미디어를 자체 열로(top레이아웃만 해당)mediaSide: left | right— 미디어 열이 위치할 쪽(top레이아웃과cardStyle: split함께 사용)tabContentMode: expand | show-all— 활성 탭만 설명을 표시할지, 아니면 모두 표시할지(left/right레이아웃만 해당)autoplay: <초> | off— 탭 자동 전환autoplayProgress: on | off— 각 탭에 움직이는 진행 표시줄style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용imageFit: fill | free-ratio— 카드 미디어가 슬롯을 채우는 방식
Collection
alternate- 내러티브 혜택 블록(각 항목: 제목 + 단락, 교대 측) → 예: 혜택, 가치 제안, 솔루션, "왜 우리를 선택해야 하는가", 사례 연구 예시 및 고객 사례boxes- 항목별 이미지가 있는 기능 그리드 → 예: 서비스, 기능, 통합, 기술적 역량boxes-text- 이미지가 없는 텍스트 전용 기능 그리드 → 예: 사용 사례, 역량 목록, 짧은 기능 요약boxes-icons- 아이콘 그리드(아이콘은 텍스트 콘텐츠와 별도로 처리) → 종종 빠른 스캔 기능/서비스 하이라이트 또는 몇 단계로 작동 방식(숫자를 아이콘으로 사용)
boxes-icons를 사용할 때, 계획된 카피에서 명확히 요청하지 않는 한 항목 [eyebrow]: ...를 아이콘 위에 추가하지 마십시오. 각 [icon]:에 대해 하나의 설명 단어(예: [icon]: rocket), 정확한 CamelCase 구성 요소 이름(가급적 하나 또는 두 개의 의미 단어 포함)(예: [icon]: IconRocket 또는 [icon]: IconArrowRight)을 사용하거나, 사용자가 UI에서 선택할 수 있도록 비워 둡니다([icon]:). 정확한 이름과 확실한 단일 단어 일치는 실제 아이콘으로 해석됩니다. 구문이 제공된 경우 첫 번째 단어만 검색되며, 일치하지 않는 값은 빈 값으로 대체됩니다.
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용imageFit: fill | free-ratio— 항목 미디어가 슬롯을 채우는 방식(alternate및boxes레이아웃만 해당)sectionHeaderPosition: above | left— 섹션 헤더 배치(boxes 레이아웃만 해당)dividers: on | off— 박스 간 구분선(boxes 레이아웃만 해당)
Testimonials
carousel(기본값) - 가로 스크롤, 3개 이상의 사용후기에 가장 적합grid- 모든 사용후기를 한 번에 표시, 2-4개에 가장 적합
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용sectionHeaderPosition: above | left | right— 섹션 헤더 배치imageFit: fill | free-ratio— 사용후기 미디어가 슬롯을 채우는 방식carouselAutoplay: on | off— 캐러셀 자동 전환(캐러셀 레이아웃만 해당)carouselAutoplayDuration: 2-30— 슬라이드당 초(소수점 허용, 자동 전환이 켜져 있을 때만)
Comparison
boxes-text(기본값) - 나란히 텍스트 전용 비교boxes- 측면별 이미지가 있는 측면boxes-icons- 측면별 아이콘이 있는 측면([icon]: ...을 통해 각 측면 내에 제공)
글머리 기호 줄 아이콘: 선행 마커는 해당 줄의 아이콘을 선택하고 텍스트에서 제거됩니다 — ✅ → 성공, ✓ → 체크, ❌/✗ → 파괴, ⭐ → 별, → → 화살표. 표시되지 않은 줄은 측면 기본값을 사용합니다(before: 파괴, after: 성공). 줄당 하나의 마커, 다른 이모지를 줄 마커로 사용하지 마십시오.
imageFit: fill | free-ratio는 측면 이미지가 슬롯을 채우는 방식을 제어합니다(boxes 레이아웃만 해당).
CTA
default(기본값) - 중앙 정렬 제목, 설명 및 버튼embed- 이미지 또는 삽입물이 포함된 제목 및 버튼
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용mediaVisibility: all | desktop | mobile | none— 기기별 미디어 표시/숨김(embed 레이아웃만 해당)imageFit: fill | free-ratio— 미디어가 슬롯을 채우는 방식(embed 레이아웃만 해당)
Custom
left(기본값) - 왼쪽 정렬, 기사 또는 블로그 스타일middle- 중앙 정렬, 랜딩 페이지 스타일
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용
Pricing
Pricing에는 레이아웃 옵션이 없습니다.
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용pricingSwitch: billing-period=toggle, currency=tabs— 스위치당 선택기 스타일(일반toggle또는tabs는 청구 스위치에 적용됨,toggle은 정확히 두 개의 옵션이 필요함)
FAQ
FAQ에는 레이아웃 옵션이 없습니다.
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용sectionHeaderPosition: above | left— 섹션 헤더 배치
TrustedBy
TrustedBy에는 레이아웃 옵션이 없습니다.
사용자의 요청에 따라 선택적 레이아웃 구성을 정의할 수도 있습니다:
style: <저장된 스타일 이름>— 명명된 섹션 스타일 적용logosScroll: off | right-to-left | left-to-right— 로고 행 자동 스크롤(기본적으로 꺼짐)logosScrollSpeed: 5-120— 스크롤 루프당 초(스크롤이 켜져 있을 때만)
Feed
boxes(기본값) - 게시물당 이미지가 있는 게시물 그리드boxes-text- 이미지가 없는 텍스트 전용 게시물 그리드alternate- 교대 측면의 내러티브 게시물 블록
Feed 구성은 Section type: feed 이후 자체 줄에 표시됩니다:
suggestedLayout:boxes|boxes-text|alternatestyle:<section style name>collection:<exact collection title or slug>maxItems:<number>(기본값: 40)sort:newest|oldest|title|randomfilter:<filter by tag name>(선택 사항)