GN⁺: 애니모션 - 시각적 CSS 애니메이션 앱
(cssanimotion.pages.dev)CSS 애니메이션 노코드 생성
- Animotion은 드래그, 크기 조정, 회전, 클리핑 등을 통해 시각적으로 CSS 애니메이션을 생성할 수 있는 도구임.
- 키프레임 편집기와 사용할 준비가 된 애니메이션 모음, 29개의 내장 이징(easings)을 제공함.
- 이 앱은 큰 화면과 최신 웹 브라우저에서 더 잘 작동함.
GN⁺의 의견
- 이 기사에서 가장 중요한 것은 Animotion이라는 도구를 통해 코드를 작성하지 않고도 CSS 애니메이션을 쉽게 만들 수 있다는 점임.
- 소프트웨어 엔지니어링에 관심 있는 사람들에게 흥미로울 수 있으며, 특히 프론트엔드 개발에 관심이 있는 초급 개발자들에게 매력적인 내용임.
Hacker News 의견
- CSS3가 1999년에 출시되었고, 2023년에 이런 앱이 해커뉴스에 소개될 만큼 멋지다는 것은, 키 프레임 기반 애니메이션의 접근성과 프로그래밍 가능성이 크게 개선되지 않았음을 보여줌. 플래시는 약 10년 전에 사라졌고, Adobe Animate와 여러 평범한 프레임워크 및 커뮤니티가 남아 있음. 견고한 CSS/SVG 기반 애니메이션은 대부분 빈약한 약속으로 남아 있음.
- 키 프레임을 이동하는 것이 첫 번째로 하고 싶었던 일이지만, 아직 그 기능이 없음.
- 앱의 결과물이 CSS로 나오는 것이 마음에 들며, 라이브러리에 얽매이지 않은 자바스크립트 코드가 아님에 감사함.
- 에디터의 직관성이 마음에 들고, 좀 더 고급 타임라인이 필요한 사람들은 Theatre.js를 확인해보는 것이 좋음. 웹 플랫폼에서 더 많은 움직임을 보게 되어 기쁨.
- 모바일에서 아이콘이 무엇을 의미하는지 알려주는 툴팁이나 힌트를 제공하는 좋은 방법이 있는지 궁금함. 몇몇 아이콘의 기능을 이해할 수 없으며, 실행해볼 수는 있지만 앞서 언급한 것처럼 되돌리기 기능이 없음.
- 이 앱을 매우 좋아함.
- 앱의 소스 코드는 GitHub에서 확인 가능함: animotionjs/animotion
- 모바일에서도 놀랍도록 직관적인 사용성을 제공함.
- 놀라운 작업이며, 매우 멋진 도구를 공유해줘서 감사함.
- 모바일에서도 훌륭하게 작동하며, 북마크할 가치가 있음.