Atomic design

Atoms : HTML Tag (μ›μž)
Molecules : μ›μžλ“€μ„ ν•˜λ‚˜μ˜ λ‹¨μœ„λ‘œ λ™μž‘μ‹œν‚€λŠ” UI μ»΄ν¬λ„ŒνŠΈ
Organisms : μœ κΈ°μ²΄λŠ” ν•˜λ‚˜ μ΄μƒμ˜ μ±…μž„μ„ κ°–κ±°λ‚˜ 반볡적인 μ›μž,λΆ„μž μ‘°ν•©
Templates
Pages

Atomic design의 단점

  • κΈ°μ€€ : μ›μžλ“€μ΄ κ²°ν•©ν•œλ‹€κ³  λΆ„μžκ°€ λ˜λŠ” 건 μ•„λ‹μˆ˜λ„μžˆλ‹€. 각 계측을 μ–΄λ–»κ²Œ 뢄리해야 ν• μ§€ λͺ¨ν˜Έν•˜λ‹€.
  • μ‚¬μ΄λ“œμ΄νŽ™νŠΈ : 5λ‹¨κ³„λ‚˜ λ˜λŠ” κ³„μΈ΅λ•Œλ¬Έμ— μ‚¬μ΄λ“œμ΄νŽ™νŠΈκ°€ μ»€μ§ˆμˆ˜μžˆλ‹€.
  • μ†Œμš”μ‹œκ°„
  • μž¬μ‚¬μš©μ„± : templates단계, pages단계
λ‹¨μ μ΄μžˆμ§€λ§Œ 단점을 κ·Ήλ³΅ν•˜λŠ” μž₯점이 더 크닀.
μ»΄ν¬λ„ŒνŠΈλΆ„λ¦¬ 기쀀에 λŒ€ν•΄ 쒋은 μΈμ‚¬μ΄νŠΈλ₯Ό μ œκ³΅ν•΄μ£ΌκΈ° λ•Œλ¬Έμ΄λ‹€.

λ””μžμΈ μ‹œμŠ€ν…œ : μ»΄ν¬λ„ŒνŠΈμ™€ μŠ€νƒ€μΌμ„ κ΄€λ¦¬ν•˜λŠ” μ‹œμŠ€ν…œ

fluent ui : ms λ§Žμ€ μ»΄ν¬λ„ŒνŠΈλ₯Ό κ΄€λ¦¬ν•œλ‹€.
λ‹€μ–‘ν•œ μŠ€νƒ€μΌμ˜ μ»΄ν¬λ„ŒνŠΈλ₯Ό μ‘°ν•©ν•˜μ—¬ λ‹€μ–‘ν•œ μΈν„°νŽ˜μ΄μŠ€λ₯Ό κ³ κ°μ—κ²Œ μ œκ³΅ν•  수 μžˆλ‹€.

μŠ€νƒ€μΌμ˜ μž¬μ‚¬μš©

색상, μ•„μ΄μ½˜, Typography, μ• λ‹ˆλ©”μ΄μ…˜

λ””μžμΈ μ‹œμŠ€ν…œμ˜ 이점

μ œμ•½ μΌκ΄€λœ κ²½ν—˜ 지속성
μ»΄ν¬λ„ŒνŠΈ 톡합 관리