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

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

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

Sass, Less ๋ฐ Stylus๋ฅผ ํฌํ•จํ•˜์—ฌ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ์—ฌ๋Ÿฌ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๊ฐ€ ์—…๊ณ„์—์„œ ๋„๋ฆฌ ์ฑ„ํƒ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ „์ฒ˜๋ฆฌ๊ธฐ ๊ฐ๊ฐ์—๋Š” ๊ณ ์œ ํ•œ ์žฅ์ ๊ณผ ์ฐจ์ด์ ์ด ์žˆ์ง€๋งŒ ๋ชจ๋‘ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž์‹ ์˜ ์ž‘์—…์„ ์ƒˆ๋กœ์šด ์ˆ˜์ค€์˜ ์ „๋ฌธ ์ง€์‹์œผ๋กœ ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๊ฐ•๋ ฅํ•œ ๋„๊ตฌ ์„ธํŠธ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด Sass(Syntactically Awesome Style Sheets)๋Š” ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ ์„ธํŠธ, ๊ด‘๋ฒ”์œ„ํ•œ ๋ฌธ์„œ ๋ฐ ๊ฐ•๋ ฅํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ์ง€์› ๋•๋ถ„์— ์ƒ๋‹นํ•œ ๊ด€์‹ฌ์„ ์–ป์—ˆ์Šต๋‹ˆ๋‹ค. ํ•œํŽธ Less(Leaner CSS)๋Š” Sass์— ๋น„ํ•ด ๋” ๊ฐ„๋‹จํ•œ ๊ตฌ๋ฌธ์„ ์ œ๊ณตํ•˜๊ณ  Stylus๋Š” ๊ณต๋ฐฑ์„ ๊ตฌ๋ถ„ํ•˜๋Š” ๊ตฌ๋ฌธ๊ณผ ๊ฐ•๋ ฅํ•œ ๋‚ด์žฅ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด ์œ ์—ฐ์„ฑ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

CSS ์ „์ฒ˜๋ฆฌ๊ธฐ ์‚ฌ์šฉ์˜ ์ค‘์š”ํ•œ ์ธก๋ฉด์€ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๋„๊ตฌ ์ฒด์ธ๊ณผ์˜ ํ†ตํ•ฉ์ž…๋‹ˆ๋‹ค. ์ž‘์—… ์‹คํ–‰๊ธฐ(Grunt, Gulp ๋˜๋Š” npm ์Šคํฌ๋ฆฝํŠธ), ๋ชจ๋“ˆ ๋ฒˆ๋“ค๋Ÿฌ(Webpack, Browserify ๋˜๋Š” Rollup) ๋˜๋Š” CSS-in-JS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ(์Šคํƒ€์ผ ๊ตฌ์„ฑ ์š”์†Œ ๋˜๋Š” Emotion)์™€ ๊ฐ™์€ ํ•„์ˆ˜ ๋„๊ตฌ๋Š” CSS ์ „์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ๋‚ด์žฅ ์ง€์›์„ ์ œ๊ณตํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์Šต๋‹ˆ๋‹ค. ๊ธฐ์กด ์›Œํฌํ”Œ๋กœ์— ์‰ฝ๊ฒŒ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

AppMaster ์—์„œ๋Š” ํ”„๋ŸฐํŠธ์—”๋“œ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์ด no-code ํ”Œ๋žซํผ์˜ ํ•„์ˆ˜์ ์ธ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์œ„ํ•œ ํšจ์œจ์ ์ด๊ณ  ์œ ์ง€ ๊ด€๋ฆฌ ๊ฐ€๋Šฅํ•œ ํ”„๋ŸฐํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ ํ”Œ๋žซํผ์€ Vue3 ํ”„๋ ˆ์ž„์›Œํฌ์˜ ๊ฐ•๋ ฅํ•œ ๊ธฐ๋Šฅ๊ณผ ์ธ๊ธฐ ์žˆ๋Š” CSS ์ „์ฒ˜๋ฆฌ๊ธฐ์™€ ์›ํ™œํ•˜๊ฒŒ ์ž‘๋™ํ•˜๋Š” ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด AppMaster ํ”Œ๋žซํผ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ํ”„๋ŸฐํŠธ์—”๋“œ ๊ฐœ๋ฐœ์˜ ์ตœ๊ณ  ํ‘œ์ค€์„ ์ถฉ์กฑํ•˜๊ณ  ์ตœ์ข… ์‚ฌ์šฉ์ž์—๊ฒŒ ์›ํ™œํ•˜๊ณ  ๋ฐ˜์‘์„ฑ์ด ๋›ฐ์–ด๋‚˜๋ฉฐ ์‹œ๊ฐ์ ์œผ๋กœ ์ฆ๊ฑฐ์šด ๊ฒฝํ—˜์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ AppMaster ํ”Œ๋žซํผ์— ํ†ตํ•ฉํ•˜๋Š” ๊ฒƒ์€ ์ค‘์†Œ๊ธฐ์—…์—์„œ ๋Œ€๊ธฐ์—…์— ์ด๋ฅด๊ธฐ๊นŒ์ง€ ๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ ๊ณ ๊ฐ์„ ์œ„ํ•ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์„ ๋” ๋น ๋ฅด๊ณ  ํšจ์œจ์ ์ด๋ฉฐ ๋น„์šฉ ํšจ์œจ์ ์œผ๋กœ ๋งŒ๋“œ๋Š” ๋ฐ ์šฐ์„  ์ˆœ์œ„๋ฅผ ๋‘๋Š” ๋˜ ๋‹ค๋ฅธ ์˜ˆ์ž…๋‹ˆ๋‹ค. ์‹ค์ œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•˜๊ณ  ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ๋ฐ”์ด๋„ˆ๋ฆฌ ๋˜๋Š” ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์ œ๊ณตํ•จ์œผ๋กœ์จ ๊ณ ๊ฐ์ด ์˜จํ”„๋ ˆ๋ฏธ์Šค์—์„œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ํ˜ธ์ŠคํŒ…ํ•˜๊ณ  ๋‹ค์–‘ํ•œ ์‚ฌ์šฉ ์‚ฌ๋ก€์— ๋Œ€ํ•œ ๋›ฐ์–ด๋‚œ ํ™•์žฅ์„ฑ์„ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ ํ”„๋ŸฐํŠธ์—”๋“œ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋Š” ์œ ์ง€ ๊ด€๋ฆฌ ๊ฐ€๋Šฅํ•˜๊ณ  ํšจ์œจ์ ์ธ ์ฝ”๋“œ ์ž‘์„ฑ ํ”„๋กœ์„ธ์Šค๋ฅผ ๊ฐ„์†Œํ™”ํ•˜๋Š” ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•จ์œผ๋กœ์จ ํ˜„๋Œ€ ์›น ๊ฐœ๋ฐœ์—์„œ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋„๊ตฌ๋Š” ์—…๊ณ„ ํ‘œ์ค€์ด ๋˜์—ˆ์œผ๋ฉฐ, AppMaster ์™€ ๊ฐ™์€ no-code ํ”Œ๋žซํผ์— ํ†ตํ•ฉ๋˜๋ฉด ๋ชจ๋“  ๊ทœ๋ชจ์˜ ๊ธฐ์—…์„ ์œ„ํ•œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค๋ฅผ ๋‹จ์ˆœํ™”ํ•˜๊ณ  ๊ฐ€์†ํ™”ํ•˜๋Š” ๋ฐ ์žˆ์–ด ๊ทธ ๊ฐ€์น˜๊ฐ€ ์ž…์ฆ๋ฉ๋‹ˆ๋‹ค.