Motion Tuner์˜ ์ƒํ’ˆ ๋กœ๊ณ  ์ด๋ฏธ์ง€

Motion Tuner

Motion Tuner์˜ ํ•ญ๋ชฉ ๋ฏธ๋””์–ด 1(์Šคํฌ๋ฆฐ์ƒท)

๊ฐœ์š”

ํŽ˜์ด์ง€์˜ CSS transition / animation ์„ ์‹ค์‹œ๊ฐ„์œผ๋กœ ์กฐ์ ˆํ•˜๊ณ  CSS ์ฝ”๋“œ๋กœ ๋‚ด๋ณด๋ƒ…๋‹ˆ๋‹ค.

๋ˆˆ์œผ๋กœ ๋ณด๊ณ , ์ง์ ‘ ์กฐ์ ˆํ•˜๋Š” ์›น ๋ชจ์…˜ ๋„๊ตฌ โ€” Motion Tuner โ€œ์กฐ๊ธˆ ๋” ๋น ๋ฅด๊ฒŒโ€, โ€œ๋” ๋ถ€๋“œ๋Ÿฝ๊ฒŒโ€๋ฅผ ์‹ค์ œ ํ™”๋ฉด์—์„œ ์กฐ์ ˆํ•ด ๋ณด์„ธ์š”. ์ฝ”๋“œ๋ฅผ ์ง์ ‘ ์ˆ˜์ •ํ•˜์ง€ ์•Š์•„๋„ ์›นํŽ˜์ด์ง€์˜ CSS ์›€์ง์ž„์„ ํ™•์ธํ•˜๊ณ , ์›ํ•˜๋Š” ์„ค์ •์„ ๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฃผ์š” ๊ธฐ๋Šฅ โ€ข ํ™”๋ฉด์—์„œ ์›€์ง์ž„์ด ์žˆ๋Š” ์š”์†Œ๋ฅผ ์ง์ ‘ ์„ ํƒ โ€ข ๊ฑธ๋ฆฌ๋Š” ์‹œ๊ฐ„๊ณผ ์‹œ์ž‘ ์ „ ๋Œ€๊ธฐ ์‹œ๊ฐ„ ์กฐ์ ˆ โ€ข ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ, ๊ฒฝ์พŒํ•˜๊ฒŒ ๋“ฑ ์›€์ง์ž„ ๋А๋‚Œ ์„ ํƒ โ€ข ํ˜ธ๋ฒ„ยท๋ˆ„๋ฅด๊ธฐ ํšจ๊ณผ์™€ ์ง€์›๋˜๋Š” ๋“ฑ์žฅ ํšจ๊ณผ ๋ฏธ๋ฆฌ๋ณด๊ธฐ โ€ข ์—ฌ๋Ÿฌ ์š”์†Œ์˜ ์ˆœ์ฐจ ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ๊ฐ„๊ฒฉ ์กฐ์ ˆ โ€ข ๋ณ€๊ฒฝํ•œ ์„ค์ • ๋˜๋Œ๋ฆฌ๊ธฐ โ€ข CSS ์ฝ”๋“œ์™€ ๋ชจ์…˜ ์ˆ˜์ • ์š”์ฒญ ๋‚ด์šฉ ๋ณต์‚ฌ ์‚ฌ์šฉ ๋ฐฉ๋ฒ• 1. ์กฐ์ ˆํ•  ์›นํŽ˜์ด์ง€์—์„œ Motion Tuner๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค. 2. ๋ณด๋ผ์ƒ‰ ํ…Œ๋‘๋ฆฌ๋กœ ํ‘œ์‹œ๋œ ์š”์†Œ๋ฅผ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. 3. ์‹œ๊ฐ„๊ณผ ์›€์ง์ž„ ๋А๋‚Œ์„ ์กฐ์ ˆํ•˜๊ณ  ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. 4. โ€˜๊ฐœ๋ฐœ์ž์—๊ฒŒ ์ „๋‹ฌโ€™์„ ๋ˆŒ๋Ÿฌ ์ˆ˜์ • ๋‚ด์šฉ์„ ๋ณต์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๊ฐ™์€ ํ™”๋ฉด์„ ๋ณด๋ฉฐ ๋ชจ์…˜์„ ๊ตฌ์ฒด์ ์œผ๋กœ ํ˜‘์˜ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ง€์› ๋ฒ”์œ„ CSS transition๊ณผ animation์„ ์ค‘์‹ฌ์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ผ๋ถ€ ์™ธ๋ถ€ ์Šคํƒ€์ผ, iframe ๋‚ด๋ถ€, JavaScript ๊ธฐ๋ฐ˜ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๊ฐ์ง€๋‚˜ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๊ฐ€ ์ œํ•œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ํ˜„์žฌ ํŽ˜์ด์ง€์—์„œ ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋กœ ์ ์šฉ๋˜๋ฉฐ, ์‚ฌ์ดํŠธ ์›๋ณธ์— ์ €์žฅ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์„ธ๋ถ€์ •๋ณด

  • ๋ฒ„์ „
    0.8.3
  • ์—…๋ฐ์ดํŠธ๋จ
    2026๋…„ 9์›” 28์ผ
  • ์ œ๊ณต
    leepuu001
  • ํฌ๊ธฐ
    61.11KiB
  • ์–ธ์–ด
    ํ•œ๊ตญ์–ด
  • ๊ฐœ๋ฐœ์ž
    ์ด๋ฉ”์ผ
    leepuu001@gmail.com
  • ๋น„ํŒ๋งค์ž
    ํŒ๋งค์ž๋กœ ์‹๋ณ„๋˜์ง€ ์•Š์€ ๊ฐœ๋ฐœ์ž์ž…๋‹ˆ๋‹ค. ์œ ๋Ÿฝ ์—ฐํ•ฉ์— ๊ฑฐ์ฃผํ•˜๋Š” ์†Œ๋น„์ž์˜ ๊ฒฝ์šฐ, ์ด ๊ฐœ๋ฐœ์ž์™€ ์ฒด๊ฒฐํ•œ ๊ณ„์•ฝ์— ๋Œ€ํ•ด์„œ๋Š” ์†Œ๋น„์ž ๊ถŒ๋ฆฌ๊ฐ€ ์ ์šฉ๋˜์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Œ์„ ์œ ์˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ฐœ์ธ์ •๋ณด ๋ณดํ˜ธ

ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์„ ๊ด€๋ฆฌํ•˜๊ณ  ์กฐ์ง์—์„œ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ฐฉ์‹์„ ์•Œ์•„๋ณด์„ธ์š”.
๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ํ•˜๊ฑฐ๋‚˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ฒ ๋‹ค๊ณ  ๋ช…์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ž์„ธํžˆ ์•Œ์•„๋ณด๋ ค๋ฉด ๊ฐœ๋ฐœ์ž์˜ privacy policy ๋ฌธ์„œ๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

๊ฐœ๋ฐœ์ž๊ฐ€ ์‚ฌ์šฉ์ž ๋ฐ์ดํ„ฐ์— ๊ด€ํ•ด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ ์–ธํ–ˆ์Šต๋‹ˆ๋‹ค

  • ์Šน์ธ๋œ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์ œ์™ธํ•˜๊ณ  ์„œ๋“œ ํŒŒํ‹ฐ์— ํŒ๋งคํ•˜์ง€ ์•Š์Œ
  • ํ•ญ๋ชฉ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ๊ณผ ๊ด€๋ จ ์—†๋Š” ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ „์†กํ•˜์ง€ ์•Š์Œ
  • ์‹ ์šฉ๋„ ํŒ๋‹จ ๋˜๋Š” ๋Œ€์ถœ ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ „์†กํ•˜์ง€ ์•Š์Œ

๊ด€๋ จ ํ•ญ๋ชฉ

Custom Style Script

4.2

Add Custom JavaScript (JS) Code or Styles (CSS) to any page.

Design to Motion

0.0

Capture the current page DOM, CSS boxes, text, and image metadata as motion-ready JSON.

PageShift AI โ€“ Web to Elementor Converter

5.0

Capture sections or full pages as editable Elementor layouts with CSS effects, hover states, and animations.

Speed Up Pages

0.0

Speed up webpage timers and animation frames.

CSS Brio

5.0

CSS Brio is a fast CSS Animation viewer and CSS code provider for Designers.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Moonly - javascript and css injector

5.0

Inject javascript and css into pages dynamically.

Animated Image Controls - Scrub through animated WebP, GIF, AVIF, APNG

5.0

Scrub through animated images (WebP, GIF, AVIF, APNG) like a video

Capture Motion

5.0

Capture an animation from any website and export it as code or a Figma Motion timeline.

GIF Blocker

3.6

Block GIF and WebP animation images on HTML pages to reduce bandwidth and resource usage

BSpeed โ€” Gรถrsel Hฤฑz Kontrolรผ

5.0

Tek anahtarla sayfa ve gรถmรผlรผ iรงerik hฤฑzlandฤฑrma. Animasyon, medya, sayfa saati ve kฤฑsa zamanlayฤฑcฤฑlar iรงin hฤฑz kontrolรผ.

Motion DevTools

4.6

Inspect, edit and export animations made with CSS and Motion One.

Custom Style Script

4.2

Add Custom JavaScript (JS) Code or Styles (CSS) to any page.

Design to Motion

0.0

Capture the current page DOM, CSS boxes, text, and image metadata as motion-ready JSON.

PageShift AI โ€“ Web to Elementor Converter

5.0

Capture sections or full pages as editable Elementor layouts with CSS effects, hover states, and animations.

Speed Up Pages

0.0

Speed up webpage timers and animation frames.

CSS Brio

5.0

CSS Brio is a fast CSS Animation viewer and CSS code provider for Designers.

UI Inspector - Visual CSS Editor

4.0

Inspect and visually edit elements and their CSS directly on the page for faster design and UI debugging.

Moonly - javascript and css injector

5.0

Inject javascript and css into pages dynamically.

Animated Image Controls - Scrub through animated WebP, GIF, AVIF, APNG

5.0

Scrub through animated images (WebP, GIF, AVIF, APNG) like a video

Google ์•ฑ