ํผ๋ธ๋ฆฌ์ ์ทจ์ ์ ์ํด ์ฑ์ฉ ๋ด๋น์์๊ฒ ์ดํํ ์ ์๋ ์ด๋ ฅ์ ์์ฑ๋ฐฉ๋ฒ์ ์์ธํ ์๋ ค๋๋ฆฝ๋๋ค. ์ด๋ ฅ์ ์์ฑ์ ์ด๋์๋ถํฐ ์์ํด์ผ ํ ์ง ์ด๋ ค์ด ๋ถ๋ค๊ป ์ถ์ฒ๋๋ฆฝ๋๋ค. ์ ์ ๋๋ ์ด์ง์ ์ํด ํผ๋ธ๋ฆฌ์ ์ด๋ ฅ์๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์ ์ค์ ์ฌ๋ก๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ ์์์ ํจ๊ป ์ค๋ช ํฉ๋๋ค. ๋ํ, ์ง์์ ์ ์ฅ์์์ ์ด๋ ฅ์ ์์ฑ ๋ฐฉ๋ฒ์ด ์๋๋ผ ์ฑ์ฉ ๋ด๋น์ ์ ์ฅ์์ ๋์ ํ ๊ด์ ์์ ๋ฉด์ ์ ๋ถ๋ฅด๋ ์ด๋ ฅ์ ์์ฑ ๊ฐ์ด๋์ ๋๋ค. ์ดํํ๋ ์ด๋ ฅ์ ์์ฑ ๋ฐฉ๋ฒ๊ณผ ํจ๊ป ๊ฐ์กฐํ ์ฌํญ, ์ฃผ์ํ ์ฌํญ ๊ทธ๋ฆฌ๊ณ ๊ตฌ์ฒด์ ์ธ ๊ฟํ๊ณผ ์ฝ๋ฉ์์ค๊ฐ ์ ์ํ ์ด๋ ฅ์ ํ ํ๋ฆฟ๊น์ง ์ ๊ณตํฉ๋๋ค.
[์๋ก์ด ๊ฐ์ ์คํ ์์] SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma
์๋
ํ์ธ์. ์ฝ๋ฉ์์ค์
๋๋ค.
์ด๋ฒ์ ์๋กญ๊ฒ <SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma> ๊ฐ์๊ฐ ์คํ๋์์ต๋๋ค.
SCSS(SASS)์ FLEX Layout์ ์ค์ ์ ์๋ฒฝํ๊ฒ ํ์ฉํฉ๋๋ค! ํผ๊ทธ๋ง๋ก ์ ์ฒด ์น์ฌ์ดํธ์ ๋ฉ์ธ ํ์ด์ง ๋ฐ ํต์ฌ ์๋ธ ํ์ด์ง UI๋ฅผ ๋์์ธํ๊ณ , ์ผ๊ด์ฑ ์๋ ํด๋์ค๋ค์๊ณผ ํจ๊ป HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ํผ๋ธ๋ฆฌ์ฑ๊น์ง ์๋ฃํ๋ ์ฒด๊ณ์ ์ธ ๋ฐ์ํ ์น ์ฌ์ดํธ ํ๋ก์ ํธ ์ ์ ๊ณผ์ ์ ๋๋ค. ์ด 35์๊ฐ ์ด์์ ๊ณผ์ ์์์ ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ์ ์ถฉ๋ถํ ์ตํ๊ณ , PC - ๋ชจ๋ฐ์ผ - ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์์ ์ค๊ณ ๋ฐ ์ ์ํ๋ฉด์ ๋ฐ์ํ ์น ํ๋ก์ ํธ์ ๋ํ ๊ฒฝํ๊ณผ ๋ ธํ์ฐ๋ ๋ฌผ๋ก ์ ์ด์ฟผ๋ฆฌ(jQuery) ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ๊น์ง ๋ํญ ํฅ์์ํค๊ฒ ๋ฉ๋๋ค.
๐ฉ ๊ฐ์์๊ฐ ๋ณด๋ฌ๊ฐ๊ธฐ : https://inf.run/TH3b
"SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma ๊ฐ์๋ก ์ฒด๊ณ์ ์ธ ๋ฐ์ํ ์น ์ฌ์ดํธ ํ๋ก์ ํธ ์ ์ ๋ฅ๋ ฅ ์์ฑ"
Point 1. ํผ๊ทธ๋ง(Figma)๋ก SCSS(SASS)+FLEX ์น์ฌ์ดํธ UI ๋์์ธ ์ ์
Point 2. SCSS(SASS)+FLEX ์น์ฌ์ดํธ HTML ์์ด์ดํ๋ ์ ๋ชจ๋ ํ์ด์ง ์์ธํ ์ ์
Point 3. SCSS(SASS)+FLEX๋ฅผ ํ์ฉํ ๋ค์ํ ๋ค์์ ์น ํ์ด์ง ํผ๋ธ๋ฆฌ์ฑ ์ ์
Point 4. PC, ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์ ์ค๊ณ, ์ ์ ๊ทธ๋ฆฌ๊ณ ์๋ฒฝํ ํผ๋ธ๋ฆฌ์ฑ ์์
๊น์ง
Point 5. ๋ฐ์ํ ์น ํ๋ก์ ํธ ์ ์์ ์ํ ์ ์ด์ฟผ๋ฆฌ ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ
์ฝ๋ฉ์์ค๊ฐ ์ง๊ธ๊น์ง ์๋ง์ ์คํ๋ผ์ธ ํ์๊ณผ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์ ๊ณผ์ ์์ ์์
ํ ์ค์๊ธ ํผ๋ธ๋ฆฌ์ฑ ์ ์ ๋
ธํ์ฐ๊ฐ ๋ด๊ฒจ ์์ต๋๋ค. ํนํ SCSS(SASS)+FLEX๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ์ ์ํ๋ ๋ฐ์ํ ์น ํผ๋ธ๋ฆฌ์ฑ ํ๋ก์ ํธ๋ผ์ SCSS(SASS)+FLEX ๋ฅ๋ ฅ์ ์ต๋ํ์ผ๋ก ๋์ด์ฌ๋ฆด ์ ์์ต๋๋ค.
์๊ฐ ํ ํ์ธต ํฅ์๋ ์ค์๊ธ ๋ฐ์ํ ์น ํผ๋ธ๋ฆฌ์ฑ ๋ฅ๋ ฅ์ ๊ฐ๊ฒ ๋์ค ๊ฑฐ๋ผ๊ณ ํ์ ํฉ๋๋ค!