πŸ“‹λ””μžμΈ 개발 ν•Έλ“œμ˜€ν”„ μŠ€νŽ™ κ°€μ΄λ“œ

개발 μ „λ‹¬μš© λ””μžμΈ μŠ€νŽ™ 기술 방법 및 λ‹¨μœ„ κ°€μ΄λ“œ

λ””μžμΈ ν•Έλ“œμ˜€ν”„ μŠ€νŽ™ μž‘μ„±μ˜ 원칙

λ””μžμΈ ν•Έλ“œμ˜€ν”„λŠ” λ””μžμ΄λ„ˆκ°€ κ°œλ°œμžμ—κ²Œ κ΅¬ν˜„μ— ν•„μš”ν•œ λͺ¨λ“  정보λ₯Ό μ „λ‹¬ν•˜λŠ” κ³Όμ •μž…λ‹ˆλ‹€. λͺ¨ν˜Έν•œ μŠ€νŽ™μ€ 개발 쀑 μž¦μ€ 질문으둜 이어지고, μ΅œμ’… 결과물이 λ””μžμΈ μ˜λ„μ™€ λ‹¬λΌμ§€λŠ” 원인이 λ©λ‹ˆλ‹€. 쒋은 μŠ€νŽ™μ€ κ°œλ°œμžκ°€ λ””μžμ΄λ„ˆμ—κ²Œ 묻지 μ•Šμ•„λ„ κ΅¬ν˜„ν•  수 μžˆλŠ” μˆ˜μ€€μœΌλ‘œ μž‘μ„±ν•΄μ•Ό ν•©λ‹ˆλ‹€.

μƒ‰μƒΒ·νƒ€μ΄ν¬κ·Έλž˜ν”ΌΒ·κ°„κ²©Β·μƒνƒœΒ·λ°˜μ‘ν˜• λΈŒλ ˆμ΄ν¬ν¬μΈνŠΈκ°€ 핡심 ν•­λͺ©μž…λ‹ˆλ‹€. Figma의 Dev Modeλ‚˜ Zeplin 같은 νˆ΄μ„ μ‚¬μš©ν•˜λ©΄ 이 정보λ₯Ό μžλ™μœΌλ‘œ μΆ”μΆœν•  수 μžˆμ§€λ§Œ, νˆ΄μ—λ§Œ μ˜μ‘΄ν•˜λ©΄ μƒνƒœ(hover, focus, disabled)λ‚˜ μ• λ‹ˆλ©”μ΄μ…˜ 같은 동적 μŠ€νŽ™μ΄ λˆ„λ½λ˜κΈ° μ‰½μŠ΅λ‹ˆλ‹€.

토큰 기반 μŠ€νŽ™ μž‘μ„±

색상·크기·간격을 λ””μžμΈ ν† ν°μœΌλ‘œ μ •μ˜ν•˜λ©΄ λ””μžμ΄λ„ˆμ™€ κ°œλ°œμžκ°€ 같은 μ΄λ¦„μœΌλ‘œ μ†Œν†΅ν•  수 μžˆμŠ΅λ‹ˆλ‹€. color-primary-500, spacing-md처럼 의미 μžˆλŠ” 이름을 μ‚¬μš©ν•˜λ©΄ 값이 λ³€κ²½λ˜μ–΄λ„ 토큰λͺ…은 μœ μ§€λ˜μ–΄ μœ μ§€λ³΄μˆ˜κ°€ μ‰¬μ›Œμ§‘λ‹ˆλ‹€.

자주 λ¬»λŠ” 질문

μŠ€νŽ™μ— px와 rem 쀑 μ–΄λŠ λ‹¨μœ„λ₯Ό 써야 ν•˜λ‚˜μš”?

μ›Ή 접근성을 μœ„ν•΄ ν°νŠΈΒ·κ°„κ²©μ€ rem ꢌμž₯, px 병기. νŒ€κ³Ό ν•©μ˜ν•œ λ‹¨μœ„λ₯Ό μΌκ΄€λ˜κ²Œ μ‚¬μš©ν•˜λŠ” 것이 κ°€μž₯ μ€‘μš”ν•©λ‹ˆλ‹€.

ν•Έλ“œμ˜€ν”„ μŠ€νŽ™μ—μ„œ κΌ­ λͺ…μ‹œν•΄μ•Ό ν•  ν•­λͺ©μ€?

색상 ν† ν°Β·νƒ€μ΄ν¬κ·Έλž˜ν”ΌΒ·κ°„κ²©Β·μ»΄ν¬λ„ŒνŠΈ μƒνƒœ(hover/focus/disabled)Β·λ°˜μ‘ν˜• λΈŒλ ˆμ΄ν¬ν¬μΈνŠΈκ°€ ν•„μˆ˜μž…λ‹ˆλ‹€.

Figma ν”ŒλŸ¬κ·ΈμΈ 없이도 μŠ€νŽ™ 전달이 κ°€λŠ₯ν•œκ°€μš”?

Figma Inspect νŒ¨λ„ 곡유 λ˜λŠ” λ…Έμ…˜/μ»¨ν”Œλ£¨μ–ΈμŠ€ μŠ€νŽ™ ν…Œμ΄λΈ”λ‘œ μΆ©λΆ„ν•©λ‹ˆλ‹€. μ»΄ν¬λ„ŒνŠΈλͺ…Β·μƒνƒœΒ·λ‹¨μœ„λ₯Ό λͺ…ν™•νžˆ κΈ°μˆ ν•˜λ©΄ λ©λ‹ˆλ‹€.