기획 및 디자인/UX UI 2

{ UI GUI 디자인 } #2 - 그리드시스템

1. 그리드시스템, 왜 사용하는 걸까? 그리드 시스템은 격자를 의미한다. 디자인의 요소끼리 간격이나 여백을 쉽게 배치하는 용도이다. 격자가 없으면 디자인의 요소끼리 배치하는게 어렵다. 디자인을 구성하는 요소를 간단히 도식화 하면 큰 박스로 표현하는 것이 Column이라고 한다. 디자인을 하는 모든 요소들이 그리드 안에서 Column들이 이루어진다. 처음 시작하는 디자이너들이 오류를 범하는 것 중에 하나가 디자인적인 요소들이 모두 다 그리드에 맞춘다고 생각한다. 그리고 Navigation Bar 안에서는 로고, 메뉴들이 배치 되어 있는데 이런 것들이 어떻게 그리드에 맞춰야 되는지 질문이 많다. Navigation Bar 같은 경우는 한 개의 column으로 표기를 하고 column 안에 로고와 메뉴들은 각..

{ UI GUI 디자인 } #1 - 해상도

1. 해상도 개념 윈도우에 디스플레이 영역에 들어가면 해상도가 보인다. 1920 : width 1080 : height 이 숫자 뒤에 숨어 있는 단위가 px이다. 👉🏻 가로 : 1920px, 높이 : 1080px로 출력하겠다는 의미이다. * px : 픽셀은 조건에 따라 작을 수도 있고 클 수도 있는 가변의 크기를 가진다. 물리적인 32인치의 모니터 크기는 동일하지만 그 안에 px를 1920px로 나열할 것인지 1280px로 나열할 것인지에 따라서 전체적인 px이 분포되는 크기가 다르다. 그래서 해상도는 모니터의 크기의 가로와 높이에 표현되는 px이 물리적으로 몇 개 들어가는지 판단한다. 2. 디바이스 구분하는 법 컴퓨터 입장에서 디바이스를 구분할 때 분기점(Breakpoints) 기준으로 한다. Mobi..