모션 도감 100
웹앱에 넣을 모션 애니메이션 100가지를 미리 보고, AI에게 그대로 붙여넣을 수 있는 프롬프트와 샘플 코드를 복사하는 도구입니다.
바로 쓰기: https://ojungmin212-dotcom.github.io/motion-dogam/
실행
위 주소로 접속하거나, index.html을 브라우저로 열면 됩니다. 로컬 서버로 열고 싶다면:
python3 -m http.server 8790
그다음 http://localhost:8790 에 접속하세요.
쓰는 법
- 왼쪽 목록에서 모션을 고릅니다. 검색창(
/ 키)에는 이름, 공식 용어, 기술(예: Canvas, IntersectionObserver)을 입력할 수 있습니다.
- 미리보기에서 움직임을 확인합니다. 호버·클릭·스크롤 모션은 가만히 두면 자동 시연되고, 직접 조작해도 됩니다.
- AI 프롬프트 탭에서 구현 환경(HTML·CSS·JS, React, Tailwind, Framer Motion, Next.js, Vue, GSAP)을 고르고 복사합니다.
- 여러 모션을 쓰려면 세트에 담기로 모은 뒤, 오른쪽 위 내 모션 세트에서 한 번에 적용하는 프롬프트를 복사합니다.
- 샘플 코드 탭의 전체 HTML 복사는 미리보기와 똑같이 동작하는 단일 HTML 파일입니다.
키보드: ↑ ↓(또는 j k)로 이전·다음 모션, /로 검색, Esc로 패널 닫기.
구성
| 경로 | 내용 |
|---|
index.html | 앱 화면과 로직 (목록, 미리보기, 프롬프트 생성, 세트) |
motions/*.js | 모션 데이터 100개. 카테고리별로 나뉘어 있고 각 항목에 설명, 프롬프트, HTML/CSS/JS가 들어 있습니다 |
build.mjs | 모든 파일을 하나의 HTML로 묶습니다 (node build.mjs → dist/motion-dogam.html) |
모션 추가하기
motions/ 안의 아무 파일에 항목을 하나 더 넣으면 목록에 자동으로 나타납니다.
window.MOTIONS.push({
no: 101, // 목록 번호
id: 'my-motion', // 주소(#my-motion)와 파일 이름에 쓰임
cat: 'hover', // bg text cursor scroll loading hover depth enter shape
name: '내 모션', en: 'My Motion',
level: 1, // 1 쉬움 · 2 보통 · 3 어려움
trigger: 'hover', // auto hover mouse click scroll load
timing: '300ms · ease-out',
desc: '한두 문장 설명',
use: '추천 위치',
tech: ['CSS transition'],
terms: ['공식 용어 (English Term)', '...'],
prompt: 'AI에게 보낼 구체적인 구현 지시',
html: `...`, css: `...`, js: `...`
});
데모 CSS에서는 --bg --surface --fg --muted --accent --accent-2 --line 변수를 쓰면 다크·라이트 미리보기에 모두 맞춰집니다.
