κΈμ μ 리νκΈ° μμ:)
μλ‘μ΄ μ€ν°λλ‘ μΌμ£ΌμΌμ νκ°μ© κ΄μ¬μκ² μ½μ μν°ν΄μ λΈλ‘κ·Έμ μ 리 ν μ€ν°λμ 곡μ νλ λ°©ν₯μΌλ‘ μ§ννκ² λμμ΅λλ€.
μμ μλ μ½μ κ²λ€μ μ μ 리νμ§ λͺ»νμ§λ§, μ μ 리νκΈ°μν΄ μκ°μ ν¬μνλ©΄μ λΈλ‘κ·Έμ κΈμ μ 리νκ³€ νμλλ°μ, μ΄λμκ°λΆν°
λ€μμ μ 리νμ§~ κ° λ°λ³΅λλλ..1λ
μ΄ νλ λ€μ.
μ€λλ§μ μ
λνλ λΈλ‘κ·Έ κΈμ μμμ 무μμΌλ‘ ν μ§ κ³ λ―Όνλ€κ° π€ μ μ κ΄μ¬ ν€μλ μ€ νλμΈ DS κ΄λ ¨ν΄μ μ¬λ―Έμκ² μ½μλ κΈμ μ§§κ² μ 리 ν΄λ³΄μμ΅λλ€. π
https://engineering.atspotify.com/2023/05/multiple-layers-of-abstraction-in-design-systems/
DS λ‘ λ€μν μꡬ μ¬νμ μΆ©μ‘±νκΈ°λ μ΄λ ΅μ§λ§ ν΄λ΄μΌνλ€. -> μ΄κ² λμ μ κ²? μ΄λΌλ μ κ·Ό λ°©λ²μ ν¨κ³Όκ° μλ€.
ν΄κ²°μ±
: λμμ μ¬λ¬ κ³μΈ΅μ μΆμνλ₯Ό μ 곡νμ.
:) μ΄λ λλμ μ΄ μ»΄ν¬λνΈλ₯Ό 곡ν΅ννμ! λΌκ³ μκ°νλ©΄ ν λ¨μλ‘λ§ μκ°νλλ° μ¬λ¬ κ³μΈ΅μΌλ‘ λΆλ°°ν μ μκ² κ΅¬λλΌκ³ λλ
μΉ΄λμ κ΅¬μ± μμ μμ λ‘ μ΄ν΄λ³Έλ€λ©΄,
1. Config : props μ λ°μ΄ν°λ§ μ λ¬.
2. Slot: propsμ μλΈ μ»΄ν¬λνΈ μ λ¬. μμ λ³κ²½μ¬νμ νΈλ¦¬ -> ex) λ€λ₯΄κ² ννλ₯Ό κ°μΆ μ΄λ―Έμ§
3. Custom: κΈ°λ³Έλ§ μ 곡, μλΈμ»΄ν¬λνΈμ μΆκ° μ€νμΌμ κ³ κ°μ΄ κ΄λ¦¬.. -> ex) 볡μ‘ν λμμ κ°μ§ λ§μΆ€ν νΈν°
Config
<Card
title="These Days"
subtitle="St. Panther"
image="image"
imageAlt="a yellow and red billboard"
/>
Slots
<Card
title="These Days"
subtitle="St. Panther"
image={
<Image
src="thesedays.png"
alt="a yellow and red billboard"
shape="round"
/>
}
/>
Custom
<Card>
<Image
src="thesedays.png"
alt="a yellow and red billboard"
shape="round"
/>
<Type>These Days</Type>
<Type color="subdue">St Panther</Type>
<Type>Body text....</Type>
<ActionBarFooter/>
</Card>
1. μ΄ ν¨ν΄μ κ°μ₯ ν° μ₯μ μ 볡μ‘ν κ΅¬μ± μμμ κΈ°λ³Έ λͺ¨μ΅μ νμ₯νκ³ μλ€λ κ²!
2. DS μ κΈ°λ³Έ μ€μ μ΄ νλ²μ λͺ¨λ κ³ κ°μ μꡬ μ¬νμ μΆ©μ‘±μν¬ μ μλλ°, μ΄λ μ¬λ‘― μΆμνκ° μ€μν΄μ§.
- μ¬μ©μ λ§μΆ€ν κ΅¬μ± μμ μ 곡 : λΆλͺ¨ μ»΄ν¬λνΈλ₯Ό μ¬μ©ν΄μ νΉμ μꡬμ λ§κ² μμ ν μ μκ² ν΄μ€.
ex) κΈ°λ³Έ μΉ΄λμ μ λͺ© μμ μμ΄μ½ μΆκ°
- μ§μ μ μΈ μλΈμ»΄ν¬λνΈ μ κ·Ό : λΆλͺ¨ κ΅¬μ± μμμ 볡μ‘μ±μ΄ μ¦κ°νλ κ²μ λ§μ.
- μ μ°ν κ΅¬μ± μμ νμ₯ : μ¬λ‘― μΆμνλ₯Ό μ¬μ©νλ©΄ κΈ°λ³Έ (λΆλͺ¨) κ΅¬μ± μμμ μλ‘μ΄ κΈ°λ₯μ΄λ μ€νμΌ μΆκ°
- DSμ νκ³ κ·Ήλ³΅ : DS μ κΈ°λ³Έ μ€μ μ λμ΄μ μμ μ μꡬμ λ§κ² κ΅¬μ± μμ μ‘°μ κ°λ₯.
λ§μ§λ§μΌλ‘ μΆμν ν¨ν΄μ λν κ°λ₯μ±κ³Ό μ΄μ
1. κ³μΈ΅ ꡬ쑰λ₯Ό κ°μ§κΈ°λλ¬Έμ, ꡬμ±μ΄ μΆκ°λλ€κ³ ν΄μ κ·Όλ³Έμ΄ λ¬΄λμ§μ§ μμ..κΈ°λ³Έ κΈ°λ₯μ λ λΉ λ₯΄κ² ꡬν κ°λ₯!
2. μ¬μ¬μ©μ±μ΄ ν₯μλλ€.
'π WIL > π Etc' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
πΈ NVM μ¬μ© λ°©λ² (mac) (0) | 2022.11.02 |
---|