HN
Hacker News • 35일 전
마크디(Markdy): 머메이드 다이어그램처럼 코드로 애니메이션 만들기
IMP 6/10
핵심 요약
마크디(Markdy)는 머메이드(Mermaid)가 텍스트 기반으로 다이어그램을 그려주는 것처럼, 간단한 스크립트 작성만으로 모션 애니메이션을 렌더링해 주는 도구입니다. 개발자와 콘텐츠 크리에이터가 복잡한 영상 편집 툴의 사용 없이도 코드로 애니메이션을 제어할 수 있게 해주는 것이 핵심 가치입니다. 이를 통해 UI/UX 시연이나 기술 자료용 모션 그래픽을 매우 빠르고 효율적으로 생성할 수 있습니다.
번역된 본문
- 씬(Scene) 설정 모든 애니메이션은 캔버스(canvas)를 정의하는 것에서 시작합니다. 이 설정은 반드시 .markdy 파일의 첫 번째 줄에 있어야 합니다.
scene width=800 height=400 fps=30 bg=#fafafa
[속성] / [기본값] / [설명]
- width / 800 / 캔버스의 너비(픽셀 단위)
- height / 400 / 캔버스의 높이(픽셀 단위)
- fps / 30 / 렌더링 엔진의 프레임 속도(초당 프레임 수)
- bg / white / 모든 CSS 색상 값 사용 가능 (예: #1a1a2e)
- duration / auto / 전체 재생 길이를 초 단위로 강제 지정(재정의)
원문 보기 (영어)
1 Scene Setup Every animation starts by defining the canvas. This must be the first line in your .markdy file. scene width=800 height=400 fps=30 bg=#fafafa Property Default Description width 800 Canvas width in pixels height 400 Canvas height in pixels fps 30 Frame rate for the rendering engine bg white Any CSS color value (e.g. #1a1a2e ) duration auto Override total length in seconds