설명서Marketo Optimizer 설명서

양식 디자인

마지막 업데이트: 2026년 11월 5일

양식을 만들기한 후 비주얼 디자인 공간에서 기본 기본 기본 양식 정의가 있는 초안이 열립니다. 오른쪽의 요약 패널에서 양식 편집​을 클릭하고 시각적 디자인 공간을 사용하여 양식 스타일 및 필드 구성 요소를 정의합니다.

양식 디자인 공간 {width="700" modal="regular"}

​ 제출 ​ 단추(바닥글 필드)는 기본적으로 양식의 일부이므로 제거할 수 없습니다. 양식에서 단추/바닥글 구성 요소를 선택하여 단추의 텍스트와 스타일을 변경할 수 있습니다.

필드 fields

양식 필드는 사용자를 타겟팅하고 계정 및 구매 그룹과 연결하는 데 사용할 수 있는 개인 프로필 데이터를 캡처하는 데 사용됩니다. 필드 디자인 도구를 사용하여 계정 기반 마케팅 활동에 필요한 데이터를 수집하기 위한 필드 및 레이아웃 세트를 구성합니다.

필드 추가 add-field

  1. 왼쪽의 구성 요소 패널에서 필드 콘텐츠 구성 요소를 드래그하여 캔버스에 놓습니다.

    양식에 필드 구성 요소 추가 {width="800" modal="regular"}

  2. 필드 특성 선택​에 대해 옵션을 선택하고 필드에 대한 특성을 설정합니다.

    • 필드 특성 선택 - 이 옵션을 사용하여 양식에 대한 사전 설정에 정의된 데이터 집합 스키마를 기준으로 특성을 선택합니다.

      필드 특성 선택 대화 상자에서 필드에 사용할 특성의 확인란을 선택하고 선택​을 클릭합니다.

      선택한 특성 필드 구성 요소를 양식에 추가 {width="700" modal="regular"}

      예를 들어 이메일 및 회사를 설정할 수 있습니다. 사용자가 양식을 작성하고 제출하면 입력한 정보가 선택한 데이터 세트에 저장됩니다.

      수집된 데이터를 프로필에 매핑하려면 프로필 ID 필드를 선택합니다. ID 필드가 특성 목록에서 필수(으)로 표시되어 있습니다. 필터링할 수 있습니다.

    • 사용자 지정 필드 추가

      이 옵션을 사용하면 연결된 데이터 세트의 필드에 매핑하지 않고 자유 필드를 정의할 수 있습니다.

      양식에 사용자 지정 필드 구성 요소 추가 {width="600" modal="regular"}

    캔버스에서 선택한 속성에 대한 기본 필드 레이블이 채워집니다. 필드 세부 정보​가 오른쪽 패널에 표시됩니다.

  3. 필요한 경우 레이블 텍스트를 변경합니다.

    이 텍스트는 양식의 필드 옆에 표시됩니다. 기본 텍스트는 필드 속성에서 채워집니다.

  4. 필드의 데이터 형식에 따라 필드 형식​을(를) 설정합니다.

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 11-row-2 12-row-2 13-row-2 14-row-2
    필드 유형 사용
    확인란 방문자가 true(선택됨) 또는 false(선택되지 않음) 값을 선택할 수 있도록 이 형식을 사용하십시오.
    확인란 그룹 방문자가 여러 항목에 대해 true(선택됨) 또는 false(선택되지 않음) 값을 선택할 수 있도록 이 형식을 사용하십시오.
    통화 Marketo Optimizer 인스턴스에 대해 선택한 기본 통화 유형을 나타내는 부동 소수점 필드를 허용하려면 이 유형을 사용하십시오.
    날짜 이 유형을 사용하여 날짜 형식으로 입력을 제한하고 필드에 달력 선택기를 제공합니다.
    이중 IEEE 64비트(8바이트) 부동 소수점 숫자로 저장된 배정밀도 부동 소수점 변수입니다.
    이메일 이메일 주소 형식으로 입력을 제한하려면 이 유형을 사용하십시오.
    숫자 이 유형을 사용하여 필드를 숫자 값으로 제한합니다.
    라디오 그룹 방문자가 옵션 세트 중 하나를 선택할 수 있도록 하려면 이 유형을 사용합니다.
    선택 방문자가 드롭다운 목록을 사용하여 옵션 세트 중 하나를 선택할 수 있도록 하려면 이 유형을 사용하십시오.
    슬라이더 방문자가 슬라이더를 사용하여 숫자 값을 설정할 수 있도록 하려면 이 유형을 사용하십시오.
    전화 전화 번호 입력 필드에 이 유형을 사용합니다.
    텍스트 표준 텍스트(문자열) 입력 필드에 이 유형을 사용합니다.
    텍스트 영역 더 긴 텍스트 항목을 지원하려면 이 유형을 사용하십시오.
    URL 이 유형을 사용하여 텍스트 입력을 표준 URL 프로토콜을 포함한 URL로 제한합니다.

  5. 선택한 필드 유형에 따라 필드 항목 및 유효성 검사에 대한 다른 옵션을 설정합니다.

    선택한 필드 유형에 따라 필드에 대한 옵션을 설정합니다 {width="800" modal="regular"}

    예를들어 Text 필드 형식에는 필드 입력 및 유효성 검사에 대한 다음과 같은 옵션이 있습니다.

    • 자리 표시자 - 방문자에게 필드에 필요한 값의 예를 제공하는 필드의 자리 표시자 값입니다.

    • 지침 - 방문자가 필드를 완료하는 데 도움이 되는 지침 텍스트입니다. 필드에 대해 가리킨 텍스트(으)로 표시할 텍스트를 입력하십시오.

      note tip
      TIP
      지침과 자리 표시자 텍스트 비교
      방문자가 필드를 채울 수 있도록 안내하려면 이 두 속성을 사용하십시오. 포인터를 필드 위에 올리면 지침 텍스트가 도구 설명/팝업 텍스트로 표시됩니다. 자리 표시자 텍스트는 필드 내부에 흐리게 나타나며 방문자가 텍스트를 필드에 입력할 때 사라집니다. 두 가지 방법을 모두 사용하거나 한 가지 방법만 사용할 수 있습니다.

    • 기본값 - 이 옵션을 사용하여 필드의 기본값을 지정하십시오.

    • 유효성 검사 메시지 - 이 옵션을 사용하여 필드에 대한 유효성 검사 메시지를 지정하십시오. 이 메시지는 방문자가 필드에 잘못된 값을 입력하면 표시됩니다. 기본적으로 Standard 메시지가 설정됩니다. 사용자 지정​을(를) 선택하고 직접 메시지를 입력하세요.

    • 최대 길이 - 필드에 입력할 수 있는 최대 문자 수를 입력합니다.

  6. 필요에 따라 필드 동작​을 설정합니다.

    • 필수 - 양식을 제출하는 데 필요한 필드 입력을 만들려면 확인란을 선택하십시오.

    • 중요 - 확인란을 선택하여 필드의 대/소문자를 구분합니다.

    • 미리 채워진 사용 - 사용 가능한 경우 확인란을 선택하여 프로필 정보에서 필드를 채웁니다.

    • 입력 마스크 사용 - 입력 마스크를 사용하여 방문자의 입력을 제한하려면 확인란을 선택합니다. 예를 들어 방문자가 특정 형식으로 전화 번호를 입력하도록 할 수 있습니다. 대화 상자에서 임의의 숫자에 대해 9, 임의의 문자에 대해 a, 둘 중 하나에 대해 *을 사용하여 마스크를 입력합니다.

      필드에 대한 입력 마스크 정의 {width="550" modal="regular"}

      지정한 입력 마스크를 사용하려면 저장​을 클릭하세요.

필드 스타일 변경 field-styling

오른쪽 패널의 스타일 탭을 선택하여 선택한 필드의 스타일을 변경합니다.

  • 배경 - 필드에 배경색을 적용하려면 확인란을 선택하십시오. 흰색이 기본 색상입니다. 배경색 사각형을 클릭하여 팝업 색상 선택기를 열고 필드 배경색을 선택합니다.

    양식 필드의 배경 스타일을 설정합니다 {width="600" modal="regular"}

  • 레이블 - 레이블 스타일이 필드 옆에 표시되는 텍스트의 시각적 특성을 제어합니다. 필드를 기준으로 상단 또는 측면 레이블 표시를 선택합니다. 글꼴 크기, 선 높이, 텍스트 스타일 및 텍스트 정렬을 설정할 수 있습니다. 글꼴 색상 사각형을 클릭하여 팝업 색상 선택기를 열고 레이블 텍스트의 색상을 선택합니다.

    양식 필드에 대한 레이블 스타일을 설정합니다 {width="600" modal="regular"}

  • 테두리 - 테두리 색상 사각형을 클릭하여 팝업 색상 선택기를 열고 테두리 색상을 선택합니다. 색상 및 선 너비를 포함하여 필드에 대한 테두리를 정의할 수 있습니다. 표시된 필드 테두리를 제거하려면 확인란의 선택을 취소합니다. 모퉁이에 대한 테두리 크기(픽셀 너비), 스타일 및 반경 설정을 변경할 수도 있습니다.

    양식 필드의 테두리 스타일 설정 {width="600" modal="regular"}

  • 크기 - 필드의 표시 너비를 결정할 크기 설정을 선택합니다. 전체 너비, 절반 너비 또는 자동​을 선택하세요.

  • 여백 - 필드 주위에 여백(픽셀 단위)을 설정합니다. 네 개의 면에 동일한 여백을 설정하거나 각 면에 대해 다른 여백 확인란을 선택하여 가로 및 세로 여백을 별도로 설정할 수 있습니다.

  • 패딩 - 필드 주위에 패딩을 설정합니다(픽셀 단위). 4개의 모든 면에 동일한 패딩을 설정하거나 각 면에 대해 다른 패딩 확인란을 선택하여 수평 및 수직 패딩을 별도로 설정할 수 있습니다.

    양식 필드의 크기, 여백 및 패딩 스타일을 설정합니다 {width="600" modal="regular"}

필드 순서 바꾸기 field-reorder

시각적 작업 영역에서 양식 필드를 직접 이동할 수 있습니다. 선택한 필드의 오른쪽 가장자리에 있는 이동 도구를 클릭하고 새 위치로 끕니다.

구조적 구성 요소를 양식에 추가하고 필드를 열로 이동하여 그룹화하고 레이아웃을 변경합니다. 선택한 열 구성 요소의 왼쪽 가장자리에 있는 이동 도구를 클릭하고 양식 내의 새 위치로 끕니다.

양식의 필드를 이동하고 그룹화 및 레이아웃에 구조적 구성 요소를 사용 {width="500"}

필드 삭제 또는 복제 field-delete-duplicate

선택한 필드를 삭제하려면 도구 모음 또는 오른쪽 패널에서 삭제 아이콘( 삭제 아이콘 )을 클릭하십시오. 확인 대화 상자에서 삭제​를 클릭합니다.

선택한 필드를 복제하려면 도구 모음 또는 오른쪽 패널에서 복제 아이콘( 복제 아이콘 )을 클릭하십시오. 새 필드는 원래 필드 아래에 표시됩니다. 필드의 특성을 설정하려면 필드 특성 선택​을 클릭합니다. 필요에 따라 필드 유형, 세부 정보 및 스타일을 설정합니다.

양식 필드에 대한 아이콘 삭제 및 복제 {width="600" modal="regular"}

전송 단추 submit-button

제출 단추(바닥글 필드)는 기본적으로 양식의 일부이며 제거할 수 없습니다. 양식에서 단추/바닥글 구성 요소를 선택하여 단추의 텍스트와 스타일을 변경합니다.

단추 콘텐츠 편집 button-content

오른쪽 패널에 콘텐츠 탭이 표시된 상태에서 단추 텍스트 필드의 텍스트를 변경합니다. 단추 크기가 텍스트 길이에 맞게 조정됩니다.

양식의 단추 텍스트 변경 {width="600" modal="regular"}

제출 단추 스타일 지정 button-styles

오른쪽 패널의 스타일 탭을 선택하여 선택한 단추/바닥글 구성 요소의 스타일을 변경합니다.

  • 배경 - 단추의 배경색을 적용하려면 확인란을 선택하십시오. 기본값은 파란색입니다. 배경색 사각형을 클릭하여 팝업 색상 선택기를 열고 단추 배경색을 선택합니다.

    양식 단추의 배경 스타일을 설정합니다 {width="600" modal="regular"}

  • 레이블 - 레이블 스타일이 단추 안의 텍스트에 대한 시각적 특성을 제어합니다. 글꼴 크기, 선 높이, 텍스트 스타일 및 텍스트 정렬을 설정할 수 있습니다. 글꼴 색상 사각형을 클릭하여 팝업 색상 선택기를 열고 레이블 텍스트의 색상을 선택합니다.

  • 테두리 - 테두리 색상 사각형을 클릭하여 팝업 색상 선택기를 열고 테두리 색상을 선택합니다. 색상 및 선 너비를 포함하여 단추의 테두리를 정의할 수 있습니다. 표시된 단추 테두리를 제거하려면 확인란의 선택을 취소합니다. 둥근 모서리의 테두리 크기(픽셀 너비), 스타일 및 반지름 설정을 변경할 수도 있습니다.

  • 크기 - 단추의 표시 너비를 결정할 크기 설정을 선택합니다. 전체 너비, 절반 너비 또는 자동​을 선택하세요. 패딩은 크기와 정렬 설정에 따라 조정됩니다.

    양식 단추의 레이블, 테두리 및 크기 스타일을 설정합니다 {width="600" modal="regular"}

  • 단추 정렬 - 단추의 절반 폭 또는 자동 크기를 선택한 경우 왼쪽, 오른쪽 또는 가운데에서 정렬을 설정합니다. 패딩은 크기와 정렬 설정에 따라 조정됩니다.

  • 여백 - 단추 주위에 여백(픽셀 단위)을 설정합니다. 네 개의 면에 동일한 여백을 설정하거나 각 면에 대해 다른 여백 확인란을 선택하여 가로 및 세로 여백을 별도로 설정할 수 있습니다.

  • 패딩 - 단추 주위에 패딩을 설정합니다(픽셀 단위). 4개의 모든 면에 동일한 패딩을 설정하거나 각 면에 대해 다른 패딩 확인란을 선택하여 수평 및 수직 패딩을 별도로 설정할 수 있습니다. 크기와 정렬 설정을 변경하면 패딩이 조정됩니다.

    양식 단추의 맞춤, 여백 및 패딩 스타일 설정 {width="600" modal="regular"}

양식 스타일 지정 form-styling

구조 또는 양식 구성 요소의 외부를 클릭할 때 양식 영역의 스타일을 변경할 수 있습니다. 필드 또는 단추/바닥글 수준에서 다른 스타일이 정의되지 않은 경우 양식 구성 요소(필드 및 단추)는 최상위 수준에서 정의된 Body 스타일을 상속합니다.

양식 본문의 최상위 스타일을 설정합니다 {width="600" modal="regular"}

CSS 스타일 css-styles

새 양식에서는 스타일링에 기본 CSS를 사용합니다. CSS를 수정하여 스타일을 변경하려는 경우, CSS를 복사한 다음 이를 사용하여 양식의 사용자 지정 CSS를 정의할 수 있습니다.

:_양식에 대한 사용자 지정 CSS를 정의하려면(_T)

  1. 오른쪽 패널에서 CSS 보기​를 클릭하여 CSS 코드를 검토합니다.

    양식에 대한 CSS 보기 {width="450" modal="regular"}

  2. 스크롤 창에서 CSS 코드를 선택하고 클립보드에 복사합니다.

  3. Click Close.

  4. (선택 사항) 복사한 코드를 CSS 도구에 붙여넣고 원하는 스타일을 반영하도록 CSS를 편집합니다.

  5. 오른쪽 패널에서 사용자 지정 CSS 추가​를 클릭합니다.

  6. CSS 코드를 창에 붙여넣습니다.

    양식에 대한 사용자 지정 CSS 추가 {width="450" modal="regular"}

    이 창에서 붙여넣은 텍스트를 편집할 수 있습니다.

  7. 저장​을 클릭합니다.

수동 스타일 지정 manual-styling

전체 양식에 대한 디스플레이를 정의하려면 오른쪽 패널에서 설정을 변경합니다.

  • 배경색 - 양식 영역 주위에 배경색을 적용하려면 확인란을 선택하십시오. 흰색이 기본 색상입니다. 색상 사각형을 클릭하여 팝업 색상 선택기를 열고 양식 배경에 사용할 색상을 선택합니다.

  • 뷰포트 배경 - 모든 양식 구성 요소에 배경색을 적용하려면 확인란을 선택하십시오. 기본값은 색상 없음(외부 배경에서 상속)입니다. 색상 사각형을 클릭하여 팝업 색상 선택기를 열고 양식 구조 구성 요소의 색상을 선택합니다.

    양식의 배경색 설정 {width="600" modal="regular"}

  • 텍스트 - 양식 필드의 레이블, 힌트 및 자리 표시자 텍스트에 영향을 주는 양식의 글꼴 모음​을 선택합니다. 기본 제출 단추 텍스트에도 영향을 줍니다.

  • 크기 - 양식의 크기(너비)를 픽셀 단위로 변경합니다.

  • 여백 - 양식 구성 요소 주위에 여백(픽셀 단위)을 설정합니다. 네 개의 면에 동일한 여백을 설정하거나 각 면에 대해 다른 여백 확인란을 선택하여 가로 및 세로 여백을 별도로 설정할 수 있습니다.

    양식의 텍스트, 크기 및 여백을 설정합니다 {width="600" modal="regular"}

recommendation-more-help
marketo-optimizer-help-user-guide