ํ๋ฐํธ์๋ 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 ํ๋ซํผ์ ํตํฉ๋๋ฉด ๋ชจ๋ ๊ท๋ชจ์ ๊ธฐ์ ์ ์ํ ์ ํ๋ฆฌ์ผ์ด์ ๊ฐ๋ฐ ํ๋ก์ธ์ค๋ฅผ ๋จ์ํํ๊ณ ๊ฐ์ํํ๋ ๋ฐ ์์ด ๊ทธ ๊ฐ์น๊ฐ ์ ์ฆ๋ฉ๋๋ค.