설명서Marketo Optimizer 설명서

양식 디자인

마지막 업데이트: 2026년 8월 25일

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

양식 디자인 공간{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