▲

GIF처럼 느껴지는 SVG

 (koaning.io)
17P by GN⁺ 13시간전 | ★ favorite | 댓글 1개
  • 움직이는 SVG 이미지는 고해상도를 유지하면서도 파일 크기가 매우 작음 (49KB)
  • 기존 GIF와 비슷한 시각적 효과를 주지만, 실제로는 SVG 애니메이션 기능을 활용
  • Github README.md 파일에서도 직접 사용할 수 있음
  • asciinema와 svg-term-cli 툴을 이용해 터미널 세션 녹화 → SVG 애니메이션으로 변환 가능
  • SVG의 애니메이션 요소(<animate>, <animateTransform>, <animateMotion>)를 활용

움직이는 SVGs의 특징

  • SVG로 만든 움직이는 이미지는 기존 GIF처럼 보이지만, 실제로는 SVG의 벡터 기반 애니메이션 기능을 사용함
  • 이 방식은 파일 크기가 매우 작고, 화질 손실 없이 크기 변경 및 확대/축소가 가능
  • Github의 README.md 같은 곳에도 바로 활용 가능한게 큰 장점
  • 예시로, 49KB 크기의 고해상도 움직이는 parrot SVG가 소개됨

만드는 방법

  • asciinema를 통해 터미널 세션을 녹화함
  • 녹화된 asciinema 파일을 svg-term-cli 툴로 변환하여 SVG 애니메이션 파일로 만듦
  • 생성된 SVG 파일은 README.md에 쉽게 추가할 수 있음
  • 작성자는 bespoken 등 여러 프로젝트에서 이 방식을 적극 활용 중

SVG 애니메이션의 동작 원리

  • SVG 스펙에는 이미 애니메이션 기능이 내장되어 있음
    • <animate>: 개별 속성을 시간에 따라 애니메이션화함
    • <animateTransform>: 회전, 크기 조절, 이동 등 변환 애니메이션 적용 가능
    • <animateMotion>: 경로를 따라 객체를 움직임
  • svg-term-cli는 이러한 SVG의 내장 애니메이션 기능을 활용해 동작함
▲
GN⁺ 13시간전  [-]
Hacker News 의견

  • SVG만으로도 정말 다양한 인상적인 작업을 할 수 있는 점에 감탄 중인 상태임. 위키피디아에서 찾은 예시로는 미사일 커맨드 클론 애니메이션, 런던 튜브 맵, 롤링 셔터 애니메이션 등이 눈길을 끄는 상황

    • SVG는 원래 Shockwave/Flash Player의 오픈 경쟁자이자 PDA용 앱 포맷 역할로 시작한 역사. 네트워킹 지원 추가도 실제로 고려된 적이 있었던 사실 언급

    • 런던 튜브 맵이 무척 인상적인 이유는 휠체어 사용자 같은 교통약자를 위한 '계단 없는 역' 표시가 있기 때문임. 첫 번째 미사일 예제를 보고 바로 프로그래밍으로 탄두 클릭하는 방안을 생각해내어 세계 구한 기분 느낌 공유

    • 첫 번째 미사일 커맨드 링크가 Safari에서는 제대로 작동하지 않는 점 궁금증. 버튼 클릭은 되지만, 탄두 클릭 반응 없음. Firefox에서는 십자선 커서까지 보이는데 Safari만 뭔가 안 되는 상황

    • 튜브 맵의 체크박스 기능은 매우 멋진 부분. SVG 스킬을 더 연마해야겠다는 자극 받음. 북마크 완료

    • 기사 제목만 보고 README 파일의 해시를 시각적으로 보여주는 툴인 줄로 착각했지만, 그런 시각화 기능이 TOS, EULA가 은근슬쩍 바뀔 때 사용자들이 쉽게 감지할 수 있게 해줌을 기대

  • README에 애니메이션 SVG를 삽입하고, 이 SVG가 날씨와 요일 정보를 하루에 한 번씩 업데이트하는 작업을 개발한 경험 공유. 참조. 실제로는 몇 년 전 배심원 소집기간에 만든 프로젝트

  • 타겟이 Github README라면, 동영상을 직접 임베드도 가능. 예시로 git-recent README 링크 소개. 단, 단순한 터미널 캡처라면, OP의 SVG 방식을 활용하는 것이 더 똑똑한 선택일 수 있다는 의견

    • 동영상을 사용할 때 좋은 점은 재생/일시정지/슬라이더 UI가 있다는 것. 일부 플랫폼은 GIF에도 자바스크립트로 제어 UI를 추가하기도 하지만, 브라우저에서 기본지원 않는 점은 한계. 그래서 종종 동영상을 선호한다는 입장. RevealJS용 SVG 애니메이션을 할 때는 필요에 따라 CSS/JS로 조작

    • 비디오 파일을 추가할 경우, Github에서 직접 README를 편집해 업로드 파일이 githubusercontent에 저장되는 게 저장소 용량에도 이로운 선택

    • SVG는 밝기/어두움(다크/라이트) 사용자 설정에 색상 반응 가능이라는 점에서 동영상과 다름. 크기 반응형도 지원, 동영상은 그런 게 불가능. 관련 데모 소개. 단, 이 기능도 Firefox/Chrome에서는 잘 되지만 Safari에서는 여전히 구현이 까다로운 부분이 있고 아쉬움 토로

    • Paul의 활동을 오랜만에 언급하며 이전 Echo Nest, Rdio API 작업에 대한 애정 표현

    • 내 의견으로는 터미널 캡처라면 SVG 방식은 조작 기능이 부족해 실용성 적음. 소프트웨어의 데모 목적으로 5초 내외의 짧은 모션 설명에는 괜찮다고 보지만, 동영상도 필요에 따라 더 나을 수 있음

  • 애니메이션에서 바로 텍스트 복사까지 가능한 점이 생각보다 직관적이지 않지만 제일 쿨한 특징으로 보임

    • 애니메이션이 마우스 오버시 일시정지될 수 있다면 흥미로움이 극대화. 하지만 터미널이 스크롤되면 복사/붙여넣기 기능이 유용성 떨어지는 도전적 측면 있음

  • 주의사항으로, 일부 SVG 파일이 페이지를 멈추게 만드는 버그가 있음. 따라서 제 3자 SVG 링크 삽입을 피해야 한다는 경고. 구글 크롬과 파이어폭스 측 모두 이 버그 수정 계획 없음. 테스트용 위험 SVG 예제도 첨부하지만 클릭시 브라우저 다운 위험

    • 페이지나 브라우저가 멈추는 문제는 보안 이슈라기보다 다양한 내장 함수 남용으로도 발생할 수 있는 일반적 현상이라는 의견. 예시로 블러 필터 체인 길게 사용시 렌더링 과부하로 Chrome 자체가 멈추는 경우 있음. 만약 이 영향이 탭을 넘어서면 더욱 문제긴 하지만, 기본적으로는 UI 사용성 이슈 판단

    • 이런 SVG 관련 취약점(예: XXE 공격)이 Github README처럼 제한된 환경에서도 가능한지 궁금증 제기. 만약 가능하다면 어떻게 막고 있을지 의문

  • "SVG가 본질적으로 애니메이션"이라는 사실이 매우 신선하게 다가와 여러 아이디어를 생각하게 되는 시간. 무한 반복 지원 여부 궁금증

    • <animate> 태그의 repeatCount나 repeatDur 속성을 'indefinite'로 설정하면 무한 반복 가능. 개별 속성에 대한 반복이기 때문에, 이미지의 각 요소가 각기 다른 주기로 움직일 수 있음

    • SVG 애니메이션 공식 문서에서 확인 가능한 예제 코드 공유

    • SVG는 속성 기반 애니메이션 외에도 Ecmascript(Javascript)를 내장할 수 있어, 필요에 따라 스크립트로 어떤 기능이든 채워넣을 수 있는 점 언급. W3C 스크립트 문서 참고

    • SVG 애니메이션 샘플 코드 및 예시도 공유. 일부는 페이지 새로고침시 확인 가능

  • 언젠가 브라우저 표준으로 WASM, JVM, CLR 등 어떤 실행 엔진이든 꽂을 수 있고, 출력이 SVG(텍스트/바이너리)인 시스템을 꿈꾸는 상태. 개발자는 자유롭게 실행 모델과 뷰 조합을 선택하는 방향, DOM에 얽매이지 않게 되는 미래 혁신 희망

    • AutoCAD Web, Photopea, Figma, Google Docs, Google Earth Web, Flutter for Web(CanvasKit) 같은 앱은 이미 이런 방식에 가깝게 DOM을 우회하거나 다른 렌더링 엔진을 선택해 사용 중. 즉, DOM만 강제되는 시대는 아니라는 의견

    • 과거에는 Flash, Java, Silverlight, ActiveX 같은 서드파티 런타임이 웹을 지배했으나, 현재는 공통 언어/플랫폼 환경이 장점이라는 소신. 보안 위협 환경에서는 예전 방식의 부가기술들이 더 이상 살아남기 어려운 점도 강조

    • DOM(HTML)의 장점은 다양한 디스플레이 환경에 반응형으로 설계된 점. SVG는 이런 자유도가 부족하다는 차이점

  • 굉장히 엉뚱해 보일 수 있지만, SVG 아키텍처 다이어그램을 애니메이션화해 노드가 드라마틱한 애니메이션(예: 배틀 애니메이션처럼 확대, 정지 프레임, 번쩍이는 라인 효과 등)으로 연출되는 영상을 만들어보고 싶은 욕구 생김

  • 이런 TIL 스타일 포스트는 새로운 도구 경험을 직접 공유하고, Github Markdown의 제약 극복법까지 제시해주어 창의력 자극에 큰 기여. SVG 결과물(예시)을 보니, 인라인 SVG 안에 인라인 SVG가 중첩된 구조는 처음 접한 경험으로 신선함에 감사 표함

    • 이론상, 자신 스스로의 소스코드를 에디터에 입력하는 모습을 애니메이션하는 쿼인 SVG도 만들 수 있겠다는 아이디어

  • 정말 멋진 아이디어라 README에서 terminaltexteffects에서 구현한 효과들과 어떻게 매칭되는지 테스트해보고 싶음. SVG에 대해 잘 알지는 못하지만, 실제 텍스트를 저장한다고 하면 큰 데이터 파일이 될 수도 있다는 점은 인지. 그래도 재미로 도전하고 싶은 마음

답변달기