안녕하세요.
어제 Threads에서 모션 효과의 이름과 설명을 정리한 사이트를 봤습니다.
보다 보니 이런 생각이 들더군요.
“이름과 설명도 좋지만, 실제로 움직이는 걸 보고 고른 다음 AI에게 구현을 부탁할 수 있으면 더 편하지 않을까?”
그래서 ShowMotion을 만들었습니다.
https://showmotion.bohehub.com/
웹에서 쓰는 다양한 모션을 살펴보고, 원하는 효과의 구현용 프롬프트를 복사해 AI 코딩 에이전트에 전달할 수 있는 사이트입니다.
사용하는 흐름은 간단합니다.
- 움직임을 보고 원하는 효과를 찾습니다.
- 효과의 이름과 설명, 활용할 만한 곳을 확인합니다.
- 프롬프트를 복사하고, [where]를 자신의 페이지에서 적용할 위치로 바꿉니다.
- 사용 중인 AI 코딩 에이전트에 붙여넣어 구현을 요청합니다.
“이런 느낌으로 움직였으면 좋겠는데, 뭐라고 불러야 하지?” 싶을 때 꺼내 볼 수 있는 도구로 만들었습니다. 효과를 고르는 과정에서 이름도 자연스럽게 익힐 수 있고요.
아이디어부터 공개할 수 있는 형태까지 하루 정도 걸렸습니다.
개발과 제품을 만드는 일을 20년 넘게 해왔지만, 예전 같으면 이런 작업은 시작하기 전에 물량부터 걱정했을 겁니다. 모션을 하나하나 구현하고 예제를 붙이는 일만 생각해도 만만치 않으니까요.
AI 덕분에 그 부담이 많이 줄었습니다. 저는 어떤 경험으로 만들지 방향을 잡고, AI와 함께 구현을 진행했습니다.
요즘 가장 즐거운 건 “언젠가 만들어야지” 하고 미뤄두던 것들을 실제로 꺼내놓을 수 있다는 점입니다.
웹 개발이나 AI 코딩을 하시는 분들께 도움이 되면 좋겠습니다. 써보시고 찾기 어려운 효과나 설명이 헷갈리는 부분이 있으면 알려주세요.
처음 아이디어의 계기가 된 모션 효과 사전도 함께 남깁니다.
https://yuns2eo.github.io/motion-dictionary/
감사합니다.
▶ 원문 출처: https://showmotion.bohehub.com/
▶ 원문 출처: https://yuns2eo.github.io/motion-dictionary/
