๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ํฌํธํด๋ฆฌ์ค with Figma
ํผ๋ธ๋ฆฌ์ ์ทจ์ ๊ณผ ํผ๋ธ๋ฆฌ์ ์ค๋ฌด์์ ๊ฐ์ฅ ๊ฒฝ์๋ ฅ์ด ์๋ ๋ชจ๋ฐ์ผ ์น ์ ์ ๋ฅ๋ ฅ์ ํฅ์ํ ์ ์์ต๋๋ค. ํผ๋ธ๋ฆฌ์ ๋ก์ ๋ชจ๋ฐ์ผ ์น์ ์ ์ํ๊ธฐ ์ํ ๊ฑฐ์ ๋ชจ๋ ์ ์ ๋ฐฉ๋ฒ๊ณผ ๋ ธํ์ฐ๋ฅผ ๋ค์ง ์ ์์ต๋๋ค. ํนํ ์์ฆ ํผ๋ธ๋ฆฌ์ ์ ๊ฐ๋ฐ์์๊ฒ ์๊ตฌ๋๋ ๋์์ธ ๋ฅ๋ ฅ์ ํผ๊ทธ๋ง(Figma) ํ์ต์ผ๋ก ๋ง์ ๋ถ๋ถ ์ปค๋ฒํ ์ ์๋๋ก ํผ๊ทธ๋ง(Figma)๋ก ๋ชจ๋ฐ์ผ ์น UI ๋์์ธ ์์ ์ ํ๋ ๊ณผ์ ๋ ์์ธํ๊ฒ ์ค๋ช ํ์์ต๋๋ค. ๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ์์ ์์ ๊ฐ์ฅ ๊ฐ์ ์ธ ๋ถ๋ถ์ธ HTML ์์ด์ดํ๋ ์ ์์ธํ ์์ฑ๋ฒ์ ๋ชจ๋ ํ์ด์ง ํ๋ํ๋ ์์ธํ๊ฒ ์ค๋ช ํฉ๋๋ค. ๊ฐ์๋ฅผ ํตํด HTML ์์ด์ดํ๋ ์ ์ ์ ๋ฅ๋ ฅ์ด ํฌ๊ฒ ํฅ์๋ ๊ฒ์ ๋๋ค. ๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ์ CSS ๋ณ์(Var) ํ์ฉํ ๋ชจ๋ฐ์ผ๊ณผ ํ๋ธ๋ฆฟ์ ๋ง์ถ ๋ ์ด์์์ ์๋ฒฝํ๊ฒ ๋ง์ถ๋ ํ์ต์ ํตํด์ ์ค๋ฌด ์์ ๊ณผ ๋๋์์ดํ ์ ๋์ ์์ ๋ฅ๋ ฅ์ ๊ฐ์ถ๊ฒ ๋ฉ๋๋ค. Flex ๋ ์ด์์์ ์ค์ฌ์ผ๋ก ์ค์๊ธ CSS ์ค์ ๋ฅ๋ ฅ์ ์ถฉ๋ถํ ๊ฐ์ถ์๊ฒ ๋ฉ๋๋ค.
์๊ฐ์ 438๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ
Tailwind CSS ๊ฐ์๊ฐ ์๋กญ๊ฒ ์คํ๋์์ต๋๋ค.
์๋ ํ์ธ์. ์ฝ๋ฉ์์ค์ ๋๋ค.
์ด๋ฒ์ ์ฝ๋ฉ์์ค๊ฐ ์ฌํ์ ๊ธฐ์ธ์ฌ์ ๋ง๋ Tailwind CSS ๊ฐ์๊ฐ ์คํ๋์์ต๋๋ค.
์ฝ๋ฉ์์ค๊ฐ ๋ง๋ Tailwind CSS ๊ฐ์๋ [Tailwind CSS๋ก ๊ฐ๋ฐ์๊ฐ ๋ง๋๋ ๋ฉ์ง UI ์คํ์ผ๋ง]๋ผ๋ ์ ๋ชฉ์ผ๋ก ๋ง๋ ๊ฒ ์ฒ๋ผ ๊ฐ๋ฐ์๊ฐ ํผ๋ธ๋ฆฌ์ฑ์ ํ ๋ ํผ๋ธ๋ฆฌ์
๋ชป์ง ์๊ฒ ์์ UI ์คํ์ผ๋ง์ ํ ์ ์๋ ๋ถ๋ถ์ ๊ฐ์ฅ ์ด์ ์ ๋ง์ท์ต๋๋ค.
[Tailwind CSS๋ก ๊ฐ๋ฐ์๊ฐ ๋ง๋๋ ๋ฉ์ง UI ์คํ์ผ๋ง] ๊ฐ์๋ ํ์ฌ ๊ฐ์ฅ ํซํ ํ๋ ์์ํฌ์ธ Tailwind CSS๋ฅผ ์ด๋ก ๋ถํฐ ์ค์ ๋ฐ์ํ ์น์ฌ์ดํธ๊น์ง 19์๊ฐ ์ด์์ ์์ ์๊ฐ์ผ๋ก ์ถฉ์คํ๊ฒ ๋ค๋ฃจ๊ณ ์์ต๋๋ค. ์์ ์๊ฐ์ด ๊ธธ๋ค๊ณ ์ข์ ๊ฐ์๋ ์๋๋๋ค. ํ์ง๋ง ํด๋น ๊ฐ์๋ ์๊ฐ๋ ๊ธธ๊ณ ๊ฐ์๋ ์ข๋ค๊ณ ์๋ถํฉ๋๋ค. ํนํ, Tailwind CSS ๋ชจ๋ ์ด๋ก ์ 8์๊ฐ 30๋ถ ๋์ ์์ธํ๊ฒ ๋ค๋ฃจ๊ธฐ ๋๋ฌธ์ CSS ์ด๋ก ์ด ๋ถ์กฑํ ์ฌ๋์๊ฒ CSS ์ด๋ก ์ ์ถฉ์คํ ํ์ตํ ์ ์์ต๋๋ค.
Tailwind CSS๋ CSS Frameworks Ranking์์ ํ์ฌ๊น์ง ๊พธ์คํ ์ธ๊ธฐ๋ฅผ ๋๋ฆฌ๊ณ ์๊ณ , ๋ง์กฑ๋ 1์๋ฅผ ํ๊ณ ์๋ Tailwind CSS๋ ์์ฆ ์ ์ธ๊ณ์ ์ผ๋ก ๊ฐ์ฅ ํซํ CSS ํ๋ ์์ํฌ์
๋๋ค. ํซํ ์ด์ ์ค์ ๊ฐ์ฅ ๋ํ์ ์ธ ๊ฒ์ด ๋ฐ๋ก ์ ํธ๋ฆฌํฐ ํด๋์ค๋ฅผ ์ฌ์ฉํ ์ฐฝ์์ ์ธ ์คํ์ผ๋ง์ ํ ์ ์๊ณ ๋ํ, ์ข์ ํ๋ฆฌํฐ์ ๋์์ธ์ ๋ง๋ค๊ธฐ ์ํ ์์
์๊ฐ์ด ๊ฝค ๋น ๋ฅด๋ค๋ ์ ์ด๋ผ ์๊ฐ๋ฉ๋๋ค.
์ด๋ก ์์ ๋ฟ๋ง ์๋๋ผ Tailwind CSS๋ก ๋ง๋๋ ์ค์ ์์ ๋ค ๊ทธ๋ฆฌ๊ณ ๊ฐ๋ฐ์ ๊ฒฝ๋ ฅ ์ด๋ ฅ์ & ํฌํธํด๋ฆฌ์ค ์๊ฐ ๋ฐ์ํ ์น ์ ์๋ ์ถฉ์คํ๊ฒ ๋ฐฐ์ฐ์๊ณ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ผ์ค ์ ์์ต๋๋ค.
โ ๊ฐ์์๊ฐ ๋ฐ ๋ฌด๋ฃ๊ฐ์ ๋ณด๋ฌ๊ฐ๊ธฐ : https://inf.run/pjqKk








