design system

πŸ“ Design System

λ””μžμΈ μ‹œμŠ€ν…œμ€ μž¬μ‚¬μš© κ°€λŠ₯ν•œ ꡬ성 μš”μ†Œμ™€ νŒ¨ν„΄μ„ μ‚¬μš©ν•˜μ—¬ λŒ€κ·œλͺ¨λ‘œ λ””μžμΈμ„ κ΄€λ¦¬ν•˜κΈ° μœ„ν•œ μ™„μ „ν•œ ν‘œμ€€ μ„ΈνŠΈμ΄λ‹€.

Design System - Laura Kalbag

Components you might keep the same across viewports

  • typeface

  • base unit

  • colour

  • shape / form

Components you might differentiate across viewports

  • grids

  • layout

  • font size

  • measure (line length)

  • leading (line height)

Content it must always be the same

λ””μžμΈ μ‹œμŠ€ν…œμ˜ 핡심은 μ½˜ν…μΈ λ₯Ό 졜적으둜 ν‘œμ‹œν•˜λŠ” 것이닀. μ½˜ν…μΈ λ₯Ό μœ„ν•œ λ””μžμΈμ„ ν•΄μ•Όν•œλ‹€. λͺ¨λ“  λ””λ°”μ΄μŠ€μ—μ„œ λ™μΌν•œ μ½˜ν…μΈ λ₯Ό κ³΅μœ ν•˜κ³ , λ””μžμΈ μ‹œμŠ€ν…œ μ»΄ν¬λ„ŒνŠΈλ₯Ό 톡해 μ½˜ν…μΈ λ₯Ό ν‘œμ‹œν•˜κ³  λ‚˜νƒ€λ‚΄λŠ” 것에 쀑점을 λ‘¬μ•Όν•œλ‹€.

πŸ“ Atomic Design

Atomic design은 일관성과 ν™•μž₯성을 μœ„ν•΄ λ””μžμΈ μ‹œμŠ€ν…œμ„ κ΅¬μΆ•ν•˜λŠ” 방법이닀.

  1. Atoms : μ›Ή μΈν„°νŽ˜μ΄μ„œμ— μ μš©λ˜λŠ” HTML tags, input or a button λ“±μ˜ κ°€μž₯ μž‘μ€ λ‹¨μœ„μ˜ μ»΄ν¬λ„ŒνŠΈ. 색상 νŒ”λ ˆνŠΈ, κΈ€κΌ΄ 같은 λ””μžμΈ μš”μ†Œλ„ ν¬ν•¨λœλ‹€.

  2. Molecules : Atoms의 μ‘°ν•©μœΌλ‘œ, 더 λ³΅μž‘ν•œ μ»΄ν¬λ„ŒνŠΈλ₯Ό λ§Œλ“€μ–΄λ‚Έλ‹€. 'do one thing and do it well'의 원칙을 λ”°λ₯Έλ‹€.

  3. Organisms : Molecules의 μ‘°ν•©μœΌλ‘œ, νŽ˜μ΄μ§€μ˜ ꡬ성 μš”μ†Œλ₯Ό λ§Œλ“€μ–΄λ‚Έλ‹€. 이 λ‹¨κ³„μ—μ„œ λ…λ¦½ν˜•, νœ΄λŒ€ν˜•, μž¬μ‚¬μš© κ°€λŠ₯ν•œ ꡬ성 μš”μ†Œλ₯Ό λ§Œλ“€ 수 μžˆλ‹€.

  4. Templates : Organisms의 μ‘°ν•©μœΌλ‘œ, νŽ˜μ΄μ§€μ˜ λ ˆμ΄μ•„μ›ƒμ„ λ§Œλ“€μ–΄λ‚Έλ‹€.

  5. Pages : νŽ˜μ΄μ§€λŠ” ν…œν”Œλ¦Ώμ˜ κ΅¬μ²΄ν™”λœ 버전이닀. μ‹€μ œ μ½˜ν…μΈ κ°€ ν¬ν•¨λœλ‹€.

✏️ 정리

  • κ³΅λΆ€ν•œ λ‚΄μš©

  • μ°Έκ³ ν•  λ‚΄μš©

Previous8μ£Όμ°¨Nextstyle basics

Last updated