랜딩 페이지 만들기
드래그 앤 드롭 편집기를 사용하여 랜딩 페이지를 만들고 커스터마이즈하는 방법을 알아보세요. Braze에서 직접 오디언스를 확장하고 선호도를 수집할 수 있습니다.
사전 요구 사항
랜딩 페이지 빌더에 접근하려면 특정 권한이 필요합니다. 접근 권한이 없는 경우, Braze 관리자에게 도움을 요청하세요.
랜딩 페이지 만들기
랜딩 페이지는 공유 가능한 URL이 있는 게시된 실시간 웹 페이지로, 고객이 방문할 수 있습니다.
1단계: 새 초안 만들기
메시징 > 랜딩 페이지로 이동한 후 랜딩 페이지 만들기를 선택합니다. 기존 랜딩 페이지의 이름을 선택하여 복제하거나 변경할 수도 있습니다.
2단계: 페이지 세부 정보 입력하기
랜딩 페이지를 구성하고, 브랜딩하고, 공유하는 데 도움이 되는 내부 및 공개 세부 정보를 추가합니다.
일반 세부 정보
랜딩 페이지의 이름과 설명을 입력합니다. 이 세부 정보는 내부 워크스페이스에서 페이지를 검색하는 데 사용됩니다. 고객에게는 표시되지 않습니다.
사이트 세부 정보
메타태그를 설정하여 브라우저 탭에서 페이지가 표시되는 방식을 커스텀하고 검색 엔진 결과에 최적화합니다. 이 정보는 고객에게 표시됩니다.
다음 모범 사례를 따르는 것을 권장합니다:
| 필드 | 설명 | 권장 사항 |
|---|---|---|
| 사이트 제목 | 브라우저 탭에 표시되는 제목입니다. | 최대 60자를 사용합니다. |
| 메타 설명 | 검색 결과에 표시되는 텍스트 스니펫입니다. | 140~160자 사이로 사용합니다. |
| 파비콘 | 브라우저 탭에서 사이트 제목 옆에 나타나는 아이콘입니다. | 1:1 비율을 사용하고, 지원되는 파일 형식은 PNG, JPEG 또는 ICO입니다. |
| 페이지 URL | 랜딩 페이지의 URL 경로입니다. 이 값은 메시지에 삽입할 수 있는 랜딩 페이지 Liquid 태그를 사용할 때도 참조되며, 사용자가 양식을 제출할 때 자동으로 식별합니다. | 이 값은 워크스페이스 내에서 고유해야 합니다. |
3단계: 페이지 커스텀하기
아직 저장하지 않았다면 초안으로 저장을 선택합니다. 페이지 커스텀을 시작하려면 랜딩 페이지 편집을 선택합니다. 드래그 앤 드롭 편집기에 기본 템플릿이 미리 로드되며, 사용 사례에 맞게 커스텀할 수 있습니다.
편집기는 랜딩 페이지 구성을 위해 기본 블록과 양식 블록 두 가지 유형의 컴포넌트를 사용합니다. 모든 블록은 행 안에 배치해야 합니다. 각 블록과 속성에 대한 전용 참조는 편집기 블록(랜딩 페이지)을 참조하세요.
이 블록을 사용하여 콘텐츠를 추가하고 랜딩 페이지의 레이아웃을 커스텀할 수 있습니다.
| 블록 유형 | 설명 |
|---|---|
| 제목 | 콘텐츠에 제목이나 헤딩을 추가하기 위한 텍스트 블록입니다. 섹션을 구조화하고 가독성을 높이는 데 유용합니다. |
| 단락 | 긴 설명이나 추가 컨텍스트를 위한 텍스트 블록입니다. 서식 있는 텍스트 서식을 지원합니다. |
| 버튼 | 링크 열기 또는 양식 제출 등 지정된 동작으로 사용자를 안내하는 클릭 가능한 요소입니다. |
| 라디오 버튼 | 사용자가 하나를 선택해야 하는 옵션 목록을 추가합니다. 제출 시 사용자 프로필에 연결된 커스텀 속성이 기록됩니다. |
| 이미지 | 이미지를 표시하기 위한 블록입니다. 이미지를 업로드하거나 외부 소스를 참조할 URL을 제공할 수 있습니다. |
| 링크 | 사용자가 클릭하여 지정된 URL로 이동할 수 있는 하이퍼링크입니다. 텍스트 내에 포함하거나 독립적으로 배치할 수 있습니다. |
| 스페이서 | 레이아웃과 가독성 향상을 위해 요소 간에 수직 간격을 추가하는 보이지 않는 블록입니다. |
| 커스텀 코드 | 고급 커스텀을 위해 커스텀 HTML, CSS 또는 JavaScript를 삽입하고 실행할 수 있는 블록입니다. 예를 들어, 추적 픽셀, 서드파티 스크립트 또는 넓은 브라우저용 max-width 같은 커스텀 CSS가 있습니다. 이 블록에서 Braze SDK와 인터페이스하려면 랜딩 페이지용 JavaScript 브릿지 및 커스텀 양식 블록 만들기를 참조하세요. |
스팬 텍스트
커스텀 코드 없이 텍스트 블록에 특정 스타일을 적용하려면, 스타일을 지정할 텍스트를 선택한 후 Wrap with span for style을 선택합니다.
스팬 속성을 조정하여 텍스트 스타일을 업데이트할 수 있으며, 다음이 포함됩니다:
- 글꼴 패밀리, 두께, 크기
- 줄 높이
- 자간
- 텍스트 정렬 및 색상
- 블록 패딩
이 블록을 사용하여 사용자가 제출한 데이터를 Braze의 프로필에 연결하는 양식을 만들 수 있습니다. 양식 블록을 사용하는 경우 확인 상태를 위한 추가 랜딩 페이지도 만들어야 합니다.
| 블록 유형 | 설명 |
|---|---|
| 이메일 캡처 | 이메일 주소를 위한 양식 필드입니다. 제출 시 이메일 주소가 Braze에서 해당 사용자 프로필에 추가됩니다. |
| 전화번호 캡처 | 전화번호를 위한 양식 필드입니다. 제출 시 사용자가 SMS 또는 WhatsApp 구독 그룹에 가입됩니다. |
| 입력 필드 | 표준 속성(예: 이름 및 성) 또는 선택한 커스텀 속성 문자열을 지원하는 양식 필드입니다. |
| 드롭다운 | 사용자가 사전 정의된 목록에서 항목을 선택할 수 있습니다. 목록에 커스텀 속성 문자열을 추가할 수 있습니다. |
| 체크박스 | 사용자가 상자를 선택하면 블록의 속성이 true로 설정됩니다. 선택하지 않으면 속성이 false로 설정됩니다. |
| 체크박스 그룹 | 사용자가 제시된 여러 선택지에서 선택할 수 있습니다. 값은 정의된 배열 커스텀 속성에 설정되거나 추가됩니다. |
| 구독 관리 | 이메일, SMS 또는 WhatsApp 구독 그룹의 체크리스트입니다. 사용자가 양식을 제출할 때 가입할 그룹을 선택합니다. 각 블록은 하나의 채널용입니다. 자세한 내용은 구독 관리 블록을 참조하세요. |
양식이 포함된 랜딩 페이지를 만든 후 메시지에 랜딩 페이지 Liquid 태그를 삽입해야 합니다. 이 태그를 사용하면 Braze가 사용자가 양식을 제출할 때 기존 사용자 프로필을 자동으로 식별하고 업데이트할 수 있습니다.
페이지 컨테이너 스타일
페이지 컨테이너 탭에서 랜딩 페이지의 모든 관련 컴포넌트 블록에 적용할 스타일을 설정할 수 있습니다. 이 스타일은 특정 블록으로 재정의하는 경우를 제외하고 페이지 전체에 적용됩니다.
블록 수준에서 스타일을 커스텀하기 전에 페이지 컨테이너 수준의 스타일을 설정하는 것이 좋습니다. 전체 페이지의 배경 이미지도 추가할 수 있습니다.
콘텐츠 너비를 사용하여 대형 화면에서 페이지 콘텐츠의 최대 너비를 설정합니다. 프리셋(좁게(640px), 보통(1120px), 넓게(1440px) 또는 전체 너비(100%))을 선택하거나 커스텀을 선택하여 값을 입력합니다. 이러한 옵션 이상의 레이아웃이나 스타일링이 필요한 경우 커스텀 코드 블록에서 CSS를 추가하세요.
사용자 기기에 대한 응답형
작은 화면에서 열을 세로로 쌓아 사용자 기기 크기에 맞게 랜딩 페이지를 응답형으로 만들 수 있습니다. 이를 활성화하려면 응답형으로 만들려는 행에 열을 추가한 후 열 커스텀 섹션에서 작은 화면에서 세로로 쌓기를 토글합니다.
활성화하면 열의 역순 쌓기도 가능하여 작은 화면에서 다중 열 콘텐츠의 세로 순서를 제어할 수 있습니다. 이렇게 하면 커스텀 코드 없이도 모바일에서 페이지가 더 보기 좋고 자연스럽게 느껴집니다.
기기별 행 및 블록 숨기기
데스크톱 또는 태블릿 및 모바일 기기에서 행이나 블록을 숨길 수 있습니다. 캔버스에서 행이나 블록을 선택합니다. 속성 패널에서 숨기기 대상을 선택한 후 데스크톱 또는 태블릿 및 소형 기기를 선택합니다.
숨겨진 행이나 블록은 해당 기기 유형에서 드래그 앤 드롭 편집기 미리보기나 실시간 랜딩 페이지에 나타나지 않습니다.
선택 및 필수 필드
특정 양식 필드를 필수 또는 선택으로 설정할 수 있습니다. 필수 필드는 양식을 제출하기 전에 작성해야 합니다. 선택 필드는 사용자가 비워 두거나 선택하지 않을 수 있습니다.
라디오 버튼은 항상 필수이며 선택으로 설정할 수 없습니다. 선택 가능한 단일 선택 필드가 필요한 경우 드롭다운을 사용하는 것을 고려하세요.
예를 들어, 양식 제출 전에 동의 캡처를 강제하려면 필수 필드 입력을 켜서 적절한 면책 조항 텍스트와 함께 체크박스를 필수로 설정할 수 있습니다.
4단계: 확인 페이지 만들기(선택 사항)
랜딩 페이지에 양식이 포함되어 있지 않다면 다음 단계로 진행하세요.
랜딩 페이지에 양식이 포함된 경우, 확인 경험으로 사용할 두 번째 랜딩 페이지를 선택적으로 만들 수 있습니다. 이 페이지는 양식 제출 후 사용자에게 감사를 전하거나 다음 단계를 제공해야 합니다.
- 양식에서 제출 버튼을 선택합니다
- 사용자가 양식을 제출할 때 확인 페이지를 포함할지 선택합니다
- 사용자를 확인 페이지로 보내려면 웹 URL 열기 클릭 동작을 사용합니다
- 사용자가 랜딩 페이지에 머무르게 하려면 없음 클릭 동작을 사용합니다
확인 페이지를 포함하지 않으면 사용자가 양식이 성공적으로 제출되었는지 알 수 없습니다. 여정을 완료하기 위해 항상 확인 경험을 포함하세요.
확인 페이지가 새 탭에서 열리는 경우, 원래 랜딩 페이지로 돌아와 업데이트된 정보로 다시 제출하는 사용자는 이전 제출을 덮어쓸 수 있어 데이터 불일치가 발생할 수 있습니다.
5단계: 페이지 미리보기
편집기의 미리보기 탭에서 랜딩 페이지를 미리 볼 수 있습니다. 랜딩 페이지를 초안으로 저장한 후 랜딩 페이지로 이동하여 랜딩 페이지 옆의 URL 복사를 선택하면 URL을 방문할 수 있습니다.
미리보기 링크 공유
편집기에서 미리보기 링크 복사를 선택하여 대시보드 접근 권한이 없는 검토자와 페이지를 공유할 수도 있습니다.
- 랜딩 페이지에 Liquid가 사용되지 않는 경우, 이 링크는 URL 복사의 직접 URL과 동일하며 미리보기 모드로 열립니다.
- 랜딩 페이지에 Liquid가 사용되고 Landing Pages Pro 권한이 있는 경우, 링크는 링크를 생성한 시점의 스냅샷이 아닌 현재 변경 사항을 반영하여 실시간 페이지를 온디맨드로 렌더링합니다. 콘텐츠는 사용자별로 개인화됩니다. 미리보기에는 Braze 파비콘이 표시되며 변경할 수 없습니다.
- Pro 티어 없이 랜딩 페이지에 Liquid를 추가하면 Liquid 태그가 평가되지 않고 게시된 페이지의 방문자에게 원시 텍스트로 표시됩니다.
다른 채널의 미리보기 링크에 대해서는 공유 가능한 미리보기를 참조하세요.
6단계: 게시
게시하기 전에 다음을 확인하세요:
- 플랜의 게시된 랜딩 페이지 제한을 초과하지 않았는지
- 각 양식 기반 페이지가 웹 URL 열기 동작을 사용하여 확인 페이지에 연결되어 있거나, 기본 제공 확인 단계가 포함된 다단계 양식을 사용하는지
- 모든 필수 페이지 필드(URL 경로 및 제목 등)가 완성되었는지
준비가 되면 랜딩 페이지 게시를 선택합니다.
iOS 및 Safari의 공격적인 팝업 차단기 및 광고 차단기(Safari의 기본 제공 컨트롤 및 서드파티 확장 프로그램 포함)는 양식 제출 버튼이 같은 탭이든 새 탭이든 다른 URL을 열 때 랜딩 페이지의 동작에 부정적인 영향을 미칠 수 있습니다.
템플릿 사용
랜딩 페이지 템플릿은 랜딩 페이지를 더 빠르게 만들 수 있도록 도와주는 재사용 가능한 디자인 시작점입니다. 템플릿에는 공개 URL이 없으며 고객이 방문할 수 없습니다. 템플릿에서 실시간 랜딩 페이지를 만들려면 새 랜딩 페이지를 만들 때 템플릿을 선택하고, 필요에 따라 커스텀한 다음 게시하세요.
템플릿은 랜딩 페이지 편집기와 랜딩 페이지 템플릿 페이지(콘텐츠 > 랜딩 페이지)에서 모두 접근하고 관리할 수 있습니다. 랜딩 페이지 템플릿에는 이름이 필요하며, 설명은 선택 사항입니다.
템플릿 관리
랜딩 페이지 템플릿을 미리 보거나, 보관하거나, 편집할 수 있습니다. 직접 만든 랜딩 페이지 템플릿(내 템플릿에 위치)은 복제할 수 있지만, Braze 템플릿은 복제할 수 없습니다. 랜딩 페이지를 편집할 때 랜딩 페이지를 템플릿으로 저장하거나, 템플릿을 변경하거나, 랜딩 페이지의 콘텐츠를 삭제할 수 있습니다.
분석 보기
랜딩 페이지의 효과를 분석하려면 메시징 > 랜딩 페이지로 이동한 후, 게시한 랜딩 페이지를 선택하세요. 여기에서 랜딩 페이지의 페이지 조회수, 페이지 클릭수, 페이지 제출수, 제출률을 추적할 수 있습니다.
양식 제출 오류 처리
사용자가 누락되거나 지원되지 않는 입력이 있는 양식을 제출하려고 하면 일반 오류 메시지가 표시되며 제출할 수 없습니다.
일반적인 원인:
- 필수 필드가 비어 있음
- 텍스트 입력에 특수 문자가 사용됨
- 필수 체크박스가 선택되지 않음
사용자에게 표시되는 오류 메시지는 커스터마이즈할 수 없습니다. 게시하기 전에 랜딩 페이지를 미리보기하여 필드 동작을 확인하세요.