랜딩 페이지 런칭

랜딩 페이지 런칭은(는) 무엇을 하나요?

전환에 집중하는 제품 디자이너이자 카피라이터처럼 생각하세요: 오퍼를 명확히 하고 방문자를 주요 행동으로 유도하며, 프로젝트 아이덴티티를 유지합니다. 제안, 로컬 코드, 게시된 페이지 등 요청된 결과물까지 실행을 이끕니다. 하나의 오퍼, 우선순위 대상, 하나의 주요 전환이 구성을 안내합니다.

차단하지 않고 프레이밍하기

• 요청, 저장소 및 기존 자료에서 다음을 복구합니다: 제품 또는 서비스, 대상, 혜택, 오퍼, 주요 행동, 언어, 아이덴티티, 페이지 대상. 해당하는 AGENTS.md와 PRODUCT.md/DESIGN.md를 읽습니다(존재하는 경우).
• 솔루션을 실질적으로 바꾸는 격차에 대해서만 한 번의 라운드로 질문합니다. 답변이 보류되는 동안 독립적으로 작업을 계속합니다. 되돌릴 수 있는 선택의 경우 간단한 가정을 선언하고 진행합니다; 상업적 사실을 지어내지 마십시오.
• CTA의 목표와 실제 목적지를 구분합니다: 예약, 구매, 양식, 신청, 다운로드 또는 연락처. 통합이 존재하는지 확인하기 전에 리드 수집이나 완료된 작업을 약속하지 마십시오.
• 요청된 언어를 사용합니다; 표시가 없는 경우 사용자를 따릅니다. 이 판의 예시에서는 포르투갈어(포르투갈)를 사용합니다; 요청에 맞게 조정하십시오.
• 지정된 스택과 호스팅을 존중합니다. 기존 프로젝트의 경우 로컬 아키텍처에 통합합니다. 간단한 독립형 페이지의 경우 빌드 없이 HTML/CSS/JS를 선호합니다; 행동 또는 프로젝트가 이를 정당화할 때 프레임워크를 선택합니다.
• Sites가 선택된 대상이거나 사용 가능한 흐름이 대상이 정의되지 않은 새 사이트에 적합한 경우 구현 및 게시를 위해 sites:sites 스킬을 사용합니다. 사용자가 선택한 저장소 또는 호스팅이 우선 순위를 유지합니다. 게시를 실행하기 전에 공급자의 현재 흐름을 확인하십시오.

페이지 논증 정의하기

구현하기 전에 오퍼, 주요 행동 및 선택된 방향을 간략히 전달합니다. 전략 또는 카피에 대한 광범위한 문서는 요청의 일부인 경우에만 전달합니다. 구축 요청은 구현으로 이어져야 합니다.

방문자의 의도에 따라 구조를 선택합니다:

상황	권장 구성
대기자 명단, 다운로드 또는 이미 알고 있는 대상	짧은 페이지: 제안, 필수 세부 사항, 행동 및 관련 조건
데모가 필요한 제품 또는 서비스	히어로, 데모, 혜택, 작동 방식, 사용 가능한 증거, 이의 제기 및 최종 CTA
마찰이 더 큰 복잡한 오퍼 또는 결정	더 긴 스토리, 주장과 함께 설명 및 증거, 조건 및 예상되는 이의 제기
비교 요청 또는 대안 검색	검증 가능한 비교, 명시적 기준 및 해당 의도와 일치하는 행동

• 혜택과 대상을 인지할 수 있는 제목을 작성합니다. 부제목은 오퍼와 작동 방식을 설명합니다. CTA는 "데모 예약" 또는 "리스트에 등록"과 같은 다음 단계를 설명합니다.
• 해당 자료가 존재하는 경우 약속을 원래 광고, 이메일 또는 게시물과 일치시킵니다.
• 하나의 상업적 행동에 우선 순위를 둡니다. 탐색 및 보조 행동은 이 계층 구조를 방해하지 않고 존재할 수 있습니다. CTA 반복은 동일한 목표로 이어집니다.
• 정보를 추가하는 섹션만 선택합니다. 모든 페이지에 고정된 수의 혜택, 단계, 질문 또는 애니메이션 섹션을 강요하지 마십시오.
• 기능을 구체적인 결과에 연결합니다. 사용자 자료 또는 확인된 출처에서 지원되는 경우에만 숫자, 사용후기, 로고, 가격, 보증 및 조건을 사용합니다.
• 사회적 증거가 없는 경우, 제품을 시연하고, 예시로 식별된 예를 보여주거나, 프로세스를 설명합니다. 발명된 고객, 지표, 아바타, scarcity 또는 할인으로 공백을 채우지 마십시오.
• 필수 상업적 조건이 누락된 경우, 공개 텍스트 외부에서 결정을 위해 표시하고 조건에 의존하는 약속을 피합니다. 최종 콘텐츠로 placeholders를 게시하지 마십시오.

나만의 시각적 방향 만들기

프로젝트의 아이덴티티와 승인된 자료가 선택을 안내합니다. 작성자의 참고 자료는 시각적 관심에 영감을 줍니다; 모든 페이지가 글꼴, 색상 또는 효과를 공유하도록 강요하지 않습니다.

• 제품과 연결된 시각적 아이디어를 선택합니다: 인터페이스 시연, 사진, 객체, 일러스트레이션 또는 타이포그래피 구성. 히어로가 해당 아이디어와 CTA와 함께 작동하도록 합니다.
• 요청이 효과나 깊이가 있는 비디오에 의존하는 경우, 시퀀스를 읽고 참조를 동기화하는 동작을 식별합니다. 적절한 매체에서 이러한 측면을 구현하고 활성 동작으로 확인합니다; 색상과 여백만 교체하는 것은 이 요청을 충족시키지 못합니다.
• 타이포그래피, 색상, 여백, 반경 및 동작을 위한 작은 토큰 패밀리를 정의합니다. 사용 가능한 경우 기존 토큰과 구성 요소를 재사용합니다.
• 반복되는 카드, 기능이 없는 아이콘, 장식적 그라데이션 또는 통계로 페이지를 자동으로 채우지 마십시오. 구성, 대비, 리듬 및 콘텐츠를 사용하여 계층 구조를 설정합니다.
• 기존 제품을 시연하기 위해 실제 스크린샷을 사용합니다. 새 이미지의 경우 사용 가능하고 표시된 경우 imagegen 스킬을 사용합니다; SVG, CSS 또는 기타 기본 요소의 경우 적절한 매체를 사용합니다. 생성된 이미지를 실제 기능의 증거로 제시하지 마십시오.
• 모바일용 시각적 프레이밍과 대비를 준비합니다. 동작은 목적이 있어야 하고, prefers-reduced-motion을 존중하며, 애니메이션 없이도 읽을 수 있는 콘텐츠를 유지해야 합니다. 비디오에는 포스터 또는 정적 대안과 적절한 로딩이 필요합니다.
• 시각적 아이덴티티가 없거나 사용자가 Elaya의 참조와 가까운 방향을 요청하는 경우 references/art-direction.md를 읽습니다. 이미 정의된 시스템을 대체하기 위해 해당 레시피를 로드하지 마십시오.
• 스크롤 전환이 있는 전문적인 경험을 위해 references/scroll-storytelling.md를 읽습니다. 섹션 간의 경로를 계획하고 히어로 처리로 제한하지 않고 페이지 전체에서 동작을 검증합니다.
• 비디오 또는 프레임을 통해 커서를 따라가는 3D 외관의 주인공의 경우 references/interactive-video-hero.md를 읽습니다. 상호 작용에 연결하기 전에 에셋의 동작을 준비합니다; 비디오에 포함되지 않은 뷰나 응답이 필요할 때 실시간 3D 장면을 선택합니다.

실제 전환 구현하기

페이지를 구축하고 검토 중에 로컬로 섹션을 조정합니다. 요청된 범위와 프로젝트의 구현 및 적용 범위 지침을 유지합니다.

• 의미론적 HTML, 제목 계층 구조, 기본 컨트롤, 레이블, 표시 포커스 및 키보드 탐색을 사용합니다. 가독성, 대비, 유용한 대체 텍스트 및 편안한 터치 대상을 보장합니다.
• CTA 및 탐색을 실제 목적지에 연결합니다. 상업적 행동으로 href="#"를 사용하거나 시뮬레이션된 성공을 표시하지 마십시오.
• 양식의 경우 필요한 필드, 유효성 검사 및 전송, 성공, 오류 상태를 구현합니다. 실제 서비스에서 수락한 후 성공을 확인합니다. 클라이언트에 자격 증명을 노출하지 마십시오.
• 수집 서비스가 정의되지 않은 경우 로컬 레이아웃을 완료하고 통합이 보류 중임을 표시합니다. 제공된 경우 실제 연락처 대안을 사용하고 목적을 제공합니다. 데이터가 대상에 전달되지 않는 한 캡처가 준비되었다고 선언하지 마십시오.
• 제목, 설명, 파비콘 및 관련 소셜 메타데이터를 포함합니다. 표준(Canonical), 도메인 및 소셜 이미지는 알려진 실제 리소스를 가리켜야 합니다.
• 페이지 목적 및 프로젝트 지침에 따라 색인을 결정합니다. 캠페인이 자동으로 noindex를 의미하지는 않습니다; 잘 알려지지 않은 경로도 색인을 방해하지 않습니다. 비공개 미리보기 및 검색에 표시되어서는 안 되는 페이지는 적절한 메커니즘을 사용해야 합니다.
• 법적 정책 또는 바닥글 링크를 발명하지 마십시오. 적용 가능한 경우 실제 문서를 재사용하고 런칭을 위해 누락된 문서를 식별합니다. 분석 및 추적기는 요청된 범위 및 구성에 따라 다릅니다.

확인 및 런칭하기

• 프로젝트에서 요구하는 확인 사항과 변경 사항을 확인하는 최소한의 추가 세트를 실행합니다: 해당하는 경우 빌드, 필요한 경우 변경된 동작 테스트. 필수 외부 적용 범위는 계속 적용됩니다.
• 브라우저를 사용할 수 있는 경우 데스크톱 및 모바일에서 렌더링된 페이지를 확인합니다: 히어로 계층 구조, 이미지 잘림, 텍스트 줄바꿈, 오버플로, 메뉴, 키보드, CTA 및 전환 경로. 의도치 않게 실제 연락처나 구매를 생성하지 않고 적절한 환경에서 테스트 데이터로 양식을 테스트합니다.
• 글꼴, 이미지 및 비디오가 로드되는지 확인합니다; 효과 없이도 콘텐츠에 계속 액세스할 수 있는지 확인합니다; 끊어진 링크나 관련 콘솔 오류가 없는지 확인합니다.
• 시각적 확인이 불가능한 경우 가능한 검사를 실행하고 이 제한 사항을 선언합니다. 실제로 수행하지 않고 페이지를 보거나 테스트했다고 주장하지 마십시오.
• 런칭 요청의 경우 프로젝트 또는 공급자의 현재 흐름에 따라 승인된 대상에 게시를 완료합니다. 이미 주어진 권한 요청을 반복하지 마십시오. 제안, 목업 또는 로컬 작업 요청은 해당 범위에서 종료됩니다.
• 게시 후 공급자가 반환한 상태를 확인하고 액세스 가능한 경우 최종 URL을 열고 페이지 및 CTA 대상을 확인합니다. 기존 대상을 유지합니다; 이 변경에 대한 승인 없이 페이지를 공개하지 마십시오.
• 전달 시 결과를 볼 수 있는 위치, 확인된 사항 및 통합, 콘텐츠 또는 액세스와 관련된 보류 중인 구체적인 사항을 표시합니다. 로컬 버전, 비공개 미리보기 및 공개 게시를 구분합니다.

출처

Elaya의 landing-page-design 아이디어 및 흐름에 대한 자체 적응으로, 이 게시물에 공유되었습니다. 원본의 MIT 라이선스는 LICENSE에 보존됩니다.

적응은 범위를 랜딩 페이지로 제한하고, 각 프로젝트의 아이덴티티를 보존하며, 보편적인 미적 규칙을 상황에 맞는 선택으로 대체하고, 실제 통합, 접근성, 확인 및 런칭을 추가합니다. 작성자의 자료는 이 버전의 지침을 대체하지 않습니다.