웹폼 디자이너 소개

웹폼 디자이너는 eformsign 서비스에 기존의 문서 파일을 업로드하여 전자서식으로 만들 수 있는 웹 에디터입니다.

내 파일로 문서 작성 메뉴 또는 템플릿 관리 메뉴에서 문서 파일을 업로드하면 웹폼 디자이너 화면이 나타납니다. 이폼사인에서 제공하는 다양한 입력 항목 중 원하는 입력 항목을 문서의 원하는 위치에 추가하고 난 후, 각 입력 항목에 대한 속성을 설정하면 전자서식을 손쉽게 만들 수 있습니다.

Note

업로드 가능한 파일 형식은 pdf, hwp, doc, docx, xls, xlsx, ppt, pptx, odt, jpg, png, gif, tiff 입니다. 파일 크기는 전체 9MB까지 업로드 가능합니다.

Note

MS Office에서 바로 전자문서를 생성할 수 있는 MS Office Add-in 기능(폼 빌더)도 제공하고 있습니다. 폼 빌더(MS Office Add-in)에 관한 자세한 내용은 폼 빌더를 참고하시기 바랍니다.

파일 업로드하기

내 파일로 문서 작성 메뉴에서 파일 업로드

  1. 대시보드에 파일을 드래그하거나 사이드바 메뉴에서 클릭하여 내 파일로 문서 작성 메뉴로 이동합니다.

    파일 추가
  2. 화면에 바로 파일을 드래그하거나 내 컴퓨터에서 파일 선택을 클릭해서 자신의 컴퓨터에서 업로드하고자 하는 파일을 선택합니다.

    image2

  3. 문서에 참여할 서명 참여자 및 역할을 추가 및 설정하면, 문서에 입력 항목을 추가할 수 있는 웹폼 디자이너 화면이 나타납니다.

    참여자 추가 화면

Tip

파일을 추가하거나 변경하려면 화면 하단의 파일 추가 또는 파일 이름 옆의 더보기(⋮) 메뉴에서 파일 변경을 클릭합니다.

❗파일은 파일 개수에 상관없이 전체 파일 크기 9MB까지 추가할 수 있습니다.

파일 추가/변경
파일 추가 더보기 메뉴

템플릿 관리 메뉴에서 파일 업로드

Note

템플릿 관리 메뉴에서 템플릿을 생성하려면 대표 관리자 또는 템플릿 관리자 권한이 있어야 합니다.

  1. 템플릿 관리 메뉴로 이동합니다.

    웹폼 디자이너 화면
  2. 템플릿 관리 화면에 바로 파일을 드래그하거나 내 컴퓨터에서 파일 선택을 클릭해 자신의 컴퓨터에서 업로드하고자 하는 파일을 선택합니다.

    웹폼 디자이너 화면
  3. 문서에 참여할 서명 참여자 및 역할을 추가 및 설정하면, 웹폼 디자이너 화면이 나타납니다.

    웹폼 디자이너 화면

Tip

파일을 추가하거나 변경하려면 화면 하단의 파일 추가 또는 파일 이름 옆의 더보기(⋮) 메뉴에서 파일 변경을 클릭합니다.

❗파일은 파일 개수에 상관없이 전체 파일 크기 9MB까지 추가할 수 있습니다.

파일 추가/변경
파일 추가 더보기 메뉴

웹폼 디자이너 화면 구성

웹폼 디자이너는 문서를 보여주는 화면과 상단 바, 왼쪽의 서명 참여자 및 입력 항목 리스트, 그리고 오른쪽의 입력 항목 속성 화면으로 구성되어 있습니다.

웹폼 디자이너 메뉴 구성-내 파일로 문서 작성

① 상단 바: 문서 제목과 현재 단계를 확인할 수 있으며, 다음 단계로 진행할 수 있는 버튼과 더보기 메뉴가 표시됩니다.

템플릿 설정의 경우 폼 디자인하기, 설정하기의 2단계가 표시되며, 템플릿 관리 리스트 화면으로 돌아가거나 입력 항목이 추가된 템플릿의 표시 형태를 미리보기할 수 있습니다.

내 파일로 문서 작성의 경우 폼 디자인하기, 수신자 지정하기, 옵션의 3단계가 표시되며, 폼 디자인을 완료하고 문서 작성을 시작하거나 임시 보관함에 저장하고 나갈 수 있습니다.

Note

상단 바에 표시되는 각 단계를 클릭하면 해당 단계의 화면으로 이동합니다. 설정하기를 클릭하면 워크플로우, 권한 등을 설정할 수 있습니다. 템플릿 생성 및 내 파일로 문서 작성을 완료하기 전에 설정을 완료하시기 바랍니다.

② 문서 표시 창: 업로드한 문서 파일이 표시됩니다.

③ 서명 참여자: 문서에 서명할 서명 참여자를 선택한 후 해당 참여자가 입력할 입력 항목을 문서에 드래그하여 추가합니다. 참여자 추가를 클릭해 서명 참여자를 추가할 수 있습니다. 한 문서에 서명 참여자는 최대 30명까지 추가할 수 있습니다.

④ 입력 항목 리스트: 텍스트, 멀티라인, 서명, 체크, 선택 등 14개의 기본 입력 항목과 문서 ID, 문서 번호 등 2개의 정보 항목을 제공합니다.

⑤ 속성: 서명, 텍스트, 체크 등 입력 항목을 클릭해 문서의 원하는 위치에 추가하면 각 입력 항목의 ID, 작성권한 등 상세 속성을 설정할 수 있습니다.

⑥ 하단 바: 파일명이 표시되며, 파일을 추가할 수 있는 파일 추가 버튼, 파일별 더보기 메뉴를 통해 파일 변경, 순서 이동, 파일 삭제 등을 할 수 있습니다.

입력 항목 개요

입력 항목은 전자문서에서 사용자가 내용을 입력할 수 있는 입력란을 만들어주는 역할을 합니다. 서명, 체크, 날짜, 텍스트 등의 다양한 형식의 입력 항목을 제공하며 각각의 입력 항목은 오른쪽 속성창에서 세부 사항을 설정할 수 있습니다.

웹폼 디자이너에 입력 항목을 배치한 모습

입력 항목 종류

eformsign은 다음의 입력 항목을 지원합니다.

기본 입력 항목

  • 서명: 서명을 입력합니다.

  • 회사 도장: 등록된 회사 도장을 입력합니다.

  • 텍스트: 1~2단어의 짧은 텍스트를 입력합니다.

  • 손글씨: 바탕에 텍스트를 입력하고 입력된 텍스트를 따라쓸 수 있습니다.

  • 숫자: 숫자를 직접 입력합니다.

  • 멀티라인: 여러 줄의 긴 텍스트를 입력합니다.

  • 체크: 체크할 항목이 있을 때 사용합니다. 다중 선택도 설정 가능합니다.

  • 라디오: 여러가지 항목 중 한 가지를 선택합니다.

  • 콤보: 클릭하면 드롭다운 메뉴가 나타나며 여러 항목 중 하나를 선택합니다.

  • 토글: 2개 이상의 값을 입력하면 버튼을 클릭할 때마다 다른 값으로 전환됩니다.

  • 날짜: 특정 날짜를 입력합니다.

  • 증감: 증감 버튼을 클릭해 숫자를 입력합니다.

  • 하이퍼링크: 문서에 하이퍼링크를 추가합니다.

  • 레이블: 별도로 설정한 값을 문서에 표시하고자 할때 사용합니다.

  • 카메라: 카메라가 연결된 기기(스마트폰, 태블릿 등)에서는 카메라로 사진을 찍거나 사진첩에서 사진을 선택합니다. 카메라가 없는 기기(일반 PC)에서는 이미지 파일을 선택합니다.

  • 녹음: 녹음 기능이 있는 기기에서 버튼을 클릭해 녹음을 진행합니다.

  • 첨부: 문서에 파일을 첨부합니다.

문서 정보 입력 항목

  • 문서 ID: 문서 내에 문서 ID를 입력합니다.

  • 문서 번호: 문서 내에 문서 번호를 입력합니다.

입력 항목별 속성 설정

모든 입력 항목은 공통 속성과 고유 속성을 가지고 있으며, 속성 창에서 공통 속성과 각 입력 기능의 고유 속성을 확인할 수 있습니다. 공통 속성으로는 ID, 작성권한, 플레이스홀더, 툴팁 텍스트가 있으며, 각 속성의 의미는 다음과 같습니다.

  • ID: 각각의 입력 항목을 식별할 수 있는 고유한 ID 입니다. 설정 단계에서 필수 입력 또는 편집 제한 시 입력 항목 ID로 확인하여 지정할 수 있으며, CSV로 입력 데이터를 추출하여 확인하고자 할때 입력 항목 ID로 구분할 수 있습니다.

  • 작성권한: 서명 참여자별로 해당 입력 항목에 입력할 수 있는 권한을 설정합니다. 작성권한에는 추가된 서명 참여자의 목록이 표시되며, 할당 대상 또는 필수에 체크할 수 있습니다. 문서 전송 시 할당 대상으로 체크된 입력 항목은 노란색으로, 필수로 체크된 입력 항목은 빨간색으로 표시됩니다.

    • 할당 대상: 해당 참여자가 해당 입력 항목에 입력할 수 있습니다.

    • 필수: 해당 참여자가 반드시 해당 입력 항목을 입력해야만 문서를 전송할 수 있습니다.

  • 플레이스홀더: 입력란에 입력하기 전 안내 문구로 표시되는 텍스트입니다.

  • 툴팁 텍스트: 수신자가 문서를 열람 시 Windows 환경에서는 입력 항목에 마우스를 위치하면 툴팁 텍스트가 말풍선 형태로 표시되며, 모바일 환경에서는 키패드 상단 중앙에 표시됩니다.

Note

레이블, 하이퍼링크 등 일부 입력 항목과 문서 관련 정보 제공을 위한 문서 정보 입력 항목의 경우, 공통 속성이 다를 수 있습니다.


각 입력 항목에 대한 설명은 다음과 같습니다.

서명

서명 입력 항목은 문서에 서명을 받아야 할 때 사용합니다.

서명 입력 항목을 넣으면 서명이 필요한 문서에서 아래와 같이 서명 팝업이 나타나 서명을 직접 그리거나 텍스트를 입력해 서명을 생성할 수 있으며, 기존에 등록한 서명이 있는 경우 이를 사용할 수도 있습니다.

image4

입력 항목 속성

서명 입력 항목 속성 설정하기

① ID

서명 입력 항목의 ID를 입력합니다. 예를 들어, 계약자의 서명인 경우 입력 항목 ID는 ‘계약자 서명’으로 합니다.

② 서명 유형

서명 시 어떤 서명을 사용할 것인지 선택합니다.

  • 서명: 문서를 작성하는 사람이 미리 등록해 둔 내 서명이 있는 경우 서명란을 클릭 또는 서명 입력 버튼을 클릭하면 등록된 서명이 자동으로 입력됩니다.

  • 이니셜: 내 서명에 등록된 이니셜이 있는 경우 서명란을 클릭 또는 이니셜 입력 버튼을 클릭하면 등록된 이니셜이 자동으로 입력됩니다.

  • 도장: 내 서명에 등록된 도장이 있는 경우 서명란을 클릭 또는 도장 입력 버튼을 클릭하면 등록된 도장이 자동으로 입력됩니다.

Note

등록된 서명과 이니셜, 도장이 있는 경우에는 해당 서명이 서명란에 자동으로 입력되지만, 등록된 서명과 이니셜, 도장이 없는 경우 서명을 직접 입력할 수 있는 팝업이 나타납니다.

서명 유형을 한 가지만 선택할 경우 서명란을 클릭하면 해당 서명 유형이 바로 입력되며, 서명 유형을 두 가지 이상 선택할 경우 서명란을 클릭하면 다음과 같이 선택할 수 있는 서명 유형 버튼이 표시됩니다.

서명 유형 선택

Tip

문서에 직접 서명이 아닌 직인이나 개인 도장을 사용해야 하는 경우가 있습니다. eformsign에서는 도장을 만들거나, 도장 이미지 업로드, 실물인감스캔을 통해 문서의 서명란에 도장을 찍을 수 있습니다.

회사 법인 인감 등 회사 직인이 있을 경우, 회사 도장으로 등록해 놓으면, 회사 도장 입력 항목으로 사용 권한이 있는 멤버만 안전하고 간편하게 사용할 수 있습니다.

③ 서명 방법

직접 입력만 허용을 체크하면 태블릿 PC 등으로 서명란에 직접 서명을 할 수 있도록 설정합니다. 서명란을 클릭하면 서명 팝업이 나타나며 그리기, 텍스트, 모바일, eformsign 앱 중 원하는 방식으로 서명을 입력합니다.

④ 서명펜 두께

서명을 그릴 때 표시되는 선의 두께를 설정합니다.

⑤ 서명펜 색

서명을 그릴 때 표시하는 선의 색을 설정합니다.

Tip

서명에 대한 서명일 및 서명인 자동 입력 설정하기

서명 입력 항목를 클릭하여 나타나는 아이콘을 클릭하면 서명일 및 서명인을 추가할 수 있습니다.

서명일 및 서명인

① 서명일: 서명 시 서명한 날짜가 자동으로 입력됩니다. 서명일 영역을 클릭하여 우측의 서명일 입력 항목 속성에서 날짜 표시형식을 설정할 수 있습니다.

서명일

② 서명인: 서명인 정보가 자동으로 입력됩니다. 서명 입력 항목을 클릭하여 나타나는 사람 모양 아이콘을 클릭하면 ID, 이름, 부서, 직책, 휴대폰 번호, 전화번호 중 서명인 정보에 표시될 정보를 지정할 수 있습니다.

서명인

Note

하나의 서명과 연결된 서명일 및 서명인 입력 항목을 여러 개 추가할 수 있습니다. 계약서 등의 문서 내에 반복적으로 서명일을 입력하거나, 서명인 정보를 자세히 입력하고자 할 때 유용합니다.


회사 도장

회사 대표 도장, 사용 인감, 법인 인감 등 회사 관리 > 회사 도장에 등록된 회사 도장을 입력하고자 할 때 사용합니다.

회사 도장은 회사 관리 > 회사 도장에 등록된 도장과 사용권한을 부여받은 멤버만 사용할 수 있으며, 회사 도장에 대한 이력이 회사 도장 메뉴에 기록됩니다.

입력 항목 속성

회사 도장 입력 항목 속성 설정하기

① ID

회사 도장 입력 항목의 ID를 입력합니다. 예를 들어, 법인 인감인 경우 입력 항목 ID를 ‘법인 인감’으로 설정합니다.


텍스트와 멀티라인

텍스트 입력 항목과 멀티라인 입력 항목 모두 텍스트 입력란을 만들 때 사용합니다. 텍스트 입력 항목은 1~2 단어의 짧은 텍스트, 멀티라인은 1줄 이상의 긴 텍스트에 적합합니다.

입력 항목 속성

텍스트와 멀티라인 입력 항목 속성 설정하기

① ID

텍스트/멀티라인 입력 항목의 ID를 입력합니다. 예를 들어, 홍길동, 이순신 등이 입력되는 입력 항목의 ID는 ‘이름’으로 합니다.

Note

ID는 자동으로도 부여되나, 입력 항목 배치 후 각 입력 항목에 대해 수신자에게 입력 요청을 할지 여부를 결정할 때 해당 ID의 명칭이 표시되므로 사용자 자신이 인식하기 쉬운 ID를 설정하는 것을 권장합니다.

② 기본 값

기본으로 표시될 텍스트를 설정할 수 있습니다.

③ 입력 타입

입력 타입을 일반 텍스트, 주소, 패스워드, 입력 규칙 사용자 지정 중 선택합니다.

  • 일반 텍스트: 일반 텍스트 입력시 사용합니다.

  • 주소: 주소 입력이 필요할 때 설정합니다. 선택 시 텍스트 입력항목을 클릭하면 주소 검색창에서 주소를 검색하여 입력할 수 있습니다.

  • (우편번호)주소: 우편번호를 포함한 주소 입력이 필요할 때 설정합니다.

  • 패스워드: 입력한 내용이 표시되지 않도록 설정합니다. 텍스트 입력 시 입력한 내용이 별표(*) 또는 패스워드 문자(●)로 입력되어 입력한 내용을 숨길 수 있습니다. 입력된 내용은 PDF에서도 패스워드 문자로 숨겨지며, CSV 데이터를 다운로드 받을 때에만 확인할 수 있습니다.

  • 입력 규칙 사용자 지정: 입력항목에 입력될 텍스트의 유형을 설정합니다.

④ 입력 규칙 설정

전화번호, 생년월일, 사업자등록번호 등 기본 입력 규칙 유형 중에서 선택하거나 직접 입력을 선택하여 규칙을 만들 수 있습니다.

입력 규칙 설정

Tip

입력 규칙 설정에서 직접 입력을 선택하면 숫자, 알파벳 등 입력받을 문자의 종류와 글자 수 등 규칙을 직접 설정할 수 있습니다. 예를 들어 여권번호를 입력하도록 하려면 여권번호 유형에 따라 규칙을 다음과 같이 설정할 수 있습니다.

여권번호는 ‘알파벳 + 숫자 8자리’ 또는 ‘알파벳 + 숫자3자리 + 알파벳 + 숫자 4자리’ 조합으로 구성되어 있어서 알파벳 대문자로 시작할 수 있도록 ‘>L’, 숫자만 입력할 수 있는 ‘0’, 숫자와 알파벳을 입력할 수 있는 ‘A’를 사용해 >L000A0000으로 규칙을 설정합니다.

입력 규칙 설정- 직접 입력

⑤ 텍스트 조정

  • 너비에 맞게 글자 수 제한: 입력 항목 크기에 맞게 글자 수를 자동으로 제한합니다. 짧은 텍스트는 항목 크기를 작게, 긴 텍스트를 입력해야 하는 경우에는 항목 크기를 크게 설정해 주세요.

  • 글자 크기 자동 조정: 입력 항목 크기에 맞게 글자 크기를 자동으로 조정합니다.(글자 크기 축소)

  • 입력 가능 글자 수 직접 입력: 입력 항목에 입력할 수 있는 최대 글자 수를 설정합니다. 옵션 선택 시 최대 글자 수로 기본 설정됩니다. 텍스트는 ‘1~1000자’, 멀티라인은 ‘1~8000자’까지 입력할 수 있습니다.

⑥ 키패드 타입(모바일만 적용)

스마트폰, 태블릿과 같은 모바일 환경에서 문서를 작성할 때 실행할 키패드 타입을 선택합니다.


손글씨

손글씨 입력 항목은 미리 입력된 텍스트를 직접 따라쓰도록 해야할 때 사용합니다. 문서 바탕에 표시될 텍스트를 입력하고 문서 수신자는 해당 텍스트를 자필로 따라쓰기 할 수 있습니다.

손글씨 입력 항목 예시

입력 항목 속성

손글씨 입력 항목 속성 설정하기

① ID

손글씨 입력 항목의 ID를 입력합니다.

② 펜 두께

따라쓰기 할 때 표시되는 선의 두께를 설정합니다.

③ 펜 색

따라쓰기 할 때 표시되는 선의 색를 설정합니다.

④ 따라쓰기 텍스트 표시

아래 입력한 텍스트가 손글씨 입력 항목에 표시되도록 설정합니다.


숫자

숫자 입력 항목은 금액 등 숫자를 직접 입력할 때 사용합니다.

입력 항목 속성

숫자 입력 항목 속성 설정하기

① ID

숫자 입력 항목의 ID를 설정합니다. 예를 들어, 결제 금액이 입력되는 입력 항목의 ID는 ‘결제 금액’으로 설정합니다.

② 기본 값

기본으로 입력될 값을 설정합니다.

③ 음수 입력 허용

해당 옵션을 체크하면 음수 값을 입력할 수 있습니다.

④ 입력 가능 최솟값/최댓값

입력 가능한 최솟값 또는 최댓값을 설정합니다.

Note

최솟값을 설정한 경우 입력한 값이 설정한 최솟값보다 작으면 최솟값으로 변경되어 입력됩니다. 최댓값을 설정한 경우에는 입력한 값이 설정한 최대값보다 크면 최댓값으로 변경되어 입력됩니다.

⑤ 입력 가능 소수점 자릿수

입력 가능한 소수점 자릿수를 설정합니다. 소수점 자릿수는 0~10까지 입력할 수 있습니다.

⑥ 천 단위 구분 기호 표시

옵션을 체크하면 입력한 값에 자동으로 천 단위 구분 콤마가 표시됩니다.

⑦ 접두사/접미사

숫자에 필요한 접두사/접미사를 자동으로 입력되도록 설정합니다. 예를 들어 “총 10,000원”을 입력해야 할 경우 접두사는 “총”, 접미사는 “원”으로 설정합니다.


체크

체크 입력 항목은 여러 선택 항목에 대해 다중 선택이 가능하도록 할 때 사용합니다.

Tip

체크 입력 항목과 라디오 입력 항목의 차이

체크 입력 항목은 다중 선택 가능여부를 설정할 수 있습니다. 즉, 체크 입력 항목은 중복선택을 허용하나, 라디오 입력 항목은 중복입력을 허용하지 않습니다.

입력 항목 속성

체크 입력 항목 속성 설정하기

① ID

체크 입력 항목의 선택 항목은 선택 그룹 별로 같은 ID를 부여해야 합니다. 예를 들어 설문 1번 문항에 선택 항목 5개 중 선택하도록 할 경우 5개 선택 항목의 ID는 ‘설문 1번 문항’으로 동일해야 합니다. 동일한 ID는 아래와 같이 묶음 표시됩니다.

Tip

입력 항목을 추가할 때 (+) 버튼을 클릭하면 동일한 ID로 항목(아이템)이 추가됩니다.

체크 입력 항목 속성 설정하기2

② 아이템 리스트

해당 항목에 표시될 텍스트를 입력할 수 있습니다. 텍스트는 문서에 표시되는 문구이며, 값은 CSV 파일로 입력 데이터 다운로드 시 표시되는 문구입니다. 다중 선택 가능을 해제하면 아이템 리스트 중 한 항목만 선택할 수 있습니다.

③ 선택 스타일

속성에서 색상 및 도형 스타일을 지정할 수 있습니다. 체크를 선택하면 속성에서 체크박스가 기본으로 설정되어 있으며, 이외에 라디오 버튼, 원 표시를 선택할 수 있습니다.

다음의 예시를 보면, 왼쪽부터 체크 / 라디오 / 원 선택 시 각각 체크박스가 어떻게 표시되는지 알 수 있습니다.

image5

Tip

오른쪽 위 아이콘을 눌러 각 스타일의 색상을 지정할 수 있습니다. 활성화된 아이콘은 아이콘 하단에 현재 표시되는 색상의 선이 나타납니다.

예를 들어, 체크박스의 경우 박스의 바탕색, 박스의 윤곽선, 체크 색상을 각각 지정할 수 있고, 라디오 버튼의 경우 원 윤곽선과 중심원 색상을 각각 지정할 수 있고, 원 표시의 경우 원 색상을 지정할 수 있습니다.

image6

④ 비선택 스타일

선택되지 않은 항목에 표시될 스타일을 지정할 수 있습니다. 체크박스는 사각형, 라디오 버튼은 원형, 원 표시는 아무것도 표시되지 않습니다.

⑤ 체크박스 위치

체크박스의 위치를 지정합니다.

  • 텍스트 왼쪽: 체크박스 위치를 텍스트의 왼쪽에 위치하도록 설정합니다.

  • 텍스트 오른쪽: 체크박스 위치를 텍스트의 오른쪽에 위치하도록 설정합니다.


라디오

라디오 입력 항목은 여러 선택 항목 중 하나의 항목만 선택할 수 있도록 할 때 사용합니다.

입력 항목 속성

선택 입력 항목 속성 설정하기

① ID

라디오 입력 항목의 선택 항목은 선택 그룹 별로 동일한 ID를 부여해야 합니다.

예를 들어, 1번 문제에 대해 1, 2, 3, 4, 5의 보기가 있는 경우 1, 2, 3, 4, 5 항목에 같은 ID ‘1번’을 부여합니다. 2번 문제의 1, 2, 3, 4, 5 보기에는 ‘2번’ ID를 부여합니다.

입력 항목을 추가할 때 (+) 버튼을 클릭하면 동일한 ID로 항목(아이템)이 추가됩니다.

② 아이템 리스트

같은 ID를 부여한 항목은 입력 항목 속성 창의 아이템 리스트에 표시되며, 아이템 리스트에서 간편하게 텍스트를 수정할 수 있습니다. 텍스트는 문서에 표시되는 문구이며, 은 CSV 파일로 입력 데이터 다운로드 시 표시되는 문구입니다.

③ 선택 스타일

라디오 입력 항목은 속성에서 스타일을 지정할 수 있습니다. 검정색 이중 원 형태가 기본으로 설정되어 있으며 드롭박스 메뉴에서 스타일을 변경할 수 있습니다.

Tip

오른쪽 위 아이콘을 클릭해 상세 스타일을 변경할 수도 있습니다. 활성화된 아이콘은 아이콘 하단에 현재 표시되는 색상의 선이 나타나며, 윤곽선과 중심원의 색상을 별도로 설정할 수 있습니다.

image7

④ 비선택 스타일

선택되지 않은 항목에 표시될 스타일을 지정할 수 있습니다.

⑤ 라디오버튼 위치

라디오버튼의 위치를 지정합니다.

  • 텍스트 왼쪽: 라디오버튼 위치를 텍스트의 왼쪽에 위치하도록 설정합니다.

  • 텍스트 오른쪽: 라디오버튼 위치를 텍스트의 오른쪽에 위치하도록 설정합니다.


콤보

여러가지 항목 중에서 한 항목을 선택해야 할 때 콤보 입력 항목을 사용합니다. 다음과 같이 선택란을 클릭하면 항목 리스트가 나타납니다.

image8

입력 항목 속성

콤보 입력 항목 속성 설정하기

① ID

콤보 입력 항목의 ID를 입력합니다. 예를 들어, 좋아하는 색을 고르는 콤보 입력 항목의 경우 ID는 ‘좋아하는 색’으로 합니다.

② 아이템 개수

선택 항목들을 입력합니다. 엔터(Enter)로 여러 항목을 구분합니다. 텍스트는 문서에 표시되는 문구이며, 은 CSV 파일로 입력 데이터 다운로드 시 표시되는 문구입니다.

③ 기본 선택 아이템

기본으로 표시할 항목을 설정합니다.

④ 플레이스홀더

입력해야 할 내용에 대한 안내 문구로 값이 입력되지 않았을 때 표시됩니다.

Note

콤보 입력 항목의 선택란에 ‘선택하세요’를 표시하려면, 플레이스홀더에 ‘선택하세요’를 입력하고 기본 선택 아이템으로 ‘선택하세요’를 설정합니다.


토글

켜짐(ON), 꺼짐(OFF)과 같은 특정한 상태를 선택하도록 할 때 사용합니다. 토글 입력 항목을 사용하면 입력 항목을 클릭할 때마다 미리 설정한 항목의 순서대로 입력값이 전환됩니다. 다음과 같이 입력 항목을 클릭하여 양호, 불량 상태로 변경할 수 있습니다.

image9

입력 항목 속성

토글 입력 항목 속성

① ID

토글 입력 항목의 ID를 입력합니다. 예를 들어, 첫번째 점검항목에 대한 입력 항목인 경우 ‘점검항목 1’로 합니다.

② 아이템 개수

토글 입력 항목을 클릭할 때마다 전환될 항목 리스트를 입력합니다. 엔터(Enter)로 항목을 구분합니다. 텍스트는 문서에 표시되는 문구이며, 은 CSV 파일로 입력 데이터 다운로드 시 표시되는 문구입니다.

③ 기본 선택 아이템

기본으로 표시할 항목을 설정합니다.


날짜

날짜를 입력해야 할 때 사용합니다. 입력란을 클릭하면 날짜 선택창이 나타나며 원하는 날짜를 선택할 수 있습니다.

입력 항목 속성

날짜 입력 항목 속성 설정하기

① ID

날짜 입력 항목의 ID를 입력합니다. 예를 들어, 휴가 시작일을 선택하는 입력 항목의 ID는 ‘휴가 시작일’로 합니다.

② 기본 값

기본으로 표시할 날짜를 설정합니다. 오늘 날짜로 설정에 체크하면 문서를 열었을 때 자동으로 오늘 날짜가 입력됩니다.

③ 표시형식

날짜가 표시되는 형식을 지정합니다. 기본 설정값은 date_yyyy-MM-dd입니다.

  • yyyy: 연도를 표시합니다. (yyyy년 = 2020년)

  • MM: 월을 표시합니다. 반드시 대문자로 표기해야 합니다. (MM월 = 8월)

  • dd: 일을 표시합니다. (dd일 = 10일)

‘2020년 2월 5일’과 같이 나타나도록 설정하고 싶은 경우, 표시형식에 ‘yyyy년 MM월 dd일’로 입력합니다.

④ 입력 가능 최소/최대 날짜

날짜 선택 시 선택할 수 있는 최소, 최대 날짜를 지정하여 입력 가능한 날짜의 범위를 설정합니다.


증감

숫자를 증감 버튼을 눌러 입력할 수 있도록 설정할 때 사용합니다. 입력항목을 클릭하면 오른쪽에 두 개의 화살표가 나타나며, 위 아래 화살표 버튼을 클릭해 숫자를 증감시킬 수 있습니다.

PC 키보드 환경에서는 입력 항목에 직접 원하는 숫자를 입력할 수 있으며, 스마트폰, 태블릿 환경에서는 입력 범위 숫자 리스트에서 스크롤하여 원하는 숫자를 선택할 수 있습니다.

입력 항목 속성

증감 입력 항목 속성 설정하기

① ID

증감 입력 항목의 ID를 입력합니다. 예를 들어, 예약 인원을 입력하는 입력 항목의 ID는 ‘예약 인원’으로 합니다.

② 기본 값

기본으로 표시할 숫자를 설정합니다.

③ 증감 단위

입력란의 증가/감소 아이콘을 클릭할 때마다 현재 입력된 값에서 증감시킬 값을 입력합니다. 예를 들어, 증감 단위를 100으로 설정하고 문서를 작성할 때 입력란 오른쪽의 위 화살표(▲)를 클릭하면 입력된 값에서 200, 300, …으로 증가합니다.

④ 입력 가능 최솟값/최댓값

입력 가능 최솟값/최댓값을 지정하여 입력 가능한 숫자의 범위를 설정합니다. 예를 들어, 생년월일의 경우 보통 최솟값을 1900, 최댓값을 현재 년도, 증감 단위를 1로 지정합니다. 최솟값 또는 최댓값이 지정된 상태에서 범위 외의 숫자를 입력하면 자동으로 최솟값 또는 최댓값이 입력됩니다. 즉, 최댓값이 100으로 지정되었을 때, 입력란에 101을 입력하면 숫자가 자동으로 최댓값인 100으로 변경됩니다.


레이블

레이블 입력 항목은 별도로 설정한 값을 문서에 표시하고자 할 때 사용합니다.

입력 항목 속성

레이블 입력 항목 속성 설정하기

① ID

레이블 입력 항목의 ID를 설정합니다.

② 텍스트

해당 입력란에 입력한 텍스트가 문서상에 표시됩니다.


하이퍼링크

하이퍼링크 입력 항목을 사용하면 클릭 시 특정 웹 페이지로 이동하거나 메일 주소 연결, 전화번호 연결되도록 설정할 수 있습니다.

입력 항목 속성

하이퍼링크 입력 항목 속성 설정하기

① 표시할 텍스트

문서에 표시될 텍스트를 입력합니다. 표시할 텍스트를 입력하지 않을 경우, 주소에 입력한 내용이 표시됩니다.

② 주소

연결될 주소를 입력합니다. 웹 페이지 주소, 메일 주소, 전화번호를 입력할 수 있으며, 주소는 다음과 같은 형태로 입력해야 합니다.


카메라

스마트폰, 태블릿 등 카메라가 있는 기기로 사진을 찍어 문서에 삽입하고자 할 경우 사용합니다. 카메라가 없는 PC 환경에서는 입력 항목을 클릭하면 이미지 파일을 선택할 수 있는 선택창이 나타납니다. 선택한 이미지의 크기가 입력란의 크기보다 클 경우 입력란 안에 들어갈 수 있도록 축소되어 올라갑니다.

Note

카메라 입력 항목의 경우 카메라가 연결된 환경에서는 카메라 기능이 실행되고, 카메라가 연결되지 않은 환경에서는 이미지 파일 선택 창이 실행됩니다.

image10

입력 항목 속성

카메라 입력 항목 속성 설정하기

① ID

카메라 입력 항목의 ID를 입력합니다. 예를 들어, 신분증 사진을 촬영하는 입력 항목의 ID는 ‘신분증 사진’으로 설정합니다.

Tip

아이콘 표시에 체크하면 카메라 영역에 카메라 아이콘이 표시됩니다.

image11


녹음

문서에 사용자의 녹음 데이터를 저장해야 할 때 사용합니다. 녹음 입력 항목을 추가하면 뷰어에서 다음과 같이 녹음된 내용을 재생하거나 새로운 녹음을 할 수 있습니다.

image12

Note

녹음은 eformsign 앱에서만 동작되는 기능입니다.

입력 항목 속성

녹음 입력 항목 속성 설정하기

① ID

녹음 입력 항목의 ID를 입력합니다. 예를 들어, 음성 동의를 녹음하는 입력 항목의 ID는 ‘음성 동의’로 합니다.

Tip

아이콘 표시에 체크하면 녹음 영역에 마이크 아이콘이 표시됩니다.

image13


첨부

문서에 별도로 첨부 파일을 추가할 수 있도록 할 경우 사용합니다. 첨부 입력 항목을 통해 문서를 첨부할 경우 문서의 맨 끝에 첨부한 문서가 새로운 페이지로 추가됩니다.

첨부 가능한 파일의 종류와 크기는 다음과 같습니다.

  • 파일 종류: PDF, JPG, PNG, GIF

  • 파일 크기: 최대 5MB까지

입력 항목 속성

첨부 입력 항목 속성 설정하기

① ID

첨부 입력 항목의 ID를 입력합니다. 예를 들어, 재직증명서를 첨부하는 입력 항목의 ID는 ‘재직증명서 첨부’로 합니다.

Tip

아이콘 표시에 체크하면 첨부 영역에 클립 아이콘이 표시됩니다.

image14


문서 ID와 문서 번호

문서 정보 입력 항목은 문서 내에 문서 관련 정보를 입력해야 할 때 사용합니다. 문서 ID, 문서 번호가 표시되도록 설정할 수 있습니다.

  • 문서 ID: 시스템에서 모든 문서에 부여하는 문서의 고유한 ID로, 32자리의 알파벳과 숫자의 조합으로 표시됩니다. 예) 0077af27a98846c8872f5333920679b7

  • 문서 번호: 템플릿 설정 > 일반 설정에서 설정된 문서 번호입니다. 문서 번호를 설정하는 방법은 문서 번호 설정 방법을 참고하세요.

    Note

    문서 ID는 시스템에서 부여하는 문서 고유의 ID이기 때문에 별도의 설정이 필요하지 않습니다. 문서 번호 설정은 템플릿 설정 > 일반 설정에서 할 수 있습니다.

입력 항목 속성

문서 입력 항목 속성 설정하기

템플릿에 대한 추가 설정

문서에 입력 항목를 추가하고 나면 템플릿 제목, 문서 번호, 워크플로우 등 템플릿으로 생성되는 문서에 대한 상세 설정을 할 수 있습니다.

폼 디자인하기 화면에서 설정하기 버튼을 눌러 설정하기 화면으로 이동합니다. 설정하기 화면에서는 다음의 5가지 설정을 하여 템플릿을 설정할 수 있습니다.

  • 일반 설정: 템플릿 이름, 약칭, 문서 제목, 문서 번호 등을 설정합니다.

  • 권한 설정: 해당 템플릿으로 문서를 생성할 멤버나 그룹, 템플릿을 수정할 수 있는 멤버나 그룹을 지정합니다.

  • 워크플로우 설정: 문서의 시작부터 완료까지 작성된 문서의 처리 단계를 설정합니다.

  • 필드 설정: 필드의 표시 여부, 순서, 기본값, 자동 입력 값 등을 설정합니다.

  • 알림 설정: 템플릿으로 생성된 문서에 대한 상태 알림의 수신자를 설정하고 최종 완료 알림 메시지를 편집합니다.

템플릿의 5가지 설정 항목

Important

템플릿 배포란?

해당 템플릿으로 문서를 작성할 수 있도록 하기 위해서는 템플릿을 저장한 후 반드시 배포해야 합니다. 즉, 템플릿을 멤버들이 사용할 수 있도록 공개하는 것입니다.

템플릿을 배포하지 않고 저장만 할 경우 템플릿 사용 권한이 있는 멤버들의 템플릿으로 문서 작성 화면에 나타나지 않습니다.

배포하지 않은 템플릿은 아래 이미지에서와 같이 템플릿에 배포 전이라고 표시됩니다. 템플릿을 배포하려면 템플릿의 더보기 메뉴를 클릭해 배포를 하거나, 템플릿 설정에 들어가서 저장 버튼을 클릭해 배포 여부를 선택할 수 있습니다.

템플릿의 5가지 설정 항목

Note

템플릿 설정에 대한 설명은 웹폼 디자이너로 템플릿 만들기를 참고하시기 바랍니다.