바로 사용하기 — 이미지 병합기
같은 배경에 제목만 바꾼 표지를 열 장쯤 만들어야 할 때가 있습니다.
총서 표지나 강의 자료 썸네일 같은 것들요.
포토샵을 열자니 무겁고, 파워포인트로 하자니 글자 위치가 매번 미묘하게 어긋납니다.
결국 좌표를 손으로 맞추게 되죠.
이 도구는 배경 위에 글자와 이미지를 올려 PNG 한 장으로 뽑아 줍니다.
좌표를 숫자로 직접 넣을 수 있어서 열 장을 만들어도 위치가 흐트러지지 않습니다.
작업 상태를 통째로 저장했다가 나중에 불러올 수도 있고요.
사용법
기본 순서
- 배경 패널에서 배경 이미지를 올립니다.
- 텍스트나 이미지를 더해 배경 위에 놓습니다.
- 미리보기로 확인하고 [다운로드] 로 PNG를 저장합니다.
배경이 없으면 텍스트와 이미지 패널이 잠겨 있습니다. 올릴 자리가 없으니까요.
글자 넣기
두 가지 방법이 있습니다.
- [+ 추가] : 왼쪽 패널에서 누르면 이미지 한가운데에 글자 레이어가 생깁니다.
- 미리보기 더블클릭 : 원하는 자리를 두 번 누르면 그 자리에 입력창이 열립니다. 치고 나면 그 위치에 레이어가 만들어져요.
대충 놓고 나중에 다듬을 거라면 더블클릭이 빠르고, 좌표를 정확히 맞출 거라면 추가 버튼이 낫습니다.
| 항목 | 무엇을 정하나 |
|---|---|
| X / Y | 글자의 좌표 |
| 쓰기 방향 | 가로쓰기(→) 또는 세로쓰기(↓) |
| 글자 간격 / 줄 간격 | 자간과 줄 높이 |
| 크기 / 굵기 | 글자 크기(px)와 굵기 (Normal, Bold, 100~900) |
| 색상 | 직접 입력하거나 색 고르개 사용 |
| 폰트 | 기본 폰트, 웹폰트, 직접 올린 폰트 중에서 |
세로쓰기가 있는 건 고전 자료 표지 때문입니다. 한적이나 영인본 표지는 세로로 쓰는 일이 많으니까요.
레이어가 많아지면 화면이 복잡해집니다.
그래서 지금 고른 레이어만 설정이 펼쳐지고 나머지는 접혀 있습니다.
이미지 얹기
ISBN 바코드나 로고, 스티커처럼 배경 위에 겹칠 그림을 넣습니다.
- [+ 추가] : 파일을 골라 넣습니다.
- [URL] : 이미지 주소를 넣어 불러옵니다.
- 붙여넣기 : 다른 브라우저 창에서 이미지를 복사한 뒤 이 페이지에서
Ctrl+V를 누르면 들어갑니다.
올린 이미지는 배경의 절반 크기로 줄어 한가운데 놓입니다.
원래 크기 그대로 들어오면 배경을 다 덮어 버리는 일이 많아서요.
가로나 세로 하나만 바꾸면 비율이 자동으로 유지됩니다.
겹침 순서 (Z값)
글자와 이미지가 겹칠 때 무엇이 위로 올지 정합니다.
글자의 Z값은 10으로 고정되어 있고, 이미지의 Z값을 그보다 크게 또는 작게 주면 됩니다.
| Z값 | 어떻게 보이나 |
|---|---|
| 10보다 작으면 | 글자 아래에 깔립니다 |
| 10이면 | 글자와 같은 층 |
| 10보다 크면 | 글자를 덮습니다 |
배경 무늬처럼 쓸 그림은 낮게, 로고처럼 앞에 나와야 하는 그림은 높게 주세요.
미리보기에서 다루기
캔버스에서 직접 만질 수 있습니다.
- 클릭하면 선택됩니다. 점선 상자가 생기고 왼쪽 패널도 그 항목으로 바뀝니다.
- 끌면 옮겨집니다. 왼쪽의 X/Y 숫자도 실시간으로 따라 바뀌니, 대충 끌어다 놓고 숫자로 미세 조정하는 식으로 쓰면 편합니다.
- Delete 또는 Backspace 로 지웁니다.
- Escape 나 빈 곳 클릭으로 선택을 풉니다.
확대·축소도 됩니다. - 로 최소 20%까지, + 로 최대 300%까지. [맞춤] 을 누르면 패널 크기에 맞춰지고 현재 배율이 표시됩니다.
알아두기
폰트 관리
기본 폰트로 안 되는 작업이 있습니다. 기관 지정 서체나 고전 자료용 한자 폰트 같은 것들요.
설정(⚙)에서 폰트를 더할 수 있습니다.
- 파일 업로드 :
.ttf,.otf,.woff,.woff2 - URL 로드 : 폰트 파일 주소나 CSS 주소를 넣습니다.
폰트 파일 : https://example.com/MyFont.woff2
CSS : https://cdn.example.com/font.css
구글 폰트 : https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap
CSS 주소를 넣으면 그 안의 @font-face 를 전부 읽어 한꺼번에 불러옵니다.
구글 폰트 주소를 그대로 붙여넣어도 되는 이유가 이것입니다.
작업 상태 저장하기
같은 배경에 제목만 바꾼 표지를 여러 장 만들 때, 매번 처음부터 배치하는 건 낭비입니다.
- 익스포트(↓) : 배경 이미지, 올린 이미지, 글자 설정을 통째로 ZIP으로 저장합니다. 파일 이름에 날짜와 시각이 들어가 있어 여러 벌을 만들어도 헷갈리지 않습니다.
- 임포트(↑) : 그 ZIP을 불러와 작업하던 상태로 되돌립니다. 작업 중인 내용이 있으면 먼저 물어봅니다.
한 번 배치해 두고 익스포트해 두면, 다음에는 불러와서 글자만 고치면 됩니다.
주의사항
- 배경 이미지를 지우면 글자와 이미지도 함께 사라집니다. 배경이 기준이라 그렇습니다. 지우기 전에 익스포트해 두세요.
- 모든 처리는 브라우저에서 이루어지며 파일이 서버로 전송되지 않습니다.
바로 사용하기 — 이미지 병합기