xMaker는
웹으로 만드는 모션입니다.
영상 편집 프로그램 대신 브라우저에서, mp4 대신 웹 코드로. 로고 인트로부터 홈페이지 슬라이더, SNS 광고, 게시판 문서까지 웹에 필요한 움직임을 웹의 방식으로 만드는 제작 솔루션입니다.
xMaker는 웹 브라우저 안에서 로고 모션 · 인트로 슬라이더 · 광고 영상 · 문서형 콘텐츠를 만들고, 그 결과를 HTML 소스코드 또는 스크립트 한 줄로 내보내 어떤 웹페이지에나 붙일 수 있게 해 주는 통합 제작 도구입니다.
웹에 움직임을 넣는 일은
여전히 너무 번거롭습니다.
홈페이지 담당자, 마케터, 소상공인이 실제로 부딪히는 벽은 대개 이 네 가지입니다.
배우기엔 너무 무거운 도구
애프터이펙트·프리미어는 강력하지만, 배너 하나 만들자고 익히기엔 학습 곡선이 가파릅니다. 결국 매번 외주를 맡기게 되고, 견적과 일정이 오가는 사이에 타이밍을 놓칩니다.
수정할 수 없는 결과물
납품받은 mp4는 완제품입니다. 날짜 한 줄, 전화번호 하나 고치려 해도 원본 프로젝트 파일을 가진 제작자에게 다시 요청해야 하고, 그 사이 홈페이지에는 지난 정보가 걸려 있습니다.
무겁고 흐릿한 동영상
몇 MB짜리 mp4는 첫 화면 로딩을 늦추고, 압축 때문에 작은 글씨가 뭉개집니다. 모바일에서는 자동재생이 막히거나 화면 비율이 맞지 않아 잘려 보이기도 합니다.
붙이는 것부터가 일
파일을 서버에 올리고, 경로를 잡고, 반응형 크기를 맞추고, 기존 CSS와 충돌하는지 확인하고… 만드는 시간보다 붙이는 시간이 더 걸리는 경우도 흔합니다.
그래서 웹 그 자체로 만들기로 했습니다.
xMaker의 결과물은 영상 파일이 아닙니다. 브라우저가 직접 그리는 HTML · CSS · SVG 애니메이션입니다. 이 한 가지 선택에서 나머지 장점이 전부 따라옵니다.
가볍습니다
몇 MB짜리 동영상 대신 수십 KB의 코드가 오갑니다. 첫 화면 로딩을 방해하지 않고, 모바일 데이터도 아낍니다.
선명합니다
글자는 웹폰트, 아이콘과 도형은 SVG로 그려집니다. 4K 모니터든 레티나 화면이든 확대해도 깨지지 않습니다.
반응합니다
슬라이더 모드는 가로 100% 반응형으로 늘어나고 세로만 PC·모바일 각각 픽셀로 고정됩니다. 기기마다 잘리는 일이 없습니다.
고칠 수 있습니다
한줄소스로 붙여두면 페이지를 열 때마다 최신 데이터를 불러옵니다. xMaker에서 수정·저장하면 이미 게시된 곳까지 함께 바뀝니다.
충돌하지 않습니다
임베드 위젯은 Shadow DOM 안에서 재생됩니다. 붙여넣은 페이지의 CSS가 위젯을 망가뜨리지도, 위젯이 페이지를 흔들지도 않습니다.
기존 방식과 무엇이 다른가.
| 비교 항목 | 영상 외주 (mp4) | 영상 편집 프로그램 직접 사용 | xMaker |
|---|---|---|---|
| 제작 시간 | 수일 ~ 수주 (일정 조율) | 수 시간 (숙련자 기준) | 수 분 (템플릿에서 시작) |
| 필요한 기술 | 없음 (대신 커뮤니케이션 비용) | 전문 도구 숙련 필요 | 웹페이지 편집 수준 |
| 초기 비용 | 건당 외주비 | 월 구독료 + 고사양 PC | 1회 결제 (라이프타임) |
| 수정 | 제작자에게 재의뢰 | 원본 파일 있으면 가능 | 언제든 직접, 즉시 |
| 게시된 콘텐츠 갱신 | 파일 교체 후 재업로드 | 파일 교체 후 재업로드 | 한줄소스는 저장 즉시 반영 |
| 용량 | 수 MB ~ 수십 MB | 수 MB ~ 수십 MB | 수십 KB 수준 |
| 화질 | 압축 손실, 확대 시 뭉개짐 | 압축 손실, 확대 시 뭉개짐 | 벡터 · 웹폰트, 배율 무관 |
| 반응형 대응 | 비율별로 따로 제작 | 비율별로 따로 제작 | 반응형 모드 · PC/모바일 높이 지정 |
| 웹페이지 삽입 | 업로드 · 경로 · 플레이어 설정 | 업로드 · 경로 · 플레이어 설정 | 스크립트 한 줄 붙여넣기 |
* 실사 촬영 영상이나 긴 러닝타임의 편집물은 여전히 영상 편집 도구가 적합합니다. xMaker는 웹에 얹히는 짧은 그래픽 모션에 집중합니다.
이런 분들을 위해 만들었습니다.
기관 · 기업 홈페이지 담당자
공지와 행사가 바뀔 때마다 메인 배너를 손봐야 하지만, 매번 외주를 부를 수는 없는 자리.
쇼핑몰 · 소상공인
상세페이지와 SNS 광고를 자주 갈아 끼워야 하는데 디자인 인력은 없는 상황.
마케터 · 콘텐츠 담당자
캠페인 주기가 짧아 A/B 소재를 빠르게 여러 벌 만들어야 하는 팀.
웹 제작사 · 프리랜서
고객사 사이트마다 반복되는 메인 슬라이더 작업을 표준화하고 싶은 실무자.
학교 · 단체 · 협회
예산은 제한적이지만 홈페이지와 안내물의 완성도는 지켜야 하는 조직.
1인 크리에이터
영상 앞머리에 넣을 브랜드 인트로를 직접, 반복해서 만들고 싶은 사람.
xMaker를 만들 때 지킨 것.
“기능이 많은 것”보다 “끝까지 가는 것”
도구를 다 보여주기보다, 목적에 맞는 편집기를 열어 줍니다. 로고 메이커는 로고에 필요한 것만, 플로우 문서는 문서에 필요한 블록만 보여줍니다. 선택지가 적을수록 결과물이 빨리 나옵니다.
템플릿은 출발점이지 정답이 아니다
완성된 템플릿에서 시작하되, 배경·색·글자·애니메이션까지 모두 열어 둡니다. “남의 것처럼 보이는 결과물”이 나오지 않도록 손댈 수 있는 폭을 남겼습니다.
만든 것은 반드시 가져갈 수 있어야 한다
내보내기의 소스코드 탭은 외부 의존성 없이 그 자체로 완결된 HTML을 줍니다. 서비스에 묶이지 않고, 파일 하나로 보관하고 옮길 수 있습니다.
구독이 아니라 소유
매달 결제가 끊기면 도구도 멈추는 구조를 택하지 않았습니다. 한 번 결제하면 저장과 내보내기가 계속 열려 있습니다.
무엇으로 만들어졌나.
특별한 플러그인이나 런타임 없이, 표준 웹 기술만 씁니다.
| GSAP 애니메이션 엔진 | 브라우저 성능에 맞춰 부드럽게 재생되는 타임라인 기반 모션 |
|---|---|
| SVG 벡터 렌더링 | 아이콘·로고·도형은 경로(path) 그대로 그려져 배율에 영향받지 않음 |
| Shadow DOM 캡슐화 | 임베드된 위젯과 호스트 페이지의 스타일이 서로 격리됨 |
| 웹폰트 기반 타이포그래피 | Pretendard · 나눔 · 본명조 등 한글 폰트를 그대로 사용 |
| 표준 HTML 출력 | 내보낸 소스코드는 어떤 CMS · 게시판 에디터에도 붙습니다 |