개인 노트 정리) 시각디자인9 - 웹사이트 디자인 이해하기

완전정복! 시각디자인 기초 올인원 패키지 Online
Part 2. 시각디자인 기초 2 (디지털 매체)
웹사이트 디자인 이해하기

 

# 웹 사이트 디자인 이해하기

## 그리드 시스템이란?

- 정적인 인쇄 영역과 달리 다양한 스크린 크기에 대응하기 위한 규칙을 만들기 위해 사용

- 컬럼, 거터, 마진으로 구성.

### 컬럼

- 실제로 콘텐츠를 포함하는 부분

- 컬럼의 너비는 고정값이 아닌 백분율로 결정

### 거터

- 컬럼과 컬럼 사이의 공간.

- 거터의 너비는 브레이크포인트에 따라 결정. 모바일 크기는 거터 크기가 작고, 웹은 화면이 넓어 지면서 거터가 넓어 진다.

### 마진

- 컨텐츠의 왼쪽 및 오른쪽 가장자리 사이의 공간

- 브레이크 포인트에 따라서 마진의 너비도 달라진다. 화면이 넓어지면 마진 너비도 커진다.

### 12 컬럼 그리드 시스템

- 반응형 웹에서는 일반적으로 12컬럼 그리드 시스템을 사용한다.

- 12개의 컬럼을 이용하면 모든 레이아웃에 대응할 수 있다.

 

# 박스모델 이해하기

- 디자인할 때 편리한 크롬 확장 프로그램 : visual inspector

# 컬러 이해하기

# 폰트 이해하기 1

- PX : 기본적인 디지털 미디어 디자인 시에는 PX를 사용.

- SP : 안드로이드에서만 사용. 안드로이드는 ios와는 다르게 사용자가 폰트를 조절할 수 있다.

- PT : 아이폰에서 사용.

## 웹 프론트에서의 폰트 단위

- 프론트 엔드 개발 시 사용되는 단위는 더 다양함.

- em/rem, vw/vh 등등

# 폰트 이해하기 2

- 포토샵/일러스트레이터와 스케치/피그마는 행간의 개념이 다름.

- 보통 행간은 Baseline을 기준으로 한다.

- CSS에서는 베이스라인 기준이 아닌 Line-height를 사용.

## 폰트의 Content Area

- 'font-family'에 같은 'font-size'를 적용해도 실제 높이 값은 다 다름.

## 폰트의 Line-height

- 웹접근성 가이드(WCAG 2.1)에서는 글자 크기의 1.5배 이상을 권장.

## 커닝(Kerning)

- 우리가 커닝을 넣는것은 아니다. 폰트를 개발할 때 넣게 되어 있다.

- 글자의 모양 때문에 활자가 고르게 배열되지 않은 것처럼 보이는 것을 글자 모양에 따라 적당한 간격을 두게 조정하여 시각적으로 매끄럽게 보이게 하는 것.

## 자간(Tracking)과 글자 사이(Letter Spacing)

- CSS에서는 글자 Letter Spacing이 아닌 Tracking을 사용.

## Proportional 폰트와 Monospace 폰트의 차이

- Proportional : 각각 글자의 자평이 다르다.

- Monospace : 모든 글자의 자평을 똑같이 해준다.

 

# 아이콘 이해하기

## 고려사항

- 비트맵(jpg, gif, png) 아이콘 제작 시 픽셀 퍼펙션(Pixel Perfection) 필수. 디자인 툴에서 세팅을 해주어야 한다.(스케치, 피그마)

- 벡터형식 아이콘은 stroke에 소수점 단위를 지정해도 괜찮다. 하지만 비트맵 방식은 정수값으로 해야 픽셀이 깨지지 않는다.(직선도 흐릿하게 나온다.)

- 모바일은 괜찮다.