[UI 디자인 기초] 그리드

ㅣ플러스 엑스 UI 강의ㅣ

---

2.  3-3 그리드를 디자인에 활용하는 법

무조건 그리드에 디자인을 맞추는 것이 아니라 최소한 일관된 요소를 지정하고 자유롭게 디자인 하는것이 특색있는 디자인을 만든다. 

 

 

그리드 전략 기획을 수행할 때 고착된 프레임에서 벗어나 다양한 관점으로 디자인을 만들기위해 노력함 

-> 서비스 만의 고유한 아이덴티티를 표현할 수 있는 그리드를 개발한다. 

 ex) 고정된 프레임 제거, 다양한 레이아웃과 디자인 요소를 조합하여 새로운 디자인을 만듬. 

 

남들과는 다른 색다른 디자인을 위해 탐색함. 

 

최소한의 규칙과 기준을 고려하여 수행. 

새로운 아이디어를 적극적으로 수용 -> 기반으로 새로운 그리드를 만들어서 차별화 함. 

 

만들어진 그리드는 가이드 문서로 만듬 -> 협업에 용이함.

 

 

 

 '그리드를 만드는 3가지 단계' 

 

[기준 해상도 설정]

디자인 감각에 의존해서 페이지 마다 다른 디자인을 적용하는 것보다 명확한 그리드 시스템을 만들고 적용하는 것이 일관성있다. 

1. 일정 서비스 플랫폼에 따라 기준 해상도 설정. 

2. 설정한 기준 해상도를 맞춰 디자인 시안 -> 디자인 시스템,  테스트 진행 -> 최종 시안 중    

선택된 시안을 바탕으로 화면 만들기

 

[그리드 시스템 구축]

 1. 선택된 시안으로 그리드 시스템 구축

- 마진값 설정 ->  레퍼런스 참고 (브랜드전략, 특성 반영) -> 시스템 구축

메인 화면에 설정한 그리드를 바탕으로 그리드 시스템 만듬. 

 

* 반응형 웹사이트 제작 경우 : 해상도 분기점별로 그리드 테스트 (큰 해상도 -> 작은 해상도)

* 적응형 해상도 경우: PC 해상도 그리드 기준으로 모바일 해상도에 적용 -> 가이드 작성 

- 모바일 : 4,6개 칼럼 주로 사용  

- 마진 값: 4배수, 5배수 사용_여백 활용 

 

작업 시 디자인의 비율과 무게감을 고려한 그리드 시스템을 구축하는데 중점을 둠. 

- 디자인 시스템에 따라 컬럼에 얽메이지 않고 최소 좌우 마진 선만 그리고 자유롭게 작업하기도 함. 

 

 

'그리드 시스템 문서화'

해상도 변화에따라 그리드와 해상도가 어떻게 변화하는가에 대해서 작성. (효율적인 협업 가능) 

 

 

'그리드 적용'

메인 화면에 적용, 확정된 그리드를 전체 화면에 반영

1. 그리드 가이드를 기반으로 메인 화면 다시 정리

2. 디자인 요소를 그리드에 맞춰 배치

3. 일관성 부여. (폐이지 위계, 성격에 따라 다른 그리드 시스템을 구축하기도 함.)

 

 

'예시 프로젝트로 보는 인사이트'

1. 해상도 별로 자르게 정의하는 그리드 시스템. 

PC 해상도에 따라 %로 조절 / 모바일 고정마진 설정 부분적으로 그리드를 %조절 

 

2. 그리드 시스템 확장을 총한 서비스 아이덴티

그리드 시스템을 기반으로 화면 전환 인터렉션을 디자인 하여 서비스 아이덴티티로 활용 할 수있다. 

 

3. 그리드 시스템의 정렬은 자유롭게 결정

 

 

 

 

 

- 출처: https://plusxsharex.fastcampus.co.kr/courses/213930/clips/

---

[🌰인사이트]

● 웹,앱에서의 그리드 디자인
- 최소한의 규칙과 기준을 고려하여 브랜드 전략에 맞는 그리드 구축

● 그리드 시스템 구축 순서.
* 반응형 웹사이트 제작 시 : 해상도 분기점별로 그리드 테스트 (큰 해상도 → 작은 해상도)
* 적응형 해상도 경우: PC 해상도 그리드 기준으로 모바일 해상도에 적용 → 가이드 작성 
- 모바일 : 4,6개 칼럼 주로 사용  
- 마진 값: 4배수, 5배수 사용_여백 활용

---

[🌞 목표]

▶   브랜드 핵심 키워드를 중심으로 디자인 전략을 세운 뒤 이것이 반영되도록 디자인 한다.  

▶  가변형 분기점에 따른 그리드를 구축할 수 있다. 해상도에 따른 그리드가 일관성 있게 설계할 수 있다.

---