์ฑ„๋„ํ†ก ์•„์ด์ฝ˜

GSAP์˜ ScrollTrigger๋ฅผ ํ™œ์šฉํ•œ ํฌํŠธํด๋ฆฌ์˜ค ์ œ์ž‘

GSAP์˜ ScrollTrigger๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์Šคํฌ๋กค์— ๋ฐ˜์‘ํ•˜๋Š” ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๋ฐ˜์‘ํ˜• ์›น ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋งŒ๋“ค์–ด๋ด์š”!

(5.0) ์ˆ˜๊ฐ•ํ‰ 41๊ฐœ

์ˆ˜๊ฐ•์ƒ 360๋ช…

๋‚œ์ด๋„ ์ดˆ๊ธ‰

์ˆ˜๊ฐ•๊ธฐํ•œ ๋ฌด์ œํ•œ

์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํผ๋ธ”๋ฆฌ์…”
ํผ๋ธ”๋ฆฌ์…”
์‹ค์Šต ์ค‘์‹ฌ
์‹ค์Šต ์ค‘์‹ฌ
ํผ๋ธ”๋ฆฌ์…”
ํผ๋ธ”๋ฆฌ์…”

์ƒˆ์†Œ์‹

3 ๊ฐœ

  • J.์˜๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ์•ˆ๋…•ํ•˜์„ธ์š”?
    ์‹ค๋ฌด + ๊ฐ•์˜ 25๋…„์ฐจ ๊ฐ•์‚ฌ J.์˜์ž…๋‹ˆ๋‹ค.
    ์š”์ฆ˜ ๋‹ค๋“ค AI ์ž˜ ํ™œ์šฉํ•˜๊ณ  ๊ณ„์‹ ๊ฐ€์š”?

    ๋””์ž์ธ์€ ๋˜๋Š”๋ฐ... ์ฝ”๋”ฉ ๋•Œ๋ฌธ์— ๋Š˜ ๋ง‰ํžˆ์…จ๋˜ ๋ถ„๋“ค,
    ํ˜น์€ AI๋ฅผ ์จ๋ณด๊ธด ํ–ˆ์ง€๋งŒ โ€œ์ด๊ฒŒ ๋งž๋‚˜?โ€ ์‹ถ์œผ์…จ๋˜ ๋ถ„๋“ค๊ป˜
    ์ •๋ง ๋„์›€๋  ๊ฐ•์˜๋ฅผ ์†Œ๊ฐœ๋“œ๋ฆฌ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

    โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€
    ๐ŸŽฏFigma MCP x AI๋กœ 4์‹œ๊ฐ„ ๋งŒ์— ์™„์„ฑํ•˜๋Š” ๋ฐ˜์‘ํ˜• ์›นํฌํŠธํด๋ฆฌ์˜ค
    โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€

    ์ด ๊ฐ•์˜๋Š” ๋‹จ์ˆœํ•œ ํˆด ๊ฐ•์˜๊ฐ€ ์•„๋‹ˆ๋ผ
    ๐Ÿ‘‰๋””์ž์ธ โ†’ ๊ฐœ๋ฐœ โ†’ ๋ฐฐํฌ๊นŒ์ง€ ํ•œ ๋ฒˆ์— ์™„์„ฑํ•˜๋Š” ์‹ค๋ฌด ์›Œํฌํ”Œ๋กœ์šฐ๋ฅผ ๋‹ค๋ฃน๋‹ˆ๋‹ค.


    ๐Ÿ’Ž์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šฐ๋Š” ํ•ต์‹ฌ

    โœ” AI๊ฐ€ ์ดํ•ดํ•˜๋Š” Figma ์„ค๊ณ„ ๋ฐฉ๋ฒ•
    โœ” ๋‚ด ๋””์ž์ธ์„ ๊ทธ๋Œ€๋กœ ๊ตฌํ˜„ํ•˜๋Š” Vibe Coding
    โœ” React ๊ธฐ๋ฐ˜ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ์›น ์ œ์ž‘
    โœ” Git, GitHub, Vercel๊นŒ์ง€ ์‹ค์ œ ๋ฐฐํฌ ๊ฒฝํ—˜

    ๐Ÿ‘‰ ๊ฒฐ๊ณผ๋ฌผ์ด ์•„๋‹ˆ๋ผ
    โ€œAI์™€ ํ•จ๊ป˜ ์ผํ•˜๋Š” ๋ฐฉ๋ฒ•โ€ ์ž์ฒด๋ฅผ ๋ฐฐ์šฐ๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.


    ๐Ÿš€์ˆ˜๊ฐ• ํ›„ ๋ณ€ํ™”

    โœ” ๋””์ž์ธ๋งŒ ํ•˜๋˜ ๋‹จ๊ณ„ โ†’ ๊ฐœ๋ฐœ๊นŒ์ง€ ๊ฐ€๋Šฅํ•œ ์ธ์žฌ๋กœ ์„ฑ์žฅ
    โœ” ์ž‘์—… ์†๋„ โ†’ 3~5๋ฐฐ ์ด์ƒ ํ–ฅ์ƒ
    โœ” ์ทจ์—…/์ด์ง์— ๋ฐ”๋กœ ์“ธ ์ˆ˜ ์žˆ๋Š” ๊ณ ํ€„๋ฆฌํ‹ฐ ํฌํŠธํด๋ฆฌ์˜ค ์™„์„ฑ


    ๐ŸŽฏ์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค

    • ์ฝ”๋”ฉ ๋•Œ๋ฌธ์— ์›น ์ œ์ž‘์„ ํฌ๊ธฐํ–ˆ๋˜ ๋””์ž์ด๋„ˆ

    • AI๋ฅผ ์ œ๋Œ€๋กœ ํ™œ์šฉํ•ด๋ณด๊ณ  ์‹ถ์€ ๋ถ„

    • ๋น ๋ฅด๊ฒŒ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ์™„์„ฑํ•˜๊ณ  ์‹ถ์€ ๋ถ„

    • ๋””์ž์ธ + ๊ฐœ๋ฐœ ์—ญ๋Ÿ‰์„ ๋ชจ๋‘ ๊ฐ–์ถ”๊ณ  ์‹ถ์€ ๋ถ„


    ๐Ÿ”ฅ์ง€๊ธˆ์ด ๊ฐ€์žฅ ์ข‹์€ ํƒ€์ด๋ฐ์ž…๋‹ˆ๋‹ค

    ๐Ÿ‘‰ํ˜„์žฌ 30% ํ• ์ธ ์ง„ํ–‰ ์ค‘!
    ๐Ÿ“…๊ธฐ๊ฐ„: 2026๋…„ 3์›” 17์ผ ~ 3์›” 26์ผ

    ์ด ๊ธฐ๊ฐ„์ด ์ง€๋‚˜๋ฉด ์ •์ƒ๊ฐ€๋กœ ๋Œ์•„๊ฐ€๋‹ˆ
    ๊ด€์‹ฌ ์žˆ์œผ์…จ๋‹ค๋ฉด ์ง€๊ธˆ์ด ๊ฐ€์žฅ ์ข‹์€ ๊ธฐํšŒ์ž…๋‹ˆ๋‹ค.


    ์ด ๊ฐ•์˜๋Š”
    ๋‹จ์ˆœํžˆ ํ•˜๋‚˜์˜ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“œ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ,

    ๐Ÿ‘‰ ์•ž์œผ๋กœ ๊ณ„์† ์จ๋จน์„ ์ˆ˜ ์žˆ๋Š”
    โ€œAI ๊ธฐ๋ฐ˜ ์ œ์ž‘ ๋ฐฉ์‹โ€์„ ๋ชธ์— ์ตํžˆ๋Š” ๊ณผ์ •โ€์ž…๋‹ˆ๋‹ค.

    ํ•œ ๋ฒˆ ์ตํ˜€๋‘๋ฉด
    ์•ž์œผ๋กœ ์ž‘์—… ์†๋„์™€ ํ€„๋ฆฌํ‹ฐ๊ฐ€ ์™„์ „ํžˆ ๋‹ฌ๋ผ์ง‘๋‹ˆ๋‹ค.


    ํŽธํ•˜๊ฒŒ ํ•œ ๋ฒˆ ์‚ดํŽด๋ณด์‹œ๊ณ ,
    ํ’€์Šคํƒ ๋””์ž์ด๋„ˆ๋กœ ์‹ค๋ฌด์—ญ๋Ÿ‰ + ์ƒ์‚ฐ์„ฑ ์—…์‹œํ‚ค์‹œ๊ธธ ์‘์›๋“œ๋ ค์š”^^

    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

    ์•„๋ž˜ ์ฃผ์†Œ๋กœ ์ ‘์†ํ•˜์‹œ๋ฉด ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
    https://inf.run/QLDGi

    0
  • J.์˜๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ์•ˆ๋…•ํ•˜์„ธ์š” ๐Ÿ˜Š
    ๊ฐ•์‚ฌ J.Young์ž…๋‹ˆ๋‹ค.

    ๋“œ๋””์–ด ์ƒˆ๋กœ์šด ๊ฐ•์˜๋กœ ์ธ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.


    ๐Ÿš€ [Figma MCP ร— AI๋กœ 4์‹œ๊ฐ„ ๋งŒ์— ์™„์„ฑํ•˜๋Š” ๋ฐ˜์‘ํ˜• ์›น ํฌํŠธํด๋ฆฌ์˜ค]

    ์ด๋ฒˆ ๊ฐ•์˜๋Š” ๋‹จ์ˆœํ•œ โ€œ์ฝ”๋”ฉ ๊ฐ•์˜โ€๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

    AI๊ฐ€ ์ดํ•ดํ•˜๋Š” ๋””์ž์ธ ์„ค๊ณ„๋ถ€ํ„ฐ,
    AI๋ฅผ ํ™œ์šฉํ•œ ๋ฐ”์ด๋ธŒ ์ฝ”๋”ฉ,
    ๊ทธ๋ฆฌ๊ณ  ์‹ค์ œ ๋ฐฐํฌ๊นŒ์ง€ ์ด์–ด์ง€๋Š” ํ’€์Šคํƒ ์™„์„ฑ ๊ณผ์ •
    ์ž…๋‹ˆ๋‹ค.


    ๐ŸŽฏ ์ด ๊ฐ•์˜์—์„œ ๋ฐฐ์šฐ๋Š” ํ•ต์‹ฌ

    โœ”Figma AutoLayout์„ ํ™œ์šฉํ•œ ์ฒด๊ณ„์ ์ธ ์„ค๊ณ„
    โœ”๋ฐ˜์‘ํ˜• ๊ตฌ์กฐ ์„ค๊ณ„ ๋ฐฉ๋ฒ•
    โœ”Variable ๋“ฑ๋ก โ†’ ํ† ํฐํ™” โ†’ AI๊ฐ€ ์ดํ•ดํ•˜๋Š” ๋””์ž์ธ ๊ตฌ์กฐ ๋งŒ๋“ค๊ธฐ
    โœ”Figma MCP ์„œ๋ฒ„ ์—ฐ๋™์„ ํ†ตํ•œ AI Vibe Coding
    โœ”๋‚ด ๋””์ž์ธ์„ 1ํ”ฝ์…€ ์˜ค์ฐจ ์—†์ด ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•
    โœ”๋ฐฐํฌ๊นŒ์ง€ ์ด์–ด์ง€๋Š” ์‹ค์ „ ํ”„๋กœ์„ธ์Šค

    ๋‹จ์ˆœํžˆ โ€œAI๊ฐ€ ์ฝ”๋“œ๋ฅผ ๋Œ€์‹  ์งœ์ค€๋‹คโ€๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค.

    AI์˜ ์‹ค์ˆ˜๊นŒ์ง€ ์Šค์Šค๋กœ ์ฐพ์•„๋‚ด๊ณ  ๊ตฌ์กฐ๋ฅผ ์ดํ•ดํ•˜๊ณ ,
    ์ตœ์ ํ™”๋œ ๋ฐ˜์‘ํ˜• ์›น์œผ๋กœ ๋ฆฌํŒฉํ† ๋งํ•˜๋Š” ๋Šฅ๋ ฅ๊นŒ์ง€ ํ•จ๊ป˜ ํ›ˆ๋ จํ•ฉ๋‹ˆ๋‹ค.


    ๐Ÿ‘ฉโ€๐Ÿ’ป ์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค

    • ๐ŸŽจ ๋‚ด ๋””์ž์ธ์„ ๊ทธ๋Œ€๋กœ Vibe Coding์œผ๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€ ๋ถ„

    • ๐Ÿง  ๋””์ž์ธ๋ถ€ํ„ฐ ๊ฐœ๋ฐœยท๋ฐฐํฌ๊นŒ์ง€ ๊ฐ€๋Šฅํ•œ ํ’€์Šคํƒ ๋””์ž์ด๋„ˆ๊ฐ€ ๋˜๊ณ  ์‹ถ์€ ๋ถ„

    • ๐Ÿ”ฅ Figma ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ๊นŒ์ง€ ์ œ๋Œ€๋กœ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

    • ๐Ÿ’ป HTML / CSS / JavaScript / Tailwind / React๊นŒ์ง€ ์•Œ๊ณ  ์‹ถ์€ ํ”„๋ก ํŠธ์—”๋“œ ์ž…๋ฌธ์ž

    • โœจ ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•˜๊ณ  ์™„์„ฑ๋„ ๋†’์€ ๋ฐ˜์‘ํ˜• ์›น ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ๋ถ„

    • โšก AI๋ฅผ ํ™œ์šฉํ•ด ์—…๋ฌด ์ƒ์‚ฐ์„ฑ์„ 5๋ฐฐ ์ด์ƒ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ์‹ถ์€ ๋ถ„


    ๐Ÿ“˜ ํ•™์Šต ๋ฐฉ์‹

    ๋ชจ๋“  ๊ณผ์ •์€ ๋…ธ์…˜์œผ๋กœ ์ฒด๊ณ„์ ์œผ๋กœ ์ •๋ฆฌ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
    ์„ค๊ณ„ โ†’ ๊ตฌํ˜„ โ†’ ์ˆ˜์ • โ†’ ๋ฐฐํฌ๊นŒ์ง€
    ์—ฌ๋Ÿฌ๋ถ„์ด ์Šค์Šค๋กœ ๋ณต์Šตํ•˜๊ณ  ๋ฐ˜๋ณต ํ•™์Šตํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.


    AI ์‹œ๋Œ€,
    ์ด์ œ๋Š” โ€œ์ฝ”๋”ฉ์„ ์ž˜ํ•˜๋Š” ์‚ฌ๋žŒโ€์ด ์•„๋‹ˆ๋ผ
    AI์™€ ํ•จ๊ป˜ ๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ๊ฒฐ๊ณผ๋ฅผ ๋งŒ๋“ค์–ด๋‚ด๋Š” ์‚ฌ๋žŒ์ด ๊ฒฝ์Ÿ๋ ฅ์ž…๋‹ˆ๋‹ค.

    4์‹œ๊ฐ„ ์•ˆ์—,
    ์—ฌ๋Ÿฌ๋ถ„์˜ ํฌํŠธํด๋ฆฌ์˜ค๋ฅผ ํ•œ ๋‹จ๊ณ„ ๋Œ์–ด์˜ฌ๋ ค๋ณด์„ธ์š”.

    ๊ฐ•์˜์—์„œ ๋งŒ๋‚˜๊ฒ ์Šต๋‹ˆ๋‹ค.

    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.
    ๊ฐ•์‚ฌ J.Young ๋“œ๋ฆผ

    0
  • J.์˜๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ๏ฝฅ

    ์ˆ˜์ •๋จ

    ์•ˆ๋…•ํ•˜์„ธ์š”? ๊ฐ•์‚ฌ J.young์ž…๋‹ˆ๋‹ค.

    ์‹ค์ „! ScrollTrigger๋ฅผ ํ™œ์šฉํ•œ ํฌํŠธํด๋ฆฌ์˜ค ์ œ์ž‘ ๊ฐ•์˜๋ฅผ
    ์ง€๋‚œ 2์ฐจ ์—…๋ฐ์ดํŠธ ์˜์ƒ์„ ๋ฐ˜์‘ํ˜•์›น์œผ๋กœ ์ถ”๊ฐ€ ์ œ์ž‘ํ•˜์˜€์œผ๋ฉฐ, ์ด์–ด 3์ฐจ๋ถ€ํ„ฐ 7์ฐจ๊นŒ์ง€ ์—…๋ฐ์ดํŠธ๋ฅผ
    ์•„๋ž˜์™€ ๊ฐ™์ด ์ง„ํ–‰ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
    ํ™•์ธํ•˜์‹œ๊ณ  ํฌํŠธํด๋ฆฌ์˜ค ์ œ์ž‘๊ณผ ์‹ค๋ฌด์— ๋งŽ์€ ๋„์›€์ด ๋˜์‹œ๊ธธ ์‘์› ๋“œ๋ฆฝ๋‹ˆ๋‹ค.
    ๋ณด๋‹ค ํ–‰๋ณตํ•˜๊ณ  ํ’์„ฑํ•œ ์ถ”์„ ํ•œ๊ฐ€์œ„ ๋ณด๋‚ด์„ธ์š”~
    ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

    J.young๋“œ๋ฆผ

    ์—…๋ฐ์ดํŠธ ์˜์ƒ ๊ฒฐ๊ณผ๋ฌผ =>
    - 2์ฐจ : ์—…๋ฐ์ดํŠธ ์˜์ƒ ๋ฐ˜์‘ํ˜• ๊ฒ”๋Ÿฌ๋ฆฌ ์ถ”๊ฐ€์ œ์ž‘
    image
    -3์ฐจ : Y์ถ•์œผ๋กœ ์Šคํฌ๋กค ๋˜๋Š” ๊ฒ”๋Ÿฌ๋ฆฌ์ œ์ž‘image

    -4์ฐจ : ๋งˆ์šฐ์Šค ํฌ์ธํ„ฐ์— ๋”ฐ๋ผ๋‹ค๋‹ˆ๋Š” ์ด๋ฏธ์ง€ ์ œ์ž‘
    image

    -5์ฐจ : ๊ณ ์ •๋œ ์„น์…˜์— Y์ถ•์œผ๋กœ ํ•˜์œ„์„น์…˜ ์Šคํฌ๋กค๋˜๋Š” ์ธํ„ฐ๋ ‰ํ‹ฐ๋ธŒ์ œ์ž‘
    image
    - 6์ฐจ : X์ถ•์œผ๋กœ ์ขŒ์šฐ๋กœ ํ”๋“ค๋ฆฌ๋ฉฐ ์Šคํฌ๋กค ๋˜๋Š” ๊ฒ”๋Ÿฌ๋ฆฌ ์ œ์ž‘
    image

    7์ฐจ : ์Šคํฌ๋กค ์‹œ ์ธ์‚ฌํ•˜๋Š” ์บ๋ฆญํ„ฐ/ ๋งˆ์šฐ์Šค์— ๋”ฐ๋ผ ์นผ๋ผ๊ฐ€ ์ฑ„์›Œ์ง€๋Š” ํ…์ŠคํŠธ/ ๋ฌผ๊ฒฐ ํ…์ŠคํŠธ ์ œ์ž‘
    image

    3

โ‚ฉ66,000