웹 디자인 트렌드

1. 반응형 웹 사이트

- 다양한 기기에 반응하는 웹사이트

- 사용자 접속 기기/환경에 맞춰 화면의 크기가 자동으로 조절

  => 최적화된 화면 레이아웃을 보여주는 사이트

 

반응형 웹 사이트의 장점과 단점

장점

- 기기의 화면 크기나 해상도에 구애받지 않음

- 화면의 변화에 즉시 반응

- 어느 기기에서든 사이트 주소가 같다.

- 유지 관리가 편하다

- 최신 웹 표준을 따른다.

 

단점

- 예전 브라우저 버전과 호환성에 문제가 있을 수 있다.

- 사이트 디자인이 단순하다.

 

반응형 웹을 구현하는 여러 가지 방법

미디어 쿼리

- 사이트에 접속하는 기기별로 적용할 CSS 파일을 다르게 지정해 주는 기술

- 각 기기마다 서로 다른 레이아웃을 표시할 수 있음

- 미디어 쿼리는  CSS3 표준 규약에 포함된 기능

 

CSS 프레임워크

가변 그리드와 미디어 쿼리를 쉽게 사용할 수 있게 하나로 묶은 것

 

- 부트 스트랩(Bootstrap) : 가장 많이 사용하는 프레임워크로, 반응형 그리드 시스템과 다양한 컴포넌트, 자바스크립트 기능을 제공. 많은 플러그인등를 사용할 수 있어 기능을 확장할 수 있는 장점이 있음

 

- 파운데이션(Foundation) : 부트스트랩과 양대 산맥. 반응형 웹의 기본인 그리드 시스템은 부트스트랩과 비슷.

 

- 스켈레톤 (Skeleton) : 다른 프레임워크에 비해 가벼운 코드가 특징. 작은 규모의 프로젝트나 덩치 큰 프레임워크가 필요하지 않은 경우 적합

 

---

2. 플랫 디자인

플랫 디자인이란?

- flat : 디자인에서 깊이(depth)를 제거해 입체감을 없앰.

* 깊이(depth) : 웹 요소를 입체적으로 보이기 위해 사용하는 여러 가지 추가 효과 (그림자, 경사, 그라데이션 등)

- 웹 요소에서 입체 효과들을 제거하고 단순하게 표현하는 기법

- 웹사이트뿐만 아니라 모바일 앱이나 프로그램 UI에도 사용

 

스큐어모피즘과 플랫 디자인

스큐어모피즘(skeuomophism)

- 실제 존재하는 사물을 그대로 본떠 디자인에 반영하는 것

- 오프라인의 경험을 디지털 환경에서도 똑같이 느끼게

- 장식적인 요소에 치중 -> 내용 표시 공간 차지하기도

- 로딩 시간이 많이 걸림

- 꼭 필요하지 않아도 꾸미기 위해 사용하는 경우도 있음.

 

플랫 디자인

- 반응형 웹 디자인에서는 화면 크기에 따라 레이아웃을 바꿔서 보여줘야하기때문에 웹 문서의 요소들이 최대한 단순해야함.

- 오프라인 경험을 디지털 경험으로 완벽하게 가지고 오지 못하지만 대신 스큐어모피즘의 단점 극복

 

 

플랫 디자인, 이렇게 만들어야 한다

사용성을 위한 단순함

- 직관성이 중요 -> 디자인적인 부연 설명 없이도 사용할 수 있도록

- 시각적인 효과와 더불어 주목성을 높이는데 초점

 

색상의 활용

- 색상 사용은 최소화

- 단순한 도형을 사용하는 대신 색상은 밝고 화려하게

- 일반적으로 6~8가지 색상을 메인 색상

 

간결하면서도 인상적인 타이포그래피

- 디자인은 최대한 간결하게, 글자 통해 의미 전달

- 간결한 디자인에 강하게 드러나는 빅 타이포그래피 인기

- 흰색이나 검은색 글자를 많이 사용

 

머티리얼 디자인

머티리얼(Material) 디자인이란?

- 구글에서 사용자 경험을 하나로 묶기 위해 제시한 디자인 방법

- 구글 서비스나 안드로이드에서 일관된 디자인으로 사용 중

 

플랫 디자인? 머티리얼 디자인?

- 플랫 디자인 : 디자인 경향을 뜻하는 넓은 의미의 개념

- 머티리얼 디자인 : "플랫 디자인" 경향을 받아들이면서 구글의 또 다른 디자인 철학이 더해진 구체적인 디자인 방법

- 머티리얼 디자인이 플랫 디자인과 가장 다른 점은 평평한 평면에 가상의 빛을 이용한 입체 효과를 추가해 공간감과 입체감을 부여한다는 것

 

MATERIAL Design 사이트

- https://material.io/

Material Design

- 머리티얼 디자인에 대한 소개, 디자인 방법, 웹이나 앱 화면에서 사용하는 요소들에 만들기 위한 가이드라인

 

Material Design Awards 2020

https://design.google/library/material-design-awards-2020/

2020 Material Design Awards - Library - Google Design

- 해마다 부문별로 뛰어난 머티리얼 디자인 사이트 선정, 발표

 

---

3. 그리드 레이아웃 디자인

 

그리드 시스템

 

그리드 시스템

- 페이지나 화면에 정보를 구성할 때 논리적으로 일관성 있게 표현하기 위한 구조

- 신문이나 잡지 등의 기사들이 서로 다른 길이에도 어울리도록 배치됨

- 화면 너비를 몇 픽셀로 하는가에 따라 구분하기도 하고 (960 그리드 시스템, 1200 그리드 시스템) 한 화면에 칼럼이 몇 개 인가를 기준으로 구분하기도 함( 12칼럼 그리드 시스템, 24칼럼 그리드 시스템 등 )

- 그리드 레이아웃 : 웹 사이트에서 그리드 시스템을 적용한 레이아웃

 

그리드 레이아웃의 특징

- 시각적으로 안정적인 디자인 : 우리의 눈은 한 화면을 여러 개의 칼럼(column)으로 구성해서 밑으로 늘어뜨리는 구조에 익숙함

- 단순한 웹 디자인 : 실제 내용을 넣지 않은 상태에서도 사이트 레이아웃을 미리 만들어 볼 수 있음.

- 내용을 원하는대로 배치 : 그리드 레이아웃을 이용하면 한 줄에 여러 요소를 배치할 수 있고, 중요한 내용은 좀 더 넓은 공간을 할애해서 더욱 눈에 띄게 하는 등 자유롭게 배치 가능.

 

그리드 레이아웃을 만드는 방법

 

가변 그리드 레이아웃

- 어느 기기에서나 동일한 레이아웃을 유지하려고 할 때

- 문서에 있는 각 요소의 너비를 % 같은 상대 값으로 지정

- 요소의 너비 값을 %로 지정하면 창의 너비나 부모 요소의 너비를 기준으로 너비 계산

- 사용이 쉬움

- 단순한 레이아웃을 가진 사이트에 적합

 

CSS float 속성 이용

- float 속성 : 특정 요소를 화면의 왼쪽이나 오른쪽으로 띄우고(floating) 다른 내용은 그 옆으로 흘러가도록 하는 속성

- float:left나 float:right를 이용해 좌우로 배치

- 많이 사용하는 방법, 그러나 원하는대로 사이트 구조 만들기 쉽지 않음

 

플렉스 박스 이용

- 각 그리드(박스)를 원하는 위치에 배치

- 박스률 유연하게 조절할 수 있음 -> flexible box layout

- 여러 박스를 수평이나 수직으로 배치할 수 있고

- 박스의 크기도 조절 가능

 

CSS Grid Layout 이용

- 표준화가 진행중인 CSS 레이아웃 사양

- 플렉스 박스는 수평이나 수직 중 하나를 "기본 축" 으로 지정, CSS 그리드 레이아웃은 수평과 수직 모두 이용, 2차원

- 대부분의 모던 브라우저에서 지원 -> 표준이 완성되지 않았지만 많은 브라우저에서 지원 중

 

---

4. 원 페이지 사이트(One Page Site)

원 페이지 사이트

원 페이지 사이트란

- 웹사이트를 한 페이지로 만드는 것

- 화면을 위아래, 좌우로 스크롤해서 볼 수 있음

- 스크롤 대신 클릭해서 이동할 수 있는 네비게이션도 필요

 

어떤 사이트에 사용하면 좋을까?

- 페이지를 로딩하는 데 일반 사이트보다 시간이 걸리는 단점 -> 내용이 많지 않고 여백이 많은 사이트에 적합

- 간단한 회사 소개 사이트, 카페/레스토랑, 개인 포트폴리오, 갤러리 사이트 등

 

패럴랙스 스크롤링

패럴랙스 스크롤링이란?

- 원 페이지 사이트에서 화면 스크롤에 추가하는 동적인 효과

- "패럴렉스(parallax)"란 화면이 위아래, 또는 좌우로 스크롤될 때 배경과 그 위에 있는 요소들이 각기 다른 방향으로 움직이게 하거나 움직이는 시간을 다르게 해서 동적인 효과를 만듦

 

어떤 사이트에 사용하면 좋을까?

- 배경과 웹 요소들의 시차를 이용하기 때문에 복잡한 이미지나 텍스트가 많지 않은 사이트

- 스토리텔링 사이트, 제품 설명 사이트, 회사 소개 사이트, 광고나 이벤트 페이지

---

5. 풀 스크린 배경과 캐러셀

풀 스크린 배경이란?

풀 스크린 배경과 원 페이지 사이트

- 사이트 전체가 하나의 페이지로 구성

- 메뉴를 클릭하거나 스크롤

- 화면 단위로 이루어진 내용 전체에 화면 가득 배경 표시

 

첫 화면만 풀 스크린 배경으로

- 사이트 첫 페이지에만 풀 스크린 배경 사용

- 기존 사이트를 그대로 사용하면서 방문자들에게 사이트 주제나 분위기를 단번에 전달

 

동영상을 풀 스크린 배경으로

- 화면 전체에 깔린 동영상은 방문자의 호기심 자극

  -> 끝까지 보게 만듦

- 사이트 접속 시 동영상 로딩 시간 필요

 

어떤 사이트에 사용하면 좋을까?

- 원 페이지 사이트

- 로딩 시간 고려되어야함

- 화면에 표시할 내용이 많을 경우 풀 스크린 배경에 적합하지 않음

 

이미지로 만드는 풀 스크린 배경

풀 스크린으로 사용할 이미지 파일

- JPEG(JPG) 파일이나 PNG 파일

- 고품질의 큰 이미지 -> 확대/축소하기 위해

 

배경 이미지 최적화 필요

- 배경 이미지 용량이 너무 크면 웹 문서를 다운로드하는데 시간이 많이 걸림

- 이미지의 화질은 그대로 유지하면서 파일 용량을 줄여야함

 

이미지로 풀 스크린 배경을 구현하는 기술

- CSS의 background-size 속성 사용

- Backstretch.js 플러그인

- Vegas 플러그인

 

동영상으로 만드는 풀 스크린 배경

풀 스크린 배경으로 사용할 동영상은

- mp4, webm, ogg 형식

- 동영상 파일은 압축해서

- 파일 용량이 너무 크면 재생 시간을 줄이거나 화질을 약간 낮춘다.

- 동영상은 자동 재생으로

- 포스터 이미지도 함께 준비

- 동영상에서 오디오는 제거

 

캐러셀

캐러셀(carousel)이란?

- 여러 내용을 회전하면서 보여주고 마지막 내용 다음에는 첫번째 내용을 연결해서 보여줌

- 한 공간에 여러 내용을 번갈아 보여줄 수 있음.

- 네비게이션이나 스크롤 정지 버튼이 있으면 사용자에게 편리

 

캐러셀의 장단점

장점 : 중요한 내용을 알리기에 적합

단점 : 사용자가 캐러셀 내용을 다 살펴보지 않음

 

캐러셀 디자인에서 주의할 점

1) 캐러셀에는 중요한 것부터 순서대로

- 사용자가 캐러셀이 모두 끝날 때까지 기다리지 않음

  -> 캐러셀 아닌 곳에도 캐러셀 내용을 표시하는 것이 좋다.

 

2) 캐러셀의 내용은 사용자의 시선을 끌 수 있게

- 사용자에게 유익한 정보여야 조금이라도 눈에 띔

 

3) 네비게이션 필요

- 전체 내용이 몇 개인지, 현재 보고 있는 위치는 어디인지 표시

 

---

6. 타이포그래피

 

웹과 타이포그래피

타이포그래피란?

- 활자 서체의 배열, 즉 글자를 활용한 모든 디자인

- 웹 사이트의 콘텐츠는 대부분 텍스트로 이루어짐

 

빅 타이포그래피

- 화면에 커다랗게 표시하는 텍스트

- 의미를 전달하는 텍스트로서의 역할과 디자인적인 역할

- 사이트 방문자가 사이트의 다른 내용을 살펴보기도 전에 시선을 끌어모은다.

 

- 빅 타이포 그래피를 만드는 원칙

  * 단순하게

  * 조화를 살펴서

  * 가독성은 필수

 

웹 폰트

웹 폰트

- 웹 폰트(web font)는 웹 문서와 함께 저장된 폰트 정보를 다운로드해서 사용자에게 표시해주는 웹 전용 폰트

 

왜 웹 폰트를 사용할까?

- 크기와 색상 조절이 자유로움

- 모든 기기에서 볼 수 있음

 

구글 웹 폰트

- 무료 웹 폰트

- Early Access 페이지에서 한글 폰트도 제공

- 웹 폰트(web font)는 웹 문서와 함께 저장된 폰트 정보를 다운로드해서 사용자에게 표시해주는 웹 전용 폰트

- 서체나 스타일 등을 먼저 선택해서 원하는 폰트 선택

 

---

인프런 강의 - "Do it! 프론트엔드 웹 디자인 입문" 의 내용을 참고하여 정리한 포스팅입니다.