1. 웹 디자인
ㅇ 웹사이트 내 웹페이지들의 구조,형태,동작,기능,콘텐츠 배치 등에 대한 디자인(설계) 방식
2. 웹 디자인의 특징
ㅇ 미적, 기능적, 경험적 요소를 결합
- 색상, 폰트, 그래픽과 같은 외관을 결정
- 사이트 구조와 사용자 환경을 구성하는 등
- 틀에 박힌 고정된 레이아웃에서, 유려하고 가시성 높은 다양한 기법들이 등장함
ㅇ 웹 문서를, 내용,구조,표현,동작으로 분리 설계 함
- `내용(content)`, `레이아웃(layout/structure) 및 표현(presentation)`,
`동작(behavior)` 으로 분리하여 디자인/설계 함
- 기능 구분 : HTML (구조), CSS (표현), Javascript (동작)
ㅇ 주로, 사용자가 원하는 컨텐츠로 쉽게 접근할 수 있게 하는데에 있음
3. 웹사이트의 제작 과정
ㅇ ① 웹사이트 기획 (목적,타깃 사용자,필요 콘텐츠,분위기 등)
ㅇ ② 사이트맵 작성 (주요 페이지 간 관계)
ㅇ ③ 와이어프레임 작성 (페이지 내 콘텐츠 배치 뼈대)
ㅇ ④ 디자인 샘플 (전체 이미지 표현)
ㅇ ⑤ 코드 작성 (HTML, CSS, Javascript 등)
ㅇ ⑥ 웹 공개
4. 웹 디자인에서, 분리 방식 例
ㅇ 표현 및 구조의 분리 (CSS 및 HTML)
- 구조는 HTML에 의해, 표현은 별도의 CSS 에 의함
ㅇ 동작 및 구조의 분리 (Javascript 및 HTML)
- 행동은 별도 자바스크립트에 의해, 구조는 HTML에 의함
ㅇ 동작 및 표현의 분리 (Javascript 및 CSS)
- 행동은 자바스크립트, 표현은 CSS에 의함
4. 반응형 웹 디자인 (RWD, Responsive Web Design) 이란?
ㅇ 개요
- 단일 웹 사이트에, PC,스마트폰,태블릿,TV 등 서로다른 장치들이 접속할 때,
- 장치 마다 다른 디스플레이,환경에 따라,
- 화면 크기 등이 자동으로 변하게끔 하여,
- 사용되는 기기에 최적화된 웹페이지를 만들 수 있는 기법을 말함
ㅇ 적용 방식
- 감지된 미디어 타입, 화면 크기 등에 따라, 스타일 시트를 다르게 적용할 수 있게 해 줌
ㅇ 필요 기술
- 화면 크기를 감지하고 정확하게 제어,변환하는 기술
- 환경 변화를 감지하는 기술 등
ㅇ 핵심 개념
- 가변 그리드 (Fluid Grid, Fluid Layout, Flexible Layout, Flexible Grid)
. 기존의 픽셀(px) 위주의 `고정 표현 방식`에서,
. 퍼센트(%)에 의한 `가변 표현 방식`을 사용하는 것
. (가변 대상 : 가로/세로 크기, 여백, 단 수 등)
.. 페이지의 너비를 가변적인 동일 크기,간격을 지닌 복수의 열로 나누고,
.. 페이지 내 콘텐츠들을 복수의 열에 맞추어 배치할 수 있게 함
- 미디어 쿼리 (Media Query)
. 현재 사용 중인, 입출력 미디어의 유형,특성에 대한 쿼리 및 그에따른 스타일 지정
. (목적 : 미디어 종류, 화면 크기 등 웹브라우저 사용 환경의 감지를 위함)
- 뷰포트 (Viewport)
. 웹브라우저 상에 사용자에게 실제 보이는 화면 크기를 제어 가능하게 하는 기술
- 플렉시블 박스 (Flexible Box)
. 화면의 구조 설계를 쉽게 하기 위해, 가변적인 박스를 만들어내는 기술
* [참고] ☞ CSS 레이아웃 참조
ㅇ 유의할 점
- 요소들을 각각 또는 그룹으로 특징에 따라 배치할 것 등
5. [참고사항]
ㅇ 아이콘 폰트 (icon font)
- 웹페이지 내에 글자 처럼 표시되는 아이콘 (확대,축소해도 화질이 떨어지지 않음)