공통 편집 기능과
모듈별 기능.
모든 모듈이 공유하는 공통 편집 기능과, 목적에 따라 달라지는 모듈별 기능으로 나누어 항목 단위로 정리했습니다.
프로젝트 관리
로그인하면 내 프로젝트 화면이 먼저 열립니다. 만든 작업이 카드로 쌓이고, 여기서 새 작업을 시작합니다.
프로젝트 목록
만든 프로젝트를 썸네일 카드로 한눈에 봅니다. 카드를 누르면 해당 편집기가 열립니다.
새 프로젝트 마법사
작업 선택 → 화면모드 → 템플릿, 세 단계로 진행되는 생성 마법사.
작업 유형 선택
로고 메이커 · 슬라이더 메이커 · 비디오 메이커 · 플로우 문서 중 하나를 고릅니다.
화면모드 지정
고정비율 5종 또는 반응형(PC·모바일 세로 px). 생성 후에는 잠기므로 작업 중 레이아웃이 깨지지 않습니다.
템플릿 선택
고른 작업 유형·비율에 맞는 템플릿만 보여 줍니다. 빈 캔버스 선택도 가능합니다.
썸네일 자동 생성
작업 화면을 캡처해 목록 카드의 미리보기 이미지로 씁니다.
편집기 화면 구성
편집기는 헤더 · 좌측 도구바 · 중앙 캔버스 · 우측 인스펙터 · 하단 타임라인으로 이루어집니다. 어느 모듈이든 구조가 같아 한 번 익히면 다 씁니다.
헤더
프로젝트명, 작업유형 배지, 저장 상태, 화면비율, 실행취소/다시실행, 미리보기, 내보내기.
좌측 도구바
배경 · 텍스트 · 이미지 · 도형 · 영상 · 아이콘. 누르면 캔버스에 요소가 추가됩니다.
중앙 캔버스
실제 결과물이 보이는 작업 영역. 요소를 끌어 옮기고, 모서리를 잡아 크기를 바꿉니다.
정렬 보조선
그리드 오버레이와 중앙 십자선으로 요소를 화면 기준에 맞춰 배치합니다.
우측 인스펙터
선택한 요소의 속성을 디자인 · 정렬 · 애니메이션 세 탭으로 나누어 편집합니다.
하단 타임라인
장면 썸네일이 나열되고, 추가·복사·삭제와 재생 제어를 여기서 합니다.
배경 설정
장면마다 배경을 따로 지정합니다. 네 가지 유형 중 하나를 고르고 세부 값을 조절합니다.
단색
색상 피커 또는 HEX 코드 직접 입력. 브랜드 컬러를 정확히 맞출 때 씁니다.
그라데이션
선형(각도 0~360°) 또는 방사형. 두 색 지정.
이미지
업로드하거나 기본 배경 갤러리에서 선택. 오버레이 색상과 불투명도로 톤을 눌러 글자 가독성을 확보합니다.
다이나믹 배경 8종
오로라 · 파티클 · 그리드 · 리퀴드 · 브리딩 · 시프팅 · 플라즈마 · 스포트라이트.
이전 배경 복사
앞 장면의 배경 설정을 그대로 가져와 통일감 있는 시퀀스를 빠르게 만듭니다.
반응형 배경 처리
슬라이더 모드에서 배경은 요소와 별개로 가로 100%를 채우고 세로는 지정 높이로 고정됩니다.
배치 요소
좌측 도구바에서 클릭하면 캔버스에 레이어로 추가됩니다. 요소마다 전용 속성이 열립니다.
텍스트
내용 & 폰트
한글 7종과 영문 4종. Pretendard · Paperlogy · Freesentation · 나눔고딕 · 나눔명조 · 본명조 · 고운돋움 · Inter · Montserrat · Playfair Display · Poppins.
굵기 · 크기
100 Thin부터 900 Black까지 6단계 굵기, 픽셀 단위 크기 지정.
정렬 · 자간 · 줄간격
텍스트 정렬과 함께 글자 사이 간격, 줄 사이 간격을 세밀하게 조절합니다.
채우기
단색 또는 그라데이션. 제목 글자에 브랜드 그라데이션을 입힐 수 있습니다.
외곽선 & 그림자
없음 · 부드러운 그림자 · 강한 그림자 · 네온 발광 중 선택.
배경 박스
글자 뒤에 색 박스를 깔아 복잡한 배경 위에서도 읽히게 합니다.
이미지 · 영상
이미지 업로드
로고, 제품 사진, 배경 이미지를 캔버스에 올립니다.
표시 방식
꽉 채우기(cover) / 맞춤 채우기(contain)로 잘림과 여백을 조절합니다.
합성 모드
기본 · 멀티플라이(흰 배경 제거) · 스크린(검정 배경 제거)으로 배경 지운 이미지처럼 씁니다.
테두리 & 그림자
선 색·두께와 그림자 세기를 지정합니다.
영상 URL
영상 요소에 재생할 주소를 지정해 캔버스 안에서 동영상을 함께 재생합니다.
링크
요소에 클릭 링크를 걸어 배너를 눌렀을 때 이동하게 만듭니다.
도형 · 아이콘
도형 종류
사각형 · 라운드 사각형 · 원형 · 삼각형 · 수평 선 · 수직 선.
채우기 · 선
단색 또는 그라데이션 채우기, 테두리 색과 두께 지정.
그림자
없음 · 부드러운 그림자 · 강한 그림자 · 네온 발광.
아이콘 삽입
아이콘 라이브러리에서 카테고리별로 찾아 캔버스에 넣습니다.
아이콘 색상
전체 색상 일괄 지정 또는 레이어별로 각각 다른 색 지정.
아이콘 자체 모션
없음 · 회전 · 펄스 · 바운스 · 흔들림, 반복 횟수 1회 / 3회 / 5회.
인스펙터 — 디자인 · 정렬 · 애니메이션
요소를 클릭하면 우측 패널이 세 탭으로 열립니다. 어떤 요소든 이 세 축으로 편집합니다.
디자인 탭
요소 종류에 따라 폰트·색·테두리·그림자 등 고유 속성이 표시됩니다.
캔버스 기준 정렬
가로/세로 중앙, 좌우 끝, 상하 끝으로 한 번에 맞춥니다.
레이어 순서
맨 앞으로 · 앞으로 · 뒤로 · 맨 뒤로. 겹친 요소의 앞뒤를 정리합니다.
애니메이션 프리셋 21종
페이드인부터 파티클버스트까지, 목록에서 고르면 즉시 적용됩니다.
지속시간 · 딜레이
얼마 동안, 언제부터 움직일지 초 단위로 지정합니다.
easing 6종
power2.out · power3.inOut · back.out · elastic.out · bounce.out · none.
이동 / 효과 거리
슬라이드·확산 계열이 움직이는 폭을 픽셀로 조절합니다.
재생 순서
목록을 드래그해 순서를 바꿉니다. 딜레이가 같은 요소들의 등장 순서를 정합니다.
다중 선택 · 그룹
Ctrl+클릭으로 여러 요소를 고르고 Ctrl+G로 묶으면 하나처럼 움직입니다.
장면 · 재생 제어
여러 장면을 이어 붙여 시퀀스를 만듭니다. 하단 타임라인에서 관리합니다.
장면 추가 · 복사 · 삭제
빈 장면을 새로 만들거나, 완성한 장면을 복제해 문구만 바꿔 씁니다.
장면 썸네일
타임라인에 장면이 순서대로 나열되어 전체 흐름을 한눈에 봅니다.
장면 전환 효과 12종
크로스페이드 · 슬라이드 · 커튼 · 줌 블러 · 플립 · 글리치 · 블라인드 · 3D 큐브 · 디졸브 등.
전환 속도
0.2초에서 2.0초 사이로 조절하고, 적용 전에 미리보기로 확인합니다.
장면 재생시간
등장 애니메이션이 끝난 뒤 다음 장면으로 넘어가기까지 머무는 시간(0~10초).
반복 재생
정지할 때까지 전체 장면을 계속 순환시킵니다. 메인 배너용 설정.
좌우 화살표 표시
재생 중 캔버스 양옆에 이전·다음 장면 버튼을 띄웁니다.
재생 · 정지
편집 중에도 타임라인에서 바로 재생해 움직임을 확인합니다.
전체 미리보기
편집 UI를 걷어내고 실제 게시될 모습 그대로 재생합니다.
내보내기
완성한 작업을 웹에 얹는 두 가지 방법. 목적에 따라 고릅니다.
소스코드
외부 의존성 없이 완결된 HTML. 복사해 붙이면 그 설정 그대로 재생됩니다.
한줄소스(임베드)
스크립트 태그 한 줄. 페이지를 열 때마다 최신 프로젝트 데이터를 불러옵니다.
실시간 반영
한줄소스로 붙인 곳은 원본을 수정·저장하면 새로고침만으로 갱신됩니다.
Shadow DOM 격리
임베드 위젯은 독립된 영역에서 재생되어 호스트 페이지 CSS와 충돌하지 않습니다.
클립보드 복사
복사 버튼 한 번으로 코드 전체가 클립보드에 담깁니다.
아이콘 소스 공유
아이콘 하나만 따로 소스코드로 뽑아 공유할 수 있습니다.
로고 메이커
브랜드 로고가 등장하고 변형되는 모션 전용 편집기. 완성 템플릿을 고른 뒤 구성 요소만 바꿔 끼우는 방식이라 결과물이 흐트러지지 않습니다.
템플릿 선택
좌측 목록에서 완성된 로고 모션 템플릿을 고르면 캔버스에 그대로 적용됩니다.
SVG 아이콘 교체
내장 SVG 라이브러리에서 심볼을 골라 바꿉니다. 표시/숨김도 가능합니다.
타이틀 1 · 2
브랜드명과 태그라인을 각각 편집합니다. 내용·폰트·크기·자간을 지정합니다.
구분 라인
브랜드명과 태그라인 사이의 선. 색·두께·길이를 조절하거나 숨깁니다.
요소별 표시/숨김
아이콘만 있는 로고, 글자만 있는 로고 등 구성을 자유롭게 바꿉니다.
전체 / 레이어별 색상
로고 전체 톤을 한 번에 바꾸거나, SVG 레이어마다 다른 색을 지정합니다.
메탈 질감
금속 재질 표현으로 골드·실버 계열의 고급스러운 로고를 만듭니다.
위치 · 크기 조정
요소별로 배치와 크기를 미세 조정하고, 한 번에 초기화할 수 있습니다.
배경 설정
단색 · 그라데이션(각도 지정) · 이미지 갤러리 + 오버레이 색상/불투명도.
재생 · 반복 확인
편집 화면에서 바로 재생하고, 정지하면 완성 상태로 되돌아갑니다.
줌 컨트롤
확대·축소·Fit으로 세부를 확인하며 작업합니다.
내 로고 라이브러리
완성한 로고를 저장해 두고 다른 프로젝트에서 다시 불러옵니다.
슬라이더 메이커
홈페이지 메인에 들어가는 반응형 인트로 슬라이더. 가로는 페이지 폭을 꽉 채우고 세로만 고정합니다.
반응형 화면모드
가로 100% 고정. PC 세로와 모바일 세로를 각각 50~3000px 범위에서 지정합니다.
PC / 모바일 미리보기
헤더의 전환 버튼으로 두 기기의 모습을 오가며 확인합니다.
다중 장면
장면을 여러 개 쌓아 자동으로 넘어가는 배너 시퀀스를 만듭니다.
장면 전환 12종
장면 사이 전환 효과와 속도를 지정합니다.
내비게이션 화살표
좌우 화살표를 켜서 방문자가 직접 장면을 넘길 수 있게 합니다.
페이지 도트
하단 도트로 현재 위치를 알리고 원하는 장면으로 바로 이동시킵니다.
자동 반복
메인 배너답게 끊기지 않고 계속 순환시킵니다.
클릭 링크
장면의 요소에 링크를 걸어 상세 페이지로 연결합니다.
소스공유
어디에나 붙여넣으면 슬라이드가 생성되는 웹표준 코드
비디오 메이커
SNS 피드·배너·상세페이지에 얹는 광고 모션. 고정비율 캔버스에 요소를 자유 배치합니다.
비율 5종
16:9(유튜브) · 9:16(릴스·숏폼) · 1:1(정방형 피드) · 5:4 · 4:5(인스타 세로).
자유 요소 배치
텍스트·이미지·도형·영상·아이콘을 원하는 위치에 놓고 크기를 조절합니다.
요소별 애니메이션
각 요소에 서로 다른 프리셋과 딜레이를 주어 순차 등장 연출을 만듭니다.
등장 순서 제어
드래그로 순서를 조정해 시선의 흐름을 설계합니다.
다이나믹 배경
정적인 배경 대신 움직이는 배경으로 시선을 잡습니다.
장면 복제 활용
같은 레이아웃에 문구만 바꾼 소재를 빠르게 여러 벌 만듭니다.
플로우 문서
게시판에 붙이는 반응형 그리드·표 HTML 문서. 블록을 쌓아 만드는 구조입니다.
텍스트 블록
제목과 본문 문단. 문서의 기본 골격을 만듭니다.
이미지 블록
사진과 도표를 문단 사이에 배치합니다.
그리드 블록
여러 항목을 가로로 나란히 배열합니다. 좁은 화면에서는 자동으로 세로로 접힙니다.
표 블록
일정·요금·비교 항목처럼 정리가 필요한 정보를 표로 담습니다.
버튼 블록
신청·문의 페이지로 보내는 행동 유도 버튼을 넣습니다.
블록 속성 편집
블록을 선택하면 우측 인스펙터에서 그 블록만의 속성을 조절합니다.
반응형 출력
PC에서는 여러 칸, 모바일에서는 한 칸으로 자동 정리되는 HTML을 뽑습니다.
게시판 붙여넣기
일반 게시판 에디터의 HTML 모드에 그대로 붙여 넣을 수 있습니다.
모듈 지속확장
소소하지만 있으면 좋을 기능들.. 계속 추가해갑니다.
아이콘 라이브러리
카테고리로 정리된 SVG 아이콘 라이브러리. 레이어별 색상과 드로잉 애니메이션까지 붙일 수 있습니다.
카테고리 탐색
주제별로 정리된 카테고리에서 필요한 아이콘을 찾습니다.
레이어별 색상
아이콘을 이루는 각 경로에 다른 색을 지정해 브랜드 컬러를 입힙니다.
드로잉 애니메이션
선이 그려지듯 나타나는 모션을 아이콘에 붙입니다.
내 아이콘 저장
편집한 아이콘을 저장해 다른 프로젝트에서 그대로 재사용합니다.
아이콘 소스 공유
아이콘 하나만 독립 소스코드로 뽑아 다른 페이지에 붙일 수 있습니다.
SVG 업로드 (관리자)
자체 제작 SVG를 카테고리에 추가해 팀 공용 라이브러리로 씁니다.
계정 · 이용 등급
무료 회원은 편집과 미리보기까지, 결제 회원은 저장·내보내기까지. 구독이 아니라 1회 결제입니다.
로그인 유지
한 번 로그인하면 오래 유지되도록 설정되어 있어, 매번 다시 로그인할 필요가 없습니다.
회원가입
영문·숫자·한글 4~20자 아이디 + 이메일 + 비밀번호로 가입합니다.
무료 회원
편집 · 미리보기 · 템플릿 · 아이콘 라이브러리 사용.
결제 회원
프로젝트 무제한 저장, 소스코드/한줄소스 발급, 내 라이브러리 사용.
솔루션 꾸러미
필요한 기능들은 모듈형식으로 채워나갑니다.
오픈소스
전체 소스를 github에 공유할 예정입니다.