πŸ“UI μŠ€νŽ˜μ΄μ‹± μ‹œμŠ€ν…œ 계산기

베이슀 λ‹¨μœ„λ₯Ό μ„€μ •ν•˜λ©΄ UI μŠ€νŽ˜μ΄μ‹± μŠ€μΌ€μΌκ³Ό CSS λ³€μˆ˜λ₯Ό μžλ™ μƒμ„±ν•©λ‹ˆλ‹€.

px

UI μŠ€νŽ˜μ΄μ‹± μ‹œμŠ€ν…œμ΄λž€?

UI μŠ€νŽ˜μ΄μ‹± μ‹œμŠ€ν…œμ€ λ””μžμΈ μ „λ°˜μ˜ μ—¬λ°±, νŒ¨λ”©, λ§ˆμ§„μ„ μΌμ •ν•œ λ‹¨μœ„λ‘œ ν‘œμ€€ν™”ν•œ 간격 μ²΄κ³„μž…λ‹ˆλ‹€. 베이슀 λ‹¨μœ„(보톡 4px λ˜λŠ” 8px)λ₯Ό μ •ν•˜κ³ , 이λ₯Ό 배수둜 ν™•μž₯ν•΄ xs, sm, md, lg, xl λ“±μ˜ μŠ€νŽ˜μ΄μ‹± 토큰을 λ§Œλ“­λ‹ˆλ‹€. 이λ₯Ό 톡해 λ””μžμΈκ³Ό 개발 κ°„μ˜ 일관성을 μœ μ§€ν•˜κ³  ν˜‘μ—… νš¨μœ¨μ„ 높일 수 μžˆμŠ΅λ‹ˆλ‹€.

8pt κ·Έλ¦¬λ“œ μ‹œμŠ€ν…œ μž₯점

8pxλ₯Ό 베이슀둜 μ“°λŠ” μ΄μœ λŠ” λŒ€λΆ€λΆ„μ˜ ν™”λ©΄ 해상도(1x, 2x, 3x DPR)μ—μ„œ 8의 λ°°μˆ˜κ°€ μ •μˆ˜ ν”½μ…€λ‘œ 떨어지기 λ•Œλ¬Έμž…λ‹ˆλ‹€. ν”½μ…€ μ™„λ²½μ„±(Pixel Perfect)을 μΆ”κ΅¬ν•˜λŠ” λ””μžμΈμ—μ„œ μ„œλΈŒν”½μ…€ λ Œλ”λ§ 문제λ₯Ό μ΅œμ†Œν™”ν•  수 μžˆμŠ΅λ‹ˆλ‹€. Google Material Design, Apple Human Interface Guidelines λͺ¨λ‘ 4~8dp 기쀀을 μ‚¬μš©ν•©λ‹ˆλ‹€.

CSS λ³€μˆ˜λ‘œ μ μš©ν•˜λŠ” 방법

:root { --space-1: 4px; --space-2: 8px; --space-3: 16px; } ν˜•μ‹μœΌλ‘œ CSS λ³€μˆ˜λ₯Ό μ •μ˜ν•˜λ©΄, μ»΄ν¬λ„ŒνŠΈμ—μ„œ padding: var(--space-2)처럼 μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ””μžμΈ μ‹œμŠ€ν…œ 툴(Figma, Tokens Studio λ“±)μ—μ„œλ„ 같은 토큰 이름을 μ‚¬μš©ν•˜λ©΄ λ””μžμΈ-개발 ν•Έλ“œμ˜€ν”„κ°€ 맀우 κ°„νŽΈν•΄μ§‘λ‹ˆλ‹€.

자주 λ¬»λŠ” 질문

Tailwind CSS μŠ€νŽ˜μ΄μ‹±κ³Ό ν˜Έν™˜λ˜κ²Œ μ“Έ 수 μžˆλ‚˜μš”?

λ„€, Tailwind ν˜Έν™˜ μŠ€μΌ€μΌ νƒ€μž…μ„ μ„ νƒν•˜λ©΄ Tailwind의 κΈ°λ³Έ μŠ€νŽ˜μ΄μ‹± 배수(1, 2, 4, 6, 8...)λ₯Ό 기반으둜 ν•œ μŠ€μΌ€μΌμ΄ μƒμ„±λ©λ‹ˆλ‹€. Tailwind의 κΈ°λ³Έ λ² μ΄μŠ€λŠ” 4pxμž…λ‹ˆλ‹€.

4pt와 8pt 쀑 μ–΄λ–€ 것을 선택해야 ν•˜λ‚˜μš”?

λ³΅μž‘ν•œ λŒ€μ‹œλ³΄λ“œλ‚˜ 데이터 밀도가 높은 UI라면 4ptκ°€ μ„Έλ°€ν•œ 쑰정에 μœ λ¦¬ν•©λ‹ˆλ‹€. 일반적인 μ›Ή/μ•± UI라면 8ptκ°€ 더 λ‹¨μˆœν•˜κ³  κ΄€λ¦¬ν•˜κΈ° μ‰½μŠ΅λ‹ˆλ‹€. μ‹œμž‘μ€ 8ptλ₯Ό ꢌμž₯ν•©λ‹ˆλ‹€.