그림을 글로 그리던 그 편리함, 이번엔 애니메이션이에요
개발 문서 만들 때 머메이드(Mermaid) 써보신 분 많을 거예요. 머메이드가 뭐냐면, 마크다운 문서 안에 graph TD; A --> B 같은 텍스트 몇 줄만 적으면 알아서 순서도나 플로우차트를 그려주는 도구거든요. 마우스로 박스 끌어다 선 잇는 그 귀찮은 작업을, 그냥 글 쓰듯 적으면 그림이 짠 하고 나오니까 개발자들이 사랑하죠. 깃허브 README나 노션에도 바로 박히고요.
Markdy는 여기서 딱 한 발 더 나가요. “그림”이 아니라 “움직임”을, 즉 애니메이션을 텍스트로 묘사하면 모션 그래픽이 만들어지게 해주는 거예요. 머메이드가 정지된 다이어그램이라면, Markdy는 그 박스가 슥 나타나고 화살표가 흐르듯 그려지는 영상을 글로 정의하는 셈이죠.
어떻게 동작하나
원리는 머메이드랑 닮았어요. 화면에 등장할 요소들, 그것들이 언제 어떤 순서로 나타나고 사라지는지, 어디서 어디로 움직이는지를 사람이 읽을 수 있는 텍스트 문법으로 적어주면, 그걸 해석해서 시간 축(타임라인) 위의 애니메이션으로 풀어내는 구조예요.
이게 왜 좋냐면, 텍스트라서 버전 관리가 된다는 점이 커요. 애니메이션을 깃(git)에 올려두면 “어제 버전이랑 오늘 버전이 뭐가 달라졌지?”를 diff로 비교할 수 있어요. 영상 파일은 한 글자만 바꿔도 통째로 다시 만들어야 하지만, 텍스트는 한 줄만 고치면 되고 누가 뭘 바꿨는지도 그대로 남죠. 무거운 디자인 툴을 켜고 키프레임을 일일이 찍을 필요 없이, 코드 짜듯 애니메이션을 만든다는 게 핵심 매력이에요.
비슷한 도구들과 비교하면
“코드로 애니메이션 만들기”라는 분야엔 이미 강자들이 있어요. 수학 유튜버 3Blue1Brown이 쓰는 Manim(파이썬 기반)은 화려한 수학 애니메이션을 뽑아내고, Motion Canvas는 타입스크립트로 정교한 모션을 짤 수 있고, Remotion은 아예 리액트(React)로 영상을 렌더링해요. 그리고 그 반대편엔 애프터이펙트 같은 전문 디자인 툴이 있죠.
이 지형에서 Markdy의 자리는 분명해요. Manim이나 Remotion이 “강력하지만 배우는 데 시간이 드는” 쪽이라면, Markdy는 머메이드처럼 진입 장벽을 확 낮춘 쪽을 노려요. 작정하고 멋진 영상을 만드는 게 아니라, 문서 사이에 “여기서 데이터가 이렇게 흐릅니다” 하는 짧은 설명용 모션을 부담 없이 끼워 넣는 용도에 잘 맞는 거죠.
한국 개발자에게는
기술 블로그 쓰거나 사내 문서 정리하다 보면, 정적인 다이어그램만으로는 “순서”나 “흐름”을 설명하기 답답할 때가 있잖아요. 요청이 서버를 거쳐 DB까지 갔다 돌아오는 과정이라든지, 알고리즘이 배열을 한 칸씩 정렬하는 모습 같은 건 움직여야 확 와닿거든요. 그렇다고 애프터이펙트를 배우긴 부담스럽고요. velog나 유튜브로 기술 콘텐츠를 만드는 분, 신입 교육 자료를 만드는 분에게 이런 “텍스트로 쓰는 애니메이션”은 꽤 실용적인 무기가 될 수 있어요.
한줄 정리: 머메이드가 정지 다이어그램을 텍스트로 푼 것처럼, Markdy는 애니메이션을 텍스트로 풀어서 버전 관리도 되고 진입 장벽도 낮아요. 여러분이 만든 문서 중에 “이건 좀 움직여줘야 이해되는데” 싶었던 설명, 혹시 있으셨나요?
🔗 출처: Hacker News