์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
์ธํ”„๋Ÿฐ ์˜๋ฌธ ๋ธŒ๋žœ๋“œ ๋กœ๊ณ 
NEW

Vanila JS ๊ธฐ๋ฐ˜ UI Component - ํƒญ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ

ํ•˜๋‚˜์˜ ์›น ํŽ˜์ด์ง€๋ฅผ ๊ตฌ์„ฑํ•˜๋ ค๋ฉด, ๋ถ€๋ถ„๋ถ€๋ถ„ ๊ฐ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ˆœ์ˆ˜์ฝ”๋”ฉ๋งŒ์œผ๋กœ UI component๋ฅผ ๋งŒ๋“ค์–ด ๋ด…๋‹ˆ๋‹ค. html,css,javascript๋ฅผ ์‚ฌ์šฉํ•˜์‹ค ์ค„ ์•„๋Š” ๋ถ„๊ป˜ ์ถ”์ฒœ๋“œ๋ฆฝ๋‹ˆ๋‹ค.

4๋ช… ์ด ์ˆ˜๊ฐ•ํ•˜๊ณ  ์žˆ์–ด์š”.

Thumbnail

์ดˆ๊ธ‰์ž๋ฅผ ์œ„ํ•ด ์ค€๋น„ํ•œ
[vanillaJS] ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ฑธ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์–ด์š”

  • html

  • css

  • javascript

Vanila JS ๊ธฐ๋ฐ˜ UI Component ์‹œ๋ฆฌ์ฆˆ

HTML, CSS, Vanila Javascript ๋กœ ์›นํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์ฝ”๋”ฉํ•ฉ๋‹ˆ๋‹ค.

  • ๊ธฐ๋ณธ์— ์ถฉ์‹คํ•ด์•ผ ์‹ค๋ ฅ์ด ๋Š˜ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • Figma ๋””์ž์ธ ํŒŒ์ผ์„ ๋ฐ›์•„๋„ ๋˜‘๊ฐ™์ด ๋ ˆ์ด์•„์›ƒ ๋ฐ ์ธํ„ฐ๋ ‰์…˜์„ ์ฝ”๋”ฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

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

ํƒญ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ

HTML ๋งˆํฌ์—…๋ถ€ํ„ฐ CSS ์Šคํƒ€์ผ๋ง๊นŒ์ง€ ํ•˜๋‚˜ํ•˜๋‚˜ ์ฒœ์ฒœํžˆ ๋”ฐ๋ผํ•˜๋ฉฐ ์ตํž™๋‹ˆ๋‹ค. ์ด๋•Œ ์‹ ๊ฒฝ์จ์•ผํ•  ๋ถ€๋ถ„๋“ค๊ณผ ์ ‘๊ทผ์„ฑ ๊ณ ๋ คํ•œ ๋ถ€๋ถ„๊นŒ์ง€ ์‹ค๋ฌด์ž๊ฐ€ ์ง€๋„ ํ•ฉ๋‹ˆ๋‹ค.
aria-controls, aria-selected์— ๋Œ€ํ•œ ๊ฒƒ์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

Vanila JS

jQuery ๋˜๋Š” ๋‹ค๋ฅธ js ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€์•Š๊ณ , ์ˆœ์ˆ˜ javascript๋กœ DOM ์š”์†Œ๋ฅผ ์ œ์–ดํ•˜๊ณ  ๋‹ค๋ฃจ๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

CSS ๋ณ€์ˆ˜๋ฅผ JS๋กœ ์ œ์–ดํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐฐ์›๋‹ˆ๋‹ค.

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

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

  • ์šด์˜ ์ฒด์ œ ๋ฐ ๋ฒ„์ „(OS): macOS

  • ์‚ฌ์šฉ ๋„๊ตฌ: VS code, Chrome ๋ธŒ๋ผ์šฐ์ €

  • PC ์‚ฌ์–‘: ๋ฌด๊ด€

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

  • ์†Œ์Šค์ฝ”๋“œ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

  • ์†Œ์Šค์ฝ”๋“œ๊ฐ€ ๋‹ด๊ธด PDF ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์„ ์ˆ˜ ์ง€์‹ ๋ฐ ์œ ์˜์‚ฌํ•ญ

  • HTML, CSS, Javascript๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ์‹  ๋ถ„์ด ๋“ค์œผ์‹œ๋ฉด ์ข‹์Šต๋‹ˆ๋‹ค.

  • ์งˆ๋ฌธ์„ ๋‚จ๊ฒจ์ฃผ์‹œ๋ฉด, ๋‹ต๋ณ€๋“œ๋ฆฝ๋‹ˆ๋‹ค.

  • ๊ฐ•์˜์ž๋ฃŒ์— ์žˆ๋Š” ์ด๋ฏธ์ง€ ๋ฐ PDF ๋Š” ์ƒ์—…์  ๋ฐฐํฌ ๋ฐ ์‚ฌ์šฉ์„ ๊ธˆํ•ฉ๋‹ˆ๋‹ค.

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

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

  • vanila javascript๋กœ ํƒญ๋ฉ”๋‰ด๋ฅผ ๊ตฌํ˜„ํ•ด ๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • ๋”ฐ๋ผํ•˜๋ฉฐ ์ฝ”๋”ฉ์„ ํ•ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

  • html,css,js๋ฅผ ํ™œ์šฉํ•œ ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ณ  ์‹ถ์œผ์‹  ๋ถ„

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

  • html

  • css

  • javascript

์•ˆ๋…•ํ•˜์„ธ์š”
์ฝ”๋”ฉ๊ณ ์ŠคํŠธ์ž…๋‹ˆ๋‹ค.

์•ˆ๋…•ํ•˜์„ธ์š”. ์ €๋Š” ํ”„๋กœ๋•ํŠธ ๋””์ž์ธ๊ณผ ์ฝ”๋”ฉ์„ ๊ฐ™์ด ํ•˜๊ณ  ์žˆ๋Š” 1์ธ ๊ธฐ์—… ํ”„๋ฆฌ๋žœ์„œ ์ž…๋‹ˆ๋‹ค.
์ˆ˜๋งŽ์€ ์›น์„œ๋น„์Šค์™€ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ์•ฑ, ๋„ค์ดํ‹ฐ๋ธŒ ์•ฑ์„ ๊ธฐํš๋ถ€ํ„ฐ ๋Ÿฐ์นญ๊นŒ์ง€ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
๋ช‡๋…„์ „ ์ œ์ฃผ์— ์™€์„œ ํ„ฐ๋ฅผ ์žก์œผ๋ฉฐ, ๊ทธ๋™์•ˆ ์‰ผ์—†์ด ๋‹ฌ๋ ค์˜จ ์ €์—๊ฒŒ ์ž ์‹œ ์‰ผ์„ ์ฃผ๊ณ , ๊ทธ๋™์•ˆ ์˜จ/์˜คํ”„๋ผ์ธ์œผ๋กœ ๊ฐ•์˜ํ–ˆ๋˜ ๊ฒƒ๋“ค๊ณผ ์Œ“์•„์˜จ ์ง€์‹๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ๋ฐœ์ž์ทจ๋ฅผ ๋‚จ๊ธฐ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

๊ฐ•์˜๋ฅผ ๋งŒ๋“ค๋ฉด์„œ, ์ฒœ์ฒœํžˆ.. ์‰ฌ์› ์œผ๋ฉด ์ข‹๊ฒ ๋‹ค. '์•„, ์ด๊ฑฐ ํ• ๋งŒํ•˜๋„ค?'๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค๊ฒŒ ํ•˜๋Š” ๊ฒƒ์„ ํ•ญ์ƒ ์žŠ์ง€์•Š์œผ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ, ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉด์„œ ์„ฑ์ทจ๊ฐ์„ ๋Š๊ปด๋ณด๊ฒŒ ํ•˜๋Š” ๊ฒƒ ๋˜ํ•œ ์ €์˜ ๊ณ„ํš์˜ ์ผ๋ถ€์ž…๋‹ˆ๋‹ค ^^:: ์šฐ๋ฆฌ ์˜ค๋Š˜๋„ ํ•œ์ค„ ๋” ์ฝ”๋”ฉํ•˜๊ณ  ์ž ์ž๋ฆฌ์— ๋“ญ์‹œ๋‹ค. ์—ฌ๋Ÿฌ๋ถ„, ์‘์›ํ•ฉ๋‹ˆ๋‹ค~!

2025 ๋‚˜ํ˜ผ์ž ํ•˜๋Š” ์ฝ”๋”ฉ๋…ํ•™์„œ, '์ฝ”๋”ฉ-๋ ˆ๋ฒจ-์—…' ์ €์ž
์œ ํŠœ๋ธŒ '์ฝ”๋”ฉ๊ณ ์ŠคํŠธ'๋ฅผ ์šด์˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
์œ ํŠœ๋ธŒ ์ฑ„๋„ : https://www.youtube.com/@codingghost941
์ธ์Šคํƒ€๊ทธ๋žจ : @blackcrown.design.studio
ํ”„๋ฆฌ๋žœ์„œ ์ธ์Šคํƒ€ํˆฐ '์ด๋ž‘์ด' : @ejey.irangi

๋”๋ณด๊ธฐ

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

์ „์ฒด

10๊ฐœ โˆ™ (1์‹œ๊ฐ„ 15๋ถ„)

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

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

์ˆ˜๊ฐ•ํ‰

์•„์ง ์ถฉ๋ถ„ํ•œ ํ‰๊ฐ€๋ฅผ ๋ฐ›์ง€ ๋ชปํ•œ ๊ฐ•์˜์ž…๋‹ˆ๋‹ค.
๋ชจ๋‘์—๊ฒŒ ๋„์›€์ด ๋˜๋Š” ์ˆ˜๊ฐ•ํ‰์˜ ์ฃผ์ธ๊ณต์ด ๋˜์–ด์ฃผ์„ธ์š”!