Makeinfo guide

makeinfo 사용법

템플릿을 고르는 것부터 파일로 내보내기까지, 실제로 쓰는 순서대로 정리했습니다. 처음이라면 위에서부터 따라오시면 됩니다.

작성 · 수정

템플릿에서 시작합니다

빈 화면에서 시작하면 첫 블록을 어디에 놓을지부터 막힙니다. 툴바의 템플릿을 눌러 비슷한 형태를 고른 뒤 내용만 바꾸는 편이 빠릅니다.

템플릿은 배치와 색이 이미 맞춰져 있습니다. 마음에 안 드는 블록은 지우고 필요한 것만 남기세요. 완전히 처음부터 만들고 싶으면 블록을 모두 치우고 백지로를 씁니다.

블록을 쌓아 만듭니다

makeinfo의 화면은 블록으로 이루어집니다. 왼쪽 목록에서 필요한 것을 눌러 추가합니다.

블록쓰는 곳
표지맨 위 대표 화면. 상품명과 대표 이미지를 함께 얹습니다.
상품 카드상품을 여러 개 늘어놓을 때. 사진·이름·가격이 한 세트입니다.
갤러리사진만 격자로 늘어놓을 때.
가격표품목과 가격을 줄 맞춰 보여줄 때.
행사 정보부스 번호, 날짜, 장소처럼 항목이 정해진 정보.
제목 + 본문 · 텍스트설명 문단. 규격이나 주의사항을 적습니다.
이미지사진 한 장을 그대로 놓을 때.
데코선, 도형 같은 꾸미기 요소.
타이틀글자 자체를 그림처럼 다루는 제목. 아래에서 따로 다룹니다.

블록은 자유롭게 옮길 수 있습니다. 목록에서 순서를 바꾸거나 폴더로 묶어 관련된 것끼리 정리할 수도 있습니다. 폴더로 묶으면 부모를 옮길 때 안에 든 블록이 함께 따라갑니다.

줄 맞추기 — 눈으로 맞추지 마세요

상세페이지가 어설퍼 보이는 가장 흔한 이유는 블록의 왼쪽 끝이 몇 픽셀씩 어긋나 있는 것입니다. 눈으로는 잘 안 보이는데 전체를 보면 어수선합니다.

두 가지 도구가 있습니다.

  • 스냅 — 캔버스의 격자와 다른 블록의 모서리에 자석처럼 붙습니다. 끌다가 근처에 가면 알아서 맞습니다.
  • 블록에 붙이기 — 다른 블록의 네 가장자리에 놓으면 정렬됩니다. 좌우에 놓으면 같은 줄에 나란히 서면서 줄 폭을 고르게 나눠 갖고, 위아래에 놓으면 같은 열로 서면서 x 좌표와 폭을 물려받습니다. 가장자리 가까이에서만 걸리므로, 블록 한가운데를 지나가는 것은 아무 일도 일어나지 않습니다.

미세하게 옮기고 싶을 때는 블록을 고른 뒤 화살표 키를 씁니다. 한 번에 1px씩 움직입니다.

한 블록만 손볼 때

오른쪽 속성 패널에서 고른 블록만 따로 조정할 수 있습니다.

  • 내용 크기 — 그 블록의 글자와 여백을 함께 키우거나 줄입니다. 글자만 키우면 커질수록 여백이 좁아 보여 답답해지므로 둘을 같이 움직입니다.
  • 파츠별 크기 — 상품명만 키우고 가격은 그대로 두는 식으로, 블록 안의 요소별로 따로 잡습니다.
  • 자유 변형 — 켜면 내용을 그림처럼 눌러 늘립니다. 상자를 줄이면 안의 글자도 함께 작아집니다. 파워포인트나 포토샵의 자유 변형과 같은 동작입니다.

크기 조절 손잡이는 글자 배율을 건드리지 않습니다. 손잡이로 줄이면 내용은 그대로고 상자만 작아져서, 내용보다 작게 줄이면 잘립니다. 내용까지 함께 줄이고 싶을 때 쓰는 것이 자유 변형입니다. 사진이 든 블록이라면 사진 비율을 칸에 맞춤으로 두는 방법도 있습니다 — 블록 높이에 맞춰 사진만 줄고 글자는 원래 크기를 지킵니다.

색과 서체는 테마에서 한 번에

블록마다 색을 하나씩 고르면 나중에 전체 분위기를 바꿀 때 전부 다시 손대야 합니다. 스타일 탭의 테마에서 기준 색과 서체를 정해두면 모든 블록이 그걸 따릅니다.

특정 블록만 다르게 하고 싶을 때는 이 블록만 조정으로 예외를 둡니다. 기본은 테마를 따르고 예외는 최소한으로 두는 편이, 나중에 색을 바꿀 때 편합니다.

직접 올린 폰트도 쓸 수 있습니다. 내보낼 때 그 글자에 필요한 부분만 파일에 함께 담기므로, 다른 PC에서 열어도 서체가 바뀌지 않습니다.

타이틀 스튜디오

제목 글자에 그라데이션, 테두리, 그림자를 넣고 줄마다 다른 서체를 쓰려면 조정할 것이 많습니다. 그래서 타이틀 블록은 전체 화면으로 열립니다.

여기서 만든 제목은 글자 그대로 남아 있어 나중에 문구를 고칠 수 있습니다. 미리 만들어둔 스타일에서 시작해 색만 바꾸는 방법을 권합니다.

키보드

키동작
화살표고른 블록을 1px 옮기기
Ctrl + Z실행 취소
Ctrl + Shift + Z다시 실행
Ctrl + C / V복사 / 붙여넣기
Ctrl + D바로 복제
Ctrl + G폴더로 묶기
Ctrl + ] / [앞으로 / 뒤로 보내기
Delete블록 삭제

실행 취소는 손짓 단위로 묶입니다. 드래그 한 번이 한 단계이고, 타이핑도 문장 단위로 묶여서 한 글자씩 되돌아가지 않습니다.

저장은 자동, 다만 이 브라우저 안에만 있습니다

작업은 자동으로 저장되고, 다음에 열면 마지막 프로젝트가 그대로 복원됩니다. 저장 버튼을 누를 일이 없습니다.

다만 저장되는 곳이 이 브라우저 안입니다. 서버에 올라가지 않습니다. 그래서 이런 경우 작업이 사라집니다.

  • 브라우저의 인터넷 사용 기록·사이트 데이터를 지웠을 때
  • 시크릿 창에서 작업하고 창을 닫았을 때
  • 다른 PC나 다른 브라우저에서 열었을 때 (아예 보이지 않습니다)

그래서 작업이 끝나면 전체 PNG로 한 번 내보내 두세요. 그 파일이 곧 작업 파일입니다. 다른 PC로 옮길 때도 그 파일 하나만 가져가면 됩니다.

내보내기 네 가지

형식쓰는 곳
전체 PNG되돌릴 수 있는 유일한 형식. 글·배치·사진·폰트가 그림 안에 함께 담깁니다. 사진이 많으면 그림과 작업 정보를 zip 한 개로 받습니다.
분할 PNG올리는 용도. 최대 높이로 나눠 여러 장이 되고 zip으로 묶입니다. 조각마다 일부만 담겨 되돌릴 수 없습니다.
PDF보여주고 인쇄하는 용도. 분할 규칙대로 페이지가 나뉩니다.
PSD포토샵에서 더 다듬을 때. 블록마다 레이어로 분리됩니다. 글자는 그림으로 굳습니다.

기억할 것 하나 — 올리는 파일과 보관하는 파일은 다릅니다. 분할 PNG를 올렸다면 전체 PNG를 따로 남겨두세요.

불러오기는 끌어다 놓으면 됩니다. 전체 PNG나 작업 파일 zip이면 프로젝트가 통째로 복원되고, 그냥 그림이면 이미지 블록으로 놓이고, PSD면 레이어마다 블록이 됩니다.

그림이 필요하면

간단한 그림이나 사진 보정이 필요하면 왼쪽 아래의 그림 편집기를 엽니다. 새 탭에서 그린 뒤 이미지 블록으로 바로 가져올 수 있어서, 다른 프로그램을 오갈 필요가 없습니다.