3Blue1Brown 애니메이션 제작 방법 [비디오]

 (youtube.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • 3Blue1Brown의 시각화는 Grant Sanderson이 만든 Python 라이브러리 Manim으로 코드화되며, 영상은 Ben Sparks와 함께 실제 제작 흐름을 따라감
  • Manim은 Grant의 개인 제작 환경과 문서·테스트·이슈 대응이 강화된 Manim Community로 갈라져 있고, 입문자는 보통 커뮤니티 버전이 적합함
  • 작업은 Sublime Text와 Python 터미널을 연결해 코드 조각을 바로 실행하고, checkpoint paste로 중간 상태를 캐시해 반복 실험하는 방식에 가까움
  • 데모는 Lorenz attractor를 SciPy로 계산한 뒤 곡선, 점, 업데이터, 3D 카메라, 잔상 효과를 조합해 가까운 초기 조건이 갈라지는 과정을 보여줌
  • 최종 장면은 사전 실행으로 오류와 길이를 확인한 뒤 MP4로 렌더링하며, 이후 편집 도구에 넣어 YouTube 영상 제작 과정으로 이어짐

Manim의 출발점과 두 갈래 버전

  • 3Blue1Brown 애니메이션의 핵심 도구는 Grant Sanderson이 직접 만든 Python 라이브러리 Manim임
  • Manim은 모든 장면을 프로그래밍 방식으로 구성하며, 3Blue1Brown 제작 방식에 맞춘 맞춤형 도구로 발전해 옴
  • Grant는 학부를 마칠 무렵 수학 함수를 변환으로 더 잘 시각화하려고 Python 코드를 만들었고, 이 코드가 채널의 첫 영상과 함께 시작됨
  • 영상이 늘면서 도구가 개선되고, 개선된 도구가 다시 더 복잡한 영상을 가능하게 하는 흐름이 이어짐
  • 최근 홀로그램 영상의 시각 효과는 2~3년 전이었다면 훨씬 어려웠겠지만, 여러 해 동안의 워크플로 개선 덕분에 제작 난도가 낮아짐

Manim Community와 Grant의 개인 버전

  • Grant는 영상에 쓴 코드와 Manim 자체를 GitHub에 공개해 왔음
  • 다만 영상 제작과 오픈소스 관리가 병행되면서 이슈와 Pull Request 대응은 충분하지 않았음
  • 커뮤니티는 더 견고한 도구를 만들기 위해 저장소를 포크했고, 이 버전이 Manim Community임
    • 이슈와 Pull Request 대응이 더 활발함
    • 테스트와 문서가 더 잘 갖춰져 있음
    • 처음 시작하는 사람에게 일반적으로 권장됨
  • 영상 데모에는 Grant가 직접 쓰는 버전이 사용됨
    • 최근 몇 년 동안 더 인터랙티브하고 빠르게 동작하도록 개선됨
    • 문서화와 테스트가 중요한 사용자는 커뮤니티 버전이 더 적합함

코드를 쓰고 즉시 확인하는 제작 방식

  • Manim의 각 장면은 Python class로 작성되며, construct 메서드 안에 렌더링할 코드가 들어감
  • 원, 사각형, 텍스트 같은 객체를 화면에 추가하고, play 메서드로 Write, Transform 같은 애니메이션을 실행함
  • 대부분의 객체는 기본적으로 화면 중앙에 놓이고, to_edge, shift 같은 조작으로 위치를 바꿈
  • Grant의 작업 환경은 Sublime Text와 Python 터미널을 함께 쓰는 방식임
    • 코드 줄을 복사해 터미널에서 실행하면 현재 장면에 바로 반영됨
    • Sublime 단축키가 선택한 코드를 복사하고 실행하는 과정을 자동화함
    • 터미널이 현재 장면과 연결되어 있어 수정 결과를 즉시 확인할 수 있음
  • 긴 장면에서는 전체 코드를 매번 다시 실행하지 않고, 중간 구간만 반복 실험하는 기능이 중요함
    • 홀로그램 영상 예시는 4분 30초짜리 MP4를 만드는 긴 Python 코드였음
    • 긴 장면은 많은 문맥과 지역 변수를 공유하므로 한 파일에 두는 방식이 유용했음
    • checkpoint paste는 특정 주석 위치의 장면 상태를 캐시하고, 그 상태로 되돌린 뒤 선택한 코드를 실행함
    • 이 방식은 순수 텍스트 파일과 Jupyter notebook 사이의 혼합형 워크플로에 가까움

Manim 애니메이션의 기본 감각

  • Manim의 중요한 철학 중 하나는 “무엇이든 무엇으로든 변환될 수 있다”는 점임
  • 예를 들어 hello world 텍스트의 첫 글자 H를 원으로 변환하는 장면을 만들 수 있음
    • 원을 장면에 직접 추가하지 않아도 변환 대상으로 정의해 둘 수 있음
    • 텍스트는 문자 그룹이라 개별 문자를 꺼내 조작할 수 있음
  • Transform은 기본적으로 부드러운 rate function을 사용함
    • 기본값은 smooth이며, cubic bezier 기반의 부드러운 움직임으로 보임
    • linear를 쓰면 시작과 끝이 더 딱딱하게 느껴짐
    • 수학적 시간 진행을 그대로 보여줘야 하는 경우에는 linear가 필요함
  • 이런 세부 조정이 단순히 “움직이는 장면”과 “보기 좋은 장면”의 차이를 만듦
  • Write처럼 3Blue1Brown 영상에서 익숙한 애니메이션도 Manim 내장 함수로 호출할 수 있음

Lorenz attractor 데모

  • 데모의 중심 예시는 Lorenz attractor임
    • 3차원 미분방정식에서 나오는 형태임
    • 3D 공간의 점이 시간이 지남에 따라 어떻게 변하는지를 결정론적 규칙으로 정함
    • 초기 조건을 여러 개 바꾸면 흥미로운 시각적 결과가 나옴
  • Grant는 수학 계산 부분을 만들 때 ChatGPT에 Python 함수 작성을 요청함
    • SciPy의 integrate와 초기값 문제 풀이 함수가 사용됨
    • 생성된 코드는 Matplotlib 렌더링을 기준으로 했고, 이후 Manim에 맞게 조정됨
  • Lorenz 방정식의 상태는 x, y, z 좌표를 가지며, 매 순간의 도함수를 계산하는 함수로 표현됨
  • 수치 풀이 결과는 시간 값과 x, y, z 값으로 나오고, Grant는 이를 다루기 쉽게 감싸는 wrapper를 둠
    • SciPy 쪽 표현은 y를 출력처럼 다뤄 다소 헷갈릴 수 있음
    • 상태 배열과 전치 형태를 자신이 쓰기 편한 방식으로 맞춤
  • 초기 조건을 (0, 0, 0)으로 두면 모든 값이 0으로 나와 적절하지 않았고, 한 좌표를 10으로 바꾼 뒤 흥미로운 점들이 생성됨
  • Manim에서는 계산된 점들을 곡선으로 바꾸기 위해 set_points_as_corners를 사용함
  • 좌표축의 좌표계를 Manim 좌표계로 바꾸기 위해 coords_to_point의 축약형인 c2p를 사용함
  • Python의 * 문법은 iterable을 함수 인자로 풀어 전달할 때 쓰임
    • 예시에서는 x, y, z 좌표 리스트를 분리해 함수에 전달함

가까운 초기 조건이 갈라지는 장면

  • Lorenz attractor 시각화의 핵심은 서로 아주 가까운 초기 조건들이 처음에는 비슷하게 움직이다가 나중에는 갈라지는 모습임
  • Grant는 초기 조건 목록을 만들고, z 좌표를 작은 epsilon만큼 다르게 설정함
    • 처음에는 2개 조건으로 시작함
    • 이후 10개 조건으로 늘림
  • 여러 곡선을 담기 위해 VGroup을 사용함
    • 벡터화된 객체 그룹이라는 정보를 주면 렌더링을 더 빠르게 할 수 있음
  • 각 곡선의 끝점에는 glow dot을 붙임
    • GlowDot은 움직이는 점을 시각적으로 보기 좋게 보여주기 위해 만들어 둔 객체임
    • 각 점에는 updater가 붙어 매 프레임마다 곡선의 끝점으로 이동함
  • zip은 점과 곡선, 상태와 색상처럼 대응되는 리스트를 병렬로 순회할 때 쓰임
    • 두 리스트 길이가 다르면 짧은 쪽이 끝나는 지점에서 멈춤
    • color_gradient로 상태 개수와 같은 수의 색상을 만들어 길이를 맞춤
  • ShowCreation으로 곡선을 그릴 때 기본 smoothing을 쓰면 실제 시간 진행이 왜곡될 수 있어, 동역학을 그대로 보여주는 부분에서는 linear rate function을 사용함
  • 가까운 초기 조건들은 초반에 거의 함께 움직이다가 시간이 지나면 완전히 다른 위치에 있는 것처럼 퍼짐
  • Lorenz attractor는 단순한 점이나 주기가 아니라 특정한 모양으로 끌려가면서도, 정확한 위치는 초기 조건에 민감한 strange attractor로 다뤄짐

인터랙티브 모드의 우회 코드와 장면 효과

  • 데모 중 globals().update(locals()) 같은 “저주받은” 코드가 등장함
  • 이 코드는 Manim의 IPython embed 환경에서 함수가 바깥 스코프의 변수를 보지 못하는 문제를 피하기 위한 임시 우회책임
    • 일반 Python 스크립트에서는 같은 코드가 정상 동작함
    • Manim의 임베디드 인터랙티브 환경에서는 NameError가 발생할 수 있음
    • 로컬 변수를 전역 변수 딕셔너리에 넣어 문제를 우회함
  • 실제 라이브러리 코드라면 이런 방식은 부적절하지만, 장면 개발용 임시 인터랙티브 세션에서는 위험이 상대적으로 작음
  • 더 나은 방식은 함수가 필요한 변수를 인자로 명시적으로 받게 만드는 것임
  • 곡선을 시간에 따라 사라지게 하려면 FadeOut을 사용할 수 있음
    • play의 run_time을 evolution time과 맞추면 곡선이 해당 시간 동안 서서히 투명해짐
  • 점 뒤에 잔상을 남기는 효과는 TracingTail로 구현함
    • 점 하나를 따라다니는 꼬리를 만들 수 있음
    • time_traced를 1초에서 3초로 늘리면 더 긴 시간의 꼬리가 보임
    • 10개의 점 각각에 꼬리를 붙이면 여러 궤적이 퍼지는 모습을 더 선명하게 볼 수 있음

3D 카메라와 수식 처리

  • Manim 장면은 기본적으로 3D 좌표를 가질 수 있지만, 대부분의 3Blue1Brown 장면은 교육적 이유로 2D 칠판처럼 보이게 구성됨
  • Lorenz attractor는 3D가 필요하므로 3D 축을 추가함
  • 3D 화면에서는 깊이감을 유지하기 위해 카메라가 천천히 회전하거나 이동하는 효과가 유용함
    • Grant는 현재 카메라 위치를 클립보드에 저장하는 단축키를 사용함
    • frame.animate.reorient(...) 형태로 카메라 프레임을 특정 위치로 애니메이션화함
  • 수식은 LaTeX 객체로 장면에 추가할 수 있음
    • MathPix를 사용하면 화면의 방정식을 OCR로 읽어 LaTeX나 SVG로 얻을 수 있음
    • 3D 장면에서 수식을 화면에 고정하려면 fix_in_frame을 사용함
  • LaTeX 수식의 특정 변수에는 색을 입힐 수 있음
    • 예시에서는 x, y, z를 각각 다른 색으로 지정함
    • 텍스트를 수학적 구성요소로 분리해 강조하거나 변환하는 기능이 수학 설명에 유용함
  • Manim에는 문자열을 맞춰 변환하는 특수한 transform도 있음
    • A^2, B^2 같은 항이 다음 줄의 같은 문자열 위치로 자연스럽게 이동함
    • 문자열 기반 매칭은 anagram 애니메이션처럼 글자를 대응되는 위치로 보내는 효과도 만들 수 있음
  • flash around, indicate 같은 애니메이션으로 수식의 특정 문자나 항을 강조할 수 있음

렌더링과 실제 제작 흐름

  • 장면이 마음에 들면 Manim 명령으로 Python 파일과 장면 이름을 지정해 렌더링함
  • pre-run은 전체 애니메이션을 실제로 쓰기 전에 훑어보는 단계임
    • 전체 길이를 추정함
    • 중간 렌더링 도중이 아니라 사전에 오류를 잡는 데 도움이 됨
  • W는 파일로 쓰는 옵션이고, Finder 관련 옵션은 macOS Finder에서 결과 파일을 띄우는 용도로 사용됨
  • 최종 결과는 MP4 파일로 렌더링됨
    • Grant는 보통 4K로 렌더링하기 때문에 시간이 더 걸릴 수 있음
    • 렌더링된 파일은 이후 편집 도구에 넣어 편집함
  • 예전 Manim 사용 방식은 주로 명령줄에서 장면을 렌더링하고 MP4를 확인하는 반복이었음
  • 이후 OpenGL 구현으로 바꾸던 시기와 비슷하게 인터랙티브 셸 기반 작업 흐름이 생기면서, 코드를 하이라이트하고 바로 결과를 보는 방식으로 바뀜
  • Grant의 구체적인 워크플로는 Sublime Text 스크립트와 Terminus 확장에 의존함
    • 다른 텍스트 편집기에서도 비슷한 동작을 흉내 낼 수 있음
    • Visual Studio 계열 환경에서도 같은 형태의 흐름을 만들 수 있음
  • 기능을 찾을 때는 예제 장면, 라이브러리의 animation 폴더, 과거 영상 코드가 있는 3b1b/videos GitHub 저장소를 활용할 수 있음
  • Grant는 Copilot보다 더 단순한 자동완성을 선호함
    • Manim에서는 자신이 원하는 동작을 이미 알고 있는 경우가 많음
    • 요청을 영어보다 코드로 표현하는 쪽이 더 자연스럽게 느껴짐

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 3B1B는 정말 대단한 일을 하고 있음
    개인적으로 그의 YouTube 영상들에서 엄청난 도움을 받았고, 고등학교나 공대에서 수학을 이런 식으로 가르쳤으면 좋겠음

    • 나도 비슷하게 느낌. 다만 많은 사람에게 수학은 나이가 좀 든 뒤에야 제대로 감상하게 되고, 그때 이런 채널로 끌리게 되는 것 같기도 함

  • https://sinerider.com/도 볼 만함
    Grant Sanderson의 3B1B 작업을 가끔 돕는 친구가 만든 게임인데, LineRider처럼 트랙을 만들되 수식으로 만드는 훌륭한 수학 교육 게임
    3B1B와 SineRider 둘 다 함수 합성에 대한 직관적 이해에 무엇보다 큰 영향을 줬음

  • 실시간으로 렌더링 엔진의 버그를 발견하고 우회책까지 찾아낸 장면이 인상적이었음
    https://youtu.be/rbu7Zu5X1zI?feature=shared&t=693

    • 보기에는 백엔드에서 작업 중이던 새 렌더링 로직의 한계를 이미 알고 있었고, 간단한 상위 수준 우회책도 알고 있었던 것에 가까워 보였음
      그래도 인상적인 작업임
    • 큰 회사에서는 이렇게 방화범-소방관식 엔지니어가 돋보이기도 함. 본인이 만든 버그를 아주 눈에 띄는 자리에서 고치기 때문임
    • 그는 그 버그를 알고 있었지만, 이 소프트웨어 개발이 본업은 아니고 본업은 영상 제작임
      위치와 원인을 알고 라이브로 우회책을 떠올렸다는 건 자기 도구를 개선하는 데 시간을 투자한다는 뜻이고, 가끔이 아니라 적극적으로 하고 있다는 뜻임
      여전히 멋지다고 봄

  • 오른쪽 아래에 있던 Python 대화형 REPL이 어떻게 동작하는지 궁금했음
    수정: 완전히 맞춤형 작업 흐름인 듯함: https://github.com/3b1b/videos?tab=readme-ov-file#workflow

    • 그는 YouTube에서 완전히 상업화되지 않은 몇 안 되는 훌륭한 제작자 중 하나인 것 같음. Mark Rober가 떠오름

  • 몇 년 동안 목소리만 듣고 얼굴을 안 보다가 얼굴을 보니, 갑자기 불쾌한 골짜기 한가운데 들어간 느낌이라 웃김

    • 내가 보는 꽤 많은 제작자들이 요즘 얼굴을 드러내기 시작한 것 같음. 바로 떠오르는 큰 예는 Real Engineering의 진행자임
      최근 영상 몇 개에서는 진행자, 인터뷰어, 내레이터처럼 행동하더라
      veratasium처럼 제작자가 대신 몇몇 영상을 맡는 경우도 이상하게 느껴짐
      정말 큰 공개라면 AvE일 것임
    • 그의 졸업식 연설을 보면 더 놀랄 수도 있음. 예: https://youtu.be/z7GVHB2wiyg
    • 그는 2020년에 봉쇄 기간 동안 사람들이 인간적 연결감을 유지하도록 돕기 위해 얼굴을 공개하기 시작했음
      당시 영상 댓글의 상당수가 채널명과 아이콘에 관한 것이었고, 실제로 그의 한쪽 눈이 그렇게 생겼음
    • 예전에 Matt Parker와 Brady Haran(Numberphile) 영상에도 여러 번 나왔는데 못 봤다니 의외임
      그래도 이런 틈새 채널 안에서도 취향은 꽤 갈리는 듯함
    • 특히 내레이션 음성은 캐주얼하게 촬영된 사람의 음성보다 음질이 좋아서, 그 작은 차이가 꽤 이상하게 느껴질 수 있음

  • 그의 목소리가 정말 좋음. 차분하고 편안해서 집안일을 하면서 옆에 틀어놔도 뭔가를 배울 수 있음
    이런 제작자는 인정받을 자격이 있음

    • 그런 목소리는 성공에 큰 영향을 주지 않을까 싶음. YouTube든 팟캐스트든 마찬가지로
    • 이 사람은 타고난 교육자임. 콘텐츠 제작자라는 표현만으로는 사회적 가치를 다 담지 못함
    • 내 취향에는 너무 콧소리가 강함. somehow 그 안에 있는 엄밀함을 조금 깎아먹는 느낌임

  • 최신 홀로그램 영상은 내가 본 YouTube 영상 중에서도 품질이 가장 뛰어난 축에 듦

  • 이 도구로 브리징 알고리즘[1] 해설 영상을 만들면 정말 좋겠음
    2016년부터 Pol.is 같은 도구를 쓰는 참여 민주주의 과정에서 이 알고리즘이 활용되는 방식의 팬이었고, 그 기반 수학에 대한 이해를 높이는 데 기여하고 싶었음
    Summer of Math Exposition[2]이 열리던 때 Manim을 알았더라면 분명 뛰어들었을 것임
    [1]: https://bridging.systems/
    [2]: https://some.3b1b.co/

    • 이런 게 있는 줄 몰랐음. 링크 고마움, 지금 논문을 읽는 중이고 해설 영상을 만들면 꼭 보고 싶음
      내 웹사이트는 프로필에 있으니, 언젠가 만들게 되면 소셜 미디어로 링크를 보내주면 좋겠음
    • 실제로 어떤 수학이 들어가는지 궁금함. [1] 링크를 따라가 봤는데 수학적 내용은 거의 찾지 못했음
    • 만들면 볼 것 같음. pol.is의 팬임

  • Manim 링크: https://github.com/3b1b/manim

  • 그의 영상마다 들어가는 제작량이 엄청나서 놀라움. YouTube 플레이 버튼을 받을 만함

    • YouTube의 아쉬운 점도 바로 그 부분임. 고품질 영상을 만들려면 말도 안 될 정도의 노력이 들어가고, 잘 그린 블로그 글 하나를 만드는 것보다 몇 자릿수는 더 큼
      블로그와 마찬가지로 운이 따르지 않으면 그 노력의 상당 부분이 낭비됨. 하지만 블로그는 적어도 노출될 기회가 여러 번 있음. HN 상단에 오를 수도 있고, X나 다른 곳에서 퍼질 수도 있음. 한 플랫폼 안에서도 보통 여러 번의 기회가 있음
      반대로 YouTube에서는 알고리즘이 사실상 한 번 결정함. 이미 엄청난 구독자가 없다면 영상을 거의 무작위로 몇 명에게 보여주고, 그들이 반응하지 않으면 거기서 끝남
답변달기