๐Ÿ’ป Frontend

Atomic Design Pattern ๐ŸŽจ

category
๐Ÿ’ป Frontend

๋ฐฐ๊ฒฝ

ํ•ญ์ƒ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ธฐ ์ „์—๋Š” ํŒ€ ๋‚ด์—์„œ ์ฝ”๋“œ ์ปจ๋ฒค์…˜์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํŒŒ์ผ๋ช…๊ณผ ํด๋”๋ช…์€ ๋Œ€๋ฌธ์ž๋กœ ํ• ์ง€, ๋ณ€์ˆ˜๋ช…์€ ์นด๋ฉœ์ผ€์ด์Šค๋กœ ํ• ์ง€.. ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ์ปจ๋ฒค์…˜์„ ์ •ํ•ด๋„ ๋ง‰์ƒ ๋งˆ๋ฌด๋ฆฌ๋œ ํ”„๋กœ์ ํŠธ์˜ ๊ฒฐ๊ณผ๋Š” ์ค‘๊ตฌ๋‚œ๋ฐฉ์œผ๋กœ ํŒŒ์ผ๊ตฌ์กฐ๋ถ€ํ„ฐ ์ฝ”๋“œ ์Šคํƒ€์ผ ๋“ฑ ํ†ต์ผํ™”๋œ ๋ถ€๋ถ„์ด ๋งŽ์ด ์—†์Šต๋‹ˆ๋‹ค.
๊ทธ ์ด์œ ๋Š” ๋ช…ํ™•ํ•œ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„ ๊ธฐ์ค€์ด ์—†๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํŒ€์›๋“ค์€ ๊ฐ์ž๊ฐ€ ์ƒ๊ฐํ•˜๋Š” ๊ธฐ์ค€์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‚˜๋ˆ•๋‹ˆ๋‹ค. ์•„๋ž˜ ์˜ˆ์‹œ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค๋ฅด๊ฒŒ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ถœ์ฒ˜ - ์นด์นด์˜ค
์ถœ์ฒ˜ - ์นด์นด์˜ค
๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์—ฌ๋Ÿฌ ๋””์ž์ธ ํŒจํ„ด์ด ๋‚˜์˜ค๊ฒŒ ๋˜์—ˆ๊ณ , ๊ทธ ์ค‘ ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์— ๋Œ€ํ•ด ์กฐ์‚ฌํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค!

Atomic Design Pattern

์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด ๊ตฌ์„ฑ์š”์†Œ๋Š” ํฌ๊ฒŒ 5๊ฐ€์ง€๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
์ผ๋‹จ ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์˜ ๋ฐฐ๊ฒฝ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋ชจ๋“  ๊ฒƒ์€ ์›์ž(atom)๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๊ณ , ์›์ž๋“ค์ด ์„œ๋กœ ๊ฒฐํ•ฉํ•˜์—ฌ ๋ถ„์ž(molecule)๊ฐ€ ๋˜๊ณ , ๋ถ„์ž๋Š” ๋” ๋ณต์žกํ•œ ์œ ๊ธฐ์ฒด(organism)๋กœ ๊ฒฐํ•ฉํ•˜์—ฌ ๊ถ๊ทน์ ์œผ๋กœ ๋ชจ๋“  ๋ฌผ์งˆ์„ ์ƒ์„ฑํ•œ๋‹ค๋Š” ๊ฒƒ์—์„œ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
์›์ž(atom) โ†’ ๋ถ„์ž(molecules) โ†’ ์œ ๊ธฐ์ฒด(organisms) โ†’ ๋ฌผ์งˆ(templates) โ†’ ์ตœ์ข…(pages)
ย 

1. Atom

atom์€ ๋”์ด์ƒ ๋ถ„ํ•ดํ•  ์ˆ˜ ์—†๋Š” ๊ธฐ๋ณธ ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.
label, input, button๊ณผ ๊ฐ™์ด ๊ธฐ๋ณธ HTML element ํƒœ๊ทธ ํ˜น์€ ๊ธ€๊ผด, ์• ๋‹ˆ๋ฉ”์ด์…˜, ์ปฌ๋Ÿฌ ํŒ”๋ ˆํŠธ, ๋ ˆ์ด์•„์›ƒ๊ณผ ๊ฐ™์ด ์ถ”์ƒ์ ์ธ ์š”์†Œ๋„ ํฌํ•จ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. atom์€ ๋ชจ๋“  ๊ธฐ๋ณธ ์Šคํƒ€์ผ์„ ํ•œ๋ˆˆ์— ๋ณด์—ฌ์ฃผ๋ฏ€๋กœ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๊ฐœ๋ฐœํ•  ๋•Œ ์œ ์šฉํ•˜๊ฒŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
notion image
ย 

2. Molecule

molecule์€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ atom์„ ๊ฒฐํ•ฉํ•˜์—ฌ ์ž์‹ ์˜ ๊ณ ์œ ํ•œ ํŠน์„ฑ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.
์•„๋ž˜ ์ด๋ฏธ์ง€๋Š” input, label, button atom๋“ค์ด ๊ฒฐํ—™ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. button์„ ํด๋ฆญํ•˜์—ฌ form์„ ์ „์†กํ•˜๋Š” ๊ฒƒ์€ molecule ์—์„œ ์ด๋ฃจ์–ด์ง€๋Š” ๊ฒƒ์ด์ฃ .
molecule์˜ ์ค‘์š”ํ•œ ์ ์€ ํ•œ ๊ฐ€์ง€ ์ผ์„ ํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.
notion image
ย 

3. Organism

organism์€ molecule๋ณด๋‹ค ์ข€ ๋” ๋ณต์žกํ•˜๊ณ  ์„œ๋น„์Šค์—์„œ ํ‘œํ˜„๋  ์ˆ˜ ์žˆ๋Š” ๋ช…ํ™•ํ•œ ์˜์—ญ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.
์•„๋ž˜์™€ ๊ฐ™์ด logo(atom), navigation(molecule), search form(molecule)์„ ํฌํ•จํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. atom, molecule์— ๋น„ํ•ด ์ข€ ๋” ๊ตฌ์ฒด์ ์œผ๋กœ ํ‘œํ˜„ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ƒ๋Œ€์ ์œผ๋กœ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋‚ฎ์•„์ง€๋Š” ํŠน์„ฑ์„ ๊ฐ€์ง‘๋‹ˆ๋‹ค.
notion image
ย 

4. Template

ํ…œํ”Œ๋ฆฟ์€ page๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ์—ฌ๋Ÿฌ ๊ฐœ์˜ organism, molecule๋กœ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜ ์ด๋ฏธ์ง€์™€ ๊ฐ™์ด ์‹ค์ œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ ˆ์ด์•„์›ƒ์— ๋ฐฐ์น˜ํ•˜๊ณ  ๊ตฌ์กฐ๋ฅผ ์žก๋Š” ์™€์ด์–ด ํ”„๋ ˆ์ž„์ž…๋‹ˆ๋‹ค. ์ฆ‰, ์‹ค์ œ ์ฝ˜ํ…์ธ ๊ฐ€ ์—†๋Š” page ์ˆ˜์ค€์˜ ๋‹จ๊ณ„๋ผ๊ณ  ์ •์˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
notion image
ย 

5. Page

page๋Š” ์œ ์ €๊ฐ€ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์ฝ˜ํ…์ธ ๋ฅผ ๋‹ด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
notion image
ย 
ย 
ย 
ย 

์‹ค์ œ ํ”„๋กœ์ ํŠธ์— ๋„์ž… ํ•ด๋ณด์ž ! !

๊ธฐ์—… ๊ณผ์ œ๋•Œ ์ˆ˜ํ–‰ํ–ˆ๋˜ ํŽ˜์ด์Šค๋ถ ๊ฒŒ์‹œํŒ ํ”„๋กœ์ ํŠธ์— ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์„ ์ ์šฉ์‹œํ‚ค๊ฒ ์Šต๋‹ˆ๋‹ค.
notion image
ย 

ํด๋” ๊ตฌ์กฐ

์•„ํ† ๋ฏน ํŒจํ„ด์„ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด ํด๋” ๊ตฌ์กฐ๋Š” 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค.
  1. ํŠน์ • atom์„ ์ฐพ๊ธฐ ํŽธํ•˜๋‹ค.
  1. ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ด๋ฃจ์–ด์ง„ ์š”์†Œ๋“ค์„ ํ•œ๋ˆˆ์— ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
ย 
๋‘ ์˜๊ฒฌ ๋‹ค ์ข‹์•„๋ณด์ด์ง€๋งŒ, ์ถ”ํ›„์— ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๋งŽ์•„์ง„๋‹ค๋ฉด 1์•ˆ์—์„œ๋Š” atom ํด๋” ์•ˆ์— ๋ฌด์ˆ˜ํžˆ ๋งŽ์€ ์š”์†Œ๋“ค์ด ํฌํ•จ๋˜์–ด ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ ํ•œ๋‹ค๋ฉด ํŠน์ • ์š”์†Œ๋ฅผ ์ฐพ๊ธฐ ๋ถˆํŽธํ•  ๊ฒƒ ๊ฐ™๊ธฐ ๋•Œ๋ฌธ์— 2๋ฒˆ์„ ์„ ํƒํ–ˆ์Šต๋‹ˆ๋‹ค.

1. Header

notion image
Header๋Š” ๋กœ๊ณ  ์ด๋ฏธ์ง€์™€ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€๋ฅผ atom, ์ „์ฒด ์š”์†Œ๋Š” molecules๋กœ ๊ตฌ์„ฑํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
notion image
ํด๋”๊ตฌ์กฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ƒ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.
ํ•ด๋‹น ์ฝ”๋“œ๋Š” atom๋“ค์„ ๋ชจ์€ molecules ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.
Header/molecules/index.ts
Header/molecules/index.ts
ย 

2. Post

๊ฒŒ์‹œ๊ธ€์€ ํฌ๊ฒŒ
  1. ๋‚ด์šฉ
  1. ์ข‹์•„์š” & ๋Œ“๊ธ€๋‹ฌ๊ธฐ ๋ฒ„ํŠผ
  1. ๋Œ“๊ธ€
๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ๊ฐ molecules์œผ๋กœ, ์ „์ฒด ์š”์†Œ๋ฅผ organism์œผ๋กœ ๊ตฌ์„ฑํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
notion image
ย 

2-1. ๋‚ด์šฉ (Content)

notion image
๋‚ด์šฉ์€ ํฌ๊ฒŒ ์ž‘์„ฑ์ž ํ”„๋กœํ•„, ๋‚ด์šฉ, ์ด๋ฏธ์ง€๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
ย 
  • ์ž‘์„ฑ์ž ํ”„๋กœํ•„ (Profile)
    • ํ”„๋กœํ•„์€ ํฌ๊ฒŒ ์‚ฌ์šฉ์ž ์ด๋ฏธ์ง€, ์ด๋ฆ„, ์ž‘์„ฑ ๋‚ ์งœ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•ด๋‹น ์š”์†Œ๋ฅผ atoms๋กœ ๊ตฌ์„ฑํ•˜๊ณ  ํ•ด๋‹น atoms๋ฅผ ๋ชจ์€ molecules๋กœ ๊ตฌ์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.
      Content/molecules/Profile.tsx
      Content/molecules/Profile.tsx
ย 
  • ๊ฒŒ์‹œ๊ธ€ ๋‚ด์šฉ (Detail)
    • Content/atoms/Detail.tsx
      Content/atoms/Detail.tsx
  • ์‚ฌ์ง„ (ContentImage)
    • Content/atoms/ContentImage.tsx
      Content/atoms/ContentImage.tsx
      ์•„๋ž˜์™€ ๊ฐ™์€ ํด๋” ๊ตฌ์กฐ๋กœ ๊ตฌ์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
      notion image

2-2. ์ข‹์•„์š” & ๋Œ“๊ธ€๋‹ฌ๊ธฐ ๋ฒ„ํŠผ (SocialMediaButton)

notion image
์ข‹์•„์š”์™€ ๋Œ“๊ธ€๋‹ฌ๊ธฐ ๋ฒ„ํŠผ์„ atoms๋กœ ๋‚˜๋ˆ„์—ˆ์Šต๋‹ˆ๋‹ค. molecules์—์„œ onClick ๋กœ์ง์„ ์ž‘์„ฑํ•˜๊ณ  props์œผ๋กœ ๋„˜๊ธฐ๊ฒŒ ๊ตฌ์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค.
SocialMediaButton/molecules/index.tsx
SocialMediaButton/molecules/index.tsx
ย 

2-3. ๋Œ“๊ธ€

๋Œ“๊ธ€์€ textarea, icon, ๋‹ต๊ธ€๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.
notion image
Comment๋ผ๋Š” atoms๊ณผ Reply๋ผ๋Š” atoms๋กœ ๊ตฌ๋ถ„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
๋Œ“๊ธ€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ ์š”์†Œ๋ฅผ ๋ชจ์€ ํ›„ templates์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค๊ฒŒ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
Comment/templates/index.tsx
Comment/templates/index.tsx

3. Textarea

์ด๋ฏธ์ง€์™€ ์ธํ’‹์„ atoms๋กœ, ์ „์ฒด ์š”์†Œ๋Š” molecules๋กœ ๊ตฌ์„ฑํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.
notion image
ย 
ํ•˜์ง€๋งŒ ์—ฌ๊ธฐ์„œ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ์Šต๋‹ˆ๋‹ค. ํ—ค๋”์—์„œ ์‚ฌ์šฉํ•œ ํ”„๋กœํ•„ UserIcon ์ปดํฌ๋„ŒํŠธ๊ฐ€ textarea์—์„œ๋„ ์‚ฌ์šฉํ•ด์•ผํ•˜๋Š” ๊ฒƒ์ด์ฃ . ๊ทธ๋ž˜์„œ ๋”ฐ๋กœ UserIcon atoms๋ฅผ ์ œ์ž‘ํ–ˆ์Šต๋‹ˆ๋‹ค.
notion image
ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š”๋ฐ ์ด๋ ‡๊ฒŒ ๊นŒ์ง€ ํŒŒ์ผ๊ณผ ํด๋”๋ฅผ ์ƒ์„ฑํ•ด์•ผ ํ• ๊นŒ ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.
ย 
ย 

์žฅ์ 

  1. ํด๋”๊ตฌ์กฐ๋ฅผ ํ†ต์ผํ™” ํ•˜์—ฌ ๊น”๋”ํ•œ ๊ตฌ์กฐ๋ฅผ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
  1. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ์–ด ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
  1. ์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ๋ฅผ atom ๋‹จ์œ„๋กœ ํ•˜๋‹ค๋ณด๋‹ˆ ์žฌ์‚ฌ์šฉ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
Atomic Design Pattern ์ ์šฉ ์ „
Atomic Design Pattern ์ ์šฉ ์ „
Atomic Design Pattern ์ ์šฉ ํ›„
Atomic Design Pattern ์ ์šฉ ํ›„
๊ธฐ์กด Header, Textarea, Post๋กœ๋งŒ ๋ถ„๋ฆฌ๋˜์—ˆ๋˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ atomic design pattern์„ ์ ์šฉํ•˜์—ฌ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๋‹จ์ 

  1. ํŒŒ์ผ์„ ์—ฌ๋Ÿฌ๊ฐœ๋กœ ๋‚˜๋ˆ„๋‹ค ๋ณด๋‹ˆ props drilling์ด ์ผ์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค.
  1. ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๋•Œ๋„ ์—ฌ๋Ÿฌ ํŒŒ์ผ์„ ์ƒ์„ฑํ•ด์ค˜์•ผ ํ•˜๋Š” ๋ฒˆ๊ฑฐ๋กœ์šด ์ผ์ด ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

๋งˆ๋ฌด๋ฆฌ

๋Š๋‚€์ 

๊ทธ๋ž˜๋„ ๋””์ž์ธ ํŒจํ„ด์„ ์ •ํ•˜๊ณ  ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐ๋ฅผ ์žก์•„๊ฐ€๋‹ˆ ์กฐ๊ธˆ ๋” ๊น”๋”ํ•˜๊ณ  ๋ช…ํ™•ํ•˜๊ฒŒ ๊ตฌ์กฐ๋ฅผ ์žก์„ ์ˆ˜ ์žˆ์–ด์„œ ํŽธํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„ํ† ๋ฏน ๋””์ž์ธ ํŒจํ„ด์€ ํ˜ผ์ž ๊ฐœ๋ฐœํ•  ๋•Œ๋ณด๋‹ค ๋‹ค์ˆ˜์˜ ํŒ€์›๋ผ๋ฆฌ ํ˜‘์—…ํ•  ๋•Œ ๋”์šฑ ๋” ๊ฐ€์น˜๋ฅผ ๋ฐœํœ˜ํ•  ๊ฒƒ ๊ฐ™๋‹ค๊ณ  ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค. ์ถ”ํ›„์— ํ”„๋กœ์ ํŠธ๋ฅผ ๊ฐœ๋ฐœํ•  ๋•Œ ์•„ํ† ๋ฏน ๋””์ž์ธ์œผ๋กœ ๊ฐœ๋ฐœํ•˜์—ฌ ๋”์šฑ ๋” ๊นŠ๊ฒŒ ๊ณต๋ถ€ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค!!

References

Atomic Design Pattern์˜ Best Practice ์—ฌ์ •๊ธฐ | ์š”์ฆ˜IT
์ข‹์€ ํด๋” ๊ตฌ์กฐ์— ๊ด€ํ•œ ์ด์•ผ๊ธฐ๋Š” ๊ฐœ๋ฐœ์ž๋“ค ๊ฐ„์˜ ๋Š์ž„์—†๋Š” ๋–ก๋ฐฅ์ž…๋‹ˆ๋‹ค. ์ •๋‹ต์ด ์žˆ์ง€ ์•Š๊ณ  ํ”„๋กœ์ ํŠธ์˜ ํŠน์ง•์ด๋‚˜ ํฌ๊ธฐ, ์ฃผ๊ด€์ ์ธ ํ•ด์„์— ๋”ฐ๋ผ ์ •๋ง ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•๋“ค์ด ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋งˆ์น˜ โ€˜์ข‹์€ ์ฝ”๋“œ๋ž€ ๋ฌด์—‡์ผ๊นŒ?โ€™์™€ ๊ฐ™์€ ๊ธ‰์˜ ์งˆ๋ฌธ์ด ์•„๋‹๊นŒ ์ƒ๊ฐ์ด ๋“ญ๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” ์ข‹์€ ํด๋” ๊ตฌ์กฐ ์ด์•ผ๊ธฐ ์ค‘ ๋จผ์ € ์ปดํฌ๋„ŒํŠธ์— ํ•œ์ •ํ•ด์„œ ํ•œ๋ฒˆ ์ด์•ผ๊ธฐํ•ด๋ณด๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •๋ฆฌํ•˜๊ฑฐ๋‚˜ ์•„ํ‚คํ…์ฒ˜ ํ˜น์€ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๊ฒ€์ƒ‰ํ•˜๋‹ค ๋ณด๋ฉด ํ•œ๋ฒˆ์ฏค์€ ๋งŒ๋‚˜๊ฒŒ ๋˜๋Š” ๋ฐ”๋กœ Atomic Design Pattern์— ๋Œ€ํ•œ ์ด์•ผ๊ธฐ์ž…๋‹ˆ๋‹ค.
Atomic Design Pattern์˜ Best Practice ์—ฌ์ •๊ธฐ | ์š”์ฆ˜IT
ย 
ย