연속으로 형태가 바뀌는 UI 모핑 애니메이션
하나의 도형이 버튼, 로딩 상태, 플레이어, 슬라이더, 차트로 연속 변형됩니다. 흑백 배색과 스프링 움직임으로 반복 재생되는 인터페이스 애니메이션을 구성합니다.
참고 프롬프트
사례의 의도를 바탕으로 편집한 참고 프롬프트입니다. 자신의 주제에 맞게 바꿔 보세요. 원본 게시물은 출처에서 확인할 수 있습니다.
“하나의 도형이 연속으로 변형되는 인터페이스 애니메이션을 디자인해 주세요. 버튼, 로딩 상태, 음악 플레이어, 슬라이더, 차트가 차례로 나타나도록 하고, 절제된 흑백 배색과 스프링 움직임을 사용해 주세요. 각 상태와 박자를 먼저 설계한 뒤, 시간을 지정해 재생 위치를 이동할 수 있는 애니메이션을 코드로 구현하고 처음과 끝이 자연스럽게 이어지도록 해 주세요.”
창작 결과
창작 영감을 위해 수집한 커뮤니티 사례입니다.
원하는 결과만 설명하세요. 복잡한 부분은 PagePop이 처리합니다.
모델 문법, 파라미터, 제작 도구를 몰라도 바로 시작할 수 있습니다.
모델 자동 선택
PagePop이 원하는 결과에 맞는 모델과 도구를 선택합니다.
필요한 질문만
부족한 정보는 프롬프트를 다시 쓰게 하지 않고 간단한 질문으로 확인합니다.
완성된 결과물
만드는 방법에 대한 조언이 아니라 실제로 사용할 수 있는 결과물을 제공합니다.
내 말로 시작하기
이 실제 프롬프트를 출발점으로 자유롭게 바꾸고, 가장 좋은 제작 방식은 PagePop에 맡기세요.
더 많은 실제 프롬프트 예시
“Remotion과 GSAP으로 작은 모션 디자인 실험실을 만들어 주세요. 이동 거리, 타이포그래피, 이징, 모션 블러, 예비 동작, 후속 움직임을 각각 조절할 수 있게 구성합니다. 모든 상태를 하나의 프레임 시간축으로 제어하고, 한 프레임씩 살펴보기 쉽게 만들어 주세요.”
“Three.js와 SVG를 결합해 유쾌한 3D 애니메이션을 만들어 주세요. 옷차림이 서로 다른 펠리컨 네 마리가 공중에 뜬 스포츠카 위에서 자전거 한 대를 함께 탑니다. 페달을 밟는 동작과 균형을 맞추고, 차량의 분사구와 떠 있는 움직임이 잘 보이게 해 주세요.”
“참고 영상은 Sonnet 5.5와 Opus 5.5의 결과를 명시한 모델 비교 영상입니다. 자신만의 변형을 만들 때는 Three.js를 사용해 단일 HTML 파일에 구슬 음악 기계를 구성해 주세요. 각 음이 울릴 시점에서 역산해 구슬을 놓고, 충돌과 소리가 박자에 맞도록 합니다. 레일과 접촉 지점, 카메라 구도를 알아보기 쉽게 해 주세요.”