Atomic Design Pattern์ด ๋ญ์ง?
๐ค ๋ชฉ์
Atomic Design Pattern์ ๋ณธ๊ฒฉ์ ์ผ๋ก ์ ์ฉํ๊ธฐ์ ์์ ๊ธ์ ์ ์ด๋ณด๋ ค๊ณ ํ๋ค.
์ด ํจํด์ ์ค๋ช ํ๋ ์ฌ๋ฌ ๋ธ๋ก๊ทธ๊ธ์ ๊ฐ๋ณ๊ฒ ํ์ด๋ณด๊ณ ๊ธ๋ค ๋ง๋ค ์๋ ์๋ ๊ทธ๋ฆผ์ ๋ณด๋ฉด์ ์์ ๋จ์์ ์ปดํฌ๋ํธ์ธ ์์๋ฅผ ์ ๋ง๋ค์ด์ ๊ฐ๋ฐํ๋ ๋๋์ด๊ตฌ๋ํ๊ณ ๋์ด๊ฐ๋ค.
ํ์ง๋ง ๋ง์ ๊ตฌํํ๊ธฐ ์์ ์ฌ๋ฌ ๊ธ๋ค์ ์ง๋ํ๊ฒ ์์์ ์ฝ์ด๋ณด๋ ์ค์ ์ ์ผ๋ก ์ ๊ฒฝ์จ์ผํ๋ ๋ถ๋ถ์ด ์์๋ค.
๊ทธ๋ฆฌ๊ณ ๊ฐ์ฅ ๋ง์ด ์๊ฐ ๋ฌ๋ ๊ฒ์ ํผํค๋ฅผ ๊ฐ๋ฐํ ๋ ๋์์ด๋๋๊ณผ ํจ๊ป ์ ์ฉ์์ผ๋ดค์ผ๋ฉด ๋๋ฌด ์ข์์ ๊ฒ ๊ฐ์ ๋ฐฉ์์ด์๋ค.
์ฐ์ํํ ํฌ์บ ํ์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์ ๋ฐฐ์์ ์ธ์ ๊ฐ ํ๊ฒ ๋ ๋ ๋ค๋ฅธ ํผํค์ ์ ์ ์ฉ์์ผ๋ณด์.
๐ ์ฐธ๊ณ ๊ธ
Brad Frost์ ๊ฐ๋ ์ ์ธ ๋ด์ฉ์ Danilo Woznica์ ๊ธ์ ์ฐธ๊ณ ์์ ๊ฐ๋ฐ์ ํ์ํ ๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ ๋ด์๋ณด์๋ค.
โ๏ธ Atomic Design Pattern
Atomic Design helps to build consistent, solid and reusable design systems.
์ด ๊ฐ๋ฐ ๋ฐฉ์์ ์ฌ์ค ๊ฐ๋ฐ์๋ง ์ ์ฉ๋๋ ๊ฐ๋ ์ด ์๋๋ผ ๋์์ธ์๋ ์ ์ฉ๋๋ ์ค๊ณ ํจํด์ด๋ค.
๋ง ๊ทธ๋๋ ์์ ๋จ์์ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉ์ฑ์ด ๊ฐํ๊ณ , ๋จ๋จํ๊ฒ ์ ์ค๊ณํจ์ผ๋ก์ ์ ์ง์ ์ผ๋ก ์ง์์ ์ผ๋ก ๊ฐ๋ฐํ๊ธฐ ์ฉ์ดํ๊ฒ ํ๋ ๋ฐฉ์์ด๋ค.
์น ํ๋ก ํธ ๊ฐ๋ฐ์ ๊ฐ์ฅ ๋ง์ด ์ฐ์ด๋ ํ๋ ์์ํฌ์ธ Vue, React ๋ชจ๋ ์ปดํฌ๋ํธ ๋จ์๋ก ๊ฐ๋ฐ์ ์งํํ๊ธฐ ๋๋ฌธ์ ์ด๋ฌํ ์ปดํฌ๋ํธ ์ค์ฌ ์ค๊ณ ํจํด์ด ๋์ฑ ์ฃผ๋ชฉ ๋ฐ๊ฒ ๋์๋ค.(Flutter ๋ํ ๋ง์ฐฌ๊ฐ์ง์ด๋ค!)
๊ทธ๋ ๋ค๋ฉด ๊ฐ ์ปดํฌ๋ํธ์ ์ญํ ์ ๋ฌด์์ด๊ณ ๊ตฌ์ฒด์ ์ผ๋ก ์ด๋ค ๋ถ๋ถ์ ์ง์คํด์ ๊ฐ๋ฐํด์ผ ํ ์ง ๋ณด๋๋ก ํ์.
๐ Atom(์์)
- #Generic #Abstract
- ์์์ ์ง์ง ๋ง๊ทธ๋๋ก ๊ฐ์ฅ ์์ ๋จ์์ ์ปดํฌ๋ํธ์ด๋ค.
- ์์๋ ์ด๋ ํ context๊ฐ ์ฃผ์ด์ง๋ ์ง ์ด์ ํด๋นํ๋ ์ปดํฌ๋ํธ๊ฐ ์์ฑ๋ ์ ์์ด์ผ ํ๋ค.
- ๋๋ฌธ์ ๋ค์ํ state๋ฅผ ๋ค์ํ๊ฒ ๊ฐ์ง๊ณ ์์ด์ผํ๋ฉฐ ์ถ์์ ์ด์ง๋ง ์ต๋ํ ํฌ์ฉํ ์ ์๊ฒ ๋์ด์ผ ์ค๊ณ ๋์ด์ผ ํ๋ค. Ex) button: disabled, hover, different sizes, etc.
- ์์๋ ๋ง์ง์ด๋ ์์น๊ฐ์ ๊ฐ์ง๊ณ ์์ง ์๋๋ค.
๐ฅซ Molecule(๋ถ์)
- #LittleComplex
- ์์๋ฅผ ์ฎ์ด ์กฐ๊ธ ๋ณต์กํ ๋จ์์ ๋ถ์๊ฐ ์์ฑ๋๋ค.
- ๋ถ์๋ ๋ถ์๋ง์ ํ๋กํผํฐ๋ฅผ ๊ฐ์ง๊ณ ์์ ์ ์๊ณ ์ด๋ฅผ ํ์ฉํด ์์์ ๊ธฐ๋ฅ์ ๋ง๋ค์ด ์ค ์๋ ์๋ค.
- ๋ถ์๊ฐ ์์์ ์์น๊ฐ์ ์ง์ ํ๊ธฐ๋ ํ๋ค.
๐ Organism(์ ๊ธฐ์ฒด)
- #MoreComplex
- ์ ๊ธฐ์ฒด๋ ๋ถ์๋ฅผ ์ฎ์ด ๋ง๋ค์ด์ ์์ฑ๋๊ณ ๋๋ก๋ ๋ถ์๊ฐ ๋์ง ์์ ์์๊ฐ ์ฎ์ด๊ธฐ๋ ํ๋ค.
- ์ ๊ธฐ์ฒด๊ฐ ์์ฑ๋๋ฉด ์ปดํฌ๋ํธ๊ฐ ์ต์ข ๋ชจ์ต์ ๊ฐ์ง๊ฒ ๋๋ค.
- ํ์ง๋ง ์ฌ์ ํ contents์ ๋ฐ๋ผ ์ต๋ํ ์ฌ์ฌ์ฉ์ฑ ๋๊ฒ ๊ฐ๋ฐํ๋ ๊ฒ์ด ์ค์ํ๋ค!
- ์ ๊ธฐ์ฒด๋ ๋ถ์์ ์์์ ์์น๊ฐ์ ์กฐ์ ํ๋ค!
๐ Template(ํ ํ๋ฆฟ)
- #Layout #NoStyling
- ํ ํ๋ฆฟ์ ๋ง๋ค์ด์ง ์ ๊ธฐ์ฒด์ ์ปดํฌ๋ํธ์ positions, placements์ ์ ํด์ฃผ๋ ์ญํ ์ ํ๋ค.
- ๋จ, ํ ํ๋ฆฟ์๋ Styling์ด๋ Color๋ ๋ค์ด๊ฐ์ง ์๋๋ค.
- ํ ํ๋ฆฟ์ ์ญํ ์ ํ์ด์ง์ ๊ทธ๋ฆฌ๋๋ฅผ ์ ํด์ฃผ๋ ์ญํ ๋ฟ์ด๋ค.
๐ฑ Page(ํ์ด์ง)
- #Final
- ํ์ด์ง๋ ํ ํ๋ฆฟ์ ์ด์ฉํด์ ๊ฐ ๊ทธ๋ฆฌ๋์ ์ปดํฌ๋ํธ๋ฅผ ๊ทธ๋ ค์ ๋์คํ๋ ์ดํ๋ค.
๐ค ํน์ง
- ๊ฐ๋ฐ๋ง ์ด๋ ๊ฒ ์งํ๋์๋ ์๋๋ค.(๋์์ธ๋ ์ด ์์น์ ๋ง์ถฐ์ ์งํ๋์ด์ผ ํ๋ค!)
- ์๋ง ๊ตฌํ๋๋ค๋ฉด ๊ณ์ ๊ฐ์ ธ๋ค ์ธ ์ ์๋ ์ ๋ง ์ข์ Legacy Code๊ฐ ์๊ฒจ๋๊ฒ ๋๋ค!
- ๋ฆฌ์กํธ๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์คํ ๋ฆฌ๋ถ์ ํจ๊ป ์ ์ฉํ๊ฒ ๋๋ฉด ๋ ํฐ ํจ๊ณผ๋ฅผ ๋ณ์ ์ ์๋ค.
- ์ด๊ธฐ ๊ฐ๋ฐ ์๊ฐ์ด ๊ธธ์ง ๋ชจ๋ฅด๊ธฐ๋ง ์์ ๋จ์์ Component๋ฅผ ์ ์ค๊ณํด๋์ผ๋ฉด ์ค์ฅ๊ธฐ์ ์ผ๋ก ๊ฐ๋ฐ ๊ธฐ๊ฐ์ ๋จ์ถํ ์ ์๋ค ๐
๐น ์ ์ฉ๊ธฐ
๊ตฌ์กฐ์ ์ฌ์ฉ ๋ฐฉ๋ฒ์ ๋น์ทํ์ผ๋ ๋ด๋ถ ์ฝ๋๊ฐ ๋ฅ์ด ๋ง์๋ค..๐ฉใ ใ
์ด๋ฒ ํ๋ก์ ํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ง ์ฌ์ฉํ๋ค๋ณด๋ ์ปดํฌ๋ํธํ ํ๋๋ฐ ์ด๋ ค์์ด ์กฐ๊ธ ์์๋ค.
์ด๋ฅผ ์ํด How I converted my React app to VanillaJS๋ฅผ ์ฐธ๊ณ ํ๋ค.
๋ค์ ํ๋ก์ ํธ์๋ css์ javascript์ ๋ํด ์ข๋ ๊ณต๋ถํด์ ๋ด๋ถ ์ฝ๋๋ ์์ง๋ด์ผ๊ฒ ๋ค.
๐ฝ๏ธ ํ๋ก์ ํธ ๊นํ ๋ ํฌ์งํ ๋ฆฌ
[์ฐ์ํํ ํฌ์บ ํ] ๋ฐฐ๋ฏผ์ํ ํ์๊ฐ์ /๋ก๊ทธ์ธ ๊ตฌํ ํ๋ก์ ํธ