UI 모션 디자인 워크플로우 가이드
Claude Opus 5.5를 사용하여 UI 모션 디자인 영상을 제작하는 워크플로우의 상세한 가이드로, 포괄적인 프롬프트 및 지침 세트 역할을 합니다.
창작 결과
참고 프롬프트
사례의 의도를 바탕으로 편집한 참고 프롬프트입니다. 자신의 주제에 맞게 바꿔 보세요. 원본 게시물은 출처에서 확인할 수 있습니다.
“Build a 14-second UI motion piece from eight to twelve states such as a button, loading indicator, toggle, chart, and command palette. Choose commercially usable music near 120 BPM and measure its beats with NumPy. Write one 1440×1440 HTML scene whose styles are calculated from seek(t), using closed-form spring motion rather than timers or autonomous CSS transitions. Place interface sound effects according to their measured peaks. Preview a frame at each beat to correct the timing, then render four subframes per output frame with Playwright and blend them in ffmpeg for a 60 fps film.”
PagePop에서 창작하는 방법
도우미를 선택하고 원하는 작업을 설명한 뒤 PagePop과 함께 창작해 보세요. 대화로 수정하고 완성된 작업물을 다운로드할 수 있습니다.
나에게 맞는 도우미 선택
다양한 업계의 전문 도우미를 살펴보거나 풍부한 사례 모음에서 아이디어를 찾아보세요.
자연어로 요청 설명
이미지, 동영상, PPT, 문서, 웹페이지 중 만들고 싶은 것을 알려 주세요. 필요에 따라 참고 이미지나 자료를 제공할 수 있습니다.
모델 자동 선택과 창작
PagePop이 목표에 맞는 모델과 도구를 선택해 작업물을 만듭니다.
반복 수정 후 다운로드
같은 대화에서 내용과 표현을 계속 조정할 수 있습니다. 만족스러운 결과가 나오면 다운로드해 사용하세요.
내 말로 시작하기
이 실제 프롬프트를 출발점으로 자유롭게 바꾸고, 가장 좋은 제작 방식은 PagePop에 맡기세요.
자주 묻는 질문
이 동영상 사례를 내 창작에 어떻게 활용하나요?
「UI 모션 디자인 워크플로우 가이드」의 참고 프롬프트를 시작점으로 삼아 주제, 스타일, 화면 비율을 바꾸고 참고 이미지나 관련 자료를 추가해 주세요. 활용하고 싶은 구조는 남기고 불필요한 조건은 삭제한 뒤 결과를 보며 조정할 수 있습니다.
둘러보기와 프롬프트 복사는 무료인가요?
프롬프트 모음을 둘러보고 프롬프트를 복사하는 것은 100% 무료입니다. PagePop도 무료로 사용할 수 있습니다. 요금과 크레딧 규칙은 요금 페이지에서 확인해 주세요.
PagePop은 무엇이며 어떤 작업을 할 수 있나요?
PagePop은 대화형 AI 창작 플랫폼입니다. 자연어로 원하는 내용을 설명해 이미지, 동영상, 프레젠테이션, 문서와 웹페이지를 만들 수 있습니다. PagePop이 적합한 모델과 도구를 선택하며 같은 대화에서 작업물을 계속 수정할 수 있습니다.
더 많은 실제 프롬프트 예시
UI 모션 디자인 애니메이션 프롬프트
“Ask for eight to twelve UI states, a monochrome or single-accent palette, and a usable track near 120 BPM. Make a 14-second, 1440×1440 loop where one shape becomes a button, loader, player, slider, toggle, tabs, graph,…”
키네틱 타이포그래피 연설 영상
“Stage Build the Floor as a 20-second square typographic film in a self-contained SVG or Canvas HTML file. Use the supplied original miniature speech, with no attribution to a real person, and make its words physically c…”
HTML 의 WebGPU 해양 장면
“Build an ocean scene that runs in the browser as a single HTML file using WebGPU. Drive the sea surface with FFT waves, add whitecaps, and place it under a realistic sky. Include WASD movement so the viewer can explore…”