이 글은 디자인베이스_앱 디자인 레이아웃과 디자인 시스템 의 영상을 개인적으로 공부하며 정리한 글입니다.
레이아웃과 그리드 시스템
앱에서 흔하게 사용되는 레이아웃
1단 레이아웃
- 아래로 스크롤을 내리며 탐색하는 형식에 주로 사용
- 이미지나 영상 콘텐츠가 강조되는 특징
- 가로로 넓어서 텍스트 정보도 많이 담을 수 있음 \
2단 레이아웃
- 1단 레이아웃에 비해 화면에 더 많은 정보를 담을 수 있는 장점
- 가로폭이 좁아 텍스트를 많이 담기는 어려움
3단 레이아웃
- 주로 프로필, 앨범, 표지등을 보여줄 때 사용
- 이미지 중심 콘텐츠를 나열해야 하는 경우에도 사용함
- 작은 화면을 3단으로 줄였기 때문에 하나의 폭이 굉장히 좁음 ➡️ 텍스트 정보를 담기 매우 어려운 것이 단점
- 그래서 주된 정보가 텍스트 보단 이미지일때 적합한 레이아웃
그리드 시스템에 맞게 레이아웃을 구성해야 하는 이유?
- 시각적으로 일관된 배치
- 작업 시간 단축
- 예측 가능한 화면 구성 : 사람은 익숙한 것을 보면 어떻게 동작하는지 따로 배울 필요 없이 사용할 수 있음
그리드 시스템 구성 요소
1. Column : 화면을 몇단으로 쪼개는지
- 모바일에서는 주로 4단 or 6단을 사용함
- 기본은 4단으로 추천, 조금 더 다양한 레이아웃을 사용하고 싶다면 6단을 추천
- 고정된 값이 아닌, 스크린 너비에 따라서 유동적으로 변하는 값
2. Gutter
- 단과 단 사이의 간격
- 고정값, 권장값은 주로 16
Margin : 콘텐츠 영역을 제외한 좌우 여백
- Android : 16 사용 (유튜브, GMail 등..)
- 그 외에 네이버, 인스타그램 등도 마진 16을 사용함
- 16,20,24 정도 사용함
어떤 해상도에서든 컬럼 수, 거터, 마진은 유지
그리드시스템을 활용해서 레이아웃을 구성해야 한다
마진, 거터 등 그리드시스템을 지키지 않고 디자인을 할 경우 시각적인 통일성, 개발쪽에서 문제가 발생함
좁은 화면의 단점을 해결하는 레이아웃
가로 스크롤
우선순위를 고려해서 레이아웃을 제작해야 한다.
앱의 사용자가 많으면 많을수록 앱의 핵심 기능을 건드릴때는 신중해야 한다.
UXUI Designer