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

๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ & Tailwind CSS

AI ํ™œ์šฉ๊ณผ ์ปดํฌ๋„ŒํŠธ ์ค‘์‹ฌ UI ์ œ์ž‘์œผ๋กœ ๋ฐฐ์šฐ๋Š” ์‹ค๋ฌดํ˜• ์›น UI ๊ฐœ๋ฐœ, ๋””์ž์ด๋„ˆ+๊ฐœ๋ฐœ์ž ํ•„์ˆ˜ ์ฝ”์Šค!

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

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

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

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

์ˆ˜๊ฐ• ํ›„ ์ด๋Ÿฐ๊ฑธ ์–ป์„ ์ˆ˜ ์žˆ์–ด์š”

  • Vite๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์ธ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ๊ตฌ์ถ•ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ DOM์„ ์กฐ์ž‘ํ•˜๊ณ , ์ด๋ฒคํŠธ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋ฉฐ, ๋™์ ์ธ UI๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

  • Tailwind CSS๋ฅผ ํ™œ์šฉํ•ด CSS๋ฅผ ๊ธธ๊ฒŒ ์ž‘์„ฑํ•˜์ง€ ์•Š๊ณ ๋„ ๋น ๋ฅด๊ฒŒ UI ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค.

  • AI Code Assistant๋ฅผ ํ†ตํ•ด ์ฝ”๋“œ ์ž‘์„ฑ์„ ๋‹จ์ถ•ํ•˜๊ณ  ํ’ˆ์งˆ์„ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์‹ค๋ฌด์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๋ชจ๋‹ฌ, ๋“œ๋กญ๋‹ค์šด, ์•„์ฝ”๋””์–ธ, ํ† ๊ธ€ ๋ฉ”๋‰ด ๋“ฑ์˜ UI๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•ด ๋ด…๋‹ˆ๋‹ค.

๋น ๋ฅด๊ฒŒ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋‹ค์ง€๊ณ  ํ˜„๋Œ€์ ์ธ ์›น ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ๋‚˜์š”? ๐Ÿš€

์ด ๊ฐ•์˜๋Š” ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž๋ฅผ ์œ„ํ•œ ์‹ค์ „ ์›น ๊ฐœ๋ฐœ ๊ณผ์ •์ž…๋‹ˆ๋‹ค. React๋‚˜ Vue ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ ์—†์ด, ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ TailwindCSS๋งŒ์œผ๋กœ ์‹ค๋ฌด์—์„œ ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ํ•„์ˆ˜ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์Šคํƒ€์ผ๋งํ•˜๊ณ  ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด ๋ด…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๋‚ด์šฉ์„ ๋ฐฐ์›Œ์š”

1โƒฃ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ

์›น ๊ฐœ๋ฐœ์˜ ๊ธฐ๋ณธ์ธ vanilla-javascript๋ฅผ ํ†ตํ•ด ๊ธฐ์ดˆ ๋ฌธ๋ฒ•๋ถ€ํ„ฐ DOM ์กฐ์ž‘, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ๊นŒ์ง€ ํƒ„ํƒ„ํžˆ ๋‹ค์ง‘๋‹ˆ๋‹ค. ํ”„๋ ˆ์ž„์›Œํฌ ์—†์ด๋„ ๋™์ž‘ํ•˜๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉฐ JavaScript์˜ ํ•ต์‹ฌ ๊ฐœ๋…์„ ์ •ํ™•ํžˆ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2โƒฃ TailwindCSS๋กœ ๋น ๋ฅด๊ฒŒ ์Šคํƒ€์ผ๋ง ํ•˜๊ธฐ

๋ณต์žกํ•œ CSS ์ž‘์„ฑ ์—†์ด, ํด๋ž˜์Šค๋งŒ์œผ๋กœ ์„ธ๋ จ๋œ ์›น ๋””์ž์ธ์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” Tailwind CSS๋ฅผ ๋ฐฐ์›๋‹ˆ๋‹ค. ๋ฐฐ๊ฒฝ์ƒ‰, ์—ฌ๋ฐฑ, ํฐํŠธ ํฌ๊ธฐ ๋“ฑ์˜ ์Šคํƒ€์ผ์„ ๋น ๋ฅด๊ฒŒ ์ ์šฉํ•˜๋ฉฐ ๋ฐ˜์‘ํ˜• ์›น๋„ ๊ฐ„ํŽธํ•˜๊ฒŒ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.

tailwindcss

3โƒฃ ์‹ค์ „ ํ”„๋กœ์ ํŠธ(UI ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ)

UI ์ปดํฌ๋„ŒํŠธ ๊ฐœ๋ฐœ์„ ์ค‘์‹ฌ์œผ๋กœ, ์‹ค์ œ ์›น์‚ฌ์ดํŠธ์— ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋‹ฌ์ฐฝ, ๋“œ๋กญ๋‹ค์šด ๋ฉ”๋‰ด, ์•„์ฝ”๋””์–ธ ๋ฉ”๋‰ด๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค. ๋””์ž์ธ๊ณผ ๋™์ž‘์„ ์—ฐ๊ฒฐํ•˜๋ฉฐ, frontend ์‹ค๋ฌด์— ๋ฐ”๋กœ ์ ์šฉ ๊ฐ€๋Šฅํ•œ ๊ธฐ์ˆ ๋ ฅ์„ ์Œ“์Šต๋‹ˆ๋‹ค.

4โƒฃ AI ํ™œ์šฉ

AI ๋„๊ตฌ(Google Gemini)๋ฅผ ํ™œ์šฉํ•ด ๊ฐœ๋ฐœ๊ณผ ๋””์ž์ธ ์—…๋ฌด๋ฅผ ๋” ๋น ๋ฅด๊ณ  ์Šค๋งˆํŠธํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฒ•๋„ ํ•จ๊ป˜ ๋ฐฐ์›๋‹ˆ๋‹ค.

๐ŸŽฏ ๊ฐ•์˜์˜ ํƒ€๊ฒŸ์ธต (๋ˆ„๊ฐ€ ์ด ๊ฐ•์˜๋ฅผ ๋“ค์„๊นŒ?)

  1. ์›น ๋””์ž์ด๋„ˆ โ†’ Tailwind CSS๋ฅผ ๋ฐฐ์šฐ๊ณ  ๊ฐœ๋ฐœ์ž์™€ ํ˜‘์—…ํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  2. ์ดˆ๋ณด ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž โ†’ ๋ฐ”๋‹๋ผ JS์™€ Tailwind๋ฅผ ํ™œ์šฉํ•ด UI ๊ฐœ๋ฐœ์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  3. ๊ฐœ๋ฐœ์ž๋กœ ์ „ํ™˜์„ ๊ณ ๋ฏผํ•˜๋Š” ๋””์ž์ด๋„ˆ โ†’ ๋””์ž์ธ ๊ฐ๊ฐ์„ ์‚ด๋ ค ์›น ๊ฐœ๋ฐœ๊นŒ์ง€ ํ•˜๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  4. ์Šคํƒ€ํŠธ์—… ๊ฐœ๋ฐœ์ž โ†’ ๋น ๋ฅด๊ฒŒ ํ”„๋กœํ† ํƒ€์ž…์„ ๋งŒ๋“ค๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

  5. CSS๋ฅผ ์–ด๋ ค์›Œํ•˜๋Š” ๊ฐœ๋ฐœ์ž โ†’ Tailwind๋ฅผ ํ†ตํ•ด CSS๋ฅผ ์‰ฝ๊ฒŒ ๋‹ค๋ฃจ๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ

์ˆ˜๊ฐ• ์ „ ์ฐธ๊ณ  ์‚ฌํ•ญ

์‹ค์Šต ํ™˜๊ฒฝ

  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „(OS): Windows, macOS, Linux ๋“ฑ ๋ชจ๋“  OS๊ฐ€ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

  • ์‚ฌ์šฉ ๋„๊ตฌ: Visual Studio Code, Node.js & npm

  • PC ์‚ฌ์–‘: ์ธํ„ฐ๋„ท ์ ‘์†์ด ๊ฐ€๋Šฅํ•œ ๊ธฐ๋ณธ ์‚ฌ์–‘์˜ PC

ํ•™์Šต ์ž๋ฃŒ

  • ์ œ๊ณตํ•˜๋Š” ํ•™์Šต ์ž๋ฃŒ ํ˜•์‹: ๊นƒํ—ˆ๋ธŒ ์†Œ์Šค์ฝ”๋“œ, ํ…์ŠคํŠธ ๊ฐ•์˜ ์ž๋ฃŒ

  • ๋ถ„๋Ÿ‰ ๋ฐ ์šฉ๋Ÿ‰: ๊ฐ ์„น์…˜๋ณ„๋กœ ํ•™์Šต ์ž๋ฃŒ ์ œ๊ณต

์„ ์ˆ˜ ์ง€์‹

์ด ๊ฐ•์˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ ์›น ๊ฐœ๋ฐœ์— ์ต์ˆ™ํ•˜์ง€ ์•Š์€ ์ดˆ๋ณด์ž๋„ ์ˆ˜๊ฐ•ํ•  ์ˆ˜ ์žˆ๋„๋ก ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์•„๋ž˜์˜ ๊ธฐ๋ณธ ์ง€์‹์„ ์•Œ๊ณ  ์žˆ๋‹ค๋ฉด ๋”์šฑ ์ˆ˜์›”ํ•˜๊ฒŒ ๋”ฐ๋ผ์˜ค์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • HTML, CSS ๊ธฐ์ดˆ

  • ํฌํ† ์ƒต ๋˜๋Š” Figma ๊ธฐ์ดˆ


์ด๋Ÿฐ ๋ถ„๋“ค๊ป˜
์ถ”์ฒœ๋“œ๋ ค์š”

ํ•™์Šต ๋Œ€์ƒ์€
๋ˆ„๊ตฌ์ผ๊นŒ์š”?

  • ํ”„๋ ˆ์ž„์›Œํฌ ์—†์ด ์ˆœ์ˆ˜ JavaScript๋กœ UI๋ฅผ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€ ๊ฐœ๋ฐœ์ž

  • CSS ์—†์ด๋„ ๋น ๋ฅด๊ฒŒ ์Šคํƒ€์ผ๋งํ•˜๊ณ  ์‹ถ์€ ๋””์ž์ด๋„ˆ & ํผ๋ธ”๋ฆฌ์…”

  • ์‹ค๋ฌด์—์„œ ์ž์ฃผ ์“ฐ์ด๋Š” UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ง์ ‘ ๋งŒ๋“ค์–ด ๋ณด๊ณ  ์‹ถ์€ ๋ถ„

  • ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž์˜ ํ˜‘์—… ํ”„๋กœ์„ธ์Šค๋ฅผ ์ตํžˆ๊ณ  ์‹ถ์€ ๋ถ„

  • ์ตœ์‹  ์›น ๊ฐœ๋ฐœ ํ™˜๊ฒฝ๊ณผ ํšจ์œจ์ ์ธ ๊ฐœ๋ฐœ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๊ณ  ์‹ถ์€ ๋ถ„

์„ ์ˆ˜ ์ง€์‹,
ํ•„์š”ํ• ๊นŒ์š”?

  • html, css ๊ธฐ์ดˆ

์•ˆ๋…•ํ•˜์„ธ์š”
Michael Kwon์ž…๋‹ˆ๋‹ค.

258

๋ช…

์ˆ˜๊ฐ•์ƒ

36

๊ฐœ

์ˆ˜๊ฐ•ํ‰

17

๊ฐœ

๋‹ต๋ณ€

4.9

์ 

๊ฐ•์˜ ํ‰์ 

5

๊ฐœ

๊ฐ•์˜

์Šคํƒ€ํŠธ์—…์—์„œ ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ์ฝ˜ํ…์ธ  ํฌ๋ฆฌ์—์ดํ„ฐ๋กœ ์ž…๋ฌธํ•˜์—ฌ ํ•œ ๋ถ„์•ผ์—๋งŒ ๋จธ๋ฌผ์ง€ ์•Š๊ณ  ๊ฒŒ์ž„๊ณผ ์›น, ๋ฉ€ํ‹ฐ๋ฏธ๋””์–ด ๋ถ„์•ผ์—์„œ ๊ธฐํš๊ณผ ๊ฐœ๋ฐœ์„ ์ฃผ๋„ํ•˜๋ฉฐ ํ˜„์—…์—์„œ ๋‹ค์–‘ํ•œ ์ƒ์šฉ ์ž‘ํ’ˆ์„ ๋Ÿฐ์นญํ–ˆ์Šต๋‹ˆ๋‹ค. ๋Œ€ํ•™์—์„œ ๋””์ง€ํ„ธ ๋ฏธ๋””์–ด์™€ ์˜์ƒํ•™์„ ์ „๊ณตํ–ˆ์œผ๋ฉฐ ์ฃผ์š” ๊ต์œก๊ธฐ๊ด€์—์„œ ์›น ๋””์ž์ธ๊ณผ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋ฐ ๋ฏธ๋””์–ด ๊ต์œก(10๋…„ ์ด์ƒ) ๋“ฑ์„ ์ง„ํ–‰ํ•˜๋ฉด์„œ ํŠœํ† ๋ฆฌ์–ผ๋„ ์ œ์ž‘ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

- ์ €์„œ -

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํ”„๋กœ์ ํŠธ๋ถ(ํ•œ๋น›๋ฏธ๋””์–ด,2017)

๋”๋ณด๊ธฐ

์ปค๋ฆฌํ˜๋Ÿผ

์ „์ฒด

35๊ฐœ โˆ™ (4์‹œ๊ฐ„ 44๋ถ„)

ํ•ด๋‹น ๊ฐ•์˜์—์„œ ์ œ๊ณต:

๊ฐ•์˜ ๊ฒŒ์‹œ์ผ: 
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ์ผ: 

์ˆ˜๊ฐ•ํ‰

์ „์ฒด

1๊ฐœ

5.0

1๊ฐœ์˜ ์ˆ˜๊ฐ•ํ‰

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

    ์ˆ˜๊ฐ•ํ‰ 6

    โˆ™

    ํ‰๊ท  ํ‰์  5.0

    5

    30% ์ˆ˜๊ฐ• ํ›„ ์ž‘์„ฑ

    Michael Kwon๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜

    ์ง€์‹๊ณต์œ ์ž๋‹˜์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ๋น„์Šทํ•œ ๊ฐ•์˜

    ๊ฐ™์€ ๋ถ„์•ผ์˜ ๋‹ค๋ฅธ ๊ฐ•์˜๋ฅผ ๋งŒ๋‚˜๋ณด์„ธ์š”!

    ์‹ ๊ทœ๊ฐ€์ž… 25% ํ• ์ธ

    โ‚ฉ24,750

    25%

    โ‚ฉ33,000