결과물이 실제 웹에서
잘 돌아가는가.
기능 목록이 길다고 좋은 도구는 아닙니다. 결과물이 실제로 웹에 붙어서 잘 돌아가는가를 기준으로 만든 열 가지 특징입니다.
하나의 워크스페이스, 네 개의 제작기
만들려는 것에 따라 필요한 도구는 전혀 다릅니다. 로고 모션에 표(table) 블록이 필요 없고, 게시판 문서에 장면 전환 효과가 필요 없습니다. xMaker는 새 프로젝트를 만들 때 작업 유형을 먼저 고르게 하고, 그에 맞춰 캔버스·도구·템플릿을 바꿔 엽니다.
- 로고 메이커 — 완성 템플릿 기반의 제한 편집. SVG 아이콘, 타이틀, 구분선, 서브타이틀
- 슬라이더 메이커 — 반응형 캔버스와 장면 전환 중심의 인트로 슬라이더
- 비디오 메이커 — 고정비율 캔버스에 요소를 자유 배치하는 광고 모션
- 플로우 문서 — 블록을 쌓아 만드는 반응형 그리드·표 HTML
설치가 필요 없는 브라우저 편집기
프로그램을 내려받고, 라이선스를 넣고, 사양을 맞출 필요가 없습니다. 주소창에 접속해 로그인하면 그 자리에서 편집기가 열립니다.
- →사무실 PC에서 만들다 집 노트북에서 이어서 작업
- →편집 중 자동 저장 — 저장 버튼을 잊어도 작업이 남습니다
- →OS 제약 없음 (Windows · macOS 동일)
- →업데이트 설치 없이 항상 최신 버전
브랜드 편집기 · Autosave · 3s ago
- 도구바 · 캔버스 · 인스펙터 · 타임라인
- 실행취소 / 다시실행 무제한
- 미리보기 · 내보내기 · 프로젝트명 편집
- PC / 모바일 미리보기 전환
영상이 아닌 웹 코드 결과물
xMaker가 만드는 것은 동영상 파일이 아니라 브라우저가 실시간으로 그리는 애니메이션입니다. 글자는 웹폰트로, 아이콘과 도형은 SVG 경로로 그려지므로 확대해도 계단 현상이 없습니다.
- →첫 화면 로딩을 붙잡지 않는 가벼운 용량
- →레티나 · 4K 모니터에서도 글자가 또렷함
- →모바일 자동재생 정책의 영향을 받지 않음
- →텍스트가 실제 텍스트로 남아 있어 접근성에 유리
내보내기가 두 가지인 이유.
“한 번 만들고 끝”인 콘텐츠와 “계속 갱신할” 콘텐츠는 필요한 방식이 다릅니다. xMaker는 둘 다 제공합니다.
소스코드 — 통째로 가져가기
외부 의존성 없이 그 자체로 완결된 HTML 한 덩어리를 줍니다. 복사해서 어디든 붙여넣으면 그 설정 그대로 재생됩니다.
- →서비스 접속 없이도 동작 (오프라인 보관 가능)
- →파일 하나로 백업 · 이관 · 납품
- →내부망 · 폐쇄망 환경에도 적용 가능
한줄소스 — 살아 있는 연결
스크립트 태그 한 줄이면 끝입니다. 페이지가 열릴 때마다 xMaker에서 최신 프로젝트 데이터를 불러와 재생합니다.
<script src="https://xmaker.kr/assets/js/xmaker-widget.js" data-xmaker-project="프로젝트ID" async></script>
- →원본을 고치면 게시된 모든 곳이 함께 갱신
- →여러 페이지에 같은 배너를 걸어도 한 번에 관리
- →Shadow DOM 격리 — 호스트 CSS와 충돌 없음
반응형과 고정비율, 목적에 따라.
웹페이지에 박히는 슬라이더와 인스타그램에 올리는 광고는 요구되는 화면 규격이 다릅니다. 새 프로젝트를 만들 때 화면모드를 정하면, 이후 편집은 그 규격 안에서 안전하게 진행됩니다.
반응형 모드
가로는 페이지 폭에 맞춰 100%로 늘어나고, 세로만 픽셀로 고정합니다. PC와 모바일 높이를 따로 지정하므로 좁은 화면에서 배너가 지나치게 길어지지 않습니다.
편집기 상단에서 PC / 모바일 미리보기를 바로 전환해 양쪽 모습을 확인할 수 있습니다.
고정비율 모드
업로드할 플랫폼의 규격에 맞춰 다섯 가지 비율 중 하나를 고릅니다. 비율은 프로젝트 생성 시 확정되며 편집 중에는 잠겨, 작업 도중 레이아웃이 깨지지 않습니다.
키프레임을 몰라도 되는 프리셋.
타임라인에 키프레임을 찍는 대신, 요소를 선택하고 프리셋을 고릅니다. 지속시간 · 딜레이 · 이징 · 이동거리만 손보면 세밀한 조정까지 됩니다.
등장 애니메이션 21종
요소마다 · Preset장면 전환 12종
장면 사이 · 0.2 – 2.0s다이나믹 배경 8종
Live preview세밀한 제어
프리셋만으로 부족할 때| 지속시간 | 애니메이션이 진행되는 길이 (초) |
|---|---|
| 딜레이 | 장면이 시작된 뒤 기다리는 시간 (초) |
| easing | power2.out · power3.inOut · back.out · elastic.out · bounce.out · none |
| 이동/효과 거리 | 슬라이드·확산 계열의 이동 폭 (px) |
| 재생 순서 | 딜레이가 같을 때의 순서를 드래그로 조정 |
| 장면 재생시간 | 등장이 끝난 뒤 다음 장면까지 머무는 시간 |
아이콘 라이브러리와 레이어별 편집
카테고리로 정리된 SVG 아이콘을 캔버스로 바로 불러옵니다. 단순히 갖다 쓰는 데서 끝나지 않고, 아이콘을 이루는 레이어마다 색을 따로 지정하고 드로잉 애니메이션을 붙일 수 있습니다.
- 카테고리 탐색 · 페이지 넘김 지원
- 레이어별 색상 지정으로 브랜드 컬러 적용
- 편집한 아이콘을 내 아이콘으로 저장해 재사용
- 아이콘 하나만 따로 소스코드로 공유
템플릿에서 시작하기
빈 화면 앞에서 시작하는 것이 가장 어렵습니다. xMaker는 작업 유형과 화면 비율에 맞는 완성 템플릿 목록을 먼저 보여 줍니다. 마음에 드는 것을 고르고 문구와 색만 바꿔도 바로 쓸 수 있는 결과가 나옵니다.
- 선택한 작업 유형·비율에 맞는 템플릿만 표시
- 미리보기 카드에서 실제 모션을 확인하고 선택
- 물론 빈 캔버스에서 처음부터 만들 수도 있습니다
- 로고 메이커는 만든 결과를 내 로고 라이브러리에 쌓아 재사용
한눈에 보는 사양.
| 제작 모듈 | 로고 메이커 · 슬라이더 메이커 · 비디오 메이커 · 플로우 문서 (4종) |
|---|---|
| 화면모드 | 고정비율 5종 (16:9 · 9:16 · 1:1 · 5:4 · 4:5) / 반응형 (가로 100% + PC·모바일 세로 px) |
| 배경 | 단색 · 그라데이션(선형/방사형) · 이미지 · 다이나믹 8종 |
| 배치 요소 | 텍스트 · 이미지 · 도형 · 영상 · 아이콘 |
| 도형 종류 | 사각형 · 라운드 사각형 · 원형 · 삼각형 · 수평선 · 수직선 |
| 등장 애니메이션 | 21종 프리셋 + 지속시간 · 딜레이 · easing 6종 · 이동거리 · 재생순서 |
| 장면 전환 | 12종 · 속도 0.2 ~ 2.0초 |
| 한글 폰트 | Pretendard · Paperlogy · Freesentation · 나눔고딕 · 나눔명조 · 본명조 · 고운돋움 |
| 영문 폰트 | Inter · Montserrat · Playfair Display · Poppins |
| 내보내기 | 독립 실행 HTML 소스코드 / 스크립트 한 줄 임베드(Shadow DOM) |
| 저장 | 편집 중 자동 저장 · 프로젝트 단위 관리 · 내 로고 / 내 아이콘 라이브러리 |
| 요금 | 무료 회원(편집·미리보기) / 1회 결제 후 저장·내보내기 영구 이용 |