์น ํผ๋ธ๋ฆฌ์
์ ๊ฐ๋ฐ์๋ฅผ ์ํ ์๋์ ์ธ ํฌํด์ ์ฐพ๋๋ค๋ฉด?
SCSS(SASS)+FLEX ๋ฐ์ํ ์จ๋ผ์ธ ๊ฐ์ ์ฌ์ดํธ ํ๋ก์ ํธ!
"SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma ๊ฐ์๋ก
์ฒด๊ณ์ ์ธ ๋ฐ์ํ ์น ์ฌ์ดํธ ํ๋ก์ ํธ ์ ์ ๋ฅ๋ ฅ ์์ฑ"
"41์๊ฐ ์ด์์ ๋ฐฉ๋ํ ํ์ต๋"
๋ค์ ์์ํ SCSS(SASS) ํผ๋ธ๋ฆฌ์ฑ ์์
์ด๋ผ์ ์
๋ฌธ์๋ ์กฐ๊ธ ๋ฒ๊ฑฐ์ธ ์ ์์ง๋ง ์ด๊ธ์๋ ์น์
๋ณ๋ก ์์ฐจ์ ์ผ๋ก ์ ๋ฐ๋ผ์ค์๋ฉด ์ถฉ๋ถํ ์๋ฃํ ์ ์์ต๋๋ค.
SCSS(SASS)์ FLEX๋ฅผ ์ค์ ์ ์๋ฒฝํ๊ฒ ํ์ฉํฉ๋๋ค!
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 ๋ฅ๋ ฅ์ ์ต๋ํ์ผ๋ก ๋์ด์ฌ๋ฆด ์ ์์ต๋๋ค.
์๊ฐ ํ ํ์ธต ํฅ์๋ ์ค์๊ธ ๋ฐ์ํ ์น ํผ๋ธ๋ฆฌ์ฑ ๋ฅ๋ ฅ์ ๊ฐ๊ฒ ๋์ค ๊ฑฐ๋ผ๊ณ ํ์ ํฉ๋๋ค!
SCSS ํต์ฌ ์ด๋ก ์์ ์
๋ฐ์ดํธ(5์๊ฐ 9๋ถ)
์ํํ SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ ํผ๋ธ๋ฆฌ์ฑ ์์
์ ์ํด์ SCSS ํต์ฌ ์ด๋ก (Essential Theory)์ ์
๋ฐ์ดํธ ํ์ต๋๋ค. SCSS ํต์ฌ ์ด๋ก (Essential Theory) ์์์ 5์๊ฐ 9๋ถ์ ๊ฑธ์ณ SCSS์ ๊ฑฐ์ ๋ชจ๋ ์ด๋ก ์ ๋ค๋ฃจ๊ณ ์์ผ๋ฏ๋ก SCSS ํต์ฌ ์ด๋ก ์ ์ถฉ๋ถํ ์ฌ๋ ๊น๊ฒ ํ์ค ์ ์์ต๋๋ค.
์น์
5๋ถํฐ ํผ๋ธ๋ฆฌ์ฑ ์์
์ ์ํด ์ถ๊ฐ๋ ์ ์ฒด ์์์ ๋ชจ๋ ํ์ตํ์ค ํ์๋ ์์ต๋๋ค. ์น์
5๋ถํฐ ํผ๋ธ๋ฆฌ์ฑ ์์
์ ์ํด ํ์์ ์ธ ์ด๋ก ์์์ ๋ค์๊ณผ ๊ฐ์ผ๋ ์ด๊ฒ๋ง ํ์ตํ์
๋ ํผ๋ธ๋ฆฌ์ฑ ์์
์ ์ง์ฅ์ด ์ ํ ์์ต๋๋ค.
1. SCSS ํต์ฌ์ด๋ก (01) - ์ ํ์ ์ค์ฒฉ(Nesting)
2. SCSS ํต์ฌ์ด๋ก (02) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&)์ ์ฃผ์์ฒ๋ฆฌ
3. SCSS ํต์ฌ์ด๋ก (03) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&) ์์ฉ
4. SCSS ํต์ฌ์ด๋ก (04) โ ๋ํ์ ์ธ CSS ์ ํ์ SCSS์์ ๋ง๋ค๊ธฐ
5. SCSS ํต์ฌ์ด๋ก (05) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&) ๊ฐ์ํด๋์ค
6. SCSS ํต์ฌ์ด๋ก (06) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&) ์์ฑ์ ํ์
7. SCSS ํต์ฌ์ด๋ก (07) - ๋ถ๋ชจ ์ ํ์ ์ค์ฒฉ ๋๊ฐ๊ธฐ @at-root
10. SCSS ํต์ฌ์ด๋ก (10-1) - ๋ณ์(Variables) 01
11. SCSS ํต์ฌ์ด๋ก (10-2) - ๋ณ์(Variables) 02
13. SCSS ํต์ฌ์ด๋ก (11-1) - ์ธ๋ถํ์ผ ๊ฐ์ ธ์ค๊ธฐ @import
โป ๋๋จธ์ง ์์์ ์์ผ๋ก SCSS๋ฅผ ๋ ์ฌ๋์๊ฒ ํ์ตํ ํ์๊ฐ ์์ ๊ฒฝ์ฐ ๊ทธ๋ ๋ณด์
๋ ์ถฉ๋ถํฉ๋๋ค.
==============================================================
โผ ์ถ๊ฐ๋ ์น์
๊ณผ ์ ์ฒด ์ด๋ก ์์ ๋ด์ฉ(2023.07.06)
์น์
4. SCSS ํต์ฌ ์ด๋ก (Essential Theory)
-
SCSS ํต์ฌ์ด๋ก (01) - ์ ํ์ ์ค์ฒฉ(Nesting)
-
SCSS ํต์ฌ์ด๋ก (02) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&)์ ์ฃผ์์ฒ๋ฆฌ
-
SCSS ํต์ฌ์ด๋ก (03) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&) ์์ฉ
-
SCSS ํต์ฌ์ด๋ก (04) โ ๋ํ์ ์ธ CSS ์ ํ์ SCSS์์ ๋ง๋ค๊ธฐ
-
SCSS ํต์ฌ์ด๋ก (05) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&) ๊ฐ์ํด๋์ค
-
SCSS ํต์ฌ์ด๋ก (06) - ๋ถ๋ชจ ์ ํ์ ์ฐธ์กฐ(&) ์์ฑ์ ํ์
-
SCSS ํต์ฌ์ด๋ก (07) - ๋ถ๋ชจ ์ ํ์ ์ค์ฒฉ ๋๊ฐ๊ธฐ @at-root
-
SCSS ํต์ฌ์ด๋ก (08) โ ์ ๋์ด(prefix) ์ฌ์ฉํด์ CSS ์์ฑ ์๋์์ฑ
-
SCSS ํต์ฌ์ด๋ก (09) โ ๊ฐ์ํด๋์ค :is๋ก ์ ํ์ ์ค๋ณต ์ค์ด๊ธฐ
-
SCSS ํต์ฌ์ด๋ก (10-1) - ๋ณ์(Variables) 01
-
SCSS ํต์ฌ์ด๋ก (10-2) - ๋ณ์(Variables) 02
-
SCSS ํต์ฌ์ด๋ก (10-3) - ๋ณ์(Variables) ์ ํจ๋ฒ์์ CSS ๋ณ์์ ์ธ
-
SCSS ํต์ฌ์ด๋ก (11-1) - ์ธ๋ถํ์ผ ๊ฐ์ ธ์ค๊ธฐ @import
-
SCSS ํต์ฌ์ด๋ก (11-2) - @import๋ก ๋ถํ (Partial)๋ ํ์ผ ๋ถ๋ฌ์ค๊ธฐ
-
SCSS ํต์ฌ์ด๋ก (12) - ์ฐ์ฐ์(Operations), ์ถ๋ ฅ์ฐฝ ์์ ๊ธฐ
-
SCSS ํต์ฌ์ด๋ก (13-1) - ๊ทธ๋ฃน ์ ์ธํ๊ธฐ @mixin, ๊ทธ๋ฃน ์ฌ์ฉํ๊ธฐ @include
-
SCSS ํต์ฌ์ด๋ก (13-2) - @mixin๊ณผ @include ์์ฉํ๊ธฐ
-
SCSS ํต์ฌ์ด๋ก (13-3) - @mixin๊ณผ @include ํ์ฉํ ๋ฒํผ๋์์ธ
-
SCSS ํต์ฌ์ด๋ก (13-4) - @mixin์ ๋งค๊ฐ๋ณ์(์ธ์)๋ฅผ @include๋ก ์ฌ์ฉํ๊ธฐ
-
SCSS ํต์ฌ์ด๋ก (14) - ์ ํ์ ์์ฑ ๊ฐ์ ธ์ค๋ @extend
-
SCSS ํต์ฌ์ด๋ก (15) - @extend์ ํจ๊ป ์ฌ์ฉํ๋ ํ๋ ์ด์ค ํ๋ ์ ํ์ %
-
SCSS ํต์ฌ์ด๋ก (16) - ๋ค์ค ๋ณ์ ์ ์ธ, ๋ด์ฅ ํจ์(map-get)
๊ฐ์ ์คํ ๊ธฐ๋
์๊ฐํ ์ด๋ฒคํธ๐
ํด๋น ๊ฐ์์ ์๊ฐํ์ ์์ฑํด์ฃผ์๋ ๋ถ๋ค์ ํํด์ SCSS(SASS)+FLEX ํต์ฌ์ด๋ก PDF ๊ต์ฌ ๋ฐ ํ์ฉ์์ ํ์ผ์ ์ ๊ณตํฉ๋๋ค. ์ ๊ณต๋๋ PDF ๊ต์ฌ์ ํ์ผ์ <SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma> ํผ๋ธ๋ฆฌ์ฑ ์์
๊ณผ ์์ผ๋ก ์ค๋ฌด์์ ์์
ํ์ค ๋๋ฅผ ์ํด์ ์ข์ ๋ ํผ๋ฐ์ค๊ฐ ๋ ๊ฒ ์
๋๋ค.
์๊ฐํ์ ์๊ฐ์๋ถ์ด ํด๋น ๊ฐ์๋ฅผ ๋ณด๊ณ ๋๋ ์์งํ ์๊ฐํ์ ์ ์ด์ฃผ์๋ฉด ๋ฉ๋๋ค. ์๊ฐํ์ ์์ฑํ์๊ณ ์์ฑํ์ ์๊ฐํ์ ์บก์ณํด์ ์๋ ์ด๋ฉ์ผ๋ก ๋ณด๋ด์ฃผ์๋ฉด [SCSS(SASS)+FLEX ํต์ฌ์ด๋ก ๋ฐ ํ์ฉ์์ ํ์ผ]์ ์ด๋ฉ์ผ๋ก ๋ณด๋ด๋๋ฆฝ๋๋ค.
์๊ฐํ ์ด๋ฒคํธ๋ ๊ธฐ๊ฐ ํ์ ์ผ๋ก ๊ฐ์ ์คํ ํ ์ธ๊ธฐ๊ฐ 4์ฃผ๊ฐ ์งํํฉ๋๋ค.
โป ์๊ฐํ ์ด๋ฒคํธ๋ ๊ธฐ๊ฐ์์ด ์งํํ๊ธฐ๋ก ํ์ผ๋ ์๋ฌด๋๋ ์๊ฐํ ์์ฑํด์ฃผ์๋ฉด ๋ฉ๋๋ค.
โ ๊ธฐ๊ฐ : 4์ฃผ๊ฐ(2023๋
7์ 1์ผ ~ 7์ผ 28์ผ)
โ ๋์ : ํด๋น ๊ฐ์ ์๊ฐํ์ ์์ฑํ์ ๋ชจ๋ ๋ถ๋ค
โ ์ด๋ฉ์ผ : webnlife@naver.com

๐ฉ์ ๊ณตํ์ผ
- SCSS(SASS) ํต์ฌ์ด๋ก ๊ต์ฌ(PDF, 67ํ์ด์ง) ๋ฐ ์์ฑ๋ณธ ํ์ฉ ์์
- FLEX ํต์ฌ์ด๋ก ๊ต์ฌ(PDF, 36ํ์ด์ง) ๋ฐ ์์ฑ๋ณธ ํ์ฉ ์์
โป ์์ฑ๋ณธ ํ์ฉ์์ ๋ ํด๋น ๊ต์ฌ์ ๋์ค๋ ๋ชจ๋ ์์ ๋ฅผ ๋ง๋ ์์ฑ๋ณธ์
๋๋ค.
โป SCSS(SASS)+FLEX ํต์ฌ์ด๋ก ๊ต์ฌ ๋ฐ ์ ๊ณตํ์ผ ์์ธ์๊ฐ ๋ณด๊ธฐ : https://inf.run/qzdx
โป GRID ํต์ฌ์ด๋ก ๊ต์ฌ์ ํ์ฉ์์ ๋ ํฌํจ๋์ด ์์ง ์์ต๋๋ค.
โป ์๊ฐํ ์์ฑ ํ์ธ ๋ฉ์ผ ๋ณด๋ด์ฃผ์๋ฉด ์ ๊ณตํ์ผ์ 24์๊ฐ ๋ด์ ๋ฐ์ก๋ฉ๋๋ค.
SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ ์ฐ๋์ฌํญ์ด๋ฉฐ ํ์์ฌํญ ๐
์์ ์ด๋ ์ง๊ธ์ด๋ ๊ท๋ชจ๊ฐ ์๋ ํ์ฌ์ ๊ฒฝ์ฐ ์น ํผ๋ธ๋ฆฌ์
์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ์ฑ์ฉ๊ณต๊ณ ๋ฅผ ๋ณด๋ฉด SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ด ํญ์ ์ฑ์ฉ์์ '์ฐ๋์ฌํญ'์ผ๋ก ๋์ฐ ๋ฐ์ต๋๋ค. ์ฐ๋์ฌํญ์ด๋ผ๋ ๊ฒ์ ํ์ ์๊ฒฉ ์๊ฑด์ ์๋์ง๋ง ํ ์ค ์๋ฉด ๋ ์ฐ๋ํ๊ฒ ๋ค๋ ๋ง์
๋๋ค. ๊ณง, ํ ์ง์์์ ๋น๊ตํด์ ๋์ ๊ฒฝ์๋ ฅ์ ๊ฐ๋ ๋ค๋ ๋ง์ด๊ธฐ๋ ํฉ๋๋ค.
๐ฅ ํผ๋ธ๋ฆฌ์
๋ก์ ๋๋ ๊ฐ๋ฐ์๋ก์ ์
์ฌ์ง์๊ณผ ๋ฉด์ ์์ SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ด ์๋ค๊ณ ๋ง๋ก๋ง ์ด์ผ๊ธฐํ๋ ๊ฒ์ผ๋ก๋ ๋ถ์กฑํฉ๋๋ค. SCSS(SASS)๋ฅผ ์ค์ ๋ก๋ ๊ทธ๋ฅ ๋ค์ด๋ดค๊ฑฐ๋ ์ ๊น ํด๋ณธ ์ ๋์ธ๋ฐ ๋ฉด์ ๋ณผ ๋๋ ํ ์ค ์๋ค๊ณ ๋งํ๋ ์ง์์๋ค ์ ๋ง ๋ง์ต๋๋ค. ๋ง๋ก๋ง ํ๋ ํผ๋ธ๋ฆฌ์ฑ ํ์ฉ ๋ฅ๋ ฅ, ๋ง๋ก๋ง ํ๋ ๊ฐ๋ฐ ๋ฅ๋ ฅ์ ์ฌ๋๋ค์ด ์ ๋ฏฟ์ง ์์ต๋๋ค. ํ์ง๋ง ์ค์ ๋ก SCSS(SASS)๋ฅผ ํ์ฉํด ์ ์ํ ๋ฐ์ํ ์น ํ๋ก์ ํธ๋ฅผ ๋ณด์ฌ์ค๋ค๋ฉด SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ ์ฆ๋ช
ํ๋ ๊ฐ์ฅ ์ข์ ๋ฐฉ๋ฒ์ด ๋ ๊ฒ์ด๊ณ ์ฑ์ฉ์์๋ ๋น์ฐํ ์ฐ๋๋ฐ๊ฒ ๋ฉ๋๋ค.
์๋
๋ง ํด๋ SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ ์น ํผ๋ธ๋ฆฌ์
์๊ฒ ์ฐ๋์ฌํญ์ผ๋ก ์ฑ์ฉ๊ณต๊ณ ์ ์ฌ๋ฆฌ๋ ๊ฒ ๋๋ถ๋ถ์ด์์ต๋๋ค. ๊ฐ๋ฐ์์๊ฒ๋ SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ ์๊ตฌํ๋ ๊ฒฝ์ฐ๊ฐ ์ด๋ ๊ฒ ๋ง์ง ์์์ต๋๋ค. ๊ทธ๋ฐ๋ฐ ์ต๊ทผ ๊ฐ์ ์คํ ์ค๋น ๋ง์น๊ณ ์ฑ์ฉ๊ณต๊ณ ๋ฅผ ๋ณด๋๊น SCSS(SASS) ํ์ฉ ๋ฅ๋ ฅ์ ์น ํผ๋ธ๋ฆฌ์
์๊ฒฉ์๊ฑด์ผ๋ก ์ฌ๋ฆฌ๊ฑฐ๋, ๊ฐ๋ฐ์์๊ฒ๋ ์ฐ๋์ฌํญ ๋๋ ์๊ฒฉ์๊ฑด์ผ๋ก ์ฌ๋ฆฌ๋ ๊ฒฝ์ฐ๋ฅผ ์์ฃผ ๋ณด๊ฒ ๋ฉ๋๋ค. ํนํ, ์น ํผ๋ธ๋ฆฌ์
์๊ฒ๋ Figma ํ์ฉ ๋ฅ๋ ฅ์ ์๊ตฌํ๋ ๊ณณ๋ ๊ฝค ๋ง์ต๋๋ค.
โผ ์ต๊ทผ ์ก์ฝ๋ฆฌ์์์ ๊ฒ์ํ ์น ํผ๋ธ๋ฆฌ์
, ์น ๊ฐ๋ฐ์ ์ค์ ์ฑ์ฉ๊ณต๊ณ ๋ด์ฉ
๊ฐ์์ ๊ฐ์ ์ฌ์ดํธ๋ฅผ ์ง์ ๋ง๋ค๋ฉฐ
์ค๋ ฅ์ ํ์คํ๊ฒ ์ฌ๋ ค๋ณด์ธ์.
๐ก [SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma] ๊ฐ์๋ฅผ ํตํด์ SCSS(SASS) ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ, FLEX Layout ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ, PC, ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์ ์ค๊ณ ๋ฐ ์ ์ ์ค๋ ฅ์ ์ค์๊ธ๊น์ง ์ฌ๋ฆด ์ ์์ต๋๋ค.
์ฝ๋ฉ์์ค๊ฐ 'Beyond Insight' ๋ผ๋ ๊ฐ์์ผ๋ก ๋ง๋ ์จ๋ผ์ธ ๊ฐ์ ์น์ฌ์ดํธ๋ฅผ ์ ์ํฉ๋๋ค. ์ธํ๋ฐ ๋๋ ํด๋์ค101๊ณผ ๋น์ทํ๋ค๊ณ ๋ณด์๋ฉด ๋ฉ๋๋ค. ๋ฉ์ธ ํ์ด์ง๋ถํฐ ์๋ธ ํ์ด์ง๊น์ง ํ๋ก์ ํธ ๊ฐ๋
์ผ๋ก ๋ค์ํ ํ์ด์ง์ ๋ค์ํ ๋ ์ด์์์ SCSS(SASS)๋ก ์ฝ๋ฉํ๊ณ ๋ชจ๋ ๋ ์ด์์์ FLEX ๋ ์ด์์์ผ๋ก ์ ์๋๋ ์ค์๊ธ ์ค๋ ฅ ํฅ์์ ์ํ ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ ํ๋ก์ ํธ์
๋๋ค.
- ์ฒด๊ณ์ ์ธ ๋ฐ์ํ ์น ์ฌ์ดํธ ํ๋ก์ ํธ ์ ์ ๊ณผ์
- SCSS(SASS) ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ
- FLEX Layout ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ
- PC, ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์ ์ค๊ณ ๋ฐ ์ ์
- ๋ฐ์ํ ์น ํ๋ก์ ํธ ์ ์์ ์ํ ์ ์ด์ฟผ๋ฆฌ ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ
- Figma(ํผ๊ทธ๋ง)๋ก ์ ์ํ๋ ์น์ฌ์ดํธ UI ๋์์ธ ๋ฅ๋ ฅ
- ์ฒด๊ณ์ ์ธ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ์ ํด๋์ค๋ค์ ์ค๊ณ ๋ฅ๋ ฅ
- ์ค๋ฌด์์ ๋ฑ! ํ์ํ ํ์์ ์ธ ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ ์๋ฒฝ ํ์ต
- ๋ชจ๋ ์ ์ ์์ค ์ ๊ณต(Figma ๋์์ธ ํ์ผ, ํผ๋ธ๋ฆฌ์ฑ ์์คํ์ผ, ๊ฐ์์๋ฃ PDF, ํผ๋ธ๋ฆฌ์ฑ ์์ฑ๋ณธ)
SCSS(SASS)๋ฅผ ํ ์ ์๋ค๋ ๊ฒ๋ง์ผ๋ก๋ ํผ๋ธ๋ฆฌ์
์ทจ์
๊ณผ ์ด์ง์์ ์ข์ ๊ฒฝ์๋ ฅ์ ๊ฐ๊ฒ ๋ฉ๋๋ค. ๊ทธ๋ฐ๋ฐ SCSS(SASS)๋ฅผ ์ฌ์ฉํด์ ๋ฐ์ํ ์น์ฌ์ดํธ ํ๋ก์ ํธ๋ฅผ ๋ฉ์ง๊ฒ ๋ง๋ค๋ฉด ๊ทธ ๋ฅ๋ ฅ๊ณผ ๊ฒฐ๊ณผ๋ฌผ์ ์ทจ์
๊ณผ ์ด์ง์์ ๋๊ตฌ ๋ณด๋ค๋ ํฐ ๊ฒฝ์๋ ฅ์ ๊ฐ๊ฒ ๋ ๊ฑฐ๋ผ๊ณ ํ์ ํฉ๋๋ค. ๋ฌผ๋ก ์ค์๊ธ ๋ ๋ฒจ์ ๊ฐ๊น์ด ์์
๋ด์ฉ์ด๊ณ ๋ถ๋์ด๋ผ์ ๋ง๋งํ์ง๋ ์๊ฒ ์ง๋ง ์ ๋ฐ๋ผ์ค์๋ฉด ์ฝ๋ฉ์์ค์ ๊ทธ ์ด๋ค ๊ฐ์๋ณด๋ค ํฐ ์ฑ๊ณผ๋ฅผ ๊ฐ๊ฒ ๋์ค ๊ฑฐ๋ผ ์๊ฐํฉ๋๋ค.
์ด๋ฒ ๊ฐ์์์ ์ ์ํ๋ ๋ฐ์ํ ์น ํ๋ก์ ํธ๋ ๋จ์ํ ๋ฉ์ธ ํ์ด์ง๋ง ๋ง๋๋ ๊ฒ์ด ์๋๋๋ค. ์ ์ฒด ์น์ฌ์ดํธ์ ๊ฐ์ฅ ์ค์ํ ํ์ด์ง์ธ ํ๋ก ํธ ํ์ด์ง, ๊ฐ์์๊ฐ ํ์ด์ง, ์นดํ
๊ณ ๋ฆฌ ๋ฉ์ธ ํ์ด์ง, ์๊ฐ์ ์ฒญ ์๊ฐ๋ฐ๊ตฌ๋ ํ์ด์ง, ํ์๊ฐ์
ํ์ด์ง ์ด 5๊ฐ ํ์ด์ง์
๋๋ค. ๋ชจ๋ ํ์ด์ง๋ PC, Mobile, Tablet ๋ ์ด์์์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฐ์ํ ํผ๋ธ๋ฆฌ์ฑ ์์
์ด ์งํ๋๋ ๊ฐ์์
๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ค์ํ ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ์ ๋ฐฐ์ฐ๊ฒ ๋๋ฉฐ ์ฌ๋ฌ๊ฐ์ง ๋ชจ๋ฌ๋ ์ ์ํฉ๋๋ค.
๋ฐ์ํ ์น ํ๋ก์ ํธ ๊ฐ์ ํ์ต ์์ ๐โโ๏ธ
- ์์ 01. ๋ฐ์ํ ์น์ฌ์ดํธ PC ๋ ์ด์์ ํผ๊ทธ๋ง(Figma) UI ๋์์ธ
- ์์ 02. ํผ๊ทธ๋ง(Figma)์์ ํด๋์ค๋ค์๊ณผ ํจ๊ป HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ค๊ณ
- ์์ 03. ํ
์คํธ ์๋ํฐ๋ก HTML ์ฝ๋ฉ
- ์์ 04. ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ ์์
๊ณผ ํจ๊ป ํ
์คํธ ์๋ํฐ๋ก SASS(SCSS) ์ฝ๋ฉ
- ์์ 05. PC ๋ ์ด์์์ ๋ชจ๋ฐ์ผ(Mobile) ๋ ์ด์์์ผ๋ก ๋ณ๊ฒฝํ๋ ํผ๋ธ๋ฆฌ์ฑ
- ์์ 06. PC ๋ ์ด์์์ ํ๋ธ๋ฆฟ(Tablet) ๋ ์ด์์์ผ๋ก ๋ณ๊ฒฝํ๋ ํผ๋ธ๋ฆฌ์ฑ
- ์์ 07. ๋ชจ๋ ์นํ์ด์ง ์ธ๋ฐํ ํผ๋ธ๋ฆฌ์ฑ ์ต์ข
๋ง๋ฌด๋ฆฌ ์์
1) ํผ๊ทธ๋ง(Figma)๋ก SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ UI ๋์์ธ ์ ์
2) ํผ๊ทธ๋ง(Figma)๋ก SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
3) HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๊ธฐ์ด๋ก ํ
์คํธ์๋ํฐ๋ก HTML ์ฝ๋ฉ
4) HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๊ธฐ์ด๋ก ํ
์คํธ์๋ํฐ๋ก SCSS(SASS) ์ฝ๋ฉ
5) ๋ชจ๋ฐ์ผ ๋์ ๋ฐ์ํ ์น ๋ ์ด์์์ผ๋ก ๋ณ๊ฒฝ ์์
6) ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ์น ๋ ์ด์์์ผ๋ก ๋ณ๊ฒฝ ์์
7) ๋ชจ๋ ์นํ์ด์ง์ ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ ์์
๊ณผ ์ธ๋ฐํ ํผ๋ธ๋ฆฌ์ฑ ์ต์ข
๋ง๋ฌด๋ฆฌ ์์
โผ ์ฌ๋ฌ ์ข
๋ฅ์ ์ค์ ๋๋ฐ์ด์ค ๋ชฉ์
์์ ์์ธํ ๋ง๋ฌด๋ฆฌ ์์
ํผ๋ธ๋ฆฌ์ฑ ์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ & ๊ธฐ๋ฅ์ ์ ๐โโ๏ธ
์ด ๊ฐ์์์ ์ ์ํ๋ ์นํ์ด์ง๋ ํ๋ก ํธ ํ์ด์ง, ๊ฐ์์๊ฐ ํ์ด์ง, ์นดํ
๊ณ ๋ฆฌ ๋ฉ์ธ ํ์ด์ง, ์๊ฐ์ ์ฒญ ์๊ฐ๋ฐ๊ตฌ๋ ํ์ด์ง, ํ์๊ฐ์
ํ์ด์ง์
๋๋ค. ๋ชจ๋ ํ์ด์ง๋ PC, Mobile, Tablet ๋ ์ด์์์ผ๋ก ๋ณ๊ฒฝํ๋ ๋ฐ์ํ ํผ๋ธ๋ฆฌ์ฑ ์์
์ด ์งํ๋๋ ๊ฐ์์
๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ค์ํ ๋ชจ๋ฌ๋ ํจ๊ป ์ ์ํฉ๋๋ค.
์๋ ์น์
์์ [ํผ๋ธ๋ฆฌ์ฑ ์์ฑ๋ณธ ๋ฏธ๋ฆฌ๋ณด๊ธฐ & ๊ธฐ๋ฅ์ ์] ์์์ ๋ณด์๋ฉด ํด๋น ๊ฐ์์์ ๋ญ ๋ง๋๋์ง ํผ๋ธ๋ฆฌ์ฑ ๊ธฐ๋ฅ์ ์๊ฐ ์์ธํ๊ฒ ์ค๋ช
๋์ด ์์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ [์ ์ฒด ์ปค๋ฆฌํ๋ผ]์์ ์์
๋ด์ฉ ๋ชฉ์ฐจ๋ฅผ ์ด๋ฏธ์ง๋ก ๋ณด์ค ์ ์์ต๋๋ค.
โผ SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ : ํ๋ก ํธ ํ์ด์ง(Front Page)
๐ฉ ํ๋ก ํธ ํ์ด์ง(Front Page)
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- SCSS(SASS)์ FLEX ๋ ์ด์์์ผ๋ก ์ ์ฒด ํผ๋ธ๋ฆฌ์ฑ ์ ์
- ์น์ฌ์ดํธ ์ฒซ ํ์ด์ง๋ก ์ฌ์ฉ์์๊ฒ ํด๋น ์น์ฌ์ดํธ์ ์ ์ฒด์ฑ์ ๋ณด์ฌ์ค
- ๋ณต์กํ HTML ๊ตฌ์กฐ๋ฅผ ๊ด๋ฆฌํ๊ณ ์ ์ ๋ฆฌ๋ ๊ณ์ธต ๊ตฌ์กฐ ๋ง๋๋ ๋ฐฉ๋ฒ(Clean Coding)
- PC & Tablet ๋ ์ด์์ ๋ค๋น๊ฒ์ด์
๊ณผ Mobile ๋ค๋น๊ฒ์ด์
์ ์๋ํ๋ ์คํฌ๋ฆฝํธ๋ฅผ if ์กฐ๊ฑด ๋ถ๊ธฐ ์ํด
- ์ผ์ ํ ์์น์ ์คํฌ๋กค์ ํ๋ฉด Header๋ฅผ ์๋จ์ ๊ณ ์ ์ํค๋ ์คํฌ๋ฆฝํธ ์ฌ์ฉ
- ํ๋ก ํธ ํ์ด์ง์ ๋ฉํ ์ ์ฒญ๊ณผ ์ด๋ฒคํธ ๋ชจ๋ฌ ๋ณด์ฌ์ฃผ๊ธฐ
- ๋ฉ์ธ ์ฌ๋ผ์ด๋์ ๊ฐ์ ์์ดํ
์ฌ๋ผ์ด๋๋ฅผ ์ฌ๋ฆญ ์ฌ๋ผ์ด๋๋ก ์ ์
- ๋ชจ๋ ํ์ด์ง๊ฐ ๊ณตํต์ ์ผ๋ก ๋ฌ๊ณ ๋ค๋๋ Header & Footer๋ฅผ ์ ์ด์ฟผ๋ฆฌ๋ก ์ปดํฌ๋ํธ ์์
- ์นด์ดํธ ๋ค์ด ํ์ด๋จธ ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ
- Footer์ ๋ค๋น๊ฒ์ด์
์ ๋ชจ๋ฐ์ผ ๋ ์ด์์ ๋ ๋๋กญ๋ค์ด ์ด์ฝ๋์ธ ํํ๋ก ๋ณํ
- ๊ฒ์ ํผ ์์์ ํฐํธ ์์ด์ฝ ๋ฃ๊ธฐ์ :focus ::placeholder ์ฌ์ฉํ๊ธฐ
- ๊ฐ์ํด๋์ค :before :after๋ก ํฐํธ์์ด์ฝ Unicode ํ์ฉ
- SVG ์ด๋ฏธ์ง ์ฌ์ฉ ๋ฐฉ๋ฒ
- CSS ์์ฑ์ธ Object-fit์ ์ค์ ์ฌ์ฉ ๋ฐฉ๋ฒ
- ํ์์ ์ธ ์ ์ด์ฟผ๋ฆฌ ์ํธ์์ฉ ๋ฉ์๋(ํด๋์ค์ ์ด, ์์์ ํ, ์ด๋ฒคํธ ํธ๋ค๋ฌ ๋ฑ)
- ํ์์ ์ธ ์ธ๋ผ์ธ ์๋ฐ์คํฌ๋ฆฝํธ ํ์ฉ ๋ฐฉ๋ฒ
- ๊ฐ์ ์์ดํ
์นด๋ UI๋ฅผ ๋ค์ํ ํํ๋ก ์ฌํ์ฉํ๋ ๋ฐฉ๋ฒ(@at-root)
- ํฐํธ ์์ด์ฝ(Bootstrap Icons) ์ฌ์ฉ๋ฒ๊ณผ ํ์ฉ ๋ฐฉ๋ฒ
- ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ธ๋ ์ดํฌํฌ์ธํธ ๋ณ๋ก ๋ฐ์ํ ๋ ์ด์์ ๋ณ๊ฒฝ(์ต์ 1024, 768~1024, ์ต๋ 767)
โผ SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ : ๊ฐ์์๊ฐ ํ์ด์ง(Class Detail)
๐ฉ ๊ฐ์์๊ฐ ํ์ด์ง(Class Detail)
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- SCSS(SASS)์ FLEX ๋ ์ด์์์ผ๋ก ์ ์ฒด ํผ๋ธ๋ฆฌ์ฑ ์ ์
- ๊ฐ์ ์๊ฐ ํ์ด์ง๋ก ๊ฐ์ฅ ๋ด์ฉ์ด ๋ง์์ ํผ๋ธ๋ฆฌ์ฑ ์์
๋ฌผ์ด ๋ง์ ํ์ด์ง
- ๊ฐ์์๊ฐ ์ฐ์ธก ์ฌ์ด๋๋ฐ ์ผ์ ์คํฌ๋กค ํ ๊ณ ์ ํ๊ธฐ
- ๊ฐ์์์ธ ๋ด์ฉ ์๋ธ ๋ค๋น๊ฒ์ด์
์ผ์ ์คํฌ๋กค ํ ๊ณ ์ ํ๊ธฐ
- ์ฌ์ด๋๋ฐ ๊ณต์ ํ๊ธฐ ๋ฒํผ ํด๋ฆญ ํ ๊ณต์ ํ๊ธฐ ๋ชจ๋ฌ ๋์ฐ๊ธฐ
- ์ปค๋ฆฌํ๋ผ ์๊ฐ ์ ์ด์ฟผ๋ฆฌ ์ด์ฝ๋์ธ
- ์์ฃผ ๋ฌธ๋ ์ง๋ฌธ๋ค ์ ์ด์ฟผ๋ฆฌ ์ด์ฝ๋์ธ
- ์๊ฐํ๊ธฐ ๋ณ์ ๊ฐ์ ๋ง๋ CSS ๋์์ธ
- ์์ ๋ด์ฅํจ์(built-in function)
- ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ธ๋ ์ดํฌํฌ์ธํธ ๋ณ๋ก ๋ฐ์ํ ๋ ์ด์์ ๋ณ๊ฒฝ(์ต์ 1024, 768~1024, ์ต๋ 767)
โผ SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ : ์นดํ
๊ณ ๋ฆฌ ๋ฉ์ธ ํ์ด์ง(Category Main)
๐ฉ ์นดํ
๊ณ ๋ฆฌ ๋ฉ์ธ ํ์ด์ง(Category Main)
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- SCSS(SASS)์ FLEX ๋ ์ด์์์ผ๋ก ์ ์ฒด ํผ๋ธ๋ฆฌ์ฑ ์ ์
- ํด๋์ค ๊ฐ์ ๋ชฉ๋ก ์ฌ๋ฆญ ์ฌ๋ผ์ด๋
- ํ์ด์ง CSS ๋์์ธ
- ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ธ๋ ์ดํฌํฌ์ธํธ ๋ณ๋ก ๋ฐ์ํ ๋ ์ด์์ ๋ณ๊ฒฝ(์ต์ 1024, 768~1024, ์ต๋ 767)
โผ SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ : ์๊ฐ์ ์ฒญ ์๊ฐ๋ฐ๊ตฌ๋(Take Course)
๐ฉ ์๊ฐ์ ์ฒญ ์๊ฐ๋ฐ๊ตฌ๋(Take Course)
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- SCSS(SASS)์ FLEX ๋ ์ด์์์ผ๋ก ์ ์ฒด ํผ๋ธ๋ฆฌ์ฑ ์ ์
- ์ ์ด์ฟผ๋ฆฌ๋ฅผ ํ์ฉํ ์๊ฐ ์ฅ๋ฐ๊ตฌ๋ ์์ดํ
์ญ์ ๋ฐ ์ ์ฒด์ญ์
- ๋ค์ํ CSS3 ์์ฑ(accent-color)
- ๋ฏธ๋์ด์ฟผ๋ฆฌ ๋ธ๋ ์ดํฌํฌ์ธํธ ๋ณ๋ก ๋ฐ์ํ ๋ ์ด์์ ๋ณ๊ฒฝ(์ต์ 1024, 768~1024, ์ต๋ 767)
โผ SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ : ํ์๊ฐ์
ํ์ด์ง(Member Register)
๐ฉ ํ์๊ฐ์
ํ์ด์ง(Member Register)
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- SCSS(SASS)์ FLEX ๋ ์ด์์์ผ๋ก ์ ์ฒด ํผ๋ธ๋ฆฌ์ฑ ์ ์
- HTML ํผ(Form) ์์์ ํน์ง๊ณผ ์์ฑ์ ๋ํ ์์ธํ ํ์ต
- ํผ ์์ ๊ฐ์ํด๋์ค ํ์ฉ(:focus ::placeholder)
- ์ค๋ณต๋ ์ ํ์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ ๋ฆฌํ๋ :is ๊ฐ์ํด๋์ค
- ์ปค์คํ
์ฒดํฌ๋ฐ์ค๋ก ์์ ์ฒดํฌ๋ฐ์ค์ ๋ผ๋์ค๋ฒํผ ๋ง๋ค๊ธฐ
- ๋น๋ฐ๋ฒํธ ๋ณด๊ธฐ/์๋ณด์ด๊ธฐ ์ค์ ํ๋ ์คํฌ๋ฆฝํธ
โผ SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ : ๋ก๊ทธ์ธ ๋ชจ๋ฌ(Modal)

๐ฉ ๋ก๊ทธ์ธ ๋ชจ๋ฌ(Modal)
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- SCSS(SASS)์ FLEX ๋ ์ด์์์ผ๋ก ์ ์ฒด ํผ๋ธ๋ฆฌ์ฑ ์ ์
- HTML ํผ(Form) ์์์ ํน์ง๊ณผ ์์ฑ์ ๋ํ ์์ธํ ํ์ต
- ํผ ์์ ๊ฐ์ํด๋์ค ํ์ฉ(:focus ::placeholder)
- ์ค๋ณต๋ ์ ํ์๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ ๋ฆฌํ๋ :is ๊ฐ์ํด๋์ค
- ์ปค์คํ
์ฒดํฌ๋ฐ์ค๋ก ์์ ์ฒดํฌ๋ฐ์ค์ ๋ผ๋์ค๋ฒํผ ๋ง๋ค๊ธฐ
- ๋น๋ฐ๋ฒํธ ๋ณด๊ธฐ/์๋ณด์ด๊ธฐ ์ค์ ํ๋ ์คํฌ๋ฆฝํธ
- @mixin @include ํ์ฉํ๊ธฐ

๐ฉ ๊ณต์ ํ๊ธฐ ๋ชจ๋ฌ(Modal), ์๊ฐ๋ฐ๊ตฌ๋ ํ์ธ ๋ชจ๋ฌ(Modal)
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- ํผ๊ทธ๋ง(Figma) UI ๋์์ธ ๋ฐ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ์ ์
- SCSS(SASS)์ FLEX ๋ ์ด์์์ผ๋ก ์ ์ฒด ํผ๋ธ๋ฆฌ์ฑ ์ ์
- ๊ฐ์ํด๋์ค :before :after๋ก ๋ํ ์ ์
- ์๊ฐ๋ฐ๊ตฌ๋ ํ์ธ ๋ชจ๋ฌ setTimeout์ผ๋ก 4์ด ํ ์๋ ๋ซ๊ธฐ
๋ค์ํ ํ์ผ ์ ๊ณต ๐๏ธ
๐ [SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma] ๋ชจ๋ ์์ฑ๋ณธ
์น์
7์์ ๊ฐ์ ์ ์์ ์ํ ๋ชจ๋ ์์ค ํ์ผ๊ณผ ํจ๊ป ๋์์ธ ์์ฑ๋ณธ, ํผ๋ธ๋ฆฌ์ฑ ์์ฑ๋ณธ์ด ์ ๊ณต๋ฉ๋๋ค. ๋ํ ๊ฐ์์์ ํต์ฌ ์ด๋ก ์ค๋ช
๊ณผ ์ค์ ํฌ์ธํธ ์ค๋ช
์ ์ํ PPT ํ์ผ๋ PDF๋ก ์ ๊ณต๋ฉ๋๋ค.
- [๋ค์ด๋ก๋] ๋์์ธ ์์
(Beyond Insight)
- [๋ค์ด๋ก๋] HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ(Beyond Insight)
- [๋ค์ด๋ก๋] ํผ๋ธ๋ฆฌ์ฑ ์์
(Beyond Insight)
- [๊ฐ์๋
ธํธ PDF] SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma
๐ ์์ ๊ฐ์์์ ์ฌ์ฉ๋ PPT ๊ฐ์์๋ฃ PDF ์ ๊ณต
- ๋์์ธ ์์
๊ณผ ํผ๋ธ๋ฆฌ์ฑ ์์
์ ์ํ ๋ค์ํ ์ฐธ๊ณ ์๋ฃ ์ ๊ณต
- [๊ฐ์๋
ธํธ] SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma(์ด 39ํ์ด์ง)
SCSS(SASS)+FLEX ํด๋ฆฐ ์ฝ๋ฉ(Clean Coding)์ ์ ์๐งฝ
[SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma] ๊ฐ์๋ฅผ ์๊ฐํ๋ฉด์ ํผ๊ทธ๋ง UI ๋์์ธ ๋ฅ๋ ฅ, HTML ์์ด์ดํ๋ ์ ๋ง๋ค๊ธฐ ๋ฅ๋ ฅ, ํผ๋ธ๋ฆฌ์ฑ์ ์ํ SCSS(SASS) + FLEX Layout ์ฌ์ฉ ๋ฅ๋ ฅ ๋ฑ ์ฌ๋ฌ ๊ฐ์ง๋ก ์ค๋ ฅ์ด ์ฑ์ฅํ ๊ฑฐ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ์ด๋ฐ ๋ถ๋ถ๋ค๋ ๋งค์ฐ ์ค์ํ์ง๋ง ๊ฐ์ฅ ์ค์ํ '๊ฒฝ๋ ฅ์์ฒ๋ผ ํผ๋ธ๋ฆฌ์ฑํ๋ ํด๋ฆฐ ์ฝ๋ฉ(Clean Coding)์ ์ ์'์ ๋ฐฐ์ฐ์๊ฒ ๋ฉ๋๋ค. ๊ฐ์์์ ๋ชจ๋ ํผ๋ธ๋ฆฌ์ฑ์ ์ด๋ฐ ์์น ํ์ ์์ฑ๋์์ต๋๋ค.
ํนํ ์ด๋ฒ ๊ฐ์์์๋ SCSS(SASS) ์ฝ๋ฉ์ ๊ณ์ธต ๊ตฌ์กฐ์ ๋ฐ๋ผ ์์ฐจ์ ์ผ๋ก ํด์ผ ํ๋ ๋ถ๋ถ์ ๋ํด ์์ฃผ ๊ฐ์กฐํฉ๋๋ค. SCSS(SASS)์ ๊ฒฝ์ฐ ์ ํ์ ๊ณ์ธต ๊ตฌ์กฐ๊ฐ ์ผ๋ฐ CSS ๋๋ณด๋ค ํจ์ฌ ์ค์ํฉ๋๋ค.
<๊ฒฝ๋ ฅ์์ฒ๋ผ ํผ๋ธ๋ฆฌ์ฑํ๋ ํด๋ฆฐ ์ฝ๋ฉ(Clean Coding)์ ์ ์>์ด๋ผ๋ ๋ถ๋ถ์ ํ์ํ ๊ณณ์ ํ์ํ ์ฃผ์์ ๋ฃ๋ ๊ฒ, HTML ์ถ์ฐ ์์์ ๋ง๊ฒ CSS ์ ํ์๋ ์์์ ๋ง๊ฒ ์ฝ๋ฉํ๋ ๊ฒ, ๊ณตํต๋ CSS ์ ํ์์ ๊ฒฝ์ฐ ๋์ค์ ์ ์ง ๋ณด์๋ฅผ ์ํด์ Common CSS๋ผ๋ ๊ณณ์ ์ ๋ฆฌํ๋ ๊ฒ... ์ด๋ฐ ์ฝ๋ฉ ์์น๊ณผ ์ต๊ด์ ๋ฐฐ์ฐ์๊ฒ ๋๋ฉด ์ค๋ฌด์์ ์ ๋ง ๋ง์ ๋์์ด ๋ฉ๋๋ค.
ํนํ, ์ทจ์
ํ ๋ ์ธ์ฌ๋ด๋น์ ๋๋ ๊ทธ์ ์คํ๋ ์ฌ๋์ด ์ง์์์ ํผ๋ธ๋ฆฌ์ฑ ๊ฒฐ๊ณผ๋ฌผ์ ๋ณด๊ณ ์์ค ์ฝ๋(Source Code)๋ฅผ ๋ณด๊ฒ ๋ฉ๋๋ค. ์ด๋ฐ ๊ฒฝ์ฐ ์ ๊น ์์ค ์ฝ๋๋ง ๋ด๋ ์ง์์์ ํผ๋ธ๋ฆฌ์ฑ ๊ธฐ๋ณธ๊ธฐ์ ๋ํด ํ๋จํ ์ ์์ต๋๋ค.
๐ก ์ด๋ฒ ๊ฐ์์ ํน๋ณํ ๋งค๋ ฅ ํฌ์ธํธ๋?
- ํผ๊ทธ๋ง(Figma) ์ค์ ์ ์์ผ๋ก ๋ฐ์ํ ์น UI ์ ์ ๋ฅ๋ ฅ์ ๊ฐ์ถ ์ ์์ต๋๋ค.
- ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์ ๋ํญ ํฅ์ ์ํค๋ HTML ์์ด์ดํ๋ ์ ์์ธํ ์์ฑ๋ฒ์ ๋ฐฐ์๋๋ค.
- ํผ๋ธ๋ฆฌ์ฑ ๊ฒฝ๋ ฅ์์ฒ๋ผ ํผ๋ธ๋ฆฌ์ฑํ๋ ํด๋ฆฐ ์ฝ๋ฉ(Clean Coding)์ ์ ์์ ๋ฐฐ์๋๋ค.
- ๋ค์ํ ํ์ด์ง์ ๋ ์ด์์ ์ ์, ์ดํดํ๊ธฐ ์ฌ์ด ์ค๋ช
, ๊น์ด์๋ ๊ฐ๋
์ ์์ธํ ์ค๋ช
ํฉ๋๋ค.
- ๋ฐ์ํ ์น ํผ๋ธ๋ฆฌ์ฑ์ ์ํด ์๊ฐ์์ด ์์์ผ ํ ๋ชจ๋ ๊ฒ์ ์ค๋ช
ํฉ๋๋ค.
- SCSS(SASS)์ FLEX์ ๋ํ ๊น์ด ์๋ ์ดํด๋์ ํ์ฉ ๋ฅ๋ ฅ์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค.
- SCSS(SASS) ์ฝ๋ฉ์ ๊ณ์ธต ๊ตฌ์กฐ์ ๋ฐ๋ผ ์์ฐจ์ ์ด๊ณ ์ฒด๊ณ์ ์ธ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค.
- FLEX ๋ ์ด์์์ ์ค๋ฌด์์ ๋ฐ๋ก ์ดํดํ๊ณ ์ ์ฉํ๋ฉด์ FLEX๋ฅผ ํ์คํ ๋ฐฐ์ฐ๊ฒ ๋ฉ๋๋ค.
- ํผ๋ธ๋ฆฌ์
์ทจ์
๊ณผ ์ด์ง์ ์ํ ์ต๊ณ ์ ํฌํธํด๋ฆฌ์ค, SCSS(SASS) ๋ฐ์ํ ์น ํ๋ก์ ํธ ๋ณด์
์๊ฐ ์ ์ฐธ๊ณ ์ฌํญ ๐ข
๐ ์ค์ต ํ๊ฒฝ(ํ
์คํธ ์๋ํฐ)
- ํ
์คํธ ์๋ํฐ๋ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)๋ก ์ ์๋์์ต๋๋ค.
- ๋ธ๋ผ์ผ์ธ , ์๋ธ๋ผ์ ๋ฑ ๋ค๋ฅธ ํ
์คํธ ์๋ํฐ๋ฅผ ์ฌ์ฉํ์
๋ ๋์ง๋ง ํด๋น ํ
์คํธ ์๋ํฐ๊ฐ ์ต์คํ
์
์ผ๋ก Live Sass Complier๋ฅผ ์ง์ํด์ผ ๊ฐ์๋ฅผ ๋ฐ๋ผ์ค์ค ์ ์์ต๋๋ค.
- SCSS(SASS) ์ฝ๋ฉ์ ์ํด ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋์ ์ต์คํ
์
์ธ Live Sass Complier๋ฅผ ๋ฐ๋์ ์ฌ์ฉํด์ผ ํฉ๋๋ค. ์ด๋ฒ ๊ฐ์๋ Live Sass Complier ์ฌ์ฉ์ ์ํด ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋๋ฅผ ๊ผญ ์ฌ์ฉํ์๊ธฐ ๋ฐ๋๋๋ค.
ํ์ต ์๋ฃ ๋ค์ด๋ก๋
๋ชจ๋ ํ์ต์๋ฃ๋ ์๋ ์น์
์์ ๋ฐ์ผ์ค ์ ์์ต๋๋ค. ํด๋ ๋ณ๋ก ์์ถ ํ์ผ๋ก ์ ๊ณต๋๋ฏ๋ก ๋ค์ด๋ก๋ ํ ์์ถ์ ํ๊ณ ๊ฐ์๋ฅผ ์์๋๋ก ๋ฐ๋ผ์ค์๋ฉด ๋ฉ๋๋ค.
๐ก ๋ค์ด๋ก๋ ํ์ผ ์ฌ์ฉ๋ฒ ๋ฐ ํด๋ ๋ด์ฉ
โ ๋์์ธ ์์
๊ณผ ํผ๋ธ๋ฆฌ์ฑ ์์
ํ ๋ ํ์ํ ์๋ฃ
โก ๋์์ธ ์์
์์ํ ๋ ํ์ํ ์๋ฃ
โข ํผ๋ธ๋ฆฌ์ฑ ์์ฑ๋ณธ ์๋ฃ
๐ก ํผ๋ธ๋ฆฌ์ฑ ์์
ํ
์คํธ์๋ํฐ <๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋>
ํด๋น ๊ฐ์ <SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma>๋ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)๋ก ์ ์๋ ๊ฐ์์
๋๋ค. ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋๋ ์ฌ์ฉ์ ํ์ด ์๋ Free ํ๋ก๊ทธ๋จ์
๋๋ค. ๋ชจ๋ ๊ฐ์ ์์์ ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋ ๊ธฐ์ค์ผ๋ก ์ค๋ช
ํ๊ณ ์์ต๋๋ค.
์๋ ์ฝ๋ฉ์์ค ์ ํ๋ธ ์์์ ํตํด์ ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ๋ฒ์ ๋จผ์ ์ตํ๊ณ <์น์
3. ๋ชจ๋ฐ์ผ ์น ์์ธ ํผ๋ธ๋ฆฌ์ฑ(HTML+CSS+JS)>๋ฅผ ํ์ตํ์๊ธฐ ๋ฐ๋๋๋ค.
๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code) ๋ค์ด๋ก๋ ํ๊ธฐ (ํด๋ฆญ)
- ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code) ์ฌ์ฉ๋ฒ ๋ฐ ํ๊ฒฝ์ค์ (์์ ๋ณด๊ธฐ)
- ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code)์์ ์๋ฐ(Emmet) ์ฌ์ฉ๋ฒ (์์ ๋ณด๊ธฐ)
- ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋(Visual Studio Code) ํ์ Extension ์ค์น ๋ฐ ์ฌ์ฉ๋ฒ (์์ ๋ณด๊ธฐ)
- ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋์์ CSS ์์ ํ ๋ ์๋ก ์ฌ๋ผ๊ฐ๋ Full Reload ๋ฐฉ์ง (์์ ๋ณด๊ธฐ)
- โ
Live Sass Compilier Extension ์ค์น ์์์ ์ ํ๋์๋ ์์ง๋ง ๋ฐ๋์ ์ค์นํ์
์ผ ํฉ๋๋ค.
- โ
ํผ๋ธ๋ฆฌ์ฑ ์ ์ ๋ฐ๋์ ์๋ ์น์
์์ Live Sass Compilier ์ต์คํ
์
์ค์น ์ฌ์ฉ๋ฒ์ ํ์ตํ์ธ์.
Q&A ๐ฌ
์๋ ์์ ์ง๋ฌธ ์ธ ๋ค๋ฅธ ์ง๋ฌธ์ ํด๋น ๊ฐ์ ์ปค๋ฎค๋ํฐ ์ง๋ฌธ ๊ฒ์ํ์ ๋จ๊ฒจ์ฃผ์๋ฉด ์ต์ ์ ๋คํด ๋ต๋ณ๋๋ฆฌ๊ฒ ์ต๋๋ค.
Q. SCSS(SASS)์ FLEX์ ๋ํด ๊ณต๋ถํ ์ ์ด ์๋๋ฐ ์์
์ ์ ๋ฐ๋ผ ๊ฐ ์ ์์๊น์?
๐ FLEX ์ ํ ํ์ต
FLEX๋ ์๋ ๋ณดํธ์ ์ธ ๋ด์ฉ์ด๋ผ ์ ํ๋ธ์์ ํ๋ ์ค ๋ ์ด์์ ๋๋ CSS Flex ๋ผ๊ณ ๊ฒ์ํ์๋ฉด 20~30๋ถ ์ ๋ ์์์ผ๋ก ํ๋ ์ค์ ์ด๋ก ์ ์ ๋ฆฌํ ์์์ด ๊ฝค ๋ง์ต๋๋ค. ์ด๋ฐ ์์ 1~2๊ฐ ์ฏค ๋ณด์๊ณ ์ค์ตํ์๋ฉด ํ๋ ์ค ์ ํํ์ต์ ์ถฉ๋ถํฉ๋๋ค. ํ๋ ์ค ๋ ์ด์์์ ์๊ฐ๋ณด๋ค ์ด๋ก ๋ด์ฉ์ด ๋ง์ง๋ ์์ต๋๋ค.
๐ SCSS(SASS) ์ ํ ํ์ต
SCSS(SASS) ์ ํํ์ต์ ๊ฐ์์ ํฌํจ๋ ์น์
4. SCSS ํต์ฌ ์ด๋ก (Essential Theory)๋ฅผ ํ์ตํ์๋ฉด ๋ถ์กฑํจ์ด ์์ต๋๋ค.
Q. ํผ๋ธ๋ฆฌ์ฑ ์ ์ ์ง์์ด ์ด๋ ์ ๋ ํ์ํ๊ฐ์?
HTML+CSS ๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ ๊ฒฝํ์ด๋ฉด ๋ฐ๋ผ ์ค์ค ์ ์๊ณ , ๊ธฐ๋ํ๋ ๋งํผ์ ์ค๋ ฅ ํฅ์๊ณผ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ผ์ค ์ ์์ต๋๋ค. ๋ค๋ง, CSS ์ค๋ ฅ์ด ๋๋ฌด ๊ธฐ์ด ๋จ๊ณ์ ์๋ ๋ถ๋ค์๊ฒ๋ ๋ถ๋ด๋ ์ ์์ต๋๋ค. CSS ์ค๋ ฅ์ด ์ด๋ ์ ๋๋ง ๊ฐ์ถ๊ณ ์์ด๋ ์ถฉ๋ถํ ๋ฐ๋ผ ์ค์ค ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ SCSS(SASS)๋ฅผ ์ฒ์ ์ ํ๋ ๋ถ๋ค์ ์ํด ์น์
4. SCSS ํต์ฌ ์ด๋ก (Essential Theory)์ 5์๊ฐ ์ด์์ ์ด๋ก ์์
๋ ์ค๋น๋์ด ์์ผ๋ฏ๋ก ์น์
4๋ฅผ ํ์ตํ์๊ณ ์น์
5~7๊น์ง ์ถฉ๋ถํ ์ ๋ฐ๋ผ์ค์
์ ํ๋ก์ ํธ๋ฅผ ์๋ฃํ์ค ์ ์์ต๋๋ค.
Q. ์ฝ๋ฉ์์ค ๊ฐ์ ์ค์ SCSS(SASS) ์ด๋ฏธ 2๊ฐ์ง๊ฐ ์๋๋ฐ ์ง๊ธ ๊ฐ์๋ ์ด๋ป๊ฒ ๋ค๋ฅธ๊ฐ์?
๋ค. ๊ธฐ์กด ์ฝ๋ฉ์์ค ๊ฐ์ ์ค์ <SCSS(SASS)+GRID+FLEX ์ค์ ํฌํธํด๋ฆฌ์ค ํผ๋ธ๋ฆฌ์ฑ>๊ณผ <SCSS(SASS) FLEX GRID ํต์ฌ์ด๋ก (PDF) ๊ต์ฌ ๋ฐ ํ์ฉ์์ > 2๊ฐ์ง ๊ฐ์๊ฐ ์์ต๋๋ค.
<SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma> ๊ฐ์๋ ์์ ๊ฐ์์ด๊ณ SCSS(SASS)์ ํต์ฌ์ด๋ก ๊ณผ ์ค์ ํ์ฉ์ ๊ณต๋ถํ๋ ๊ณผ์ ์
๋๋ค. ํ์ง๋ง ์ด๋ฒ ๊ณผ์ ์ฒ๋ผ SCSS(SASS)๋ก ์ ์ฒด ์น์ฌ์ดํธ๋ฅผ ๋ง๋๋ ๊ณผ์ ์ ์๋๋ผ์ ์๊ฐ์ ์
์ฅ์์๋ ๋์ด๋ ๋ถ๋ด์ด ์ข ์ ์ ๊ฐ์์
๋๋ค. ๊ทธ๋์ SCSS(SASS)๋ฅผ ์ฒ์ ์ ํ๋ ๋ถ๋ค๊ป SCSS(SASS)์ ๋ํ ๊ฒฝํ๊ณผ SCSS(SASS)๋ก ๋ง๋ ์ค์ ์์ ๋ฅผ ๋ง๋ค๊ธฐ์ ์ ํฉํ ๊ฐ์์
๋๋ค.
<SCSS(SASS) FLEX GRID ํต์ฌ์ด๋ก (PDF) ๊ต์ฌ ๋ฐ ํ์ฉ์์ > ๊ฐ์๋ ์์ ๊ฐ์๊ฐ ์๋๊ณ ๊ต์ฌ์ ์ค์ ์์ ํ์ผ์ ์ ๊ณตํ๋ ๊ฐ์์
๋๋ค. ํผ๋ธ๋ฆฌ์
๋ก์ ๋ ํผ๋ฐ์ค ์ฉ์ผ๋ก ๊ฐ์ง๊ณ ์์ผ์๋ฉด ๋์์ด ๋ฉ๋๋ค.
์ 2๊ฐ์ง ๊ณผ์ ์ ์ ํํ์ง ์์ผ์
๋ ์ด๋ฒ SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ ๊ฐ์๋ฅผ ์๊ฐํ์๋ ๊ฑด ๋ฌธ์ ๊ฐ ๋์ง ์์ต๋๋ค. ๋ค๋ง CSS ์ค๋ ฅ์ด ์ด๋ ์ ๋๋ ์ค๋น๋์ด ์์ด์ผ ํฉ๋๋ค.
Q. ๊ทธ๋ํฝ ํ๋ก๊ทธ๋จ ์ฌ์ฉ ๊ฒฝํ์ด ์๋๋ฐ ํผ๊ทธ๋ง(Figma) ๋์์ธ ํ ์ ์์๊น์?
์๊ฐ ์์์์๋ ์ธ๊ธํ์ง๋ง ํผ๊ทธ๋ง๋ ๋
ธ๋ ฅ ๋๋น ํผํฌ๋จผ์ค๊ฐ ๊ต์ฅํ ์ข์ต๋๋ค. ํ์ํฌ์ธํธ๋ฅผ ์ต์ํ ์ ๋๋ก ๋ค๋ฃฐ ์ ์์ผ๋ฉด ์ถฉ๋ถํ ํผ๊ทธ๋ง ๋์์ธ ์์
์ ๋ฐ๋ผ์ค์ค ์ ์์ต๋๋ค. ๋ค๋ง ์ข ๋ ์์
์ ์ ์ํํ์๊ธฐ ์ํด์ <[ํ๋
] SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ ํผ๊ทธ๋ง ๊ธฐ์ด ๊ฐ์ข(ft.๋์ผ ๋ชจ๋ํฐ ์ฌ์ฉ)> ์์์ ๋ณด์๊ณ ์๊ฐํ ์ ํ๋ธ๋ฅผ ํตํด์ ์ ํํ์ต์ ํ์๊ธธ ๋ฐ๋๋๋ค.
Q. ์ฐจ๋ณํ ๋๋ ํต์ฌ์ ์ธ ์ฝํ
์ธ ๊ฐ ๋ญ๊ฐ์?
๋์์ธ ์ ๋ฌธ๊ฐ๋ก์๊ฐ ์๋๋ผ ์ฌ์ ์ง์์ด ์ ํ ์๋ ์ฌ๋์ด ํผ๊ทธ๋ง๋ฅผ ์ ํ์ฉํ ์ ์๋ ์์ค์ ๋์์ธ ๊ฐ์๋ผ์ <์น์
1. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ UI ๋์์ธ ์ ์ with Figma> ํผ๊ทธ๋ง ๋์์ธ ์์
์์
์ ์ ๋ฌธ๊ฐ๋ฅผ ์ํ ์์
์ด๋ผ๊ธฐ ๋ณด๋ค๋ ํผ๊ทธ๋ง๋ฅผ ์ฒ์ ์์ํ๋ ์ฌ๋์ด ๋ฐ์๋ค์ด๊ธฐ ๋ฌด๋ํ ์์ค์
๋๋ค.
ํ์ง๋ง <์น์
2. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ HTML ์์ด์ดํ๋ ์ with Figma> ์์
์ ์ค๋ซ๋์ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์๋ฅผ ํด์จ ๊ฐ์ฌ๋ก์ ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์ ๋์ด๋ ๊ฐ์ฅ ํ์คํ๊ณ ์ฒด๊ณ์ ์ธ ๋ฐฉ๋ฒ์ผ๋ก ์์
ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ์ด๋ผ๋ ์์ํ๊ณ ์ด๋ ค์ด ์์
์ ๋จ๊ณ์ ์ผ๋ก ์์ค๊ธ ๊ฒฐ๊ณผ๋ฌผ์ ์ด๋์ด ๋ผ ์ ์๋๋ก ์ ์๋ ์์
์ด ํต์ฌ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
ํนํ SCSS(SASS) ๋ฐ์ํ ์น ํ๋ก์ ํธ๋ฅผ ํ๊ธฐ ์ํ ์น์
4์์ SCSS ํต์ฌ ์ด๋ก (Essential Theory)์ 5์๊ฐ ์ด์ ๋ค๋ฃจ๊ณ ์๊ธฐ ๋๋ฌธ์ SCSS ํต์ฌ ์ด๋ก ์ ์๋ฒฝํ๊ฒ ํ์ตํ์ค ์ ์์ต๋๋ค.
๋ค์ํ ํ์ด์ง์ ๋ค์ํ ๋ ์ด์์ HTML ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๊ณ ๊ทธ๊ฑธ ํผ๋ธ๋ฆฌ์ฑํ๋ฉด์ ์ค์๊ธ ํผ๋ธ๋ฆฌ์ฑ ์ค๋ ฅ์ ๊ฐ๊ฒ ๋ ๊ฑฐ๋ผ ์๊ฐํฉ๋๋ค.
Q. ๋์์ธ ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋ ๊ฐ์์ธ๊ฐ์?
์ถฉ๋ถํ ๊ฐ๋ฅํฉ๋๋ค. ์ ๋ ๋์์ธ๊ณผ ์ ํ ๊ด๊ณ์๋ ์ ๊ณต์
๋๋ค. ์น์
1์ <[ํ๋
] SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ ํผ๊ทธ๋ง ๊ธฐ์ด ๊ฐ์ข> ์์์๋ ์์ง๋ง ํ์ํฌ์ธํธ๋ฅผ ์ ๋ค๋ฃจ๋ ์ ๋๋ฉด ํผ๊ทธ๋ง ํ์ตํ๊ณ ํ์ฉํ๋๋ฐ ์ ํ ์ง์ฅ์ด ์์ต๋๋ค. ์ ๋ ํผ๊ทธ๋ง ๊ฐ์๋ฅผ ์ํด์ ๋จ๊ธฐ๊ฐ ํ์ตํ๋๋ฐ๋ ์ข์ ๋์์ธ ๊ฒฐ๊ณผ๋ฌผ์ ์ป์ ์ ์์์ต๋๋ค.
Q. ๋์์ด๋๋ผ ํผ๊ทธ๋ง๋ ์ํ๋๋ฐ ์น์
1์ ํผ๊ทธ๋ง ๋์์ธ์ ํ์ตํด์ผ ํ๋์?
์๊ฐ ์์์๋ ์ธ๊ธํ์ง๋ง ์ ๊ฐ ํผ๊ทธ๋ง(Figma)๋ฅผ ์ค๋ ํด์ค๊ฑฐ๋ ์ํ๋ ์ฌ๋์ ์๋๋๋ค. ๊ทธ๋์ ํผ๊ทธ๋ง ์์
์ ์์ ์ด ์๋ ๋ถ์ด๋ฉด <์น์
1. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ UI ๋์์ธ ์ ์ with Figma>์ ์ง๋๊ฐ์๊ณ <์น์
2. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ HTML ์์ด์ดํ๋ ์ with Figma>๋ก ๋ฐ๋ก ๊ฐ์
์ ํ์ตํ์๋ฉด ๋ฉ๋๋ค.
์น์
2์ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ ๋ง๋ค๊ธฐ ๋ถํฐ๋ ๋์์ธ ์์ญ์ด ์๋๋ผ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์ ์์ญ์
๋๋ค.
Q. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ ์ ์ ๊ณผ์ ์ ์ ๋ฐฐ์์ผ ํ๋ฉฐ ๊ตฌ์ฒด์ ์ธ ๊ธฐ๋ํจ๊ณผ๋ ๋ญ๊ฐ์?
[SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma] ๊ฐ์๋ฅผ ํตํด์ SCSS(SASS) ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ, FLEX Layout ํต์ฌ ์ด๋ก ๋ฐ ์ค๋ฌด ํ์ฉ ๋ฅ๋ ฅ, PC, ๋ชจ๋ฐ์ผ, ํ๋ธ๋ฆฟ ๋์ ๋ฐ์ํ ๋ ์ด์์ ์ค๊ณ ๋ฐ ์ ์ ์ค๋ ฅ์ ์ค์๊ธ๊น์ง ์ฌ๋ฆด ์ ์์ต๋๋ค.
๊ตฌ์ฒด์ ์ธ ๊ธฐ๋ํจ๊ณผ๋ ์ฌ์ค ์ฌ๋๋ง๋ค ๋ค๋ฆ
๋๋ค. ํ์ง๋ง ์ฝ๋ฉ์์ค๊ฐ ํ์คํ ๋ง์๋๋ฆด ์ ์๋ ๋ถ๋ถ์ 'HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋๋ ๋ฅ๋ ฅ์ด ๋ํญ ํฅ์'๋ฉ๋๋ค. ๋ค์ํ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๋ฉด์ ๋ณต์กํ HTML ๊ณ์ธต๊ตฌ์กฐ๋ฅผ ์ด๋ป๊ฒ ์ฒด๊ณ์ ์ผ๋ก ์ ๋ฆฌํด์ผ ํ๋์ง ์ถฉ๋ถํ ํ๋ จ์ ํฉ๋๋ค. ๋ํ, ์ผ๊ด์ฑ ์๋ ํด๋์ค๋ค์์ ์ด๋ป๊ฒ ๋ค์ด๋ฐํ๊ณ ๊ณต์ ํด์ผ ํ๋์ง ํจ๊ป ๋ง๋ค๋ฉด์ ์์ธํ๊ฒ ์์
ํฉ๋๋ค.
<์น์
2. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ HTML ์์ด์ดํ๋ ์ with Figma>์์ ๋ค์ํ HTML ์์ด์ดํ๋ ์ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค๊ณ <์น์
5~7. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ ์์ธ ํผ๋ธ๋ฆฌ์ฑ>์์ ์ค์ ์น ํผ๋ธ๋ฆฌ์ฑ ์ ์ฉํ๋ ๋จ๊ณ๊น์ง ํ๋ จํ๋ฏ๋ก ์ถํ ์ด์ง๊ฐํ ์น UI ๋ ์ด์์์ ๋ง๋๋๋ฐ ์์ ๊ฐ์ด ์๊น๋๋ค.
Q. ์์
๋ด์ฉ์ ์ด๋ ์์ค๊น์ง ๋ค๋ฃจ๋์?
SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ๋ ํน์ฑ์ ํ์ผ์ ๊ฐ์์ ํด๋์ด ๊ฐ์๊ฐ ๋ง์ต๋๋ค. ๊ทธ๋์ ์ข ์๋๊ฐ ์๊ฒ ๋ง์ ๋ด์ฉ์ด ์งํ๋ฉ๋๋ค. ์ด๋ ์์ค๊น์ง๋ผ๋๊ฒ ์ฌ๋์ ๊ธฐ์ค์ ๋ฐ๋ผ ๋ค๋ฅด์ง๋ง ํผ๋ธ๋ฆฌ์
๊ฐ์ธ ํฌํธํด๋ฆฌ์ค๋ก์ ์ถฉ๋ถํ ์์ค์ผ๋ก ์์
ํ๋ ์์
๋ด์ฉ์
๋๋ค.
SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ ๊ฐ์๋ ์ด์ค๊ธ ์์ค์ธ๋ฐ ์ค๊ธ์ ๊ฐ๊น๋ค๊ณ ์๊ฐํ์๋ฉด ๋ฉ๋๋ค. ๊ณง, ๊ต์ฅํ ๋ง์ ๋ด์ฉ์ ๋ค๋ฃน๋๋ค. ์ด๋ณด์์๊ฒ๋ ๋ถ๋ด์ค๋ฌ์ธ ์ ์์ง๋ง ๊ณผ์ ์ ๋ง์น๋ฉด ํผ๋ธ๋ฆฌ์ฑ ๋ฅ๋ ฅ์ด ๊ฝค ์ฑ์ฅํ๋ค๋ ๊ฒ์ ๋๋ผ์ค ์ ์๋ค๊ณ ์๊ฐํฉ๋๋ค.
Q. ์ฝ๋ฉ์์ค ๋ ๊ฐ์ ์ค์ <๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ํฌํธํด๋ฆฌ์ค with Figma>๋ฅผ ์๊ฐํ๋๋ฐ์?
๋ชจ๋ฐ์ผ ์น ํผ๋ธ๋ฆฌ์ฑ ํฌํธํด๋ฆฌ์ค with Figma ๊ฐ์๋ฅผ ์๊ฐํ์
จ์ผ๋ฉด [์น์
1. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ UI ๋์์ธ ์ ์ with Figma ๋์์ธ] ๋ด์ฉ์ ๋ฐ๋์ ํ์ตํ์ค ํ์๋ ์์ต๋๋ค. (๊ฐ๋ฅํ๋ค๋ฉด ๋น ๋ฅธ ์๋๋ก ๋ง๋ค์ด ๋ณด์๋ ๊ฒ์ ์ถ์ฒ๋๋ฆฝ๋๋ค.)
[์น์
2. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ HTML ์์ด์ดํ๋ ์ with Figma] ๋ถํฐ ํ์ต์ ์์ํ์
๋ ๊ด์ฐฎ์ต๋๋ค.
Q. ์ ์ฒด ๊ฐ์ ์๊ฐ์ ์ด๋ป๊ฒ ๋๋์?
์ ์ฒด ์์ ๊ฐ์ ์๊ฐ์ 41์๊ฐ ์ด์์ผ๋ก ์ฌ๋์๋ ํ์ต์ ์ํ ์ถฉ๋ถํ ์์
์๊ฐ์ผ๋ก ์ค๋น๋์ด ์์ต๋๋ค. ์ ์ฒด ์์
๋น์จ์ ํผ๊ทธ๋ง ๋์์ธ ์์
์ด 15%, ํผ๋ธ๋ฆฌ์ฑ ์์
์ด 85%๋ฅผ ์ฐจ์งํฉ๋๋ค. ์ ์ฒด ์์์์ ์น์
1์ ํผ๊ทธ๋ง UI ๋์์ธ ์์
์ด๊ณ , ๋๋จธ์ง ์น์
๋ค์ ๋ฐ์ํ ์น ํผ๋ธ๋ฆฌ์ฑ ํ์ต ์์ญ์
๋๋ค.
- ์น์
1. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ UI ๋์์ธ ์ ์ - 6์๊ฐ 37๋ถ
- ์น์
2. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ HTML ์์ด์ดํ๋ ์ - 5์๊ฐ 21๋ถ
- ์น์
3. ๋น์ฃผ์ผ ์คํ๋์ค ์ฝ๋์์ Live Sass Compiler ์ธํ
๋ฐ ์ฌ์ฉ๋ฒ - 1์๊ฐ 15๋ถ
- ์น์
4. SCSS ํต์ฌ ์ด๋ก (Essential Theory) - 5์๊ฐ 9๋ถ
- ์น์
5. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ for PC Layout - 15์๊ฐ 44๋ถ
- ์น์
6. SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ for Responsive Layout - 3์๊ฐ 35๋ถ
- ์น์
7. [์ต์ข
๋ง๋ฌด๋ฆฌ] SCSS(SASS)+FLEX ๋ฐ์ํ ์น ํ๋ก์ ํธ - 2์๊ฐ 53๋ถ
Q. ์๊ฐ ๊ด๋ จ ์ฐธ๊ณ ์ฌํญ(๊ฐ์ถฐ์ผ ํ ํ๊ฒฝ, ๊ธฐํ ์ ์์ฌํญ ๋ฑ)์ด ์๋์?
์์
๋ด์ฉ์ด ๋ง๊ณ ์๋๊ฐ ์๊ฒ ์งํ๋ฉ๋๋ค. ๊ทธ๋ ๋ค๊ณ ์ถฉ๋ถํ ์ค๋ช
์์ด ์ง๋๊ฐ์ง ์๊ณ ์์ธํ๊ฒ ์ค๋ช
ํฉ๋๋ค. ์ ๋ฐ๋ผ ์ค์ค๊ฑฐ๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๋ค๋ง ์ฑ๊ธ ๋ชจ๋ํฐ๋ก ํ์ตํ์๋ ๊ฒ ๋ณด๋ค ๋์ผ ๋ชจ๋ํฐ ํ๊ฒฝ์ ๊ฐ์ถ์๊ธธ ๊ฐ๋ ฅํ๊ฒ ๊ถํฉ๋๋ค. ์น์
1์ ์๋ [ํ๋
] SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ ํผ๊ทธ๋ง ๊ธฐ์ด ๊ฐ์ข(ft.๋์ผ ๋ชจ๋ํฐ ์ฌ์ฉ) ์์์ ์๊ฐ ์ ์ฒญ ์ ์ ๋ฐ๋์ ๋ณด์๊ธฐ ๋ฐ๋๋๋ค.
์ง์๊ณต์ ์ ์๊ฐ โ๏ธ
[SCSS(SASS)+FLEX ์ค์ ๋ฐ์ํ ์น ํ๋ก์ ํธ with Figma] ๊ฐ์๋ฅผ ๋ง๋ ์ฝ๋ฉ์์ค๋ ํ์ฌ๊น์ง 300๋ช
์ด์ ๊ตญ๋น ํผ๋ธ๋ฆฌ์ฑ ๊ณผ์ ํ์๋ค์๊ฒ ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก , ํ์ฉ, ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์ ๊ฐ์ํ๊ณ ์์ต๋๋ค. ํนํ ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํ ๋ชจ๋ ์ค๋น๊ณผ์ ์ A๋ถํฐ Z๊น์ง ์๋ฒฝํ๊ฒ ๊ฐ์ด๋ํ๋ฉด์ ๋๋ถ๋ถ์ ํ์๋ค์ด ๊ณผ์ ์ข
๋ฃ ํ ๋ฐ๋ก ์ทจ์
์ ํ ์ ์๋๋ก ์๋
๊ฐ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์๋ง ์ ๋ฌธ์ ์ผ๋ก ํด์จ ๊ฐ์ฌ์
๋๋ค. ๋ํ ์ธํ๋ฐ์์ ํผ๋ธ๋ฆฌ์ฑ ๊ด๋ จ ๊ฐ์๋ฅผ ์งํํ๋ฉด์ ์ธํ๋ฐ ์๊ฐ์๋ถ๋ค๊ป๋ ๋์์ด ๋ง์ด ๋์๋ค๋ ํ๊ฐ๋ ๋ฐ๊ณ ์์ต๋๋ค.
๐๐ปโโ๏ธ ์ง๋ฌธํ์๊ธฐ ์ ์ ๊ผญ! ์ฝ์ด์ฃผ์ธ์~!!
ํ์ตํ์๋ฉด์ ๊ถ๊ธํ์ ์ฌํญ์ด ์์ผ์๋ฉด ์ง๋ฌธํด์ฃผ์ธ์. ์ง๋ฌธ ์ฃผ์ค ๋๋ ์๋๋ ๋ด์ฉ๊ณผ ์ฝ๋ ๊ทธ๋ฆฌ๊ณ ๋ธ๋ผ์ฐ์ ๊ฒฐ๊ณผ ํ๋ฉด ์บก์ณ๋ฅผ ์ฌ๋ ค์ฃผ์
์ผ ํฉ๋๋ค. ์ฝ๋์ ๊ฒฝ์ฐ HTML, CSS, JS ์ฝ๋ ๋ชจ๋ ์ฌ๋ ค์ฃผ์
์ผ ์ ํํ ๋ต๋ณ์ ๋๋ฆด ์ ์์ต๋๋ค.
์ง๋ฌธ๊ธ์ ์ฝ๋ ์์ด ๊ธ๋ก๋ง ๋ฌธ์ ๋ฅผ ์ค๋ช
ํ์๋ฉด ์ ๋ง ๊ฐ๋จํ๊ฒ ์๋๋ผ๋ฉด ์ ํํ ๋ต๋ณ์ ๋๋ฆฌ๊ธฐ ์ด๋ ต์ต๋๋ค. ๊ทธ๋ผ ์ ๊ฐ 'HTML, CSS, JS ์ฝ๋์ ๋ธ๋ผ์ฐ์ ์บก์ณ๋ฅผ ์ฌ๋ ค์ฃผ์ธ์~' ๋ผ๊ณ ๋ค์ ๋ต๋ณ์ ๋ฌ ์ ๋ฐ์ ์๊ณ ๊ฒฐ๊ตญ ํด๊ฒฐ์ฑ
์ ์ป๋๋ฐ ๋ฒ๊ฑฐ๋กญ๊ณ ์๊ฐ์ด ๋ ๊ฑธ๋ฆฝ๋๋ค.
โฒ ํด๋น ๊ฐ์ ์ปค๋ฎค๋ํฐ์ ์์ฃผ ๋ฌป๋ ์ง๋ฌธ ๋ณด๊ธฐ๋ฅผ ๋จผ์ ํ์ธํด์ฃผ์ธ์~
โก ํจ๊ณผ์ ์ธ ํ์ต์ ์ํด ๊ผญ! ์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์.
์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋์์ ์ด๋ก ์์ ๊ฐ์์ ๋ณํํ์๊ธฐ ๋ฐ๋๋๋ค. ๋ฌผ๋ก ๋ชจ๋ ์ด๋ก ์์์ด ์ ํ๋ธ ์ฑ๋์ ์๋๊ฑด ์๋์ง๋ง ์ค์ํ ์ด๋ก ์์์ ๊ฑฐ์ ๋ค ์์ต๋๋ค. ์์์ด ๋ง์ผ๋๊น ์์์ ์ฐพ๋ ๋ฐฉ๋ฒ์ ์๋ ์์์ฒ๋ผ ๊ฒ์ํ์๋๊ฒ ์ข์ต๋๋ค.
์ฝ๋ฉ์์ค ํผ๋ธ๋ฆฌ์ฑ ์ ํ๋ธ ์ฑ๋ : https://www.youtube.com/codingworks
โ์ง์ ๊ณต์ ์ ์๊ฐ
[HTML+CSS+JS ์ค์ ํฌํธํด๋ฆฌ์ค(์์ฆ3)] ๊ฐ์๋ฅผ ๋ง๋ ์ฝ๋ฉ์์ค๋ ํ์ฌ๊น์ง 300๋ช
์ด์ ๊ตญ๋น ํผ๋ธ๋ฆฌ์ฑ ๊ณผ์ ํ์๋ค์๊ฒ ํผ๋ธ๋ฆฌ์ฑ ์ด๋ก , ํ์ฉ, ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ํํ์ด์ง ์ ์ ๊ฐ์ํ๊ณ ์์ต๋๋ค. ํนํ ํผ๋ธ๋ฆฌ์
์ทจ์
์ ์ํ ๋ชจ๋ ์ค๋น๊ณผ์ ์ A๋ถํฐ Z๊น์ง ์๋ฒฝํ๊ฒ ๊ฐ์ด๋ํ๋ฉด์ ํ์ ๋๋ถ๋ถ ๊ณผ์ ์ข
๋ฃ ํ ๋ฐ๋ก ์ทจ์
์ ํ ์ ์๋๋ก ์๋
๊ฐ ํผ๋ธ๋ฆฌ์ฑ ๊ฐ์๋ง ์ ๋ฌธ์ ์ผ๋ก ํด์จ ๊ฐ์ฌ์
๋๋ค. ๋ํ, ์ธํ๋ฐ์์ ํผ๋ธ๋ฆฌ์ฑ ๊ด๋ จ ๊ฐ์๋ฅผ ์งํํ๋ฉด์ ์ธํ๋ฐ ์๊ฐ์๋ถ๋ค๊ป๋ ๋์์ด ๋ง์ด ๋์๋ค๋ ํ๊ฐ๋ ๋ฐ๊ณ ์์ต๋๋ค.