1. Design System
Keyword
๋ฐ์ํ ์น ๋์์ธ(Responsive web design)
๋์์ธ ์์คํ (Design System)
Atomic Design
1. ๋ฐ์ํ ์น ๋์์ธ(Responsive web design)
ํ๋์ ์น ์ฌ์ดํธ๊ฐ ๋ค์ํ ๋๋ฐ์ด์ค์ ํ๋ฉด์ ๋ฐ๋ผ ์ปจํ ์ธ ํฌ๊ธฐ๊ฐ ์๋์ผ๋ก ๋ณํํ๋ ์น ๋์์ธ ๋ฐฉ์

๋ฐ์ํ ์น ๊ธฐ์
๋ฐ์ํ ์น ๊ธฐ์ ๋ทฐํฌํธ์ ๋ง๊ฒ ํฌ๊ธฐ์กฐ์ - ๋ฐ์ํ ์ด๋ฏธ์ง
์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ ๊ณ ์ ๋์ด ์์ผ๋ฉฐ ๋ทฐํฌํธ๋ณด๋ค ํฌ๋ฉด ์คํฌ๋กค๋ฐ๊ฐ ๋ํ๋๋ค. ๋ชจ๋ ์ด๋ฏธ์ง์ 100%์ max-width๋ฅผ ์ค์ ํ๋ค. ๋ทฐํฌํธ ํฌ๊ธฐ๊ฐ ์ด๋ฏธ์ง๋ณด๋ค ์์ ๊ฒฝ์ฐ ์ด๋ฏธ์ง๊ฐ ํ๋ฉด ๋๋น์ ๋ง๊ฒ ์ถ์๋๋ค.
๋ทฐํฌํธ์ ๋ง๊ฒ ํฌ๊ธฐ์กฐ์ - ๋ ์ด์์
์ปจํ ์ธ ์ width์ ๊ณ ์ ๊ฐ(px)์ด ์๋ em ๋๋ %๊ฐ์ผ๋ก ์ค์ ํ๋ค. ํ๋ฉด ๋๋น์ ๋ฐ๋ผ ์ปฌ๋ผ์ ํฌ๊ธฐ๊ฐ ์๋์ ์ผ๋ก ๋ณํํ๋ค.
๋ฏธ๋์ด ์ฟผ๋ฆฌ
๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ๋ค์ํ ๋๋ฐ์ด์ค์ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ CSS๋ฅผ ์ ํ์ ์ผ๋ก ์ ์ฉํ์ฌ ํ์ด์ง์ ์คํ์ผ์ ์ง์ ํ ์ ์๋ค.
Flexbox
Flexbox๋ฅผ ์ฌ์ฉํ๋ฉด ์์ ์์๋ค์ ํจ๊ณผ์ ์ผ๋ก ์ ๋ ฌํ๊ณ ์์ ์ฌ์ด์ ๊ณต๊ฐ ๋ฐฐ๋ถ์ ์กฐ์ ํ ์ ์๋ค.

Grid ๋งํฌ
Grid๋ ์ํ์ , ์์ง์ ์ผ๋ก ์ด๋ฃจ์ด์ง ์ด์ฐจ์ ๋ ์ด์์ ์์คํ ์ด๋ค. Flex์ ๋์ผํ๊ฒ ์ปจํ ์ด๋์ ์์ดํ ์ผ๋ก ๋ ์ด์์์ ์ก์ ์ ์๋ค.

๋ทฐํฌํธ ๋ฉํ ํ๊ทธ
๋ชจ๋ฐ์ผ์น์ด๋ ๋ฐ์ํ์น์์ ๊ฐ๊ฐ์ ๊ธฐ๊ธฐ์ฅ์น๋ฅผ ์ธ์ํ ๋ ์ฌ์ฉํ๋ ์ค์ํ ํ๊ทธ, ์ฌ์ฉํ์ง ์์์ ์ถ์๋ ํ์ด์ง๋ฅผ ๋ณด๊ฒ๋๋ค.
width=device-width: ๋๋ฐ์ด์ค์ ํ๋ฉด ๋๋น๋ฅผ ๋ฐ๋ฅด๋๋ก ํ์ด์ง ๋๋น๋ฅผ ์ค์
initial-scale=1.0: ๋ธ๋ผ์ฐ์ ์์ ์ด๊ธฐ ํ์ด์ง ๋ก๋์ ํ๋ / ์ถ์ ์์ค์ ์ค์
2. ๋์์ธ ์์คํ
(Design System)
์ ์
์ ์๋์์ธ ์์คํ ์ด๋ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ์ UI ํจํด์ ์ฌ์ฉํ์ฌ ๋ค์ํ ๊ท๋ชจ์ ๋์์ธ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ํ์ค์ ์ ๊ณตํ๋ค.
์น ์ฌ์ดํธ๋ฅผ PC์ฉ, ๋ชจ๋ฐ์ผ์ฉ์ผ๋ก ๋ฐ๋ก ๋ง๋ค ํ์์์ด ํ๋์ ๊ณต์ฉ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค์ด ๋ค์ํ ๋๋ฐ์ด์ค์ ๋์ํ ์ ์๋ค.
Nielsen Norman Group์ ์์ฝ
Nielsen Norman Group์ ์์ฝ๋์์ธ ์์คํ ์ ๋ค์ํ ํ์ด์ง์ ์ฑ๋์์ ์ผ๊ด๋ ๋์์ธ์ ๋ง๋ค๊ณ ์ค๋ณต์ ์ค์ฌ ๋ค์ํ ๊ท๋ชจ์ ๋์์ธ์ ๊ด๋ฆฌํ๊ธฐ ์ํ ์ผ๋ จ์ ํ์ค์ด๋ค.
๋์์ธ ์์คํ
์ ์ ํ์ํ๊ฐ?
๋์์ธ ์์คํ
์ ์ ํ์ํ๊ฐ?๋์์ธ ๋ฐ ๊ฐ๋ฐ์ ๋น ๋ฅด๊ฒ ์์ ํ๊ณ ๋ณต์ ํ ์ ์๋ค. - ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ์ปดํฌ๋ํธ, UI๋ฅผ ํ์ฉํด ๋น ๋ฅด๊ฒ ์์ ํ๊ณ ๋ณต์ ํ ์ ์๋ค.
ํ์ ์ ๊ธฐ์ฌ - ํ๋ก์ ํธ ๊ตฌ์ฑ์ ๊ฐ์ ์ง์ ๊ฒฉ์ฐจ๋ฅผ ์ค์ด๊ณ ๊ณตํต์ ์์น์ ์์งํ์ฌ ํ์ ์ ๊ธฐ์ฌํ ์ ์๋ค. ์ด๋ ๋ญ๋น๋๋ ์๊ฐ์ ์ค์ด๊ณ ํ๋ก์ ํธ ์์ฐ์ฑ์ ํฅ์์ํจ๋ค.
์ผ๊ด์ฑ ์๋ ์ฌ์ฉ์ ๊ฒฝํ - ์๋ก ๋ค๋ฅธ ํ์ด์ง๋ ํ๋ซํผ์ ๋์์ธ ์ผ๊ด์ฑ์ ์กฐ์ฑํด ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ๋ค.
3. Atomic Design
์น ์ ํ๋ฆฌ์ผ์ด์ UI๋ฅผ ๊ตฌ์ฑํ๋ ๋ฐ ์์ด์ ์์ ๋จ์๋ถํฐ ์์ํ์ฌ ํฐ ์์๋ก ์กฐํฉํด ๋๊ฐ๋ ๋์์ธ ์์คํ ๋ฐฉ๋ฒ๋ก
ํฌ๊ฒ 5๊ฐ์ง๋ก ๊ตฌ์ฑ ์์๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.
Atoms, Molecules, Organisms, Templates, Pages
Atom Atom์ ์ปดํฌ๋ํธ๋ฅผ ๊ฐ์ฅ ์์ ๋จ์๋ก ๋ถ๋ฆฌํ ๊ฒ์ผ๋ก ์ผ๋ฐ์ ์ผ๋ก HTML element ๋จ์๋ก ์์ฑ๋๋ค. ๋จ๋ ์ฌ์ฉ์ ์ด๋ ต๊ณ , Atom ๋จ์๋ฅผ molecule, organism ๋จ์๋ก ๊ฒฐํฉํด ์ ์ฉํ๊ฒ ์ฌ์ฉํ ์ ์๋ค.
Molecule ์ฌ๋ฌ๊ฐ์ Atom์ ์กฐํฉํ์ฌ SRP๋ฅผ ๋ง์กฑํ๋ ํ๋์ ์ผ์ ์ํํ๋ ๋จ์. Input Atom์ ํ ์คํธ๋ฅผ ์ ๋ ฅํ๊ณ Button Atom์ ํด๋ฆญํด form์ ์ ์กํ๋ molecule์ ์์๊ฐ ์๋ค. ํ๋์ ์ฑ ์์ ๊ฐ์ง๋ฏ๋ก ์ฌ์ฌ์ฉ์ฑ๊ณผ UI์ ์ผ๊ด์ฑ, ํ ์คํธ์ ์ฉ์ดํ๋ค.
Organism ์น ์๋น์ค์์ ํํ๋ ์ ์๋ ๋ช ํํ ๋ ์ด์์๊ณผ ํน์ ์ปจํ ์คํธ(ํน์ ์ฝ๋, ์์ญ์ ๋ํ ํ๊ฒฝ์ ๋ณด)๋ฅผ ๊ฐ์ง๋ค. ์ปจํ ์คํธ๋ฅผ ๊ฐ์ง๊ธฐ ๋๋ฌธ์ ์ฌ์ฌ์ฉ์ด ์ด๋ ต๋ค.
Template ์ค์ ์ฝํ ์ธ ๋ ์๋ ์ปดํฌ๋ํธ๋ฅผ ํ์ด์ง ๋ ์ด์์์ ๋ง๊ฒ ๋ฐฐ์นํ ์์ด์ด ํ๋ ์, ์ค์ผ๋ ํค UI
Page ์ ์ ๊ฐ ๋ณผ ์ ์๋ ์ค์ ์ปจํ ์ธ ๋ฅผ ๋ด๊ณ ์๋ค.
Last updated