사용 안내서 취소

모바일 웹 서명 경험을 위한 Liquid Mode

 

Adobe Acrobat Sign 안내서

새로운 기능

시작하기

관리

계약 전송, 서명 및 관리

고급 계약 기능 및 워크플로우

다른 제품과 통합

Acrobat Sign 개발자

지원 및 문제 해결

소개

Liquid Mode 서명 경험은 수신자가 사용하는 장치 유형에 따라 문서 표시를 향상하여, 손가락으로 모으고 확대/축소할 필요를 줄이며 채워야 할 필드에 쉽게 포커스를 두도록 합니다.

Liquid Mode 규격 계약은 수신자를 위한 두 가지 보기로 생성됩니다.

  1. PDF 보기 - 업로드된 HTML에 있는 모든 스타일 정보를 사용하여 생성됩니다. 이는 다운로드할 수 있는 계약의 서명된 버전에 해당하며, Adobe Acrobat Sign이 모든 계약을 위해 생성하는 PDF 보기와 마찬가지입니다.
  2. Liquid Mode 보기 - 입력 HTML 문서를 리플로우하고 작은 화면 크기에 최적화됩니다. Liquid Mode 보기는 원래 HTML 문서에 지정된 스타일을 재정의하는 세심하게 선별된 경험을 제공합니다.

수신자는 필요에 따라 인터페이스를 통해 문서의 Liquid Mode 보기와 기존 PDF 보기 사이에서 쉽게 전환할 수 있으며 이 인터페이스는 필요한 서명과 동일한 법적 구속력이 있는 서명을 캡처합니다.

 

Liquid Mode 규격 계약은 단일 HTML 파일을 소스 컨텐츠로 사용하여 생성됩니다.

업로드된 HTML 문서의 HTML 구문 및 양식 필드 구문에는 몇 가지 제한사항이 있습니다. 특히,

  • 계약은 단일 HTML 문서(한 파일만)
    로 생성되어야 합니다.
    • 계약을 생성하는 데 두 개 이상의 문서가 사용되면 PDF 보기만 생성됩니다.
  • HTML 문서는 JavaScript를 포함되지 않을 수도 있습니다. <script> 태그를 인라인 JavaScript 또는 외부 JavaScript 파일에 대한 참조로 사용하거나 HTML 태그 속성에서 사용할 수 없습니다.
    • HTML 문서에서 JavaScript가 발견되면 Acrobat Sign에서 PDF 보기만 생성됩니다.
  • HTML 문서는 HTML 문서의 <body>에서 지원되는 HTML 태그만 사용할 수 있습니다. 지원되는 HTML 태그 섹션의 설명을 참조하십시오.
    • HTML 문서의 body에 지원되지 않는 HTML 태그가 있을 경우 Acrobat Sign에서 PDF 보기만 생성됩니다.

Liquid Mode 보기의 환경은 세심하게 선별되어 HTML 파일에 지정된 CSS는 무시되고(Liquid Mode 보기에만 해당) 지원되는 HTML 태그의 특성만 Liquid Mode 보기에 영향을 미칩니다. 그러나 PDF 보기의 경우에는 이러한 제한사항이 없습니다. Acrobat Sign은 HTML 문서에 지정된 CSS뿐 아니라 지원되는 태그에 사용할 수 있는 전체 범위의 특성을 사용하여 PDF 보기를 생성합니다.

HTML 문서의 양식 필드를 지정하는 데는 Adobe Acrobat Sign 텍스트 태그 표시법이 사용됩니다.

Liquid Mode 작업 과정

참고:

Liquid Mode 기능이 활성화되었지만 어떤 이유로 Liquid Mode 보기를 생성할 수 없는 경우 계약은 PDF 보기로만 생성됩니다.

전송자에게 보내는 확인 전자 메일에 Liquid Mode 보기를 생성하지 못한 이유가 표시됩니다.

Liquid Mode는 현재 휴대 전화 장치에서 지원되며 다른 사용 환경의 추가 지원은 개발 중입니다.


Liquid Mode 규격 계약 활성화/보내기

  1. Liquid Mode가 Acrobat Sign 관리자 메뉴에서 활성화되었는지 확인합니다.

    • 전송 설정 > Liquid Mode로 이동합니다.
      • 설정은 계정 또는 그룹 수준에서 수정할 수 있습니다.
    Liquid Mode 제어로 이동합니다.

  2. 다음 방법 중 한 가지를 사용하여 단일 HTML 파일을 제출합니다.

    HTML 문서 전송


지원되는 HTML 태그

Liquid Mode 보기로 계약을 성공적으로 생성하기 위해 HTML 문서에는 JavaScript 구문이 포함되지 않을 수도 있습니다

HTML 문서의 body에는 다음 태그만 사용할 수 있습니다.

카테고리

HTML 태그

Liquid Mode 보기에 영향을 주는 특성

제한 사항

헤더

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

없음

 

컨텐츠 나누기

<div>

align

 

나누기

<br>

없음

 

가로 눈금자

<hr>

없음

 

단락

<p>

align

 

이미지

<img>

src, alt, height, width

"이미지 지원" 섹션을 참조하십시오.

인라인 텍스트

<b>, <i>, <u>, <s>, <strong>, <em>, <span>, <sub>, <sup>

없음

 

정렬된 목록

<ol>, <li>

value, type, reversed, start

 

정렬되지 않은 목록

<ul>, <li>

value, reversed, start

 

하이퍼링크

<a>

href

URL 프로토콜은 http, https 및 mailto로 제한됩니다.

테이블

<table>, <thead>, <tbody>, <tfoot>, <th>, <tr>, <td>, <caption>, <col>, <colgroup>

없음

1.중첩된 테이블은 지원되지 않습니다.

2.테이블 내 양식 필드는 지원되지 않습니다.

양식 필드 레이블

<label>

for

"양식 필드 레이블" 섹션을 참조하십시오.

양식 필드 그룹화

<fieldset>, <legend>

없음

"필드 그룹 레이블 지정" 섹션을 참조하십시오.

이미지

<img>

src, alt, height, width

이미지와 전체 HTML의 크기는 400KB 미만이어야 합니다. JPEG, PNG, GIF, BMP 및 TIFF 형식이 지원됩니다. 이미지 소스는 HTTPs URL이어야 합니다.


양식 필드 사양

양식 필드는 HTML 문서에서 Adobe Acrobat Sign 텍스트 태그 표시법을 사용하여 지정해야 합니다.

아래 테이블은 Acrobat Sign 텍스트 태그를 사용하는 양식 필드 샘플을 보여줍니다.

필드

Sign 텍스트 태그

서명 필드(서명, 이니셜, 서명 블록, 스탬프)

{{Sig_es_:signer1:signature}}



{{Int_es_:signer1:initials}}



{{SigB_es_:signer1:signatureblock}}



{{OSig_es_:signer1:optsignature}}



{{OInt_es_:signer1:optinitials}}



{{SigStamp_es_:signer1:stampimage(25)}}

서명자 필드

{{Cmpy_es_:signer1:company}}



{{N_es_:signer2:fullname}}



{{Dte_es_:signer1:date}}



{{Em_es_:signer1:email}}

전송자 필드

{{*Ttl_es_:sender:title}}

참여 스탬프 및 트랜잭션 ID

{{userstamp_es_:signer1:stamp:repeat}}

{{transstamp1_es_:transactionid:repeat}}

읽기 전용 필드

{{!price}}

{{price_es_:readonly}}

텍스트 입력

{{address_es_:signer1}}

{{*city_es_:signer1}}

확인란

{{CB1_es_:checkbox(checked)}}

라디오 버튼

{{(Red)Color_es_:signer1:label(“Red”)}}

{{(Blue)Color_es_:signer1:label(“Blue”)}}

{{(Green)Color_es_:signer1:label(“Green”)}}

이미지

{{Image1_es_:signer1:inlineimage(4)}}

드롭다운

{{Color_es_:signer1:dropdown(options="Red,Green,B lue”, values=”R,G,B”)}}


하이퍼링크

{{companywebsite_es_:link(http://www.adobe.com):label(Adobe)}}


파일 첨부

{{*DriversLicense_es_:signer1:attachment}}

툴팁

{{Car_color_es:signer1:tooltip('Choose a color')}}

디지털 서명

{{digsig1_es_:signer1:digitalsignature}}

필드 확인

{{*Mobile_es_:signer1:phone}}

{{d_es_:signer1:num(>0,<60)}}

조건 규칙

e.g. {{field_es_:showif(price>60)}}

계산된 필드

{{TV_es_:calc([SubTotal]+[Tax])}}

참고:

다음을 제외한 모든 Acrobat Sign 양식 필드 구문이 지원됩니다.

카테고리

지원되지 않는 구문

예외

디지털 서명 양식 필드

:digitalsignature는 지원되지 않습니다.



미리 작성 작업 과정

:prefill 지시문은 지원되지 않습니다.



하이퍼링크 양식 필드

:page(N) 지시문은 지원되지 않습니다.

:link, http, https 및 mailto가 아닌 다른 프로토콜 포함.

:signer1 및 :everyone 지시문이 지원됩니다.

이름이 지정되지 않은 양식 필드

이름이 지정되지 않은 양식 필드는 지원되지 않습니다.

이름이 지정되지 않은 확인란은 지원됩니다.

이름이 변경된 양식 필드

이름은 같지만 지시문이 서로 다른 다중 양식 필드는 지원되지 않습니다.




양식 필드 레이블

각 양식 필드에는 연관된 레이블이 있어야 합니다. 모든 양식 필드에 레이블이 있어야 하는 것은 아니지만, 양식 필드에는 레이블이 있는 것이 좋습니다.

특히, Liquid Mode에서는:

  • 레이블이 필드의 시각적 표현을 개선하는 데 사용됩니다.
  • 필드와 연관된 레이블이 접근성 힌트를 제공합니다. 필드에 포커스가 있을 때 화면 판독기는 레이블을 사용하여 사용자에게 필드를 알립니다.
  • 레이블을 클릭하여 필드에 포커스를 둘 수 있습니다. 또는 라디오 버튼 또는 확인란의 경우 레이블을 클릭하면 값이 전환됩니다.

다음 방법 중 한 가지로 HTML <label> 태그를 사용하여 양식 필드를 레이블에 바인딩할 수 있습니다.

  1. <label> 태그 안에 묶은 Acrobat Sign 양식 필드
    • <label>Signature: {{sig_es_:signer1:signature}}</label>
  2. <label> 태그의 "for" 특성은 양식 필드에 바인딩할 양식 필드의 이름을 나타낼 수 있습니다.
    • {{sig_es_:signer1:signature}} … <label for=”sig”>Signature: </label>

위의 규칙으로 양식 필드와 바인딩할 수 없는 레이블은 바인딩되지 않은 레이블 텍스트로 렌더링됩니다.

그뿐 아니라, Acrobat Sign 텍스트 태그는 양식 필드 유형에 대해 :label 지시문을 지원합니다.

  • 첨부 파일
  • 하이퍼링크
  • 확인란
  • 라디오 버튼

Acrobat Sign 텍스트 태그 :label 지시문과 <label> 태그를 다음 방법으로 결합할 수 있습니다.

양식 필드 유형

:label 지시문의 역할

HTML <label> 태그의 역할

첨부 파일,

하이퍼링크

양식 필드 상자 안에 표시되는 레이블을 지정합니다.

<label> 태그는 양식 필드의 레이블 또는 헤더를 지정합니다.

확인란,

라디오 버튼 옵션

양식 필드의 레이블 또는 헤더를 지정합니다.

Acrobat Sign 텍스트 태그 :label 지시문이 없는 경우 <label>이 양식 필드에 대해 그 자리를 차지합니다.

:label과 <label>이 모두 있으면 Liquid Mode 보기가 생성되지 않습니다.

예를 들면 다음과 같습니다.

  • {{CB_es_:checkbox: signer1:label("I agree.")}}} <label for=” CB”> Yes</label>
  • {{(Red_v)Color_es_:signer1::label(“Red Color”)} <label for=”(Red_v)Color”>Red</label>
참고:

확인란에 대한 레이블은 다음과 같은 방법으로 지정할 수 있습니다.

  • {{CB_es_:checkbox: signer1:label("I agree.")}}
  • <label> {{CB_es_:checkbox:signer1}} I agree.</label>
  • {{CB_es_:checkbox:signer1}} <label for="CB"> I agree.</label>

라디오 버튼 옵션에 대한 레이블은 다음과 같은 방법으로 지정할 수 있습니다.

  • {{(Red_v)Color_es_:signer1:label(“Red”)}}
  • <label> {{(Red_v)Color_es_:signer1}} Red </label>
  • {{(Red_v)Color_es_:signer1}} <label for=”(Red_v)Color”>Red</label>
경고:

일반적으로 HTML에서, "for" 특성은 field id 값을 나타냅니다.  Liquid Mode는 "for" 특성을 사용하여 필드 이름을 나타냅니다.  이 때문에 똑같은 Acrobat Sign 텍스트 태그 지시문을 포함한 양식 필드의 인스턴스가 여러 개 있는 경우, 복제된 양식 필드가 모호해질 수 있습니다.  이러한 경우, "for" 특성을 사용하지 않아야 하고 텍스트 태그를 <label> 요소 안에 넣어 레이블을 연관시켜야 합니다.

예를 들어, 다음 사용법은 모바일 리플로우 보기에서 두 개의 인스턴스 각각에 대해 다른 레이블을 가지는 복제된 양식 필드를 생성합니다.

  • <label> Official {{name_of_official_es_:signer1}} </label>
  • <label> Name {{name_of_official_es_:signer1}} </label>

복제된 양식 필드가 "for" 특성을 사용하는 레이블을 지정하는 경우, 참조가 모호하고 해결할 수 없습니다.  이 경우에는 Liquid Mode 보기가 생성되지 않습니다.

 예를 들어, 다음 사용법은 PDF 보기만 생성합니다.

  • <label for="name_of_official> Official </label> {{name_of_official_es_:signer1}}
  • <label for="name_of_official> Name</label> {{name_of_official_es_:signer1}}


필드 그룹 레이블 지정

레이블은 단일 양식 필드와 연관됩니다. 레이블/캡션을 필드 그룹(특히, 라디오 버튼 그룹)과 연관시키려는 경우 필드 세트 및 범례 요소를 사용하는 것이 좋습니다.  필드 세트는 요소를 그룹화하는 데 사용되고, 범례는 그룹의 캡션/레이블을 제공하는 데 사용됩니다.  레이블과 유사한 Liquid Mode의 이점은 다음과 같습니다.

  • 필드 그룹과 연관된 캡션/제목의 시각적 표현 향상
  • 좋은 접근성 경험.  화면 판독기는 범례 내용을 사용하여 필드 그룹을 올바르게 알립니다.

예를 들면 다음과 같습니다.

<fieldset>

        <legend>좋아하는 기본 색상을 선택합니다.</legend>             

        {{(Red)Color_es_:signer1:label("Red")}}<br/>       

        {{(Blue)Color_es_:signer1:label("Blue")}}<br/>       

        {{(Green)Color_es_:signer1:label("Green")}}<br/>       

</fieldset>

참고:

대부분의 문서에서 작성자는 필드 세트의 기본 렌더링을 원하지 않습니다. 

다음 CSS로 테두리 상자를 제거할 수 있습니다.

    fieldset {

        border: none;

        margin: 0;

        padding: 0;

    }

이미지 지원

이미지는 다음 제한과 함께 지원됩니다.

  • <img> 요소만 지원됨
  • <img>의 src는 임베디드 데이터(data: 스키마) 또는 웹 URL(https: 스키마 전용)로 제공됨
  • JPEGPNGGIFBMP 및 TIFF 형식 지원
    • 애니메이션 GIF의 경우 첫 번째 프레임만 정적 이미지로 사용됨
  • 웹 URL에서 검색한 이미지 크기는 5MB로 제한됨


지원되지 않는 Acrobat Sign 워크플로우

Liquid Mode는 다음 Acrobat Sign 워크플로우를 지원하지 않습니다.

  • 다중 문서에서 생성된 계약
  • 비HTML 문서에서 생성된 계약
  • 라이브러리 템플릿에서 생성된 계약
  • 초안(DRAFT) 또는 작성 중(AUTHORING) 상태에서 생성된 계약
  • 디지털 서명 작업 과정
  • 자필 서명 작업 과정
  • 진행 중인 작업 과정 수정
  • 미리 보기 확인란이 기본적으로 활성화된 그룹의 작업 과정
  • 서명 이유가 활성화된 계약
  • 서명자가 서명 필드를 클릭할 때마다 서명자가 인증해야 하도록 구성된 계약

위의 워크플로우에서 Liquid Mode 보기를 생성하려고 하면 PDF 보기로만 계약이 생성됩니다.  전송자에게 보내는 확인 전자 메일에 Liquid Mode를 생성하지 못한 이유가 표시됩니다.


Liquid Mode 오류 알림

전송자가 Liquid Mode 보기로 계약 생성을 시도했지만 Acrobat Sign이 이를 생성할 수 없는 경우, Liquid Mode 보기를 생성하지 못하게 한 특정 문제가 포함된 계약 확인 전자 메일로 전송자에게 알림이 전송됩니다. 전송자는 보고된 문제를 해결하고 후속 시도에서 Liquid Mode 보기로 계약 생성을 시도할 수 있습니다.

보고된 문제를 다음 카테고리로 그룹화할 수 있습니다.

  • 지원되지 않는 HTML 구문
  • 지원되지 않는 Acrobat Sign 텍스트 태그
  • 지원되지 않는 Acrobat Sign 워크플로우
  • Liquid Mode 내부 오류

Liquid Mode 보기를 생성하려고 하는 중 서버에서 예기치 않은 오류 조건을 발견할 때 Liquid Mode 내부 오류가 발생합니다.

기타 오류 카테고리의 경우, 다음 하위 섹션에서 보고된 문제의 세부정보를 찾을 수 있습니다.


샘플 HTML 문서: 신용 보고서 요청

Liquid Mode 생성을 위한 프라임 대상인 양식 품질은 다음과 같습니다.

  • 많은 모음 및 확대/축소 동작이 필요할 수 있는 대규모 텍스트 블록이 있는 문서
  • 필드 겹침이 없고 필드의 Liquid Mode 흐름이 수락될 수 있는 양식


알려진 문제 및 FAQ

쉽고 빠르게 지원 받기

신규 사용자이신가요?