[내일배움캠프 9일차(3)] UI 디자인의 모든 것 수강

평화로워 보이지만 평화롭지 않은

그런 하루였슴다,,

1-4 숙제할 생각에 벌써 막막

하아 벌써 내일이 금욜이라니

시간 너무 빨라요ㅜㅜ

 

 

<UI 디자인의 모든 것 1-3>

수업 목표

1️⃣ 레이아웃에 콘텐츠와 UI 요소를 배치하여 정보를 전달할 수 있다.

2️⃣ 그리드 시스템을 적용하여 화면 구성 요소를 효과적으로 배치할 수 있다.

 

 

 

레이아웃과 그리드 시스템

레이아웃

특정 영역 안에 텍스트, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것이다.

해상도

(1) 해상도 선정 기준

현재 스크린 점유율 기준으로 작업하는 것이 좋다.

StatCounter에서 조회하여 쉽고 빠르게 확인할 수 있다.

 

점유율을 기준으로 작업할 디자인의 기준 해상도를 설정해준다.

대표적으로 안드로이드는 360*800, IOS는 375*812 해상도를 사용한다.

 

모든 해상도에서 일관되어 보이도록 디자인해주는 것이 좋다.

 

(2) 일관된 디자인

사용자가 모든 해상도에서 일관된 디자인을 경험할 수 있도록 노력해야 한다.

고정과 가변 영역

(1) 고정(Fix)

해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것을 말한다.

좌우 마진은 모든 페이지에 일관되게 적용되어야 하기 때문에 고정으로 설정을 하는 편이다.

 

(2) 가변(Flexible)

고정과 다르게 해상도가 커지거나 작아지면 비율에 맞게 같이 확대되거나 축소되는 것을 의미한다. 즉, 디바이스 사이즈에 맞춰 변동되는 부분들을 말한다.

해상도에 따라 크기가 변하는 버튼, 배너와 같은 이미지는 가변으로 설정을 하는 편이다.

 

 

 

 

그리드

정보와 요소를 체계적으로 배치하고, 시각적으로 통일된 디자인을 할 수 있도록 도와준다.

그리드 시스템

디자인 레이아웃에 동일한 규칙을 적용하여 일관된 UI를 할 수 있게 도와준다.

디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고, 크기를 부여하여 체계적인 배열을 도와준다.

desktop, tablet, mobile 반응형 디자인 작업 시 해상도 대응이 용이해진다.

디자이너와 개발자의 원활한 커뮤니케이션을 도와준다.

4가지 기본 요소

 

(1) 컨테이너(Container)

콘텐츠를 감싸고 있는 너비이다.

mobile, tablet의 경우 가로 너비가 좁기 때문에 콘텐츠 양이 많을 경우 마진을 줄이고 컨테이너 너비를 넓게 설정하는 것을 권장한다.

desktop은 가로 너비가 넓기 때문에 자유롭게 설정할 수 있다.

 

(2) 컬럼(Column)

단의 넓이를 의미한다.

콘텐츠를 정렬하고 배치하는 역할을 한다.

 

Mobile : 2~6 (4컬럼을 주로 사용)

Tablet : 6~12 (6~8컬럼을 주로 사용)

Desktop : 12~16 (12컬럼을 주로 사용)

 

(3) 거터(Gutter)

컬럼(column)과 컬럼(column) 사이의 간격을 의미한다.

콘텐츠 사이의 여백을 제공하여 콘텐츠의 가독성을 높여주어 사용자가 콘텐츠를 쉽게 이해할 수 있게 도와준다.

 

Mobile : 8~16

Tablet : 16~24

Desktop : 24~32

 

(4) 마진(Margine)

화면의 좌우 여백의 너비를 뜻한다.

표현해야 하는 콘텐츠의 양과 레이아웃에 맞게 마진을 설정한다.

마진은 모든 페이지에 일정하게 적용하는 것을 권장한다.

 

Mobile : 16~20

Tablet : 20-36

Desktop : 24~36

 

(5) 그리드 설정

gridcalculator

 

반응형 디자인

정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것이다.

 

-반응형 디자인이 중요한 이유

1. 다양한 디바이스 사용

2. 일관된 디자인

3. 비용 효율화

4. 콘텐츠 최적화

 

-브레이크 포인트

반응형 디자인에서 레이아웃이 변화되는 지점을 의미한다.

브레이크포인트를 사용하면 정해놓은 지점에서 레이아웃을 변경할 수 있다.

 

-최적화된 그리드, 12컬럼

 

 

 

실습

그리드 시스템 만들기

 

 

 

 

 

숙제

서비스의 레이아웃과 그리드 분석하기