웹디자인기능사 필기핵심이론 공부 Part. 8 : #26. 웹디자인 프로세스 ~ #28. 웹 그래픽 제작

- 목 차 -

#26. 웹디자인 프로세스 (출제빈도 : 상)

#27. 레이아웃과 내비게이션(출제빈도 : 상)

#28. 웹 그래픽 제작 (출제빈도 : 하)

---

#26. 웹디자인 프로세스 (출제빈도 : 상)

 

1. 웹디자인 프로세스

 

* 웹 디자인의 개념

 - 웹디자인 설계, 디자인

 - 정확한 정보 전달

 - 그래픽 요소 = 보다 효율적인 웹페이지 제작

 - 일관성 유지 (사용자 인터페이스, 컨셉 등)

 

 

* 웹 디자인 프로세스

 - 웹디자인 필요한 전반적인 과정을 순서대로 진행

 - 웹프로그래머, 웹디자이너 등 여러 인력분배로 효율성 증가

 - 단계별 진행 시간 예측 가능

 - 피드백을 통해 실행 착오를 최소화

 - 각 팀 의사소통 원활

 

 

- 웹 디자인 프로세스 순서

주제선정 자료수집 아이디어 도출 및 컨셉 정의 스토리보드 제작 레이아웃 구성 (콘텐츠 배치 구성) 그래픽 작업 및 기술적 요소 구현 결과물 수정 보완 서버 업로드 검색엔진 등록 유지보수(테스트/디버깅)

 

 - 웹 디자인 프로세스 3단계

사전 제작 단계 Pre-Production	사전에 디자인 계획을 수립하기 위한 기획 단계 콘셉 구성, 디자인 구체화
제작 단계 Production	실제 제작 단계 콘텐츠 제작, 사이트 구축, 서버 구성
후반 제작 단계 Post-Production	기본 사항이 완료된 후 작업 사이트 홍보, 홍보 콘텐츠 제작

 

 

* 아이디어 발상법

브레인스토밍 Brain Storming	자유분방하게 많은 양의 아이디어 도출
연상결합법 Image Association	관련없는 사건, 요소로부터 주관적으로 떠오른 정보(연상)에서 유사점이나 차이점 결합. 아이디어 도출
입출력법 Input/Output System	주어진 문제 - input - 에 대해 강제로 도달해야 하는 지점 - output 까지 연결시키는 방법
고든법 Gordon Method	미국 고든이 제안 짧은 키워드만 제안, 아이디어 자유로이 펼쳐 나가는 방법
시네틱스법 Synetics	관련 없는 요소들 결합. 유추를 통해 아이디어 얻는 방법.
체크리스트법 Checklist	여러 항목을 질문형태로 체크리스트화 여러 사항 검토, 분석해서 아이디어 얻는 방법

 

* 스토리보드(Storyboard)

 - 작업 지침서, 설계도

 - 시나리오를 토대로 작성

 - 웹 사이트의 전체 구조, 화면 구성, 콘텐츠 등 시각화하여 작성 (그림, 도표 등 포함)

 - 삽입될 구성 요소와 구체적 내용을 화면 단위로 작성 (메인, 서브페이지)

 - 디자인 작업 시 쉽게 콘텐츠를 배치 시킬 수 있으며, 웹 사이트의 전체적인 내비게이션 확인 가능 (페이지 간 이동)

 - 잘 작성하면 시행착오를 줄일 수 있고, 개발자들간 의사소통의 도구가 됨

 

* 사용자 인터페이스(User Interface)

 - 인간의 편리에 맞게

 - 고려사항

목적성	웹사이트의 목적에 맞게 인터페이스 구성
직관성	사용 방법을 직관적으로 바로 알 수 있도록
편리성	사용자가 쉽게 사용할 수 있도록
일관성	전체 레이아웃, 내비게이션 방법, 그래픽 요소의 일관성 유지
심미성	시각적인 커뮤니케이션을 통해 사용자의 작업 수행을 도와줌

 

* 메타포(Metaphor)

 - 사용자가 쉽게 연상할 수 있는 요소를 홈페이지에 이용. 사용자의 이해도를 높이고 직관적으로 그 기능과 사용 방법을 알 수 있도록 하는 것

 - 예) 휴지통 아이콘 모양으로 어떤 기능인지 인식가능

 

 

2. 웹디자인에서 고려해야 할 사항

 

* 웹디자인 기획단계에서 고려해야 할 사항

 - 사이트 목적, 필요성을 충분히 인식

 - 경쟁 사이트의 디자인 분석을 통해 벤치마킹

 - 색상, 글자모양, 레이아웃 등에 대한 원칙 수립

 

* 웹디자인 과정에서 고려해야 할 사항

 - 사용자 인터페이스 (UI) 고려. 편리한 구조로 디자인해야함

 - 사이트 맵을 통해 구조를 파악 할 수 있어야 하고

 - 이미지를 최적화하여 로딩시간을 줄여야하고

 - 이미지 사용되어지는 색상은 웹 안전 색상을 고려하여 제작

 - 이미지, 동영상 남용 금지

 - 바탕색, 문자 색상 구별하여 문자가 잘 보일 수 있도록

 

 

 

---

 

#27. 레이아웃과 내비게이션 (출제빈도 : 상)

 

1. 레이아웃 디자인

 

* 레이아웃(Layout)

 - 콘텐츠를 적절하게 배치시킨 구조 또는 형태

 - 단순, 간결해야하며 사용자가 쉽게 콘텐츠를 찾을 수 있도록 구성해야

 - 콘텐츠간 연결과 배치가 일관성 있고 논리적이어야

 - 중요한 콘텐츠를 먼저 배치

 - 텍스트와 그래픽 요소간 조화있게

 - 화면 사이즈는 많은 사용자가 사용하는 해상도를 기준으로

 

 - 웹 사이트 초기화면 레이아웃 유형

단순형	영상이나 모션 이미지 등으로 이루어진 인트로 화면 시각적인 요소를 통해 주목성을 강조 예) 자동차 홍보 인트로가 있는 웹 사이트
일반형	기본적인 인덱스 방식 초기화면에 대표 이미지, 뉴스, 공지사항, 바로가기, 광고 배너 등 배치 예) 기업사이트
복합형	많은 정보를 배치하는 포털방식 초기화면에 뉴스, 쇼핑, 전문정보, 검색 등 방대한 서비스 배치 예) 네X버, 다음, 네X트 등 포털 사이트

 

* 템플릿(Template)

 - 자주 사용할것을 대비, 홈페이지 레이아웃 형판을 만드는 것

 - 개략적인  디자인을 만든 후 세부적인 디자인 요소를 별도로 만듦

 

* 그리드 시스템 (Grid System)

 - 웹 페이지를 적절한 구획으로 나누어 구성 요소들을 비례에 맞게 배열

 - 타이포그래피나 편집 디자인에서 주로 사용. 문자, 사진 또는 그림을 비례에 맞게 배열해서 유기적인 구조를 이루게 된다.

 

 

2. 내비게이션(Navigation)

 - 사용자가 쉽게 웹페이지를 이동할 수 있도록 (탐색) 콘텐츠를 체계적으로 분류하여 연결시킨 구조. 또는 인터페이스 디자인을 말한다.

 

요소는 다음과 같다.

메뉴(단추)	계층 구조를 표현하는 기본 요소로 주요 페이지로 이동
사이트 맵	웹 사이트 전체 구조를 한 눈에 알아 볼 수 있도록 트리 구조 형태로 만든 것
내비게이션 바	메뉴를 한곳에 모아 놓은 그래픽이나 문자열 모음
라인 맵	이동 경로를 한번에 보여주는 방식
디렉터리	주제나 항목을 카테고리 별로 계층적으로 표현

 

구조는 다음과 같다.

순차 구조 Sequence	순서에 따라 이동 가능 앞뒤로만 중요 정보를 쉽게 보여주고, 대등한 정보를 순차적으로 보여준다. 강의노트, 연대기, 회원가입 등
그리드 구조 Grid	순차 구조를 여러개 합해 놓은 형태 많은 양의 데이터를 정형화 할 때 카테고리 분류화
계층 구조 Hierarchy	가장 일반적인 구조 정보의 우선 순위에 따라 제작할 때 유용
네트워크 구조 Network	웹페이지의 정보를 순서없이 나열 초보사용자에게는 혼동 야기

 

* 웹내비게이션 디자인의 원칙

 - 일관성 유지

 - 빠른 피드백

 - 명확한 링크 사용

 - 사이트 내 이동이 쉬워야

 - 현재 위치를 알 수 있도록

 - 적절한 안내 문구 사용

 - 사용자 환경을 고려한 내비게이션 대안 마련

 

 

---

#28. 웹 그래픽 제작 (출제빈도 : 하)

 

1. 웹 그래픽 제작

 

* 2D 평면 디자인 과정

이미지 구성(아이디어 스케치) - 툴 선택(드로잉 작업) - 색상 선택 및 페인팅 작업 - 수정 보완 - 최종 이미지 표현

 

 

* 모델링(Modeling)

 - 오브젝트를 윤곽선에 따라 디자인. 3차원 좌표계 사용하여 형상모양을 표현하는 과정

 

3차원 모델링 종류

와이어프레임 모델 Wireframe	골격을 선으로만 표현
솔리드 모델 Solid	내부까지 채워진 입체를 이용
서페이스 모델 Surface	표면 모든 면에 데이터를 입력 솔리드보다 더 정확
파라메트릭 모델 Parametric	곡면 모델, 수학적 방정식으로 구축
프렉탈 모델 Fractal	단순한 모양에서 시작, 복잡한 기학적 형상 구축 자연 물 태양 등
파티클 모델 Particle	물, 수증기 등 구조가 작은 입자 집단표현시 사용

 

* 랜더링(Randering)

 - 모델링된 오브젝트의 표면 처리하는 것

 - 컴퓨터 그래픽에 그림자, 액체 변화 등 3차원 질감을 더해 현실감을 추가하는 과정

 

 - 랜더링 과정

투영 Projection	3차원 오브젝트를 2차 스크린에 비추는 작업
클리핑 Clipping	윈도우(디스플레이) 밖에서 오브젝트의 보이지 않는 부분을 처리
은면처리 Hidden Surface	보이지 않는 부분 처리
쉐이딩 Shading	음영, 빛의 비춤, 반사, 투명 처리
매핑 Mapping	오브젝트의 표면 질감과 풍경 처리

 

 - 쉐이딩의 종류

플랫 Flat	음영색만으로 면 전체를 칠하는 방법 가장 단순
고러드 Gouraud	꼭지점(Vertax)에서 조명 계산하여 면 채우는 방식 색상이 단계적으로 부드럽게 표현되어짐
퐁 Phong	하이라이트나 반사광을 표현. 더 정확하고 사실적

 

* 광원과 조명

직접 조명	직접 비추어지는 높은 조도의 조명
확산 조명	직접 비추지 않고 간접적으로 확산되는 조명
간접 조명	빛을 천장이나 벽쪽으로 비추어 반사광을 이용 조도가 균일하여 부드러운 빛을 낼 수 있다. 부드러운 침실이나 병실 등 휴식공간에 이용
반간접 조명	하향으로 빛을 비추어지게 하는 것 간접조명의 효율성을 보완, 그림자를 적게 하는 부드러운 조명
전반확산조명	간접조명과 직접조명의 중간. 전체에 균일한 조도로 밝게 확산 직접광과 확산광이 있어서 입체감있게 보인다.

 

 

목차로 이동하기