가입과 로그인
가입하면 곧바로 편집기를 쓸 수 있습니다. 결제는 저장·내보내기가 필요해지는 시점에 하면 됩니다.
회원가입
- 로그인 화면에서 회원가입 탭을 엽니다.
- 아이디를 입력합니다. 영문·숫자·한글 4~20자입니다.
- 이메일과 비밀번호를 입력하고 비밀번호를 한 번 더 확인합니다.
- 가입이 끝나면 자동으로 내 프로젝트 화면으로 이동합니다.
로그인 유지
한 번 로그인하면 상당 기간 유지되도록 설정되어 있습니다. 공용 PC에서는 작업을 마친 뒤 로그아웃하세요.
이용 등급
| 항목 | 무료 회원 | 결제 회원 |
|---|---|---|
| 편집 · 미리보기 | 가능 | 가능 |
| 템플릿 적용 | 가능 | 가능 |
| 프로젝트 저장 | 불가 | 무제한 |
| 소스코드 · 한줄소스 | 불가 | 가능 |
Note · 구독이 아니라 1회 결제 한 번 결제하면 이후 추가 비용 없이 저장과 내보내기를 계속 쓸 수 있습니다.
새 프로젝트 만들기
내 프로젝트 화면 오른쪽 위의 새 프로젝트 버튼을 누르면 3단계 마법사가 열립니다. 여기서 정한 값 중 화면모드는 나중에 바꿀 수 없으니 신중히 고르세요.
1단계 — 작업 선택
| 로고 메이커 | 브랜드 로고 등장·변형 모션 → 고정비율 5종 |
|---|---|
| 슬라이더 메이커 | 오프닝 시퀀스 · 장면전환 배너 → 반응형 (세로 px 지정) |
| 비디오 메이커 | SNS · 배너 · 상세페이지 광고 → 고정비율 5종 |
| 플로우 문서 | 반응형 그리드·표 HTML (게시판용) → 문서형 |
2단계 — 화면모드
고정비율 (로고 · 비디오 메이커)
| 16:9 | 가로 영상 · 유튜브 · PC 배너 |
|---|---|
| 9:16 | 세로 숏폼 · 릴스 · 스토리 |
| 1:1 | 정방형 SNS 피드 · 팝업 배너 |
| 5:4 | 인스타그램 가로 피드 |
| 4:5 | 인스타그램 세로 피드 (1080×1350) |
반응형 (슬라이더 메이커)
웹페이지에 박히는 슬라이더는 가로가 페이지 폭에 맞춰 100%로 늘어나야 하므로, 가로는 고정하지 않고 세로만 픽셀로 지정합니다.
Tip · 세로 높이 정하는 요령 메인 대형 배너는 PC 500~700px / 모바일 350~450px, 서브페이지 띠배너는 PC 200~300px / 모바일 140~200px 정도가 무난합니다. 모바일 높이를 PC와 같게 두면 화면 대부분을 배너가 차지해 답답해 보입니다.
3단계 — 템플릿 (과 프로젝트 이름)
- 1·2단계에서 고른 작업 유형과 비율에 맞는 템플릿만 목록에 나타납니다.
- 템플릿 카드에는 실제 모션 미리보기가 표시됩니다. 마음에 드는 것을 클릭하세요.
- 맨 앞의 빈 캔버스를 고르면 아무것도 없는 상태에서 시작합니다.
- 로고 메이커는 이 단계에서 프로젝트 이름도 함께 입력합니다.
Warning · 화면모드는 생성 후 잠깁니다 작업 도중에 비율이 바뀌면 배치해 둔 요소들이 전부 어긋나기 때문입니다. 비율을 바꾸려면 새 프로젝트를 만들어야 하므로, 2단계에서 용도를 확실히 정하세요.
편집기 화면 구성
편집기는 다섯 영역으로 나뉩니다. 모듈이 달라도 구조는 같습니다.
| 영역 | 위치 | 하는 일 |
|---|---|---|
| 헤더 | 화면 최상단 | 프로젝트명, 배지, 저장 상태, 화면비율, 실행취소/다시실행, 미리보기, 내보내기 |
| 도구바 | 왼쪽 세로 | 배경 · 텍스트 · 이미지 · 도형 · 영상 · 아이콘 추가 |
| 캔버스 | 가운데 | 실제 결과물. 요소를 끌어 옮기고 크기를 조절 |
| 인스펙터 | 오른쪽 | 선택한 요소의 디자인 · 정렬 · 애니메이션 속성 편집 |
| 타임라인 | 화면 하단 | 장면 목록과 재생 제어, 장면 추가·복사·삭제 |
캔버스에서의 기본 조작
- 요소를 클릭하면 선택되고 오른쪽 인스펙터가 열립니다.
- 요소를 드래그하면 이동합니다. 이동 중 중앙 십자선과 그리드가 나타나 정렬을 돕습니다.
- 선택한 요소의 모서리 핸들을 끌면 크기가 바뀝니다. Shift를 누른 채 끌면 가로세로 비율이 유지됩니다.
- 빈 곳을 클릭하면 선택이 해제됩니다.
배경 설정
도구바 맨 위의 배경을 누르면 배경 인스펙터가 열립니다. 배경은 장면마다 따로 설정됩니다.
① 단색
색상 피커 또는 HEX 코드 직접 입력. 브랜드 컬러를 정확히 맞출 때 씁니다.
② 그라데이션
선형(각도 0~360°) 또는 방사형(중앙·상단·하단·좌측·우측, 가장 먼 모서리 / 가장 가까운 변). 두 색 지정.
③ 이미지
- 이미지를 업로드하거나 기본 배경 갤러리에서 고릅니다.
- 오버레이 색상을 지정합니다. 보통 검정이나 진한 남색을 씁니다.
- 오버레이 불투명도를 올려 사진을 눌러 줍니다. 글자가 잘 안 읽히면 이 값을 30~50%까지 올리세요.
④ 다이나믹 (움직이는 배경 8종)
| 오로라 | 부드럽게 흐르는 빛의 띠 · 브랜드 인트로 · 감성적인 배너 |
|---|---|
| 파티클 | 떠다니는 입자 · 기술 · 이벤트 배너 |
| 그리드 | 움직이는 격자 · IT · 데이터 관련 콘텐츠 |
| 리퀴드 | 유체처럼 번지는 형태 · 화장품 · 라이프스타일 |
| 브리딩 | 천천히 확장·수축 · 차분한 안내 배너 |
| 시프팅 | 서서히 이동하는 색면 · 범용 배경 |
| 플라즈마 | 휘몰아치는 컬러 · 강한 프로모션 · 광고 |
| 스포트라이트 | 중심을 비추는 조명 · 로고 · 제품 강조 |
이전 배경 복사
타임라인의 이전 배경 복사 버튼을 누르면 앞 장면의 배경 설정을 그대로 가져옵니다. 여러 장면의 배경 톤을 통일할 때 하나씩 다시 설정하지 않아도 됩니다.
Tip · 배경은 어둡게, 글자는 밝게 배경이 화려할수록 글자가 묻힙니다. 다이나믹 배경을 쓸 때는 어두운 색 조합을 고르고, 텍스트에는 그림자나 배경 박스를 더해 대비를 확보하세요.
텍스트
도구바의 텍스트를 누르면 캔버스에 텍스트 요소가 추가되고, 인스펙터에 속성이 열립니다.
자간 & 줄간격
- 자간 — 글자 사이 간격. 영문 대문자 로고 타이틀은 자간을 넓히면 훨씬 안정적으로 보입니다.
- 줄간격 — 줄 사이 간격. 두 줄 이상인 헤드라인은 조금 좁히면 덩어리처럼 읽힙니다.
채우기 · 외곽선 · 배경 박스
| 채우기 | 단색 또는 그라데이션. 큰 헤드라인에 브랜드 그라데이션을 입힐 수 있습니다. |
|---|---|
| 없음 | 외곽선·그림자 효과를 주지 않습니다. |
| 부드러운 그림자 | 은은하게 떠 보이게 합니다. 사진 배경 위 본문에 적당합니다. |
| 강한 그림자 | 대비를 크게 줍니다. 배경이 복잡할 때 씁니다. |
| 네온 발광 | 글자 주변이 빛납니다. 어두운 배경의 강조 문구에 어울립니다. |
| 배경 박스 | 글자 뒤에 색 박스를 깔아 배경과 분리합니다. 가장 확실한 가독성 해결책입니다. |
| 링크 | 문구를 클릭했을 때 이동할 주소를 지정합니다. |
텍스트 정렬은 텍스트 상자 안에서의 정렬입니다. 캔버스 기준 위치 정렬은 9장을 보세요.
이미지 · 영상
이미지 추가
- 도구바의 이미지를 누릅니다.
- 인스펙터의 이미지 항목에서 파일을 업로드합니다.
- 캔버스에서 위치를 잡고 모서리를 끌어 크기를 맞춥니다.
이미지 항목별 설명
| 표시 방식 | 꽉 채우기(cover)는 상자를 가득 채우고 넘치는 부분을 자릅니다. 맞춤 채우기(contain)는 전체가 보이도록 넣고 남는 곳에 여백을 둡니다. |
|---|---|
| 합성 · 기본 | 이미지를 그대로 얹습니다. |
| 합성 · 멀티플라이 | 흰 배경이 사라진 것처럼 보이게 합니다. 배경이 흰색인 로고 파일에 유용합니다. |
| 합성 · 스크린 | 검정 배경이 사라진 것처럼 보이게 합니다. 검은 배경의 효과 이미지에 씁니다. |
| 테두리 & 그림자 | 선 색·두께와 그림자 세기를 지정합니다. |
| 링크 | 이미지를 클릭했을 때 이동할 주소를 지정합니다. |
Tip · 가능하면 PNG 투명 배경을 쓰세요 멀티플라이·스크린은 어디까지나 눈속임입니다. 배경이 완전히 흰색/검정이 아니면 자국이 남습니다. 배경이 투명한 PNG가 있다면 그쪽이 항상 깔끔합니다.
영상 요소
- 도구바의 영상을 누른 뒤 인스펙터의 영상 URL에 재생할 주소를 넣습니다.
- 다른 요소와 마찬가지로 위치·크기를 조절하고 애니메이션을 붙일 수 있습니다.
- 영상은 용량이 크므로, 배너 전체를 영상으로 채우기보다 부분 요소로 쓰는 편이 좋습니다.
도형
구분선, 강조 박스, 버튼 모양, 배경 판 등을 만들 때 씁니다.
| 사각형 | 배경 판 · 색 띠 |
|---|---|
| 라운드 사각형 | 버튼 모양 · 태그 · 뱃지 |
| 원형 | 포인트 도형 · 아이콘 받침 |
| 삼각형 | 방향 표시 · 장식 |
| 수평 선 | 제목과 부제 사이 구분선 |
| 수직 선 | 좌우 영역 구분 |
Tip · 버튼 만드는 법 라운드 사각형을 놓고 → 그라데이션으로 채우고 → 그 위에 텍스트를 얹은 뒤 → Ctrl+클릭으로 둘을 함께 선택하고 Ctrl+G로 묶으면 하나처럼 움직이는 버튼이 됩니다.
아이콘
도구바의 아이콘을 누르면 왼쪽에 아이콘 라이브러리 패널이 열립니다.
- 패널 위쪽의 카테고리를 골라 목록을 좁힙니다.
- 아이콘이 많은 카테고리는 아래 페이지 넘김 버튼으로 넘겨 봅니다.
- 원하는 아이콘을 클릭하면 캔버스에 추가됩니다.
- 패널은 닫기 버튼으로 접습니다.
아이콘 항목별 설명
| 전체 색상 | 아이콘 전체를 한 가지 색으로 칠합니다. |
|---|---|
| 레이어별 색상 | 아이콘을 이루는 각 SVG 경로에 다른 색을 지정해 브랜드 컬러를 입힙니다. |
| 드로잉 애니메이션 | 선이 그려지듯 나타나는 모션을 아이콘에 붙입니다. |
| 자체 모션 | 없음 · 회전 · 펄스 · 바운스 · 흔들림 (반복 1 / 3 / 5회). |
| 내 아이콘 저장 | 편집한 아이콘을 저장해 다른 프로젝트에서 그대로 재사용합니다. |
| 아이콘 소스 공유 | 아이콘 하나만 독립 소스코드로 뽑아 다른 페이지에 붙일 수 있습니다. |
정렬 · 레이어 · 그룹
캔버스 기준 정렬
인스펙터의 정렬 탭에서 선택한 요소를 캔버스 기준으로 맞춥니다. 눈대중으로 가운데를 맞추면 미세하게 어긋나므로, 중앙 정렬은 반드시 이 버튼을 쓰세요.
- 가로 방향 — 왼쪽 끝 · 가로 중앙 · 오른쪽 끝
- 세로 방향 — 위쪽 끝 · 세로 중앙 · 아래쪽 끝
레이어 순서
- 맨 앞으로 · 앞으로 · 뒤로 · 맨 뒤로. 겹친 요소의 앞뒤를 정리합니다.
다중 선택과 그룹
- 첫 요소를 클릭해 선택합니다.
- Ctrl(맥은 Cmd)을 누른 채 다른 요소를 클릭해 함께 선택합니다. 다시 클릭하면 선택이 풀립니다.
- 선택이 두 개 이상이면 “N개 요소 선택됨” 안내가 뜹니다.
- Ctrl+G를 누르면 하나의 그룹으로 묶입니다.
- 그룹은 통째로 이동하고, 애니메이션도 그룹 단위로 한 번 적용됩니다.
- 그룹을 풀려면 캔버스에 표시되는 그룹 배지를 클릭합니다.
애니메이션
요소를 선택하고 인스펙터의 애니메이션 탭을 엽니다. 프리셋을 고른 뒤 값 몇 개만 조절하면 됩니다.
프리셋 21종
| 페이드인 | 서서히 나타남 — 어디에나 무난 |
|---|---|
| 슬라이드업 / 다운 / 레프트 / 라이트 | 지정 방향에서 밀려 들어옴 — 본문·부제·측면 배치 요소 |
| 줌인 | 작게 시작해 커짐 — 로고 · 제품 이미지 |
| 바운스 · 엘라스틱드롭 | 튀며 등장 · 탄성 있게 떨어짐 — 이벤트 톤 · 강조 뱃지 |
| 3D 플립 · 모프스케일 | 뒤집히며 등장 · 형태가 변하며 커짐 — 카드형 요소 · 도형 |
| 시네마리빌 | 영화 타이틀처럼 드러남 — 메인 헤드라인 |
| 타이프라이터 · 텍스트스크램블 · 텍스트익스플로드 | 한 글자씩 · 뒤섞였다 · 흩어졌다 모임 — 짧은 문구 · 임팩트 카피 |
| 웨이브인 · 카운트업 | 물결치듯 순차 등장 · 숫자가 올라감 — 여러 아이콘 나열 · 가격·통계 |
| 글로우펄스 · 네온트레이스 | 빛나며 맥동 · 네온 선이 그려짐 — CTA · 로고 라인 |
| 쇼크웨이브 · 파티클버스트 · 라인드로잉 | 충격파 · 입자 폭발 · 선 드로잉 — 강한 강조 · 피날레 · SVG 일러스트 |
easing 6종
| power2.out | 빠르게 시작해 부드럽게 멈춤 — 가장 무난한 기본값 |
|---|---|
| power3.inOut | 천천히 시작해 빨라졌다 다시 천천히 — 고급스러운 느낌 |
| back.out | 목표를 살짝 지나쳤다 돌아옴 — 경쾌함 |
| elastic.out | 탄성 있게 여러 번 흔들림 — 과하면 산만해집니다 |
| bounce.out | 바닥에 튀듯 멈춤 — 가벼운 톤 |
| none | 일정한 속도 — 기계적인 느낌이 필요할 때 |
순차 등장 설계하기
- 가장 먼저 보여야 할 요소(보통 배경 도형이나 로고)에 딜레이 0초를 줍니다.
- 헤드라인에 0.3초, 부제에 0.6초, 버튼에 0.9초처럼 계단식으로 딜레이를 줍니다.
- 모든 요소의 지속시간을 비슷하게(예: 0.8초) 맞추면 리듬이 일정해집니다.
- 마지막 요소의 딜레이 + 지속시간보다 장면 재생시간이 길어야 다 보이고 넘어갑니다.
장면과 전환
화면 아래 타임라인에서 장면을 관리합니다.
장면 전환 효과 12종
| 크로스페이드 | 겹치며 부드럽게 교체 — 가장 안전한 선택 |
|---|---|
| 디졸브 | 흩어지듯 사라지고 나타남 |
| 슬라이드 왼쪽 · 오른쪽 · 업 | 지정 방향으로 밀려 나감 |
| 커튼 | 커튼이 열리듯 갈라짐 |
| 줌 블러 | 확대되며 흐려졌다 다음 장면 — 역동적 |
| 플립 (가로 / 세로) | 가로축 · 세로축으로 뒤집힘 |
| 글리치 | 화면이 튀듯 깨졌다 바뀜 — 테크 톤 |
| 블라인드 | 블라인드가 넘어가듯 분할 전환 |
| 3D 큐브 | 정육면체가 돌듯 회전 |
전환 효과 적용하기
- 타임라인에서 전환을 넣을 장면 사이를 선택해 전환 창을 엽니다.
- 효과 12종 중 하나를 고릅니다.
- 전환 속도를 0.2초~2.0초 사이에서 조절합니다. 0.5~0.8초가 무난합니다.
- 미리보기로 확인한 뒤 완료를 누릅니다.
미리보기 · 재생설정
Tip · 재생시간 정하기 읽어야 할 문구가 있는 장면은 3~5초, 로고만 지나가는 장면은 1.5~2초 정도가 적당합니다.
PC / 모바일 확인 (반응형 프로젝트)
슬라이더 프로젝트는 헤더의 PC / 모바일 버튼으로 두 화면을 오갈 수 있습니다. 게시 전에 반드시 모바일 쪽을 확인하세요.
내보내기
헤더 오른쪽의 내보내기를 누르면 두 개의 탭이 있는 창이 열립니다.
어느 쪽을 쓸까
| 비교 | 소스코드 | 한줄소스 |
|---|---|---|
| 형태 | 완결된 HTML 한 덩어리 | 스크립트 태그 한 줄 |
| xMaker 접속 | 필요 없음 | 페이지 열 때마다 데이터를 불러옴 |
| 원본 수정 시 | 반영 안 됨 (다시 내보내야 함) | 저장하면 즉시 반영 |
| 추천 상황 | 납품 · 보관 · 폐쇄망 | 계속 갱신할 홈페이지 배너 |
소스코드 탭
- 소스코드 탭을 엽니다.
- 복사 버튼을 눌러 코드 전체를 클립보드에 담습니다.
- 원하는 위치에 붙여넣습니다.
한줄소스 탭
- 한줄소스 탭을 엽니다.
- 스크립트 한 줄을 복사합니다.
- 홈페이지에서 배너가 들어갈 자리에 붙여넣습니다.
<script src="https://xmaker.kr/assets/js/xmaker-widget.js" data-xmaker-project="프로젝트ID" async></script>
모듈별 팁
로고 메이커
로고 메이커는 다른 모듈과 조금 다릅니다. 자유 배치가 아니라 완성된 템플릿의 구성 요소를 바꿔 끼우는 방식이라, 손을 대도 결과물이 흐트러지지 않습니다.
슬라이더 메이커
홈페이지 메인에 들어가는 반응형 배너를 만듭니다. 이 모듈만 반응형 화면모드를 씁니다. PC 세로와 모바일 세로를 따로 지정하고, 게시 전에 두 미리보기를 모두 확인하세요.
비디오 메이커
SNS 플랫폼의 규격에 맞춘 고정비율 캔버스입니다. 장면 복제로 문구만 다른 변형 소재를 빠르게 만듭니다.
플로우 문서
텍스트·이미지·그리드·표·버튼 블록을 순서대로 쌓습니다. PC에서 여러 칸으로 보이던 그리드가 모바일에서는 한 칸으로 자동으로 접힙니다.
문제 해결
붙여넣은 배너가 보이지 않아요
- 게시판·CMS 에디터가 스크립트 태그를 지웠을 가능성이 높습니다. HTML 모드에서 다시 확인해 보세요.
- 사이트에 스크립트 삽입 제한이 걸린 경우라면 소스코드 방식으로 바꿔 보세요.
- 프로젝트 ID가 정확히 들어갔는지 확인하세요. 복사 버튼을 쓰면 실수를 줄일 수 있습니다.
글자가 잘 안 읽혀요
- 배경 이미지 위라면 오버레이 불투명도를 30~50%까지 올리세요.
- 텍스트에 강한 그림자나 배경 박스를 더하세요.
- 다이나믹 배경이 밝다면 어두운 색 조합으로 바꾸는 편이 빠릅니다.