웹 디자인 ( 영어: web design )

CSS 레이아웃을 사용하는 웹 페이지의 예

웹 디자인(영어: web design)은 웹 브라우저가 해석하고 그래픽 사용자 인터페이스 (GUI)로 보여 주기에 알맞은 마크업 언어 형식으로 인터넷을 통해 전자 매체 콘텐츠 전달의 개념을 정하고 계획하고 모델로 만들어 실행하는 과정이다.

웹 디자인의 목적은 웹 사이트를 만드는 것이다. 이러한 웹 사이트에는 전자 파일이 한데 모여 있고, 웹 서버/서버에 상주하여 최종 사용자에게 요청한 웹 페이지 형식으로 콘텐츠와 상호작용 기능/인터페이스를 제공한다. 텍스트, 비트맵 그림 (GIF, JPEG,PNG), 폼과 같은 요소들은 HTML/XHTML/XML 태그를 사용하는 페이지 위에 놓을 수 있다. 벡터 그래픽스, 애니메이션, 비디오, 소리와 같은 복잡한 미디어를 보여줄 때에는 플래시, 퀵타임, 자바 런타임 환경과 같은 별도의 플러그인을 요구한다. 플러그인은 HTML/XHTML 태그를 사용함으로써 웹 페이지에 추가할 수 있다.

W3C 표준과 호환되는 브라우저는 웹 페이지 요소와 객체의 위치를 정하고 이용하기 위해 CSS와 XHTML/XML의 결합을 촉진시켰다. 마지막 표준은 되도록 플러그인을 이용하지 않고 브라우저의 기능이 다양한 매체와 접근성 옵션을 클라이언트에 전달하게끔 하고 있다.

웹 페이지는 보통 정적 페이지와 동적 페이지로 나눌 수 있다.

• 정적 페이지: 사용자(웹 마스터/프로그래머)가 페이지를 수동으로 업데이트하지 않는 경우 모든 요청마다 콘텐츠와 레이아웃을 바꾸지 않는다.
• 동적 페이지: 컴퓨팅 환경(사용자, 시간, 데이터베이스 수정 등)에서 최종 사용자의 입력이나 변경에 따라 겉모양이나 콘텐츠를 수정한다. 콘텐츠는 클라이언트 쪽에서 클라이언트 스크립팅 언어(자바스크립트, JScript, 액션스크립트 등)를 사용하여 DOM 요소를 변경함으로써 이를 변경될 수 있다. 동적 콘텐츠는 서버 스크립팅 언어(코드퓨전, ASP, JSP, 펄, PHP, 파이썬 등)를 이용하는 서버 위에 컴파일되기도 한다.

두 가지 접근 모두 보통 복잡한 응용 프로그램에 쓰인다.

커뮤니케이션 디자인과 정보통신기술 분야가 전형화됨에 따라, 웹 페이지에 특화된 웹 디자인과, 모든 웹 기반 서비스의 완전한 논리를 위한 웹 개발을 구분하는 경향이 생겨났다.

목차

  [숨기기] 

• 1역사
• 2웹 사이트 설계
• 3접근 가능한 웹 디자인
• 4같이 보기
• 5각주
• 6바깥 고리

역사[편집]

월드 와이드 웹의 창시자 팀 버너스리가 1991년 8월에 웹사이트를 출판하였다.^[1] 버너스리는 인터넷 통신(오랫동안 전자 우편, 유즈넷을 전달하였음)과 하이퍼텍스트를 처음 결합하기 시작하였다. (하이퍼텍스트도 오랫동안 쓰였으나, 상호작용 CD-ROM 디자인과 같은 단일 컴퓨터에 저장된 정보 탐색만을 허용하였다.) 웹사이트들은 HTML이라는 이름의 마크업 언어로 쓰여지며 초기 버전의 HTML은 웹사이트 기본 구조(헤딩, 문단)와 하이퍼텍스트를 사용한 연결 기능 정도로 매우 기본적인 기능을 갖추고 있었다. 기존의 통신과 달라진 점으로, 사용자는 쉽게 하이퍼링크를 따라가며 이 페이지 저 페이지를 탐색할 수 있게 되었다.

웹과 웹 디자인이 발전함에 따라 마크업 언어는 더 복잡하고 유동적으로 변화되기 시작하였으며, 이로써 그림, 표와 같은 객체들을 페이지에 추가할 수 있는 기능이 제공되었다. 원래 표를 사용한 정보를 보여 주는 데에 사용되도록 고안된 표와 같은 기능은 나중에 보이지 않는 레이아웃 장치로 변화되어 쓰이게 되었다. CSS가 출현함에 따라, 표 기반의 레이아웃은 시대에 뒤처진 것으로 평가받는다. 서버 스크립팅과 같은 데이터베이스 통합 기술과 CSS와 같은 디자인 표준은 나중에 웹의 제작 방향을 변화시키고 강화시켰다.

웹 사이트 설계[편집]

웹 사이트는 특정한 주제에 대한 정보를 담고 있다. 웹사이트를 설계하는 것은 웹페이지를 정리하고 만드는 것으로 정의되어 있다. 웹페이지는 웹 사이트 개발 목적의 정보로 이루어져 있다. 웹사이트는 각 책의 페이지를 담고 있는 책과 비유할 수 있다.

이 과정에서 수많은 관점(디자인 문제)이 있으며 인터넷의 급격한 발전 때문에 새로운 관점이 나올 수 있다. 비상업 웹사이트의 경우, 목표는 "얼마큼 드러나고 응답할 것인지"에 따라 다양하다. 상업 웹사이트의 경우, 기본 디자인 관점은 다음과 같다:

• 콘텐츠: 사이트에 담긴 정보는 사이트와 관련되어 있어야 한다.
• 이용성: 사이트는 사용자와 친숙해야 하며, 인터페이스와 탐색이 단순하고 믿음직스러워야 한다.
• 겉모습: 그래픽과 텍스트는 일정하게 보여 주는 흐름식의 단일 스타일을 포함해야 한다. 스타일은 전문적이고, 관심을 끌 수 있어야 하며, 타당성이 있어야 한다.
• 가시도: 사이트는 주요 검색 엔진과 광고 매체를 통해 쉽게 찾을 수 있는 것이어야 한다.

웹 사이트는 보통 텍스트와 그림으로 이루어져 있다. 첫 페이지는 홈 페이지나 Index로 알려져 있는 페이지이다. 일부 웹사이트는 스플래시 페이지로 불리는 것을 사용하기도 한다. 스플래시 페이지는 환영 메시지, 언어/지역 선택, 거부자 등이 포함되어 있을 수 있다. 웹사이트 안의 각 웹 페이지는 HTML 파일이며 저마다 URL을 가지고 있다. 웹 페이지가 만들어진 뒤에, 보통 하이퍼링크로 이루어진 탐색 메뉴를 사용하여 연결되어 있다. 탐색 속도가 빠르면 집중하기 쉬워지며 온라인으로 방문한 손님들을 끌어 모을 수 있게 되므로 스플래시 페이지는 (특히 상업 웹사이트와 관련된 경우) 점차 쓰이지 않게 되었다.

웹 사이트를 완성하면, 사람들이 인터넷에서 볼 수 있도록 서버에 출판하여 업로드해야 한다. FTP 클라이언트를 사용하여 이러한 일을 할 수 있다. 출판을 끝내면, 웹 마스터는 다양한 기술을 사용하여 트래픽, 방문 횟수를 늘릴 수 있다. 구글이나 야후와 같은 검색 엔진에 웹 사이트를 등록할 수 있다.

접근 가능한 웹 디자인[편집]

 이 부분의 본문은 웹 접근성입니다.

웹 페이지와 사이트는 접근을 위해 특정한 접근성 원칙들을 따라야 한다. 이러한 원칙들은 다음의 영역으로 나뉜다:

• 뜻 있는 구조를 문서(웹 페이지)에 제공하는 시맨틱 마크업을 사용한다.
• 시맨틱 마크업은 또한 웹 페이지 구조를 뜻 있게 정리하며 그에 따라 웹 서비스 내용을 출판하는 것을 일컫는다. 이로써 다른 웹 페이지에 있는 다른 웹 서비스가 이를 인지할 수 있다. 시맨틱 웹은 IEEE가 표준으로 지정해 놓고 있다.
• 텍스트가 아닌 요소에 상응하는 텍스트를 제공한다. (이를테면 그림, 멀티미디어)
• 구문을 읽을 때 이치에 맞게 하는 하이퍼링크를 사용한다. (이를테면, "여기를 누르세요"라는 링크 이름을 사용하지 말 것)
• 프레임을 사용하지 않는다.
• HTML 표가 아닌 CSS를 사용한다.
• 사용자 에이전트가 소스코드를 줄 단위로 읽게 하도록 페이지를 만든다.

그러나 W3C는 레이아웃을 위한 표가 이치에 맞고 대안으로서 사용할 수 있을 경우는 레이아웃을 위한 표를 사용할 수 있게 하고 있다.

같이 보기[편집]

• 웹 개발
• 웹 2.0
• 웹 색상
• ASP.NET
• 색 도구
• 콘텐츠 관리
• 정보 아키텍처
• 상호작용 디자인
• 자바
• PHP
• 서버 스크립팅
• 스트리밍 미디어
• 스타일시트 (웹 개발)
• 사용자 인터페이스 디자인
• 웹 인덱싱
• 웹 통합
• 웹디자인기능사 (국가기술자격)