편집기로 문서 만들기

화면 구성

화면은 셋으로 나뉩니다. 왼쪽이 객체 트리, 가운데가 캔버스, 오른쪽이 속성 패널입니다. 캔버스에는 실제 크기의 종이가 놓입니다. 아래 가운데에 떠 있는 것이 객체를 넣는 도구 막대입니다. 이 문서는 세 이름을 계속 그대로 씁니다.

캔버스는 그림이 아니라 실제 렌더 결과입니다. 값을 고치면 그 자리에서 다시 그려지므로, PDF 를 뽑아 보지 않아도 넘침과 줄바꿈이 보입니다.

상단 막대에서 배율을 바꾸고 눈금자·격자·붙이기(스냅)를 끄고 켭니다. 저장 상태도 여기 표시됩니다 — 고친 것이 있으면 저장 버튼이 살아납니다. 눈금자의 0 은 종이 왼쪽 위가 아니라 여백 안쪽, 즉 속성 패널의 X · Y 가 세는 곳과 같은 자리입니다. 격자 간격은 배율에 따라 자동으로 바뀌고 숫자가 붙은 눈금과 항상 같은 자리입니다. 다만 격자는 눈으로 보는 것일 뿐 달라붙지는 않습니다 — 달라붙는 것은 붙이기이고 그 기준은 격자가 아니라 다른 객체와 종이 가장자리입니다. 눈금자와 격자는 저장되지 않습니다. 새로고침하면 다시 꺼진 상태로 시작합니다.

페이지 설정 — 용지·여백·머리글·바닥글

용지 규격·방향·여백·머리글·바닥글은 개체가 아니라 문서에 속하므로, 그 패널은 오른쪽에 항상 있습니다. 무엇을 먼저 고를 필요가 없습니다. 용지를 바꾸면 캔버스가 그 자리에서 다시 그려지고 눈금자와 격자도 따라옵니다.

쓸 수 있는 용지는 넷입니다 — A4(794×1123) · A5(559×794) · Letter(816×1056) · Legal(816×1344). 각각 세로·가로를 고를 수 있습니다. 숫자는 96dpi 기준 px 이고, 선택 상자에 함께 보이므로 찾아보지 않고도 크기를 비교할 수 있습니다.

여백은 장식이 아니라 개체 좌표가 시작하는 자리입니다. 속성 패널의 X·Y 는 여백 안쪽에서부터 재므로, 여백을 바꾸면 모든 개체가 함께 움직입니다. 머리글·바닥글에는 다른 글과 마찬가지로 {{ data.x }} 를 쓸 수 있고, 쪽번호는 [[page]] · [[pages]] 입니다.

API 에서는 같은 설정이 page: {"size":"letter","orientation":"landscape"} 로 들어갑니다. 목록 밖의 값은 어느 필드가 틀렸는지 밝히는 오류로 거부됩니다 — 조용히 고쳐 주지 않습니다. 고쳐진 용지로 인쇄되면 요청하지 않은 문서가 나오기 때문입니다.

객체 넣기

도구 막대의 단추를 누르면 종이 왼쪽 위에 객체가 하나 놓입니다. 이미 있는 것과 겹치지 않게 조금씩 밀어 놓으므로, 여러 번 눌러도 서로 가려지지 않습니다.

넣을 수 있는 것은 열 가지입니다. 종류를 나중에 바꿀 수는 없으니, 잘못 넣었으면 지우고 다시 넣으십시오.

• 라벨 label
• 이미지 image
• 선 line
• 사각형 rect
• 원 circle
• 표 table
• 차트 chart
• QR·바코드 code
• 서식 본문 html
• 입력칸 field

새로 넣은 객체는 반드시 보이게 만들어 둡니다 — 도형은 테두리가, 표는 격자선과 머리 행이, QR 은 읽히는 기본 주소가 들어 있습니다. "넣었는데 아무것도 안 보인다" 가 되지 않게 하기 위해서입니다.

고르기 · 옮기기 · 크기

캔버스에서 클릭하면 골라집니다. Shift 를 누른 채 클릭하면 여럿을 고릅니다. 고른 것 둘레에 손잡이 여덟 개가 생기고, 그것을 끌면 크기가 바뀝니다.

끌어서 옮길 때 다른 객체나 종이 가장자리와 줄이 맞으면 안내선이 나타나 달라붙습니다. 정밀하게 놓아야 하면 상단의 붙이기를 끄거나, 속성 패널의 X · Y 에 숫자를 직접 넣으십시오.

화살표 키로 1px 씩 움직입니다. 여럿을 고른 채로도 함께 움직입니다. 겹친 것의 앞뒤는 속성 패널의 맨 앞 · 맨 뒤로 바꿉니다.

속성 패널 아래쪽의 상자 정렬은 고른 것을 페이지(또는 부모) 기준으로 맞춥니다. 여럿을 고르면 그것들이 이루는 상자 안에서 맞춥니다 — 셋을 골라 왼쪽 맞춤을 누른 사람이 원한 것은 셋의 왼쪽을 맞추는 것이지 셋을 종이 끝으로 보내는 것이 아니기 때문입니다.

객체 트리

왼쪽 목록이 문서의 구조입니다. 들여쓰기가 부모 · 자식 관계이고, 위아래 순서가 겹칠 때 무엇이 위에 그려지는지를 정합니다.

행을 끌어 순서를 바꿉니다. 행과 행 사이에 놓으면 순서가 바뀌고, 행 위에 놓으면 그 안으로 들어갑니다. 여럿을 고른 채로 끌면 함께 움직이며, 부모와 자식을 같이 골랐으면 부모만 움직입니다 — 자식은 부모를 따라가기 때문입니다.

행을 두 번 누르면 이름을 고칩니다. 이름은 우리끼리 알아보기 위한 것이고 PDF 에는 나오지 않습니다.

눈 아이콘은 숨기기입니다. 숨긴 객체는 편집 화면에서만이 아니라 PDF 에서도 빠집니다 — 화면에 없는 것이 결과물에 있으면 그것이 더 나쁜 놀라움이기 때문입니다. 데이터에 따라 나올지 말지를 정하고 싶다면 숨기기가 아니라 속성 패널의 조건부 표시를 쓰십시오.

자물쇠는 잠금입니다. 잠긴 객체는 클릭도 이동도 삭제도 되지 않고 속성 패널이 통째로 막힙니다. 부모를 잠그면 자식도 함께 잠기며, 자식에서 자물쇠를 한 번 더 누르면 그 자식만 풀립니다. 잠긴 것이 안에 들어 있으면 부모도 지워지지 않습니다 — 부모를 지우면 그 안의 잠근 것까지 사라지기 때문입니다.

속성 패널

오른쪽 패널은 고른 객체 하나의 값을 보여줍니다. 여럿을 고르면 값을 보여주지 않습니다 — 서로 다른 값을 하나로 보여줄 방법이 없기 때문입니다.

맨 위는 위치와 크기(X · Y · W · H)입니다. 단위는 px 이고 96dpi 기준입니다 — A4 는 794 × 1123 이며, 여백 안쪽이 원점입니다. 높이를 0 으로 두면 내용에 맞춰 자동으로 늘어납니다.

조건부 표시는 비워 두면 항상 나옵니다. {{ data.paid }} 처럼 적으면 그 값이 참일 때만 나옵니다 — 값이 없을 때 빈 줄이 남지 않게 하는 용도입니다.

그 아래가 글자 스타일입니다. 글꼴 · 크기 · 굵기 · 기울임 · 색 · 배경 · 가로 정렬 · 세로 정렬 · 줄 간격 · 투명도 · 테두리 · 모서리 둥글기를 정합니다. 한글이 들어갈 수 있는 글자에는 반드시 "Noto Sans CJK KR" 을 고르십시오 — 라틴 전용 글꼴은 한글을 통째로 떨어뜨립니다.

스타일은 여러 객체가 나눠 씁니다. 나눠 쓰는 스타일을 고치면 이 객체만 새 스타일로 옮겨 주므로, 같은 스타일을 쓰던 다른 객체는 그대로입니다. 그래서 안심하고 고쳐도 됩니다.

그 아래는 종류마다 다릅니다 — 이미지는 그림 고르기, 표는 행 · 열과 칸 편집, 입력칸은 종류와 이름, QR 은 인코딩할 값, 차트는 배열 경로와 두 식입니다.

데이터 넣기

글상자 텍스트에 {{ data.title }} 처럼 적으면 그 자리에 값이 들어갑니다. 적는 순간 데이터 탭에 그 경로가 칩으로 나타나고, 미리보기용 샘플 데이터가 자동으로 만들어집니다 — 값이 들어차야 줄바꿈과 넘침이 보이기 때문입니다.

데이터 탭의 칩을 누르면 지금 고른 글상자의 텍스트 끝에 그 경로가 꽂힙니다. 글상자를 고른 상태에서만 눌립니다.

같은 탭의 JSON 상자를 직접 고쳐 원하는 값으로 미리보기를 할 수 있습니다. 여기 넣은 데이터는 미리보기 전용이며 저장되지 않습니다 — 실제 값은 API 요청의 data 로 보냅니다.

표현식 안에서는 함수도 쓸 수 있습니다. 금액이라면 {{ format(data.total, "currency", "KRW", "ko-KR") }} 처럼 쓰면 ₩12,000 으로 나옵니다. 쓸 수 있는 함수 전체는 스키마 문서의 표현식 절에 있습니다.

표 만들기

표는 두 가지입니다. 손으로 짜기는 칸마다 직접 글을 넣는 격자이고, 데이터 반복은 배열 하나가 행을 만드는 표입니다. 표 속성 맨 위에서 언제든 바꿀 수 있고, 바꿔도 열 폭과 개수는 남습니다.

손으로 짜기에서는 캔버스의 칸을 직접 클릭해 고릅니다. 고른 칸의 글 · 배경 · 정렬 · 여백 · 테두리를 따로 정할 수 있고, 오른쪽 칸이나 아래 칸과 합칠 수도 있습니다. 첫 줄은 머리 행으로 시작하므로 머리행 배경색이 곧바로 보입니다.

데이터 반복에서는 배열 경로(예: data.items)와 열을 정합니다. 열마다 머리글과 셀 템플릿을 넣고, 템플릿 안에서 item 이 지금 행을 가리킵니다 — {{ item.name }} 처럼 씁니다.

여백은 표 전체와 칸 각각에 줄 수 있습니다. 칸을 고르면 표 전체 여백은 숨고 그 칸의 여백만 보입니다 — 둘이 나란히 서면 어느 쪽을 고치는지 알 수 없기 때문입니다. 상하와 좌우는 따로 정하며, 가운데 고리를 누르면 둘이 함께 움직입니다.

행이 늘어 표가 아래 객체를 밀어야 한다면, 표 아래에 있는 것들이 흐름 구간에 들어가야 합니다. 자세한 것은 스키마 문서의 "늘어나는 표" 를 보십시오.

구역 반복

사각형 하나에 반복 설정을 주면, 그 안에 든 것 전부가 배열 항목마다 한 벌씩 그려집니다. 회사별 요약, 사람별 카드처럼 표로는 안 되는 반복에 씁니다.

반복할 배열 경로와 항목을 부를 이름을 정합니다. 이름을 co 로 두면 안에서 {{ co.name }} 으로 씁니다. 항목마다 새 페이지에서 시작하게 하거나, 한 벌이 페이지 경계에서 갈리지 않게 할 수도 있습니다.

편집 화면에서는 첫 번째 벌만 편집합니다. 복사본은 데이터가 만드는 것이라 고칠 대상이 아니기 때문입니다.

채울 수 있는 칸

입력칸은 받는 사람이 PDF 를 열어 직접 채우는 빈 칸입니다. 우리가 값을 찍는 것이 아니라 뷰어에서 사람이 채웁니다 — 그래서 데이터 탭에 나오지 않고, JSON 을 넣어도 아무것도 그려지지 않습니다.

값을 인쇄해서 보여주고 싶다면 입력칸이 아니라 글상자에 {{ data.x }} 를 쓰십시오. 둘을 헷갈리는 것이 이 기능에서 가장 흔한 오해입니다.

편집 화면에서는 테두리만 있는 빈 상자로 보입니다. 실제 모양은 PDF 뷰어가 그리기 때문입니다. 그래서 선을 꼭 그으십시오 — 인쇄한 종이에는 뷰어가 없어, 선이 없으면 빈 서식을 출력했을 때 채울 자리가 보이지 않습니다.

미리보기 · 저장 · 내보내기

캔버스가 곧 미리보기입니다. 브라우저를 켜지 않고 화면에서 그리므로 비용이 들지 않습니다.

저장하면 새 버전이 쌓입니다. 저장한 템플릿은 API 에서 template_id 로 부를 수 있어, 문서 모양을 바꿀 때 호출하는 코드를 건드리지 않아도 됩니다.

PDF 단추를 누르면 지금 데이터로 실제 PDF 를 만들어 내려받습니다. 이때는 실제 렌더이므로 월 쿼터에서 1건으로 셉니다.

단축키

• ArrowLeft 왼쪽으로 1px (Shift 10px)
• ArrowRight 오른쪽으로 1px (Shift 10px)
• ArrowUp 위로 1px (Shift 10px)
• ArrowDown 아래로 1px (Shift 10px)
• Delete 삭제
• Backspace 삭제
• ⌘/Ctrl d 복제
• ⌘/Ctrl z 되돌리기
• ⌘/Ctrl ⇧z 다시하기
• ⌘/Ctrl ] 맨 앞으로
• ⌘/Ctrl [ 맨 뒤로
• ⌘/Ctrl g 그룹으로 묶기
• ⌘/Ctrl ⇧g 그룹 풀기
• ⌘/Ctrl a 모두 선택
• Escape 선택 해제

되돌리기는 30단계까지 쌓입니다. 글자를 한 자씩 칠 때마다 쌓지는 않고, 입력이 끝날 때 한 덩어리로 남습니다.