요즘 각광받는 웹디자이너 필수 자격증 웹디자인기능사 필기시험 이론 핵심 요점 요약 정리 3. 웹그래픽디자인

 

 

 

 

 

 

<Part 3 웹그래픽디자인>

1. 컴퓨터 그래픽스 일반 75%
1. 컴퓨터 그래픽스의 역사
1) 제 1세대(1950년대, 진공관시대)
- 세계 최초의 진공관 컴퓨터인 에니악(ENIAC)발명
- CRT에 의한 영상 시대 개막
- 라인 프린터, XY 플로터
- 컴퓨터 그래픽스의 시작기
2) 제 2세대(1960년대, 트랜지스터 시대)
- 본격적인 CRT도입
- 리프레시 CRT시대
- 스케치 패드 시스템 사용
- 컴퓨터 그래픽스의 기반 구축
3) 제 3세대(1970년대, 집적회로시대)
- 벡터 스캔형 CRT, 스타스캔형 CRT의 보급
- 스토리지형 CRT의 시대
- 만델브로의 프랙탈 이론 명명
- 컴퓨터 그래픽스의 적용 확대
4) 제 4세대(1980년대, 고밀도 집적회로 시대)
- Auto CAD의 개발
- 래스터 스캔형 CRT시대
- 컴퓨터 그래픽스의 전성기
5) 제 5세대(1990년대, 컴퓨터지능화 시대)
- 컴퓨터 그래픽스의 대중화
- LCD, LED, PDP의 개발
<참고>
z 정보의 표현단위
-비트(bit): 컴퓨터에서 다루는 정보의 가장 작은 단위
-1byte(바이트)=8bit
-1KB(킬로바이트)=1024byte
-1MB(메가바이트)=1024KB
-1GB(기가바이트)=1024MB

 

2. 컴퓨터의 장치 구성 65%
1. 입력장치
- 키보드, 마우스, 태블릿, 디지타이저, 스캐너, 디지
털 카메라, 터치스크린, 기타(조이스틱, 터치패드, 라이
트 펜 등)
2. 출력장치
1) 모니터(=디스플레이)
ㆍCRT: 속도가 빠르고 가격이 저렴함, 그래픽 작업에
용이, 눈이 피로가 크고 부피가 크고 전력 소모가 큼
ㆍLCD: 액체와 고체의 중간성질, 부피가 작아서 휴대
용으로 좋음, 전력이 적게 들지만 정밀한 그래픽 작업
은 어려움
ㆍPDP: 네온과 유사한 플라즈마 가스를 이용, 발광형,
수명이 길지만 비싸고 열이 발생함
2) 프린터
ㆍ충격식: 도트 매트릭스 방식
ㆍ비 충격식: 잉크젯 방식(잉크분사방식, 가격은 저렴
하나 번짐), 레이저 방식
3) 플로터- 그래프나 도형, 건축용 CAD, 도면 등의 출
력을 위한 대형 출력장치
4) 필름 레코더
3. 중앙 처리 장치(CPU)
1) 연산장치- 사칙연산, 논리연산 등 데이터 가공에
관한 동작 수행
2) 제어장치- 동작지시 및 감독
3) 레지스터- 임시 기억장치(일시 보관)
4. 기억장치
1)주기억장치
ㆍROM(Read Only Memory)
- 읽기만 가능
- 변경과 수정이 불가능
- 비휘발성 메모리(전력 중단되어도 데이터보존 가능)
ㆍRAM(Random Access Memory)
- 읽기, 쓰기 모두 가능함
- 휘발성 메모리(전력 중단되면 데이터가 지워져버림)
2) 기타 기억장치
ㆍ가상메모리
- 주기억장치의 용량 한계 극복을 위함
ㆍ캐시메모리(고속 기억장치)
- 중앙처리장치와 주기억장치의 사이에서 실행속도를
높이기 위해 사용
ㆍ플래시 메모리
- 휴대용 컴퓨터나 디카의 보조기억장치로 사용함
3) 보조 기억장치
ㆍ하드디스크
ㆍ플로피디스크- 기억용량은 작으나 휴대가 쉬움, 먼
지나 자기에 약하고 비교적 속도가 느림
ㆍ자기테이프- 데이터 백업용으로 주로 사용
ㆍCD-R- 단 한 번의 기록만 가능한 매체
ㆍCD-RW- 백업 후, 데이터를 기록하거나 삭제가 가
능함
ㆍDVD- CD의 4배 용량이 저장 가능
<참고>
z SRAM과 DRAM의 비교
1. SRAM (Static RAM)
- 전력 소비가 크고 가격이 비교적 비싸다
- 속도가 빨라서 캐시 메모리로 사용 된다
- 구조 복잡, 전원 공급이 되는 한 기억 유지
2. DRAM (Dynamic RAM)
- 전력소비가 적고 가격도 저렴하다
- 구조가 간단
- 동작 속도가 느림
- 전원이 공급되어도 일정 시간이 흐르면 방전되어 기
억이 사라짐

 

3. 이미지의 표현 방법 75%
1. 비트맵방식(픽셀 이미지, 래스터 이미지)
- 점들의 집합으로 이뤄진 이미지 표현 방식
- 상세한 명암, 사진 표현에 적합
- 부드러운 색감, 사진처럼 정교함
- 확대하면 화질이 떨어지고 용량이 늘어날 수 있음
- 포토샵, 페인터, 페인트샵 프로 등
2. 벡터방식
- 수학적 연산에 의한 것
- 파일 용량이 비트맵보다 작음
- 정교한 색상 표현이 불가능
- 일러스트레이터, 코렐 드로우, 프리핸드, 오토캐드
등

 

4. 컴퓨터 그래픽의 색상 80%
1. RGB모드
- 가장 기본적인 컬러 모드
2. CMYK모드
- 인쇄(4도 분판)나 프린트에 사용하는 모드
- 감산 혼합, RGB에 비해 색상 표현이 제한적임
3. 인덱스 컬러(Index Color)모드
- 대부분 웹상에서 이미지 전송용으로 많이 사용
- 24비트 컬러 중 정해진 256컬러를 이용하는 단일
채널 이미지
4. 그레이스케일(Grayscale)
- 검은색부터 흰색까지의 중간단계를 나타내는 모드
- 컬러 이미지를 그레이스케일로 변경하면 컬러 정보
를 잃게 됨
5. 비트맵(Bitmap)모드
- 가장 간단한 형태의 색상 체계
6. 듀오톤 모드(Duotone mode)
- 그레이 스케일에서 변경가능
- 한 가지 색 계열로 만들기 위함
웹디자인기능사 필기요점정리 <Part 3 웹그래픽디자인>
Copyright 웹디자인기능사 자격증 전문사이트 yoondle.com 윤들닷컴
- 20 -

 

5. 그래픽 파일 포맷 85%
1. 비트맵
1) BMP
- 압축하지 않은 표준 그래픽 파일 포맷
2) GIF
- 압축률이 좋고 웹에서 아이콘, 로고 등 간단한 그래
픽 제작시 유용하게 쓰이는 포맷
3) TIFF
- 애플리케이션과 컴퓨터 플랫폼간에 파일 교환시 사
용되는 포맷, 모든 종류의 시스템에서 호환 가능한 포
맷 방식
4) JPEG
- 가장 많이 사용되는 방식, 압축률이 가장 좋음
5) PICT
- 매킨토시 기종의 표준 그래픽 파일 포맷
6) PDF
- Adobe Acrobat에서 사용되는 문서 작성용 파일 포
맷
7) RWA
- 화소 자체의 정보만을 가지고 있음
2. 벡터
1) EPS
- 인쇄시 4도 분판을 목적으로 하고 비트맵 이미지와
벡터 그래픽 파일을 함께 저장함
2) PSD
- 포토샵 전용 파일 포맷으로 파일 용량이 큰 편임
3) 기타
- CDR/CMX, WMF, AI 등

 

6. 그래픽 표현 요소 75%
1. 해상도
- 화면에 그래픽을 얼마나 선명하게 표현할 수 있는가
결정하는 요소
- 한 화면을 구성하고 있는 픽셀의 수
- 보통 DPI 또는 PPI라고 함
- 해상도가 클수록 선명함
2. 출력해상도
- LPI(Line Per Inch)라고 함
- DPI:LPI=2:1이 되어야 함
<참고>
z 앨리어싱과 안티 앨리어싱
-앨리어싱 : 이미지에 계단 현상이 일어나는 것
-안티 앨리어싱 : 계단 현상의 외형을 부드럽게 해주
는 것
z 인터레이스와 프로그레스
-인터레이스 : GIF, PNG
-프로그레스 : JPEG
z 비트심도: 한 픽셀의 색상을 표현하기 위해 사용되
는 컴퓨터의 비트 수

7. 웹 디자인 프로세스 60%
1. 프로젝트 기획
- 전체적인 프로젝트의 컨셉 확정, 도메인 신청
2. 웹 사이트 기획
- 제작팀 구성, 아이디어 도출, 사이트 컨셉 정의, 자
료 수집 및 분석, 콘텐츠 디자인 정의, 플로우차트(작
업흐름도)작성, 스토리보드(작업지침서, 설계도)제작
3. 웹 사이트 구축
1) 사이트 디자인
2) 사이트 구축: 도메인 확보, 프로그래밍 과정
4. 유지 및 관리

 

8. 네비게이션 55%
1. 순차구조(선형구조)
- 정보를 순서에 따라 보여주는 것
- 앞, 뒤 이동만 가능함
- 대등한 정보를 순차적으로 보여줄 때 사용함
- 사용자 입장에서는 자유로운 이동과 탐색이 어려움
- 회원 가입과 같이 순서를 지켜야 하는 사이트에 적
합함
2. 그리드 구조
- 순차 구조를 여러 개 합해놓은 상태
- 수평적 또는 수직적 네비게이션 구조
- 많은 양의 데이터를 카테고리로 나누어 분류할 때
사용함
3. 계층 구조
- 가장 일반적으로 사용됨
- 정보가 계층적으로 연결되어 있음
- 특정 정보를 중심으로 하위 페이지로 이동하는 네비
게이션 구조
- 사용자들이 효율적으로 탐색이 가능하나 현재 위치
를 놓쳐 길을 잃을 수 있음
4. 네트워크 구조
- 순서 없이 나열한 구조
- 초보 사용자들에게는 혼동 야기 가능(길 잃는 현상
이 제일 많음)
- 고객 스스로가 하나의 정보를 가지고 학습할 수 있
는 사이트에 적합함

 

9. 레이아웃 50%
1. 텍스트 위주의 레이아웃
- 간결함
- 목록을 이용하여 정리하는 것이 좋음
2. 테이블 레이아웃
- 부분적으로 배경 색상 입힐 수 있음
3. 프레임 레이아웃
- 공통적인 부분이 매번 새롭게 열리는 것을 방지
- 보통 2~3개의 프레임으로 구성
4. 이미지 레이아웃
- 시각적인 효과가 좋음
- 프레임과 비슷한 효과 가능
- 용량이 너무 큰 이미지는 자제

 

10. 모델링(Modeling) 50%
- 어떤 오브젝트를 3차원으로 형상화 하는 것을 말함
1. 와이어 프레임 모델
- 오브젝트의 골격만을 선으로 표현
- 점과 선, 외 내부로의 자유로운 이동
- 부피는 나타나지 않음
2. 솔리드 모델
- 외 내부까지 채워진 입체를 이용한 모델링
- 속까지 꽉 채워져 있음
- 물리적 성질을 가짐
- 복잡한 데이터 구조
3. 서페이스 모델
- 선 뿐만 아니라 표면도 정의되는 모델링 방식
- 속은 비워져 있음
- 은선과 은면 제거 가능
- 메쉬 모델이라고도 함
4. 파라메트릭 모델
- 곡면 모델
- 매개변수 모델이라고도 함
- 가장 많은 계산시간을 필요로 함
5. 프랙탈 모델
- 단순->점차 복잡한 모양으로 만들어감
- 산, 구름, 해안선과 같은 자연 대상물의 불규칙한 성
질을 갖는 움직임을 표현
6. 파티컬 모델
- 입자를 이용하여 표현하는 모델링
- 불, 수증기, 먼지, 불꽃, 기포 등의 미세한 부분을
표현할 때 사용함

 

11. 렌더링(Rendering) 50%
- 모델링 된 오브젝트의 표면을 처리하는 과정
z 렌더링 과정: 투영-> 클리핑 -> 은면 처리 -> 쉐
이딩-> 매핑
z 클리핑이란?
- 평면으로 정의된 일정한 공간 밖에 있는 보이지 않
는 부분을 제거하는 것을 말함
z 은면이란?
- 3D 입체에서 관찰자 시점에서 보이지 않는 다각형면
을 말함
z 쉐이딩이란?
- 빛에 의해 생기는 음영(그림자)을 표현하는 작업
1. 플랫 쉐이딩: 면과 면 사이의 경계에서 급격한 명암
차이가 생김(가장 단순하고 빠른 방법)
2. 고라우드 쉐이딩: 플랫보다는 부드럽지만 하이라이
트 부분은 어색함
3. 퐁 쉐이딩: 부드러운 곡면 표현에 적합하고 가장 사
실적이나 시간이 오래 걸림
z 매핑이란?
- 오브젝트의 표면의 질감을 처리하는 것으로 렌더링
작업의 가장 마지막에 하는 작업이다.
1. 텍스쳐 매핑: 이미지 매핑이라고도 하며 2차원 이미
지에 질감을 입히는 것이다.
2. 범프 매핑: 엠보싱(올록볼록) 효과, 흰부분은 돌출
되어 보이고 검은 부분은 들어가보이는 것으로 벽돌과
자갈 표현시 주로 사용됨
3. 불투명 매핑: 유리나 반투명 물체 표현시 사용
4. 솔리드 텍스처 매핑: 겉 표면이나 내부의 무늬가 비
슷한 오브젝트에 사용됨
5. 반사 매핑: 금속, 거울 등 반사되는 오브젝트를 표
현할 때 사용됨
<참고>
z 레디오시티란?
- 빛의 반사와 표면 분산을 분석하는 렌더링의 한 기
법임.

 

12. 애니메이션 55%
z 프레임: 영상에서 기본이 되는 단위로 보통 만화는
1초에 12~24프레임, 영화나 광고는 1초에 24~30
프레임 이상이다.
z 키 프레임: 동작의 중요한 변환점
z 제작과정
: 기획 -> 스토리보드 제작 -> 제작 -> 음향합성 ->
레코딩
1. 셀 애니메이션: 캐릭터만 움직이는 초창기 기법
2. 스톱 모션 애니메이션: 한 프레임씩 따로 촬영한 후
각 프레임을 연결
z 클레이 애니메이션- 찰흙으로 인형 제작 후 콤마
촬영 해 나가는 기법의 애니메이션
3. 고우 모션 애니메이션: 기계장치가 된 인형이나 제
작물을 움직이게 하여 촬영하는 기법, 스톱 모션보다
생동감 있는 표현 가능
4. 컷 아웃 애니메이션: 종이 위에 형태를 그리고 잘라
낸 다음 손으로 각각의 종이들을 직접 한 장면씩 움직
여가며 촬영
5. 투광 애니메이션: 라이트 테이블 위에 검은 종이나
점토 등의 절단 부분이나 틈에서 나오는 빛을 촬영하
는 기법
6. 로토 스코핑: 실사와 애니메이션을 합성하는 기법으
로 많이 사용
7. 플립 북
-가장 간단한 애니메이션 효과로 책이나 노트 등에 변
해가는 동작을 페이지마다 그린 후 일정한 속도로 종
이를 넘겨 애니메이션을 확인하는 작업
<참고>
z 모핑이란?
- 2개의 서로 다른 이미지나 3차원 모델 사이의 변화
하는 과정을 서서히 나타내는 기법
z 크로마키란?
- 두 가지 다른 화면을 합성하기 위한 그래픽 기술로
두 대의 카메라로 배경과 전경을 따로 찍어 합성
z 모션 캡처란?
- 실제 생명체의 움직임을 추적하여 얻은 데이터를 모
델링된 캐릭터에 적용하는 기술 (자연스런 움직임과 얼굴 표정 가능)