• 자료실

[웹디자인 기능사] 필기 요약 정리 - 웹 그래픽 디자인

등록자 : 이애본 등록일 : 2015-09-30 | 조회 2269
  • 글꼴
  • 확대
  • 축소

PART 3 웹 그래픽 디자인

 

1. 컴퓨터그래픽스 일반

◎ 컴퓨터그래픽스의 역사

진공관-트린지스터(TR)

-집적회로(IC)-고밀도(LSI)-초고밀도(VLSI)-슈퍼고밀도(SVLSI)

 

*1세대(1946~1950년대 말) - 진공관, 프린터 플로터 시대

- 주기억 장치: 자기드럼 기억 장치

- 라인 프린터

- 1946 에니악(세계 최초의 전자식 디지털 컴퓨터)

 

*2세대(1950년 말~1960년대 중반) - 트랜지스터, 컴퓨터그래픽스 발전기

- IBM2250: 최초의 상업용 디스플레이

- 리프레시 CRT의 시대

- 1962 MIT 서덜랜드가 스케치 패드 시스템 개발

 

*3세대(1960년대 말~1970년대 초) - 집적회로, 스토리지형 CRT시대

- 컴퓨터그래픽스 대중화

- 1975 유타대학 뷰이 통 퐁이 쉐이딩 알고리즘 개발

- 1975 IBM 수학자 만델브로가 프랙탈 기술 명명

 

*4세대(1970년대 중반~1980년대 말) - 고밀도 집적회로, 래스터 스캔형

- 컴퓨터 소형화, 개인용 컴퓨터 등장

- 컴퓨터그래픽스의 전성기

- 래스터 스캔형 모니터: RGB 색상, 현실적인 색상, 선, 면의 표시 가능

- 1976 제임스 블린이 범프 맵핑 알고리즘 개발

- 1976 애플사에서 개인용 컴퓨터 애플 개발

- 1981 IBM 사에서 개인용 컴퓨터 PC 개발

- 1985 ISO에서 표준 CD-ROM 발표

 

*5세대(1980년대 말~현재) - 수퍼 초고밀도 집적회로, LCD 실용화

- LCD, LED(광 다이오드, 빛을 발하는 반도체 소자, 자동차 계기판),

PDP(벽걸이 TV)

- 포터블 TV

- 1995 최초의 컴퓨터 애니메이션 영화 ‘Toy Story'가 제작됨

 

 

◎ 컴퓨터그래픽스의 개념

◆ 사용자 인터페이스

- 사용자가 얼마나 컴퓨터에 쉽게 접근할 수 있을지를 연구하여 인간의 편의에 맞도록 개발하는 것이다.

- GUI 방식( 그래픽으로 구성된 바탕화면, 사용자가 쉽게..)

 

◆ 시뮬레이션

- 실제의 데이터에 기반한 모의 실험

 

◆ 가상현실(VR)

 

◆ 컴퓨터그래픽스 시스템 구성

- 입력 장치, 처리 장치, 출력 장치, 주기억 장치, 저장 장치

 

*디지타이저: CAD에서 정확한 좌표 입력하기 위해 활용

*플로터: 그래프나 도형 건축용 CAD, 등을 출력하기 위한 대형 출력장치

*메모리: 주기억장치 - RAM, ROM

*저장 장치: 보조기억장치 - 하드 디스크, 플로피 디스크, 시디롬

 

◆ 시스템 소프트웨어

*도스: 텍스트 기반(CUI)의 운영체제

*유닉스: 미국 벨연구소에서 개발, 대형 컴퓨터, 프로그램 개발용

다중 사용자 환경, 멀티태스킹

*리눅스: 유닉스 기반으로 개발한 공개용 운영체제, 소스 공개, 무료

*MAC OS: 미국 애플사, 그래픽 기능 뛰어남

 

◎ 컴퓨터그래픽스의 원리

◆ 컴퓨터그래픽스의 정보 단위

*비트 - 비트에 의한 전기적 신호 숫자체계: 바이너리

*바이트

- 1바이트로 1개의 영문자 코드: 1캐릭터

*워드: 실제적으로 정보 처리가 되는 정보 단위

*KB(2¹⁰) - MB(2²⁰) - GB - TB

 

◆ 정보의 처리 속도 단위

밀리초(ms:10⁻³) - ㎲ - ns - ps(피코초) - fs(펨토초) - as(아토초:10⁻¹⁸)

 

◆ 픽셀 = 래스터

◆ 래스터라이징

- 벡터 방식의 이미지를 비트맵 방식의 이미지로 전환하는 작업

 

◆ RGB 컬러

- 빨강, 녹색, 파랑: 빛의 3원색, 가산 혼합, 흰색

 

◆ CMYK 컬러

- 시안, 마젠타, 노랑, 검정: 색의 3원색, 감산 혼합

- 모두 혼합할 경우 순수 검정색은 나오지 않는다.

- 4도 분판 인쇄

 

◆ 인덱스 컬러

- 이미지에 많이 사용된 256가지의 색상을 선별한 색상체계

 

◆ 비트맵: 이미지 파일의 용량이 가장 작다.

 

◆ Lab 컬러

- 국제조명협회(CIE)가 정확한 색상 측정을 위해 국제 표준으로 제안

 

◆ HSB 컬러: 색상, 채도, 명도

 

◆ 비트 심도

- 한 픽셀의 색상을 표현하기 위해 사용되는 컴퓨터의 비트 수

- RGB 컬러에서 한 픽셀의 색상은 전체 24bit(각 8bit씩)

 

◆ 이미지 해상도: PPI, DPI

- (3inch * 72ppi) * (4inch * 72ppi)

 

◆ 출력 해상도: LPI(인쇄할 때 해당 단위당 인쇄하는 선 수)

- DPI : LPI = 2 : 1

 

2. 웹 그래픽 제작

◎ 웹 디자인 프로세스

◆ 웹 디자인 인력 구성

*웹 기획자

- 어떤 사이트를 제작할건지 전체적으로 구성하고 설계

- 기업이 추구하는 목적에 맞게 사이트의 컨셉과 스펙을 정한다.

- 콘텐츠를 효율적으로 구성하고 배치하며 사이트의 전체적인 제작 사항과 게시 일정 등을 조절한다.

*웹 프로듀서

- 웹 PD, 사이트의 기획, 제작, 마케팅의 전체적인 과정 총괄

- 사이트에 적용될 기술 선택, 웹 프로그래머, 디자이너등의 인력 조절

*웹 마스터

- 웹 서버 구축과 관리, 사이트 기획, 제작, 운영 등에 대한 전반적인 책임

- 웹 디자이너, 웹 프로듀서, 웹 엔지니어로 세분화

*웹 디자이너

*웹 프로그래머

*웹 매니저

- 웹 사이트에 포함되는 전반적인 콘텐츠를 기획, 관리, 운영한다

- 콘텐츠의 업데이트 및 새로운 콘텐츠 확보 능력이 필요하다.

*웹 엔지니어

- 웹 서버 구축과 운영에 대한 기술적인 업무 담당

 

◆ 플로우 차트

- 작업의 흐름도, 프로그램의 논리적인 순서나 작업의 순서를 도형을 이용하여 그래픽으로 표현한 것

 

◆ 레이아웃

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

 

◆ 내비게이션

- 콘텐츠들을 체계적으로 분류하여 연결시킨 구조

*유형

1) 순차 구조(선형 구조)

- 앞, 뒤로만 이동이 가능

- 강의노트, 연대기, 회원 가입 절차 등 순서를 지켜야 하는 사이트에 적합

2) 그리드 구조

- 수평적 또는 수직적

- 사용자가 구조를 이해하고 있어야 효율적으로 탐색할 수 있다.

- 많은 양의 데이터가 정형화 되어있을 경우에만 적합

3) 계층 구조 - 가장 일반적

- 특정 정보를 중심으로 하위 페이지로 이동

- 계층 설계가 잘못되거나, 단계가 많아지면 사용자가 현위치를 놓칠 수 있다.

4) 네트워크 구조

- 순서 없이 나열

- 개발자의 의도와 상관없이 사용자가 자기만의 방식대로 이동

- 현위치를 가장 많이 놓칠 수 있는 구조

 

◆ 웹 안전 색상

- 운영체제, 웹 브라우저에서 공통된 색상, 216가지

 

◆ 메타포

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

 

◎ 파일 포맷 형식

- PNG: 이미지 변형 없이 원래이미지를 웹상에 그대로 표현, 무손실 압축

- BMP: 비트맵, 24bit까지 색상 표현

- TIFF: 인쇄를 목적으로 하는 용도, 무손실 압축

- EPS: 가장 완벽하게 분판 Film으로 직접 인쇄할 수 있는 파일 포맷

4도 분판을 목적으로 인쇄, 출력의 용도로 맣이 사용

 

◆ 웹 이미지 파일 포맷: GIF, JPG, PNG

 

◆ GIF 파일 포맷

- 저속몸뎀 통신의 목적

- 8bit를 지원 최대 256가지 색상 표현

- 무손실 압축 기법인 LZW 을 이용한다.

(비슷한 계열의 색상을 갖는 이미지를 저장)

- GIF87a와 GIF89a(애니메이션) 버전이 있다.

- 디더링 해서 이미지의 질을 높일 수 있다.(이미지용량 증가)

- 인터레이스: 웹 브라우저에서 이미지가 점진적으로 나타난다.

 

◆ JPG 파일 포맷

- 24bit, 풀컬러(트루컬러), 1670만 가지의 색상 표현

- 손실 압축

- 프로그레시브: 웹 브라우저에서 이미지가 점진적으로 나타난다.

 

◆ PNG 파일 포맷

- GIF 포맷을 대체하기 위해 개발

- 그래픽 소프트웨어 개발자 컨소시움을 통해 개발, 사용료가 없다.

- 애니메이션을 만들 수 없다.

- 풀컬러 사용

- JPG 파일보다 파일 용량이 늘어난다.

- 이미지의 일부를 투명하게 나타낼 수 있다.

- 넷스케이프 4.1, 익스플로러 4.0 이상에서만

- 인터레이스: 웹 브라우저에서 이미지가 점진적으로 나타난다.

 

 

◎ 웹 그래픽 제작 기법

◆ 2D 평면 디자인 과정

- 이미지 구상 - 툴 선택 - 색상 선택 - 기능 선택 - 최종 이미지 표현

 

◆ 3D 형상 모델링 기술

1) 모델링: 실제 존재하거나 상상했던 오브젝트를 3차원 좌표계 사용 표현

*와이어프레임 모델

- 오브젝트의 골격만을 선으로 표현, 가장 기본적인 모델

*솔리드 모델

- 내부까지 채워진 입체

*서페이스 모델(메쉬 모델)

- 삼각형이나 사각형 같은 면을 기본 단위로 한 표면 처리

*파라메트릭 모델

- 곡면 모델, 매개변수 모델, 수학적 방정식으로 구축

*프랙탈 모델

- 단순한 모양에서 시작하여 복잡한 기하학적 형상 구축

*파티컬 모델

- 입자를 이용, 불, 수증기, 먼지, 불꽃, 기포

 

2) 렌더링: 그림자나 색채의변화와 같은 3차원적인 질감, 현실감 추가

*투영

- 3차원 오브젝트를 2차원 스크린에 비추는 작업

*클리핑

- 윈도(디스플레이) 밖에서 오브젝트의 보이지 않는 부분 처리

- 윈도 바깥에 놓인 그림 또는 도형을 제거

*은면/은선 처리

- 오브젝트의 보이는 부분과 보이지 않는 부분 처리

- 입체를 사실적으로 표현하기 위한 중요요소

*쉐이딩

- 음영, 빛의 비춤, 반사, 투명 처리

①플랫 쉐이딩(콘스턴트, 램버트 쉐이딩)

- 음영색만으로 면 전체를 칠하는 방법, 가장 단순

②고러드 쉐이딩(스무스 쉐이딩, 색 보간)

- 면 색상이 단계적으로 부드럽게 표현

③퐁 쉐이딩(정규 벡터 보간법)

- 가장 사실적인 이미지, 빛의 양 계산, 빛의 반사 표현

*매핑

- 오브젝트의 표면 질감과 풍경 처리

①텍스쳐 매핑: 이미지 매핑

②범프 매핑: 요철이나 엠보싱 느낌

③불투명 매핑

④솔리드 텍스처 매핑: 대리석이나 나무와 같이 무늬가 비슷한 오브젝트에

⑤반사 매핑: 금속이나 거울 등 반사

 

◆ 레이 트레이싱

- 광선 추적법, 시선 탐색법

- 눈에 들어오는 빛을 찾아내는 방법, 투명도, 현실적인 표현

 

◆ 래디오시티

- 빛의 반사와 표면 분산을 분석하는 렌더링 기법, 바닥 표현

- 광원이 오브젝트에 충돌하여 반사된 후 다른 오브젝트에 산란되는 과정을 계산하여 표현

◆ 템플릿 디자인

- 홈페이지 레이아웃의형을 만드는 것

◎ 애니메이션

◆ 애니메이션의 방식

1) 프레임:

- 정해진 시간에 정지된 프레임을 보여주는 방법

- 만화: 1초에 12~24컷, 영화나 광고: 24~30컷 이상

2) 키프레임

- 대상물의 시작과 끝만 지정하고 중간 단계는 계산으로 생성하는 방식

- 중간 단계: 보간법(인터폴레이션)을 이용하여 자동적으로 생성

 

◆ 애니메이션 제작 과정

- 기획 - 스토리보드 제작- 제작 - 음향 합성 - 레코딩

 

◆ 애니메이션 종류

*셀 애니메이션

- 배경은 그대로 두고 캐릭터만 움직임, 초창기

*스톱모션 애니메이션

- 한 프레임씩 따로 촬영후 각 프레임을 연결하여 영사

- 관련기법: 퍼핏 애니메이션(인형), 클레이 애니메이션(찰흙, 점토)

픽실레이션(실사 영상 변형)

*고우모션 애니메이션

- 기계 장치가 된 인형이나 제작물을 움직이게 하여 촬영

*컷아웃 애니메이션

- 특정한 형태를 그린 종이를 잘라낸 후 각 종이들을 화면에 붙이거나 떼면서 일정한 모양을 만들어가며 조금씩 촬영

- 그림을 사용해 동작을 만들어내는 가장 단순한 방법

*투광 애니메이션

- 영화의 메인 타이틀, 앤딩 타이틀에서 검은 배경 위에 밝은 색조로 들어나는 글자 표현

*로토스코핑 - 실사와 애니메이션을 합성

*플립북 - 책이나 노트를 넘겨 애니메이션 확인

*모핑 - 컴퓨터그래픽스 이용한 특수효과, 2개의 다른 이미지나 3차원 모델 사이의 변화하는 과정을 서서히 나타내는 기법, 보간법 사용

 

◆ 콤마 촬영: 상황이 규칙적이지 않아 예측이 어려울 때 카메라를 수동으로 버튼을 조작하여 프레임을 잘라 녹화하는 기법

 

◆ 크로마키: 배경과 전경을 따로 찍어 합성

 

◆ 모션 캡처: 실제 움직임을 추적하여 캐릭터에 적용