안녕하세요, 제 아름다운 인터넷 친구 여러분. 모두 잘 지내고 계시길 바랍니다. 오늘 저는 제가 항상 원했던 애니메이션 제작 도구를 드디어 출시하게 되어 정말 설레는 날입니다.00:00

자, 그럼 여기에서 정말 빠르게 소개드리겠습니다. 만약에 ASCII나 애니메이션을 좋아하시고 웹사이트를 독특하게 만드는 것을 즐기신다면, 정말 마음에 드실 거라고 생각합니다.00:10

제가 여기서 만든 건데요. 이걸 ASCII Gen이라고 부릅니다. 전체적인 아이디어는, 어떤 비디오든 – 미래에는 PNG 시퀀스도 가능하고 – 그걸 이용해서 ASCII 아트를 생성할 수 있다는 거예요. 그리고 그걸 활용해서…00:18

이것을 통합하고 곧 리액트 애플리케이션에 적용하실 수 있을 거예요. 그리고 뷰나 스웰, 심지어 터미널에서도 원하신다면 몇 번의 클릭만으로 통합하실 수 있습니다. 정말 멋진 점은요...00:30

그것은 순수한 아스키 아트이기 때문에, 그렇게 가져가시면 됩니다. 저는 품질을 조절할 수 있습니다. 품질을 낮추거나 높이거나, 더 큰 화면에서 사용하기 위해 동적으로 만들 수도 있습니다.00:41

조절 가능합니다. 프레임 레이트도 조절하실 수 있어요. 밝은 모드와 어두운 모드도 지원하는데, 정말 멋지네요. 색상도 변경하실 수 있습니다.00:55

원하는 대로 그라디언트를 추가할 수도 있어요. 더 자세히 살펴보고 싶으시면 asciigen.art 에서 확인해 보세요.01:02

그런데 제가 이 아이디어를 떠올리게 된 전반적인 과정, 그리고 그걸 구축하고 출시하기까지의 과정에 대해서도 이야기하고 싶습니다. 간단한 튜토리얼을 만드는 것보다 그 과정 자체가 조금 더 가치 있는 교훈이 될 수 있을 것 같다고 생각합니다.01:11

이 아이디어는 작년에 제가 또 다른 제품인 semicolons.dev를 만들면서 시작하게 되었습니다.01:23

이것은 기본적으로 AI와 챌린지, 그리고 강의 등을 활용하여 웹 개발 지식을 다시 정리하고 복습하는 데 도움이 됩니다. 또한 다양한 기능들이 많이 포함되어 있어서 정말 큰 프로젝트입니다.01:28

하지만 제가 좀 더 개성 있게 만들고 싶었어요. 그리고 2025년과 2026년에 그 부분이 조금 묻힌 것 같아요. 인공지능의 영향도 있었던 것 같습니다.01:39

그리고 테일윈드 챗 씨엔(tailwind chat CN)을 이용해서 템플릿을 선택하고 생성해주기 때문에, 맞춤 설정이 더 이상 활발하지 않아서 많은 웹사이트들이 비슷한 느낌을 주고 있습니다.01:47

그래서 제가 생각한 건 3D나 다른 형태의 애니메이션을 쉽게 만들 수 있는 것을 만드는 것이었습니다. 3D 관련해서는 3js나 fiber 같은 것들이 있는데, 저는 다른 방향으로 생각했습니다.01:57

웹사이트에 자체 ASCII 애니메이션을 정말 쉽게 추가할 수 있는 도구가 있으면 정말 멋질까요? 그 아이디어가 떠오르게 된 계기이고, 여기저기 여러 모듈에서도 사용하고 있습니다.02:11

이걸 실제로 만들게 되기 전에, 온라인에서 다른 도구들이 어떤 것들이 있는지 살펴보고, 어떻게 개선하여 가장 좋은 도구로 만들 수 있을지 고민했던 과정이 있었습니다.02:24

온라인으로 조사를 꽤 많이 해봤는데, 브라우저에서 ASCII 애니메이션을 구현할 수 있는 적절한 방법은 크게 두 가지 정도 있는 것 같습니다.02:35

하나는 3D 방식으로 진행하는 거였어요. 그래서 3JS 같은 걸 사용해서, 자신만의 3D 모델로 장면을 만들고, ASCII effect.js라고 불리는 애드온을 사용할 수 있죠.02:43

그리고 그거 정말 잘 작동하죠. 하지만 문제는 이게 꽤 많은 노력이 필요하다는 거예요. 3JS를 설정해야 하고, 직접 3D 모델을 만들어야 하잖아요.02:55

과장되게 연출해서 멋있게 만들고, 거기에 이것저것 추가하면 효과가 생겨요. 그리고 종종 앱에 약간의 애니메이션을 넣고 싶을 때도 있죠. 저는 그렇게 하기는 원치 않지만요.03:04

음, 3D 렌더러를 가져와서, 아시다시피, 1MB나 2MB 정도의 용량을 차지하고, 거기에 Tree.js까지 더하면, React Fiber나 플러그인까지 고려하면, 2MB에서 3MB 정도 나오게 되죠. 상당히 큰 사이즈입니다.03:16

정말로 ASCII 에요. ASCII는 그냥 텍스트 아니겠어요? 화면에 렌더링되는 텍스트이죠.03:29

이건 그 자체로 완전 거대한 덩어리죠. 그래서 이것도 작동은 하지만, 제 프로젝트에 번들 크기가 추가되는 건 원치 않았어요.03:36

그리고 이 방법에도 한계가 있어요. 여기서 ASCII 아트를 만들면 색을 넣을 수 없답니다. 그라데이션을 추가할 수도 없고, 색상을 동적으로 전환하는 것도 불가능하답니다.03:46

또 다른 방법은 온라인에 많은 아트 컨버터 같은 도구를 이용하는 것입니다. 예를 들어 이 영상 파일을 넣으면, 펑 하고 변환되듯이요.03:57

에드, ASCII 애니메이션 작업이 끝났는데, 왜 이 일에 시간을 낭비하고 있어요? 물론 이쪽에도 문제점이 있어요. 지금처럼 작은 데모에서는 잘 작동하고 실제로 멋지긴 하지만, 리액트 애플리케이션에 연결하려면 꽤 많은 노력이 필요하죠.04:08

더욱이, 결국 이 영상은 위에 ASCII 애니메이션을 얹은 일종의 필터를 사용한 것입니다.04:22

이런 데모처럼 간단하게 하려면 뭐든지 가능하지만, 정말 멋진 애니메이션을 원하신다면, 2~3메가바이트 정도의 mp4 파일을 배포해야 할 가능성이 높습니다. 그런데 그런 파일은 로딩이 너무 느리고, 저는 그걸 하고 싶지 않았습니다.04:30

트리닷제이쓰(Tree.js)와 거의 같은 번들 크기예요. 그리고 만약 제가 이 색상을 추가하고 싶다면요? 제가 이걸 커스터마이즈하고 싶다면요?04:44

이것이 사실상 Canvas로 렌더링한 다음 AskifyJS와 같은 클라이언트 측 라이브러리를 활용하기 때문에 상당히 어려워집니다.04:53

자, 그럼 제가 어떻게 작업했는지 말씀드리겠습니다. 이미 많은 사전 정의된 애니메이션이 준비되어 있고, 더 많은 애니메이션을 추가하고 있습니다.05:02

어제 밤에 이거 네 개 더 추가했어요. 웹사이트 잘 지켜봐 주세요. 그리고 이 React 컴포넌트를 그냥 추가하시면 돼요. ASCII 애니메이션을 원하는 퀄리티로 주시면 되는 거죠.05:09

원하는 프레임 레이트의 로우, 미디엄, 하이 옵션을 사용할 수 있습니다. 그리고 폴더 이름은 GitHub에서 확인하실 수 있습니다.05:19

그리고 이게 전부예요. 이것만 하시면 돼요. 그리고 다른 프레임워크에도 이것을 확장할 계획이에요. 그래서 Vue.js, Svelte에서 한 번의 클릭으로 설치할 수도 있고, 터미널이나 Lua, NeoVim, 또는 어디에서든 할 수 있어요. 왜냐하면 텍스트로 이루어져 있거든요.05:27

원하시는 경우 직접 생성하실 수도 있습니다. 제가 제공하는 스크립트를 사용하시면, MP4 파일을 실행하면서 프레임 속도나 다양한 옵션을 지정할 수 있고, 결과적으로 프레임별로 텍스트 애니메이션이 담긴 폴더를 얻으실 수 있습니다.05:42

실제로 보시면 놀라실 거예요. 크기가 굉장히 작거든요. 이게 바로 출력 결과인데, 각 프레임별 아스키 코드 문자들이 담긴 txt 파일로 나타납니다. 보시는 것처럼…05:56

파일 크기가 전혀 크지 않습니다. 지금 보여드리는 행성 애니메이션은 4KB 정도 됩니다. 꽤 멋지네요. 전체적으로 하면 약 200KB 정도 될 것 같습니다.06:08

이렇게 결과를 얻으려면 20만 바이트 정도 소요되는데, 언제든지 괜찮습니다. 만약 직접 ASCII 아트를 만들고 싶으시다면, 이 스크립트를 실행하시면 됩니다. 작동 방식은 이와 같습니다. 그런데 저는 밤새도록 큰 업데이트 작업을 진행해 왔고, 기대하고 있습니다.06:19

오늘 아니면 내일쯤 이 경험을 완전히 새롭게 바꿔서 내놓을 예정입니다. 그러니까, 여러분이 할 수 있는 일은 ASCII Gen을 터미널에서 실행하면 되는데, 그러면 여기 아주 훌륭한 사용자 인터페이스가 열려서 MP4 파일을 넣을 수 있습니다.06:33

MOV 파일이나 PNG 시퀀스를 자동으로 가져와서 여러분만의 라이브러리에 추가해 줘요. 다 로컬에서 실행되어서 인터넷 연결은 필요 없답니다. 여러분이 원하는 파일을 그냥 추가하면 돼요.06:46

원하시는 기능을 선택하여 적용하실 수 있습니다. 프레임 레이트나 임계값 등을 설정하신 후 변환하면, 바로 여기에서 로컬 환경으로 사용하실 수 있습니다. 거기서부터는 단 한 번의 클릭으로 React 애플리케이션에 추가하실 수 있습니다.06:59

그리고 앞으로 나올 다른 내용들도 있어서, 정말 기대되는 부분입니다. 곧 출시될 예정이니, 많은 관심 부탁드립니다. 제가 드리고 싶은 조언이 있다면, 꼭 지켜봐 주셨으면 합니다.07:13

이번 에피소드는 특히 혼자 개발하시는 분들이라면, 아이디어를 검증하는 것이 중요하다는 내용입니다. 본인 혼자 성공하고 싶으시다면 더욱 그렇습니다. 저는 사실 이 제품을 출시할 생각은 전혀 없었고, 그 이유가...07:24

저는 주로 내부 프로젝트에서만 사용하고 있었는데, 우연히 X에 관련 게시물을 올렸더니 5,000개가 넘는 '좋아요'를 받고 많은 분들이 관심을 가져주셨어요. 그래서 배포를 고려할 수 있을지 고민하고, 그렇게 하기 위해 마음가짐을 갖게 되었답니다.07:36

무언가를 정말 빨리 배송하고 싶었는데, 아마 일주일 정도 걸린 것 같습니다. 다행히도 생성 부분 등은 이미 많은 부분이 완료되어 있었습니다. 제가 이 제품을 배송할 수 있었는지조차 확실하지 않네요.07:48

인공지능 없이는 많은 분들이 인공지능을 비판하시는 것을 압니다. 하지만 이 작업을 이렇게 빠르게 마무리할 수 있도록 정말로 큰 도움이 되었습니다. 혹시라도 사람들이 거기에 관심을 없을 거라고 생각하신다면, 그 점이 제가 말씀드리고 싶은 내용입니다.08:02

저도 그냥 공유하려고 하는 건데요, 여러분께 알려드리면 좋겠어서요. 혹시 모르니까요. 어떤 것에 대해 정말 흥미를 느끼신다면, 분명히 같은 흥미와 열정을 가진 분들을 찾으실 수 있을 거예요.08:16

이 작은 시도를 재미있게 보셨기를 바랍니다. 혹시 참여하게 되신다면, 저희 디스코드에 오셔서 앞으로 어떤 방향으로 진행할지, 어떤 애니메이션을 추가할지 함께 논의해주세요. 정말 기대되네요! 시청해주셔서 정말 감사드리며, 다음 영상에서 또 만나요.08:28