Skip to content

랜딩 페이지 만들기

드래그 앤 드롭 에디터를 사용하여 랜딩 페이지를 만들고 커스터마이즈하는 방법을 알아보세요. Braze에서 직접 오디언스를 확장하고 선호도를 수집할 수 있습니다.

필수 조건

랜딩 페이지 빌더에 접근하려면 특정 권한이 필요합니다. 접근 권한이 없는 경우 Braze 관리자에게 도움을 요청하세요.

랜딩 페이지 만들기

1단계: 새 초안 만들기

메시징 > 랜딩 페이지로 이동한 다음 랜딩 페이지 만들기를 선택합니다. 기존 랜딩 페이지의 이름을 선택하여 복제하거나 변경할 수도 있습니다.

Braze 대시보드의 랜딩 페이지 섹션.

2단계: 페이지 세부 정보 입력

랜딩 페이지를 정리하고, 브랜딩하고, 공유하는 데 도움이 되는 내부 및 공개 세부 정보를 추가합니다.

일반 세부 정보

랜딩 페이지의 이름과 설명을 입력합니다. 이 세부 정보는 내부 워크스페이스에서 페이지를 검색하는 데 사용됩니다. 고객에게는 표시되지 않습니다.

사이트 세부 정보

브라우저 탭에 페이지가 표시되는 방식을 커스터마이즈하고 검색 엔진 결과에 최적화하기 위해 메타 태그를 설정합니다. 이 정보는 고객에게 표시됩니다.

다음 모범 사례를 따르는 것을 권장합니다:

3단계: 페이지 커스터마이즈

아직 저장하지 않았다면 초안으로 저장을 선택합니다. 페이지 커스터마이즈를 시작하려면 랜딩 페이지 편집을 선택합니다. 드래그 앤 드롭 에디터에 기본 템플릿이 미리 로드되며, 사용 사례에 맞게 커스터마이즈할 수 있습니다.

드래그 앤 드롭 에디터에서 생성 중인 랜딩 페이지 예시.

에디터는 랜딩 페이지 구성을 위해 기본 블록과 양식 블록이라는 두 가지 유형의 구성요소를 사용합니다. 모든 블록은 행 안에 배치해야 합니다.

'행'과 '양식 블록'이 포함된 '빌드' 섹션.

이 블록을 사용하여 콘텐츠를 추가하고 랜딩 페이지의 레이아웃을 커스터마이즈할 수 있습니다.

스팬 텍스트

커스텀 코드 없이 텍스트 블록에 특정 스타일을 적용하려면 스타일을 지정하려는 텍스트를 강조 표시한 다음 스팬으로 줄 바꿈을 선택하여 스타일을 지정합니다.

다양한 글꼴 크기와 색상 등 다양한 스타일이 적용된 텍스트 섹션이 있는 텍스트 상자와 '스타일을 위해 스팬으로 줄 바꿈' 옵션이 있는 툴바를 표시하는 강조 표시된 섹션이 있습니다.

스팬 속성을 조정하여 텍스트 스타일을 업데이트합니다:

  • 글꼴 패밀리, 무게, 크기
  • Line height
  • 문자 간격
  • 텍스트 정렬 및 색상
  • 블록 패딩

다양한 옵션으로 스팬 속성 패널을 업데이트할 수 있습니다.

이 블록을 사용하여 사용자가 제출한 데이터를 Braze의 프로필에 연결하는 양식을 만들 수 있습니다. 양식 블록을 사용하는 경우 확인 상태를 위한 추가 랜딩 페이지도 만들어야 한다는 점에 유의하세요.

새 고객을 등록하고 이메일로 할인 코드를 보내는 양식 블록.

페이지 컨테이너 스타일

페이지 컨테이너 탭에서 랜딩 페이지의 모든 관련 구성요소 블록에 적용할 스타일을 설정할 수 있습니다. 이 스타일은 특정 블록으로 재정의하지 않는 한 페이지 전체에 사용됩니다.

블록 수준에서 스타일을 커스터마이즈하기 전에 페이지 컨테이너 수준의 스타일을 먼저 설정하는 것을 권장합니다. 전체 페이지에 배경 이미지를 추가할 수도 있습니다.

배경 이미지, 색상, 테두리 세부 정보 및 콘텐츠 스타일링을 커스터마이즈할 수 있는 옵션이 있는 '페이지 컨테이너' 섹션.

사용자 기기에 대한 반응형 설정

작은 화면에서 열을 수직으로 쌓아 사용자 기기 크기에 맞게 랜딩 페이지를 반응형으로 만들 수 있습니다. 이를 활성화하려면 반응형으로 만들려는 행에 열을 추가한 다음 열 커스터마이즈 섹션에서 작은 화면에서 수직으로 쌓기를 토글합니다.

활성화하면 역순 쌓기를 통해 작은 화면에서 다중 열 콘텐츠의 수직 순서를 제어할 수도 있습니다. 이를 통해 커스텀 코드 없이도 모바일에서 페이지가 더 보기 좋고 자연스럽게 표시됩니다.

'열 커스터마이즈' 섹션의 '작은 화면에서 수직으로 쌓기' 토글.

선택 사항 및 필수 필드

양식 필드를 필수 또는 선택 사항으로 설정할 수 있습니다. 필수 필드는 양식을 제출하기 전에 반드시 작성해야 합니다. 선택 사항 필드는 사용자가 비워두거나 선택하지 않을 수 있습니다.

예를 들어, 양식 제출 전에 동의 수집을 강제하려면 필수 필드 입력을 켜서 적절한 면책 조항 텍스트와 함께 체크박스를 필수로 설정할 수 있습니다.

'필수 입력 필드' 토글이 선택된 체크박스 양식 필드.

4단계: 확인 페이지 만들기(선택 사항)

랜딩 페이지에 양식이 포함되어 있지 않은 경우 다음 단계로 진행하세요.

랜딩 페이지에 양식이 포함된 경우, 확인 경험으로 사용할 두 번째 랜딩 페이지를 만드세요. 이 페이지는 양식 제출 후 사용자에게 감사를 표하거나 다음 단계를 안내해야 합니다.

확인 페이지를 연결하려면:

  • 양식의 제출 버튼을 선택합니다
  • 웹 URL 열기 동작을 사용하여 확인 페이지에 연결합니다

확인 페이지를 포함하지 않으면 사용자가 양식이 성공적으로 제출되었는지 알 수 없을 수 있습니다. 여정을 완료하기 위해 항상 확인 경험을 포함하세요.

5단계: 페이지 미리보기

에디터의 미리보기 탭에서 랜딩 페이지를 미리볼 수 있습니다. 랜딩 페이지를 초안으로 저장한 후 랜딩 페이지로 이동하여 랜딩 페이지 옆의 URL 복사를 선택하면 URL을 방문할 수 있습니다. 공동 작업자와 URL을 공유할 수도 있습니다.

메뉴가 열려 'URL 복사' 옵션이 표시된 랜딩 페이지.

게시하기 전에 다음을 확인하세요:

  • 플랜의 게시된 랜딩 페이지 한도를 초과하지 않았는지
  • 각 양식 기반 페이지가 웹 URL 열기 동작을 사용하여 확인 페이지에 연결되어 있는지
  • 모든 필수 페이지 필드(URL 경로 및 제목 등)가 완료되었는지

준비가 되면 랜딩 페이지 게시를 선택합니다.

템플릿 사용

랜딩 페이지 템플릿을 사용하여 다음 캠페인을 위한 템플릿을 만드세요. 이 템플릿은 랜딩 페이지 에디터와 대시보드의 템플릿 섹션(템플릿 > 랜딩 페이지 템플릿)에서 모두 접근하고 관리할 수 있습니다. 랜딩 페이지 템플릿에는 이름이 필수이며, 설명은 선택 사항입니다.

템플릿 관리

랜딩 페이지 템플릿을 미리보기, 아카이브, 편집 또는 복제할 수 있습니다. 랜딩 페이지를 편집할 때 랜딩 페이지를 템플릿으로 저장하거나, 템플릿을 변경하거나, 랜딩 페이지의 콘텐츠를 삭제할 수도 있습니다.

랜딩 페이지를 저장, 변경 및 삭제하는 옵션이 있는 드롭다운.

분석 보기

랜딩 페이지의 효과를 분석하려면 메시징 > 랜딩 페이지로 이동한 다음 게시한 랜딩 페이지를 선택합니다. 여기에서 랜딩 페이지의 페이지 조회수, 페이지 클릭 수, 페이지 제출 수 및 제출률을 추적할 수 있습니다.

랜딩 페이지의 분석 섹션.

양식 제출 오류 처리

사용자가 누락되거나 지원되지 않는 입력이 있는 양식을 제출하려고 하면 일반 오류 메시지가 표시되며 제출할 수 없습니다.

일반적인 원인:

  • 필수 필드가 비어 있음
  • 텍스트 입력에 특수 문자가 사용됨
  • 필수 체크박스가 선택되지 않음

사용자에게 표시되는 오류 메시지는 커스터마이즈할 수 없습니다. 게시하기 전에 랜딩 페이지를 미리보기하여 필드 동작을 확인하세요.
New Stuff!