๐ป Frontend
Atomic Design Pattern ๐จ
category
๐ป Frontend
๋ฐฐ๊ฒฝAtomic Design Pattern1. Atom2. Molecule3. Organism4. Template5. Page์ค์ ํ๋ก์ ํธ์ ๋์
ํด๋ณด์ ! !ํด๋ ๊ตฌ์กฐ1. Header2. Post2-1. ๋ด์ฉ (Content)2-2. ์ข์์ & ๋๊ธ๋ฌ๊ธฐ ๋ฒํผ (SocialMediaButton)2-3. ๋๊ธ3. Textarea์ฅ์ ๋จ์ ๋ง๋ฌด๋ฆฌ๋๋์ References
๋ฐฐ๊ฒฝ
ํญ์ ํ๋ก์ ํธ๋ฅผ ์งํํ๊ธฐ ์ ์๋ ํ ๋ด์์ ์ฝ๋ ์ปจ๋ฒค์
์ ์ค์ ํฉ๋๋ค.
ํ์ผ๋ช
๊ณผ ํด๋๋ช
์ ๋๋ฌธ์๋ก ํ ์ง, ๋ณ์๋ช
์ ์นด๋ฉ์ผ์ด์ค๋ก ํ ์ง.. ํ์ง๋ง ์ด๋ฐ ์ปจ๋ฒค์
์ ์ ํด๋ ๋ง์ ๋ง๋ฌด๋ฆฌ๋ ํ๋ก์ ํธ์ ๊ฒฐ๊ณผ๋ ์ค๊ตฌ๋๋ฐฉ์ผ๋ก ํ์ผ๊ตฌ์กฐ๋ถํฐ ์ฝ๋ ์คํ์ผ ๋ฑ ํต์ผํ๋ ๋ถ๋ถ์ด ๋ง์ด ์์ต๋๋ค.
๊ทธ ์ด์ ๋ ๋ช
ํํ ์ปดํฌ๋ํธ ์ค๊ณ ๊ธฐ์ค์ด ์๊ธฐ ๋๋ฌธ์
๋๋ค. ํ์๋ค์ ๊ฐ์๊ฐ ์๊ฐํ๋ ๊ธฐ์ค์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ๋๋๋๋ค. ์๋ ์์ ์ด๋ฏธ์ง์ ๊ฐ์ด ์ปดํฌ๋ํธ๋ฅผ ๋ค๋ฅด๊ฒ ๊ตฌ์ฑํ ์ ์์ต๋๋ค.
๊ทธ๋ ๊ธฐ ๋๋ฌธ์ ์ฌ๋ฌ ๋์์ธ ํจํด์ด ๋์ค๊ฒ ๋์๊ณ , ๊ทธ ์ค ์ํ ๋ฏน ๋์์ธ ํจํด์ ๋ํด ์กฐ์ฌํด๋ณด์์ต๋๋ค!
Atomic Design Pattern
์ํ ๋ฏน ๋์์ธ ํจํด ๊ตฌ์ฑ์์๋ ํฌ๊ฒ 5๊ฐ์ง๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค.
์ผ๋จ ์ํ ๋ฏน ๋์์ธ ํจํด์ ๋ฐฐ๊ฒฝ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค. ๋ชจ๋ ๊ฒ์ ์์(atom)๋ก ๊ตฌ์ฑ๋์ด์๊ณ , ์์๋ค์ด ์๋ก ๊ฒฐํฉํ์ฌ ๋ถ์(molecule)๊ฐ ๋๊ณ , ๋ถ์๋ ๋ ๋ณต์กํ ์ ๊ธฐ์ฒด(organism)๋ก ๊ฒฐํฉํ์ฌ ๊ถ๊ทน์ ์ผ๋ก ๋ชจ๋ ๋ฌผ์ง์ ์์ฑํ๋ค๋ ๊ฒ์์ ์์ํฉ๋๋ค.
์์(atom) โ ๋ถ์(molecules) โ ์ ๊ธฐ์ฒด(organisms) โ ๋ฌผ์ง(templates) โ ์ต์ข
(pages)
ย
1. Atom
atom์ ๋์ด์ ๋ถํดํ ์ ์๋ ๊ธฐ๋ณธ ์ปดํฌ๋ํธ์
๋๋ค.
label, input, button๊ณผ ๊ฐ์ด ๊ธฐ๋ณธ HTML element ํ๊ทธ ํน์ ๊ธ๊ผด, ์ ๋๋ฉ์ด์
, ์ปฌ๋ฌ ํ๋ ํธ, ๋ ์ด์์๊ณผ ๊ฐ์ด ์ถ์์ ์ธ ์์๋ ํฌํจ๋ ์ ์์ต๋๋ค. atom์ ๋ชจ๋ ๊ธฐ๋ณธ ์คํ์ผ์ ํ๋์ ๋ณด์ฌ์ฃผ๋ฏ๋ก ๋์์ธ ์์คํ
์ ๊ฐ๋ฐํ ๋ ์ ์ฉํ๊ฒ ์ฌ์ฉ๋ฉ๋๋ค.
ย
2. Molecule
molecule์ ์ฌ๋ฌ ๊ฐ์ atom์ ๊ฒฐํฉํ์ฌ ์์ ์ ๊ณ ์ ํ ํน์ฑ์ ๊ฐ์ง๋๋ค.
์๋ ์ด๋ฏธ์ง๋ input, label, button atom๋ค์ด ๊ฒฐํํ ๊ฒ์
๋๋ค. button์ ํด๋ฆญํ์ฌ form์ ์ ์กํ๋ ๊ฒ์ molecule ์์ ์ด๋ฃจ์ด์ง๋ ๊ฒ์ด์ฃ .
molecule์ ์ค์ํ ์ ์ ํ ๊ฐ์ง ์ผ์ ํ๋ ๊ฒ์
๋๋ค.
ย
3. Organism
organism์ molecule๋ณด๋ค ์ข ๋ ๋ณต์กํ๊ณ ์๋น์ค์์ ํํ๋ ์ ์๋ ๋ช
ํํ ์์ญ์ ๊ฐ์ง๋๋ค.
์๋์ ๊ฐ์ด logo(atom), navigation(molecule), search form(molecule)์ ํฌํจํ ์ ์์ต๋๋ค. atom, molecule์ ๋นํด ์ข ๋ ๊ตฌ์ฒด์ ์ผ๋ก ํํํ๊ธฐ ๋๋ฌธ์ ์๋์ ์ผ๋ก ์ฌ์ฌ์ฉ์ฑ์ด ๋ฎ์์ง๋ ํน์ฑ์ ๊ฐ์ง๋๋ค.
ย
4. Template
ํ
ํ๋ฆฟ์ page๋ฅผ ๋ง๋ค ์ ์๋๋ก ์ฌ๋ฌ ๊ฐ์ organism, molecule๋ก ๊ตฌ์ฑํ ์ ์์ต๋๋ค. ์๋ ์ด๋ฏธ์ง์ ๊ฐ์ด ์ค์ ์ปดํฌ๋ํธ๋ฅผ ๋ ์ด์์์ ๋ฐฐ์นํ๊ณ ๊ตฌ์กฐ๋ฅผ ์ก๋ ์์ด์ด ํ๋ ์์
๋๋ค. ์ฆ, ์ค์ ์ฝํ
์ธ ๊ฐ ์๋ page ์์ค์ ๋จ๊ณ๋ผ๊ณ ์ ์ํ ์ ์์ต๋๋ค.
ย
5. Page
page๋ ์ ์ ๊ฐ ๋ณผ ์ ์๋ ์ค์ ์ฝํ
์ธ ๋ฅผ ๋ด๊ณ ์์ต๋๋ค.
ย
ย
ย
ย
์ค์ ํ๋ก์ ํธ์ ๋์ ํด๋ณด์ ! !
๊ธฐ์
๊ณผ์ ๋ ์ํํ๋ ํ์ด์ค๋ถ ๊ฒ์ํ ํ๋ก์ ํธ์ ์ํ ๋ฏน ๋์์ธ ํจํด์ ์ ์ฉ์ํค๊ฒ ์ต๋๋ค.
ย
ํด๋ ๊ตฌ์กฐ
์ํ ๋ฏน ํจํด์ ์ฌ์ฉํ๋ค๋ฉด ํด๋ ๊ตฌ์กฐ๋ 2๊ฐ์ง ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.
- ํน์ atom์ ์ฐพ๊ธฐ ํธํ๋ค.
- ํ๋์ ์ปดํฌ๋ํธ์์ ์ด๋ฃจ์ด์ง ์์๋ค์ ํ๋์ ํ์ธํ ์ ์๋ค.
ย
๋ ์๊ฒฌ ๋ค ์ข์๋ณด์ด์ง๋ง, ์ถํ์ ์ปดํฌ๋ํธ๋ค์ด ๋ง์์ง๋ค๋ฉด 1์์์๋ atom ํด๋ ์์ ๋ฌด์ํ ๋ง์ ์์๋ค์ด ํฌํจ๋์ด ์์ ๊ฒ์
๋๋ค. ๊ทธ๋ ๊ฒ ํ๋ค๋ฉด ํน์ ์์๋ฅผ ์ฐพ๊ธฐ ๋ถํธํ ๊ฒ ๊ฐ๊ธฐ ๋๋ฌธ์ 2๋ฒ์ ์ ํํ์ต๋๋ค.
1. Header
Header๋ ๋ก๊ณ ์ด๋ฏธ์ง์ ํ๋กํ ์ด๋ฏธ์ง๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ์ด๋ฏธ์ง๋ฅผ atom, ์ ์ฒด ์์๋ molecules๋ก ๊ตฌ์ฑํด๋ณด๊ฒ ์ต๋๋ค.
ํด๋๊ตฌ์กฐ๋ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ์์ต๋๋ค.
ํด๋น ์ฝ๋๋ atom๋ค์ ๋ชจ์ molecules ์ฝ๋์
๋๋ค.
ย
2. Post
๊ฒ์๊ธ์ ํฌ๊ฒ
- ๋ด์ฉ
- ์ข์์ & ๋๊ธ๋ฌ๊ธฐ ๋ฒํผ
- ๋๊ธ
๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ๊ฐ๊ฐ molecules์ผ๋ก, ์ ์ฒด ์์๋ฅผ organism์ผ๋ก ๊ตฌ์ฑํ๊ฒ ์ต๋๋ค.
ย
2-1. ๋ด์ฉ (Content)
๋ด์ฉ์ ํฌ๊ฒ ์์ฑ์ ํ๋กํ, ๋ด์ฉ, ์ด๋ฏธ์ง๋ก ๋๋ ์ ์์ต๋๋ค.
ย
- ์์ฑ์ ํ๋กํ (Profile)
ํ๋กํ์ ํฌ๊ฒ ์ฌ์ฉ์ ์ด๋ฏธ์ง, ์ด๋ฆ, ์์ฑ ๋ ์ง๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค. ํด๋น ์์๋ฅผ atoms๋ก ๊ตฌ์ฑํ๊ณ ํด๋น atoms๋ฅผ ๋ชจ์ molecules๋ก ๊ตฌ์ฑํ์ต๋๋ค.
ย
- ๊ฒ์๊ธ ๋ด์ฉ (Detail)
- ์ฌ์ง (ContentImage)
์๋์ ๊ฐ์ ํด๋ ๊ตฌ์กฐ๋ก ๊ตฌ์ฑ๋์์ต๋๋ค.
2-2. ์ข์์ & ๋๊ธ๋ฌ๊ธฐ ๋ฒํผ (SocialMediaButton)
์ข์์์ ๋๊ธ๋ฌ๊ธฐ ๋ฒํผ์ atoms๋ก ๋๋์์ต๋๋ค. molecules์์ onClick ๋ก์ง์ ์์ฑํ๊ณ props์ผ๋ก ๋๊ธฐ๊ฒ ๊ตฌ์ฑํ์์ต๋๋ค.
ย
2-3. ๋๊ธ
๋๊ธ์ textarea, icon, ๋ต๊ธ๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค.
Comment๋ผ๋ atoms๊ณผ Reply๋ผ๋ atoms๋ก ๊ตฌ๋ถํ์์ต๋๋ค.
๋๊ธ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ๋๋ฌธ์ ๊ฐ ์์๋ฅผ ๋ชจ์ ํ templates์์ ๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๊ฒ ํ์์ต๋๋ค.
3. Textarea
์ด๋ฏธ์ง์ ์ธํ์ atoms๋ก, ์ ์ฒด ์์๋ molecules๋ก ๊ตฌ์ฑํด๋ณด๊ฒ ์ต๋๋ค.
ย
ํ์ง๋ง ์ฌ๊ธฐ์ ๋ฌธ์ ๊ฐ ์๊ฒผ์ต๋๋ค. ํค๋์์ ์ฌ์ฉํ ํ๋กํ UserIcon ์ปดํฌ๋ํธ๊ฐ textarea์์๋ ์ฌ์ฉํด์ผํ๋ ๊ฒ์ด์ฃ . ๊ทธ๋์ ๋ฐ๋ก UserIcon atoms๋ฅผ ์ ์ํ์ต๋๋ค.
ํ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋๋ฐ ์ด๋ ๊ฒ ๊น์ง ํ์ผ๊ณผ ํด๋๋ฅผ ์์ฑํด์ผ ํ ๊น ๋ผ๋ ์๊ฐ์ด ๋ค์์ต๋๋ค.
ย
ย
์ฅ์
- ํด๋๊ตฌ์กฐ๋ฅผ ํต์ผํ ํ์ฌ ๊น๋ํ ๊ตฌ์กฐ๋ฅผ ์ ์งํ ์ ์์์ต๋๋ค.
- ์ปดํฌ๋ํธ๊ฐ ๋ถ๋ฆฌ๋์ด ์์ด ์ ์ง๋ณด์๋ฅผ ํธ๋ฆฌํ๊ฒ ํ ์ ์์์ต๋๋ค.
- ์ปดํฌ๋ํธ ๋ถ๋ฆฌ๋ฅผ atom ๋จ์๋ก ํ๋ค๋ณด๋ ์ฌ์ฌ์ฉ์ฑ์ ๋์ผ ์ ์์์ต๋๋ค.
๊ธฐ์กด Header, Textarea, Post๋ก๋ง ๋ถ๋ฆฌ๋์๋ ์ปดํฌ๋ํธ๋ฅผ atomic design pattern์ ์ ์ฉํ์ฌ ์ฌ๋ฌ ์ปดํฌ๋ํธ๋ก ๋ถ๋ฆฌํ์์ต๋๋ค.
๋จ์
- ํ์ผ์ ์ฌ๋ฌ๊ฐ๋ก ๋๋๋ค ๋ณด๋ props drilling์ด ์ผ์ด๋ฌ์ต๋๋ค.
- ํ๋์ ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค๋๋ ์ฌ๋ฌ ํ์ผ์ ์์ฑํด์ค์ผ ํ๋ ๋ฒ๊ฑฐ๋ก์ด ์ผ์ด ๋ฐ์ํ์ต๋๋ค.
๋ง๋ฌด๋ฆฌ
๋๋์
๊ทธ๋๋ ๋์์ธ ํจํด์ ์ ํ๊ณ ํ๋ก์ ํธ ๊ตฌ์กฐ๋ฅผ ์ก์๊ฐ๋ ์กฐ๊ธ ๋ ๊น๋ํ๊ณ ๋ช
ํํ๊ฒ ๊ตฌ์กฐ๋ฅผ ์ก์ ์ ์์ด์ ํธํ์ต๋๋ค. ์ํ ๋ฏน ๋์์ธ ํจํด์ ํผ์ ๊ฐ๋ฐํ ๋๋ณด๋ค ๋ค์์ ํ์๋ผ๋ฆฌ ํ์
ํ ๋ ๋์ฑ ๋ ๊ฐ์น๋ฅผ ๋ฐํํ ๊ฒ ๊ฐ๋ค๊ณ ๋๊ผ์ต๋๋ค.
์ถํ์ ํ๋ก์ ํธ๋ฅผ ๊ฐ๋ฐํ ๋ ์ํ ๋ฏน ๋์์ธ์ผ๋ก ๊ฐ๋ฐํ์ฌ ๋์ฑ ๋ ๊น๊ฒ ๊ณต๋ถํ๊ณ ์ถ์ต๋๋ค!!
References
ย
ย