Figma MCP ร AI x Vibe Coding 4์๊ฐ๋ง์ ์์ฑํ๋ ๋ฐ์ํ ์นํฌํธํด๋ฆฌ์ค
Figma๋์์ธ + AIํ์ฉ์ฝ๋ฉ + ๋ฐฐํฌ๊น์ง ํ์คํ ์ฝ์ค!! [ํผ๊ทธ๋ง + ๋ฐ์ด๋ธ์ฝ๋ฉ (HTML/CSS/Tailwind/React) + Git + vercel ๋ฐฐํฌ] ๋ด ๋์์ธ ๊ทธ๋๋ก!! 1ํฝ์ ๋ ์ค์ฐจ์์ด ๋ฐ์ด๋ธ์ฝ๋ฉ์ผ๋ก ์์ฑ! AIํ์ฉ์ผ๋ก ์ค๋ฌด ์์ฐ์ฑ์ 5๋ฐฐ ๋์ด๋ ํ์คํ ๊ณต๋ต์ง! ๋์์ธ๋ ์ฝ๋ฉ๋ ๋ชจ๋ ๊ฐ๋ฅํ ํ์คํ ๋์์ด๋, ๋น์ ๋ ๋ ์ ์์ต๋๋ค. โ ๋ด ๋์์ธ์ ์๋๊น์ง ํ ํฝ์ ์ ์ค์ฐจ ์์ด ๊ตฌํ โ AI๊ฐ ์ดํดํ๋ ๋์์ธ ์ค๊ณ โ AI๋ฅผ ์ ํํ๊ฒ ํต์ ํ๋ ํ๋กฌํํธ ์ ์๋ฅ๋ ฅ โ AI๊ฐ ๋ง๋๋ก ์์ฑํ ์ฝ๋ ์ฒ์ฒ ์์ ๋ฅ๋ ฅ ๋์์ธ๋ถํฐ ์ฝ๋ฉ ๋ฐฐํฌ๊น์ง 1/5๋ก ๋จ์ถ๋๋ ๋๋ผ์ด ๊ฒฝํ์ ๋๋ฆฝ๋๋ค.
์๊ฐ์ 216๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
๋ค๋ฅธ ์๊ฐ์๋ค์ด ์์ฃผ ๋ฌผ์ด๋ณด๋ ์ง๋ฌธ์ด ๊ถ๊ธํ์ ๊ฐ์?
- ๋ฏธํด๊ฒฐ
์ปค์, ํด๋ก๋, ํผ๊ทธ๋ง๋ ๋ชจ๋ ์ ๋ฃ๋ฒ์ ์ ์ฌ์ฉํด์ผํ๋์?
์๋ ํ์ธ์. ์ ์๋,์ปค์, ํด๋ก๋, ํผ๊ทธ๋ง๋ ๋ชจ๋ ์ ๋ฃ๋ฒ์ ์ ์ฌ์ฉํด์ผํ๋์?๊ฐ๊ฐ ๋ฒ์ ์ด๋๊ฑธ ์ฐ๋ฉด ์ข์์ง
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉJJJ
ใป
21์๊ฐ ์
0
15
1
- ๋ฏธํด๊ฒฐ
์๋ ํ์ธ์, ๊ฐ์ข 5์ ํผ๊ทธ๋ง ํ์ผ์ ์ด๋์ ๋ณผ ์ ์๋์?
์๋ ํ์ธ์, ๊ฐ์ข 5์ ํผ๊ทธ๋ง ํ์ผ(๋ผ์ด๋ธํด๋์ค ๊ฐ์ข)์ ์ด๋์ ๋ค์ด๋ฐ์ ์ ์๋์?
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉprayforyooh
ใป
8์ผ ์
0
52
2
- ๋ฏธํด๊ฒฐ
๋ ธ์ ์ 20.Contact๊ฐ ์์ด์
๋ ธ์ ์ ๋ฆฌ๋ณธ์ 20.Contact์ ๊ดํ ๋ด์ฉ์ด ์์ด 19๋ฒ์์ 21๋ฒ์ผ๋ก ๊ฑด๋๋ฐ์ด์<img src="https://cdn.inflearn.com/public/files/posts/827b242c-a98e-4b6
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉ๊น๊ฐํฌ
ใป
13์ผ ์
0
42
2
- ๋ฏธํด๊ฒฐ
Json ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ์ variable collection ์์
์๋ ํ์ธ์. Jsonํ ํ๋ ค๊ณ ํ๋ฌ๊ทธ์ธ ์ค์ต์ ํด๋ณด๊ณ ์๋๋ฐ, ์ ์๋์ด ์ ๋ก๋ํด์ฃผ์ ํ์ผ๋ค์ ์ ๋๋ํํธ์ ๋ณต๋ถํ๊ณ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.ํ๋ฌ๊ทธ์ธ ์คํ์ ๋ค์๊ณผ ๊ฐ์ด
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉ๊นํ๋ น
ใป
ํ ๋ฌ ์
0
47
2
- ๋ฏธํด๊ฒฐ
๋ฐฐ๋ฆฌ์ด๋ธ ๋ชฉ๋ก ์์
์๋ ํ์ธ์. ์ฒจ๋ถํด์ฃผ์ Figma ํ์ผ์ ๋ณต์ฌํด์ ์ ํผ๊ทธ๋ง๋ก ๊ฐ์ ธ์จ ํ, ๋ฐฐ๋ฆฌ์ด๋ธ์ด ์ ๋์ค๋์ง ๋ณด๊ธฐ ์ํด ํด๋ฆญํ๋๋ฐ์.์ ์๋ ํ๋ฉด์๋ ์๋์ฐ ์๋จ์ respo
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉ๊นํ๋ น
ใป
ํ ๋ฌ ์
0
73
3
- ๋ฏธํด๊ฒฐ
Token ๋ฑ๋ก ๋ฐฉ๋ฒ ๋ฌธ์
์๋ ํ์ธ์. ๋ฐฐ๋ฆฌ์ด๋ธ ์์ฑ๋ฒ ๊ด๋ จํ์ฌ ๊ถ๊ธํ ์ ์ด ์์ต๋๋ค.๊ฐ์์์๋ ๋ชจ๋ ์ปดํฌ๋ํธ์ ๋ํ์ฌ ๋ฐฐ๋ฆฌ์ด๋ธ ๊ฐ์ ์ชผ๊ฐ์ ๋ฑ๋กํ๋๊ฒ์ผ๋ก ์ดํดํ์๋๋ฐ์.<p sty
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉ๊นํ๋ น
ใป
ํ ๋ฌ ์
0
35
1
- ํด๊ฒฐ
๋ ธ์ 25 ์ธํฐ๋ ์ ๊ตฌํ ํํธ ์ ๋ณด์ ๋๋ค!
<img src="https://cdn.inflearn.com/public/files/posts/572a64a7-9957-47af-abe9-68606c1bf1b6/e1897c09-bb19-44f5-82f6-476de16573cd.png" media-type="img"
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉ์๋ฆฌ์ค์ฌ๋ฆฌ์ค
ใป
ํ ๋ฌ ์
0
53
2
- ๋ฏธํด๊ฒฐ
figma variable ๋ฐ์ํ ๋์์ธ ๊ฒฐ๊ณผ๋ฌผ ๊ณต๋
figma variable ์ฐ๊ฒฐ ๊ฒฐ๊ณผ๋ฌผ์ url์ด ์๋๋ฐ, ์ด๋์ ๋ฐ์ ์ ์์๊น์? ๋ค์ ๊ฑธ์ด์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.<img src="https://cdn.inflearn.com/public/files/posts
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉ์ฑํฌ
ใป
2๋ฌ ์
0
87
2
- ๋ฏธํด๊ฒฐ
๋ก๊ณ ์ด๋ฏธ์ง๊ฐ์๋๋ฐ์..
๋ก๊ณ ์ด๋ฏธ์ง ์ ๋ก๋ํด์ฃผ์ธ์
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉ์์ง
ใป
3๋ฌ ์
0
73
2
- ๋ฏธํด๊ฒฐ
ํผ๊ทธ๋ง AI๊ธฐ๋ฅ ๊ด๋ ค
ํผ๊ทธ๋ง์์ ๋ ์ด์ด ์ด๋ฆ ์ผ๊ด๋ฐ๊พธ๊ธฐ ๊ธฐ๋ฅ์ ์ฐ๋ฉด ์ ๋ถ ์ฒซ๊ธ์๊ฐ ๋๋ฌธ์๋ก ๋ฐ๋๋๋ฐ ์ง์ ์๋ฌธ์๋ก ๋ฐ๊พธ๋ ์์ ์ ํด์ผํ๋์?
HTML/CSSfigmaํฌํธํด๋ฆฌ์ค์ธ๊ณต์ง๋ฅ(ai)๋ฐ์ด๋ธ์ฝ๋ฉDongHawn Hwang
ใป
3๋ฌ ์
0
87
2
- ๋ฏธํด๊ฒฐ
hero-img ์ด๋ฏธ์ง
์ ์๋์ด ์ฃผ์ ์ด๋ฏธ์ง์ค, hero-img(png)๋ ์์ง๋ง svg๋ ์์ต๋๋ค. ํ์ธ๋ถํ ๋๋ฆฝ๋๋ค.
HTML/CSSfigmaํฌํธํด๋ฆฌ์คai-ํ์ฉ-(ax)๋ฐ์ด๋ธ์ฝ๋ฉ๋น์ด๋
ใป
3๋ฌ ์
0
88
1
- ๋ฏธํด๊ฒฐ
ํฐํธํ์ธ ๋ถํ ๋๋ฆฝ๋๋ค.
ํฐํธPPEditorialNew ํฐํธ๋ค์ด : <a target="_blank" rel="noopener noreferrer nofollow" href="https:
HTML/CSSfigmaํฌํธํด๋ฆฌ์คai-ํ์ฉ-(ax)๋ฐ์ด๋ธ์ฝ๋ฉ์์ฑ์ ์์
ใป
3๋ฌ ์
0
83
2