웹디자인기능사 필기 | 웹그래픽디자인

 

1. 컴퓨터 그래픽스 일반 

 

컴퓨터 그래픽스의 역사

• 제1세대 (1950년대) : 진공관시대
• 제2세대 (1960년대) : 트랜지스틱 시대, 리플레시형 CRT 시대
• 제3세대 (1970년대) : 집적회로시대. 스트레지형 CRT 시대
• 제4세대 (1980년대) : 고밀도 집적회로 시대. 레스터스캔형 CRT 시대, 프랙탈 이론을 실천한 사례 발표
• 제5세대 (1990년대) : 컴퓨터지능화 시대. 전자출판을 의미하는 DTP시대 본격화

월윈드(1949년) : MIT에서 개발되어 수학적 데이터를 그래픽으로 표현한 컴퓨터

 

 

2. 컴퓨터의 장치 구성

 

입력장치 — 키보드, 마우스, 태블릿, 터치스크린

• 디지타이저(Digitizer) : 도표, 그림, 설계 도면 등의 좌표 데이터를 정확하게 입력할 수 있는 장치

출력장치 —

• 모니터 : CRT, LCD, PDP
• 프린터 : 충격식, 비충격식
• 플로터 : 도면 등의 출력을 위한 대형 출력장치
• 필름 레코더

중앙처리장치 — 연산, 제어장치, 레지스터(임시기억장치), 

기억장치 —

• 주기억장치 : ROM(읽기), RAM(읽기, 쓰기)
• 보조기억장치 : 하드디스크, 플로피디스크, 자기테이프

컴퓨터 조작기법

• 포인팅
• 클릭킹
• 더블 클릭킹

 

 

3. 이미지 표현 방법

 

1. 비트맵방식 — 점들의 집합인 픽셀 이미지,

• 포토샵 : 사진 수정작업, 이미지 효과, 컬러 수정과 처리
• 페인터

2. 벡터방식 — 수학적 연산에 의한 방식으로 해상도에 영향을 받지 않습니다. 일러스트레이터, 코렐 드로우, 프리핸드, 플래시

 

픽셀 : 더 이상 나눌 수 없는 최소단위
안티앨리어싱 : 픽셀과 픽셀로 이어지는 가장자리 부분에 중간색을 넣어 부드럽게 보임
디더링 : 제한된 색상으로 좀 더 풍부한 색감을 표현하는 혼색 방법
그라데이션 : 한 색상에서 다른 색상으로 점차적으로 색을 변화시켜가며 특정구역 안에 색을 칠함

 

 

4. 컴퓨터 그래픽의 세상

 

RGB모드 — 기본적인 컬러 모드

CMYK 모드 — 인쇄나 프린트에 사용, 감산 혼합으로 색상 표현 제한적

INDEX 컬러모드 — 웹상에서 이미지 전송용으로 가장 많이 쓰이는 색상체계. 최고 256 컬러.

그레이스케일 — 검은색부터 흰색까지

비트맵모드 — 가장 간단한 형태의 색상 체계

듀오톤 모드 — 그레이 스케일에서 변경

 

 

5. 그래픽 파일 포맷

 

비트맵 —

• BMP : 압축하지 않은 표준 그래픽 파일 포맷
• GIF : LZW압축알고리즘으로 압축률이 좋음. 256색상, 빠른 전송 속도, 배경색이 보이도록 패턴 제작. 
• TIFF : 모든 종류의 시스템에서 호환 가능
• JPEG : 가장 많이 사용되는 압축률 좋은 방식, GIF 보다 다양한 색상
• PICT : 매킨토시 표준 그래픽 파일 포맷
• PDF : Adobe Acrobat
• RWA : 화소 자체 정보만 가지고 있음
• PCX : 페인트브러쉬 파일

벡터 — 

• EPS : 4도 분판을 목적으로 비트맵 이미지와 벡터 그래픽 파일 함께 저장
• PSD : 포토샵 전용 파일 포맷
• SWF : 움직이는 배너
• 기타 : CDR/CMX, WMF, AI

압축 —

• 허프만 코딩 : 문자의 발생 빈도에 따라 문자에 해당하는 비트 수를 차별화하여 문자 저장에 필요한 공간을 감소

 

 

6. 그래픽 표현 요소

 

1. 해상도 —

• 한 화면을 구성하고 있는 픽셀의 수
• 화면의 해상도는 72dpi이상이면 확대되어 보이고, 이하면 축소되어 보임

2. 출력해상도 — LIP, DPI.

• 최소 200dpi 이상,

웹 안전색상 : 216
PPI : 1인치 당 몇 개의 픽셀이 들어가 있는지 표현

 

 

 

 

 

 

 

7. 웹 디자인 프로세스

 

프로젝트 기획 — 프로젝트의 컨셉 확정, 목표설정, 시장조사, 개발전략수립

웹 사이트 기획 — 아이디어, 자료 수집 및 분석, 플로우차트, 스토리보드 제작

웹 사이트 구축 — 사이트 디자인, 사이트 구축

 

웹페이지 제작 제안서 : 프로젝트의 개요 및 목적, 차별화 전략, 제작 일정, 팀 구성 및 예산

 

 

8. 네비게이션

 

순차구조 — 정보를 순서에 따라 보여주는 것으로 회원 가입 등

그리드 구조 — 많은 양의 데이터를 카테고리로 나누어 분류

계층 구조 — 특정 정보를 중심으로 하위 페이지로 이동하는 구조

네트워크 구조 — 순서 없이 나열한 구조

 

 

9. 레이아웃

 

텍스트 위주 — 간결하고 목록을 이용

테이블 위주 — 부분적으로 배경 색상 사용 가능

프레임 레이아웃 — 공통적인 부분이 매번 새롭게 열리는 것을 방지

이미지 레이아웃 — 시각적인 효과

 

 

10. 모델링

 

어떤 오브젝트를 3차원으로 형상화

 

1, 와이어 프레임 모델 — 오브젝트 골격만 선으로 표현

2. 솔리드 모델 — 외, 내부까지 채워진 입체 모델링

3. 서페이스 모델 (메쉬 모델) — 물체를 구성하는 모든 면의 정점과 연결선의 좌표. 표면도 정의되는 모델링 방식, 속은 비워져 있음

4. 파라메트릭 모델 — 곡면모델

5. 프랙탈 모델 — 단순한 것부터 점차 복잡한 모양으로 

6. 파티컬 모델 — 입자를 이용한 모델링

7. 모션 캡쳐 — 3차원 캐릭터의 자연스러운 동작을 구현하기 위해 실제 생명체의 움직임을 추적하여 얻은 데이터를 모델링

 

리샘플링 —

• bicubic : 픽셀의 색채값을 방사형의 주변 픽셀들의 평균값으로 한다.

 

 

11. 렌더링

 

완성예상도. 실물처럼 충실하고 정확히 표현.

모델링 된 오브젝트의 표면을 처리하는 과정

 

1. 투영

2. 클리핑 : 평면으로 정의된 공간 밖에 있는 부분을 제거

3. 은면 처리 : 관찰자 시점에서 보이지 않는 다각형면

4. 쉐이딩 : 빛에 의해 생기는 그림자를 표현

• 플랫 쉐이딩 : 면과 면 사이 경계에서 급격한 명암차이
• 고라우드 쉐이딩 : 플랫보다 부드럽지만 하이라이트 부분 어색
• 퐁 쉐이딩 : 가장 사실적이나 시간이 오래 걸림

5. 매핑 : 오브젝트 표면의 질감을 처리하는 것

• 텍스쳐 매핑 : 2차원의 이미지에 질감을 입히는 것
• 범프 매핑 : 엠보싱 효과
• 불투명 매핑 : 유리나 반투명 물체 표현 시
• 솔리드 텍스처 매핑 : 겉 표면이나 내부의 무늬가 비슷한 오브젝트에 사용
• 반사 매핑 : 금속, 거울 등 반사되는 오브젝트 표현

레디오시티 : 빛의 반사와 표면 분산을 분석하는 렌더링 기법

 

 

12. 애니메이션

 

움직임이 없는 무생물의 존재를 여러 번 변형 시키고 연속 촬영 등의 영상적 기법을 이용해 움직이는 것처럼 눈의 착각을 일으키도록 하는 기술

 

1. 프레임 — 영상에서 기본이 되는 단위, 프레임 수를 늘이면 깜빡임 현상을 줄인다.

2. 키 프레임 — 동작의 중요한 변환점

3. 제작과정 — 기획 -> 스토리보드 제작 -> 제작 -> 음향합성 -> 레코딩

 

애니메이션 종류

1. 셀 애니메이션 — 배경 그림은 그대로 두고 캐릭터만 움직이는 기법. 종이에 그린 그림을 셀룰로이드에 옮기고 뒷면에 채색한 다음 촬영하는 기법

2. 스톱 모션 애니메이션 — 점성이 있는 소재를 이용해 한 프레임씩 따로 촬영한 후 각 프레임을 연결

• 클레이 애니메이션 : 찰흙으로 인형 제작 후 콤마 

3. 고우 모션 애니메이션 — 기계장치가 된 인형이나 제작물을 움직이게 하여 촬영

4. 컷 아웃 애니메이션 — 종이 위에 형태를 그리고 잘라낸 다음 한 장면씩 움직여가며 촬영

5. 투광 애니메이션 — 라이트 테이블 위 검은 종이나 점토 등의 절단 부분이나 틈에서 나오는 빛 촬영하는 기법

6. 로토 스코핑 — 실사와 애니메이션을 합성

7. 플립 북 — 책이나 노트 등에 변해가는 동작을 페이지마다 그리고 일정한 속도로 종이를 넘겨 애니메이션화

8. 핀 스크린 애니메이션 — 스크린 위에 수천개의 핀을 꽂고 조명에 의해 나타나는 그림자를 영상으로 담는 애니메이션

9. 모핑 기법 — 2개의 서로 다른 이미지나 3차원 모델 간 점진적으로 변해 가는 모습을 보여주는 기법

 

핀스크린

 

애니메이션 제작도구

1. Director — 스코어, 캐스트, 페이트, 링고로 구성

 

관련포스트

• 웹디자인기능사 | 디자인 일반
• 웹디자인기능사 | 인터넷일반