제로베이스 70일차 학습노트이다.
오늘은 해상도와 밀도의 차이, 그리고 UI 디자인에서 자주 활용되는 8dp 디자인과 그리드 시스템에 대해 배웠다. 단순히 픽셀 단위로 맞추는 것이 아닌, 논리적 기준을 가지고 구성하는 것이 디자인의 완성도를 높이는 데 중요하다는 점을 다시금 느꼈다.
오늘의 강의 내용
1. 해상도와 밀도
해상도는 디스플레이에 표현할 수 있는 전체 픽셀 수를 의미하며, 보통 가로 × 세로 픽셀로 표기된다. 반면 밀도는 동일한 크기 안에 얼마나 많은 픽셀이 밀집해 있는지를 나타내는 값으로, 주로 ppi(Pixels Per Inch)나 dpi(Dots Per Inch)로 표현된다.
같은 해상도라도 디바이스의 물리적 크기나 밀도에 따라 UI 요소가 크게 혹은 작게 보일 수 있기 때문에, 이를 고려해 dp(Density-independent Pixel) 단위로 디자인하는 것이 중요하다. Android 시스템에서는 mdpi, hdpi, xhdpi 등으로 밀도를 구분하며, 이에 맞춰 이미지와 UI 요소를 대응해야 한다.
2. 8dp 디자인과 그리드 시스템
Google의 Material Design 가이드에 기반한 8dp 디자인은 UI 요소 간 간격, 크기, 위치를 모두 8의 배수(dp 단위)로 맞추는 방식이다. 이 기준은 모바일 환경에서 UI를 일관성 있고 체계적으로 설계할 수 있도록 도와준다. 예를 들어, 기본 마진은 16dp, 버튼 높이는 48dp 등으로 정의되어 있다.
8dp 단위 설계를 구조화하기 위한 도구로 그리드 시스템이 사용된다. 그리드는 보통 컬럼(Column), 거터(Gutter), 마진(Margin)으로 구성된다.
컬럼은 콘텐츠가 배치되는 영역이며, 거터는 컬럼 사이의 간격, 마진은 화면 양쪽의 여백을 뜻한다. 모바일에서는 보통 4~6컬럼, 웹에서는 12컬럼 구조가 일반적이다. 이러한 구조를 통해 사용자는 시각적 안정감을 느낄 수 있고, 다양한 디바이스에 적응 가능한 반응형 디자인도 구현할 수 있다.
오늘 배운 해상도와 밀도 개념은 앱 디자인 시 다양한 디바이스에 맞춰 아이콘, 이미지, 레이아웃의 크기를 조정할 때 꼭 필요한 기준이 된다. 또한 8dp 디자인과 그리드 시스템은 와이어프레임을 구성하거나 디자인 시스템을 세울 때 활용할 수 있어, 프로토타이핑 단계부터 실제 개발 연계까지 효율적인 협업을 이끌어내는 데 적용될 수 있다. 앞으로 실제 앱이나 웹 서비스 UI를 설계할 때 꼭 참고하게 될 실용적인 내용이었다.
이 글은 제로베이스 UI/UX 파트타임 강의 자료 일부를 발췌하여 작성되었습니다.