애니모션 - 시각적 CSS 애니메이션 앱

 (cssanimotion.pages.dev)
4P by GN⁺ | ★ favorite | 댓글 1개
  • HN 제목은 시각적 CSS 애니메이션 앱을 가리키지만, 확인 가능한 페이지 내용은 MathML Input과 LaTeX Output 중심임
  • 페이지 메타데이터상 이 사이트는 MathML을 LaTeX로 변환하는 무료 온라인 도구로 소개됨
  • 실제 변환 예시, 출력 결과, 정확도, 지원 범위 같은 사용 판단 정보는 본문에서 확인하기 어려움
  • 별도 영역에는 Drift Hunters Unblocked 게임 실행 링크가 함께 포함돼 있음
  • 현재 정보만으로는 CSS 애니메이션 앱 기능과 MathML 변환기 동작 방식 모두 명확히 검증하기 어려움

확인 가능한 페이지 구성

  • 상단 본문에는 MathML Input 섹션과 LaTeX Output 섹션이 있음
  • 메타 설명은 MathConvert를 이용해 MathML을 LaTeX로 변환하는 무료 온라인 변환기라고 밝힘
  • 학생, 교육자, 연구자를 대상으로 한 수식 변환 도구로 소개되지만, 실제 입력 필드나 예시 수식, 지원되는 MathML 범위는 제공되지 않음

함께 노출된 게임 링크

  • Play Online Games 아래에 Drift Hunters Unblocked 항목이 있음
  • 해당 항목은 현실적인 드리프트와 자동차 커스터마이징을 제공하며 학교와 직장에서 동작한다고 안내함
  • Play Now 링크로 게임 페이지에 이동할 수 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • CSS3가 1999년에 나왔는데도 2023년에 이런 앱이 HN에 올라올 만큼 흥미롭다는 건, 쉽고 접근 가능하며 프로그래밍·검사가 가능한 키프레임 기반 애니메이션이 얼마나 정체돼 있었는지를 보여줌
    Flash는 10년쯤 전에 죽으면서 공백을 남겼고, 남은 건 Adobe Animate라는 껍데기와 그 주변의 그저 그런 프레임워크·커뮤니티뿐임
    CSS/SVG 기반의 견고한 애니메이션은 대부분 빈 약속으로 남았고, 좋은 예제는 있어도 여전히 좁은 분야의 기술에 가까움

    • After Effects는 무료 bodymovin/Lottie 플러그인으로 CSS/SVG/canvas 애니메이션을 내보낼 수 있음
      개인적으로 웹 키프레임 애니메이션과 요소를 만들 때 주로 쓰는 방식임
      After Effects의 모든 기능을 내보낼 수 있는 건 아니지만, 이런 작업 흐름에서는 내가 찾은 것 중 가장 좋고 안정적인 해법이었음. 이전에 AE를 써본 경험도 영향을 줬을 수 있음
      현재 지원 기능: http://airbnb.io/lottie/#/supported-features
    • 이 정체는 Adobe 책임이 크다고 봄. Adobe가 Macromedia를 샀을 때 정확히 이런 일이 생길 거라고 예측한 사람이 많았던 게 기억남
      Adobe는 의도적으로 뭔가를 죽이는 회사고, Steve Jobs도 일부 책임이 있음
      이제 그들에게 돈을 안 줘도 돼서 정말 좋음. Serif 고마움
    • 1999년에는 Transitions와 Transforms가 없었음
      키프레임을 쓰는 제대로 된 CSS 애니메이션은 2009년에야 처음 가능했고, 그때도 브라우저 지원이 좋지 않아 moz-, webkit- 같은 접두어와 폴리필이 많이 필요했음
      IE8에서 동작하지 않는 CSS3 애니메이션을 굳이 쓸 이유가 없었고, 교차 브라우저 UI 애니메이션 제공 측면에서는 jQueryUI가 훨씬 앞서 있었음
    • 웹 애니메이션은 페이지를 좋게 만드는 경우가 5%, 나쁘게 만드는 경우가 95% 라서 이런 정체가 크게 문제라고 느끼지 않음
      평생 Flash의 “Loading…” 화면을 더 보고 싶지 않고, 특히 내비게이션 메뉴를 보려고 그런 걸 기다릴 필요는 없음
      즉시 로딩되는 광대역 환경에서도 내비게이션 메뉴는 애니메이션이 없을 때 더 낫고, 마스트헤드 아래 기능 소개 영역도 애니메이션이 없을 때 더 좋음
    • Flash는 더 빠르고 저렴한 인터넷과 동영상 스트리밍·호스팅이 대중화되기 전까지의 간극을 메운 기술처럼 느껴짐
      요즘도 수요는 있지만 너무 틈새가 됐고, 사람들은 주로 모바일 기기로 콘텐츠를 소비하며 풍부한 미디어 콘텐츠도 동영상 형태로 충분히 제공됨

  • 처음 해보고 싶었던 건 키프레임 위치를 옮기는 것이었는데, 아직 기능으로는 없어 보임

    • 잘라내기/붙여넣기로 키프레임 위치를 바꿀 수 있음

  • 결과물이 라이브러리에 묶인 JavaScript 코드가 아니라 CSS라서 좋음

  • 모바일에서 아이콘이 뭘 하는지 알려주는 툴팁이나 힌트를 잘 제공하는 방법이 있을까?
    몇몇 아이콘은 의미를 모르겠고 눌러보면 되긴 하지만, 위에서 말했듯 실행 취소가 없어서 부담됨

    • 실행 취소/다시 실행이 추가됐음

  • 에디터가 정말 직관적이고 좋아 보임
    좀 더 고급 타임라인이 필요한 사람은 Theatre.js도 확인해볼 만함. 웹 플랫폼에서 움직임 관련 도구가 더 늘어나는 건 반가움

  • 훌륭한 도구라서 잠깐 CSS 애니메이션을 가지고 놀아보고 싶어졌음
    애니메이션 프리셋에 몇 가지 타이밍 함수를 추가하면 좋겠음. 지금은 그것들이 없어서 약간 밋밋해 보임

  • 소스는 여기 있음: https://github.com/animotionjs/animotion

  • 모바일에서도 놀랄 만큼 직관적임

    • 애니메이션을 바로 편집해서, 움직임에 맞춰 키프레임에서 요소를 늘리는 식으로 말랑한 느낌을 추가할 수 있었고 꽤 만족스러웠음
      다만 실행 취소/다시 실행을 찾지 못했음. 모바일이나 데스크톱에 그런 기능이 있나?

  • GPT-4도 복잡한 CSS 애니메이션을 생성하는 데 꽤 좋다는 걸 알게 됨

답변달기