[웹디자인기능사] 필기 55 웹 그래픽 제작 기법의 정의 ~ 60 애니메이션의 효과 및 활용

55. 웹 그래픽 제작 기법의 정의

 

1. 웹 그래픽 제작 기법의 정의

• 웹 그래픽 디자인은 효과적으로 웹 사용자에게 정보 전달을 돕는 도구
• 정보 전달 역할 : 정보 접근의 편의성 제공, 정보에 대한 빠른 이해력 증대, 시각적ㆍ청각적인 친근감을 확대함

2. 웹 그래픽 편집 프로그램

• 컴퓨터상에 그림이나 문자, 도형 등을 편집 할 수 있는 프로그램
• 도안, 작업, 페인팅, 리터칭을 가하여 합성을 하는 프로그램
  (포토샵, 페인터, 일러스트레이터, 코렐드로우 등)

3. 이미지를 표현하는 단계

이미지 구상 단계 → 도구 선택 단계 → 색상 선택 단계 → 이미지 표현 단계

 

4. 웹 그래픽 이미지 디자인 시 고려할 사항

• 파일 크기
• 이미지의 색상
• 파일포맷 형식

5. 웹 사이트에서 사용할 이미지 소스를 얻는 방법

• 사이트의 콘셉트에 맞추어 디지털카메라로 사진 촬영
• 이미지 편집 프로그램을 사용하여 직접 이미지 제작
• 적절한 이미지가 없을 경우 이미지 판매 사이트에서 구입 가능

6. 웹 컬러 디자인의 목적

• 연상적인 목적
• 심미적인 목적
• 상징적인 목적

 

56. 웹 그래픽 제작 기법의 종류

 

1. 웹 그래픽 제작 프로그램

• 포토샵(Photoshop)
  • 비트맵 기반의 이미지를 합성하기에 적합한 소프트웨어
  • 웹 사이트에 등재할 이미지의 크기가 클경우 크기를 조정하기 위해서는 포토샵의 이미지 사이즈에서 픽셀 수를 줄임
• 일러스트레이터(Illustrator)
  • 벡터 방식이기 때문에 확대ㆍ축소 시 이미지의 손상이 없어 로고나 심볼 제작 시 적합
  • 그래프나 문자 등의 드로잉 작업, 심벌마크 디자인 등의 작업에 사용
• 그 외 페인트샵(Paintshop), 페인터(Painter) 등이 있음

2. 애니메이션 제작(움직임 표현 위주) 프로그램

• 플래시(Flash)
  • 1997년 미국 매크로 미디어사가 웹에서 애니메이션을 실현해줄 수 있는 쇽웨이브 기술 개발
  • 스트리밍 방식을 지원하므로 인터넷 홈페이지용으로 적합
  • 웹용 쇽웨이브 파일뿐만 아니라 애니메이션(GIF), 무비파일(MOV), 자체 실행 파일(EXE) 및 연속(Sequence) 파일 등으로 만들 수 있음
  • 멀티미디어와 애니메이션 제작을 위한 드로잉 전문 프로그램
  • 벡터 방식의 그래픽 처리를 통해 그래픽 파일의 크기를 최적화할 수 있고 웹상에서 실시간 전송 및 스트리밍 기법을 통한 빠른 속도를 제공
  • 다른 멀티미디어 저작 도구와 달리 Plug-In 없이도 ActiveX, Java 기술을 이용하여 실행 가능한 특징을 가지고 있음
  • 단순하고 정적인 홈페이지를 탈피하여 역동적인 홈페이지를 구축할 수 있음
  • 사업적 용도로 가치 있는 배너를 제작할 수 있음
  • CGI와 연동하면 여러 가지 기능을 가진 카운터, 방명록, 게시판 등을 만들 수 있음
• 플래시와 관련된 파일 확장자
  • *.fla
  • *.swf
  • *.spa
• 플래시 기법 - 트위닝(Tweening)
  • 플래시에서 맨 앞과 맨 끝 키 프레임에만 변화를 주면 중간 과정을 만들어 주는 기법
  • '사이에 있는 것(In Betweening)'을 의미
• 플래시 외 애니메이션 제작 프로그램
  • 웹 사이트 내에 움직이는 배너광고를 제작하고자 할 때 사용
  • 이미지 레디(Image Ready), 스위시(Swish), 플렉스(Flax), 디렉터(Director) 등

3. 동영상 편집 프로그램

• 캠코더에서 얻은 동영상클립을 편집하여 결과물을 얻기에 적합한 소프트웨어
• 프리미어(Premiere), 무비메이커(Movie Maker), 베가스 프로(Vegas Pro) 등

4. 사운드 편집 프로그램

케이크워크(Cakewalk) : 사운드 편집 및 변환에 사용

 

 

57. 웹 그래픽 제작 기법의 특징 및 활용

 

1. 웹 그래픽 제작 기법의 종류

• 디더링(Dithering)
  • 요구된 색상의 사용이 불가능할 때, 컴퓨터 프로그램에 의해 다른 색상들을 섞어서 비슷한 색상을 내는 방법
  • 제한된 컬러를 사용하여 본래의 높은 비트로 된 컬러의 효과를 최대한으로 내는 처리 기법
  • 점묘와 같이 제한된 수의 색상들을 섞어서 시각적으로 다양한 색상을 만들어 내는 것
  • 적은 수의 색상 반복으로 그래픽 파일의 용량을 줄이는 장점이 있음
    (노란색과 빨간색을 섞어서 기술적으로 잘 배치하면 주황색과 같이 보이도록 할 수 있음)
• 포토 콜라주(Photo Collage)
  연관성 있는 여러 가지 이미지를 조합하여 하나의 새로운 이미지를 제작하는 방법
• 3차원 모델링 방법

렌더링 (Rendering)	- 3차원적 이미지를 최종적으로 이미지화하는 것으로 사실감을 부여하기 위해서 색상과 질감을 입히고 빛과 카메라의 위치를 조작하는 과정 - 은면 제거, 그림자 표현, 텍스처 매핑 등의 표현 방법이 있음
와이어 프레임 모델 (Wire-frame Model)	- 3차원 컴퓨터 그래픽의 모델링 방식 중 물체의 면과 면이 만나서 구성되는 모서리 선을 사용하여 물체의 형상을 표현하는 방식으로 점, 꼭짓점을 연결하는 선(Line) 또는 곡선만으로 표현하는 방식 - 선만으로 입체 생성 - 처리속도가 빠르지만 무게감, 부피, 실제감을 느낄 수 없음
프랙탈 (Fractal)	- 선 표시에서 면으로 변화하는 상태를 자연스럽게 조작할 수 있는 질감 묘사 모델링으로 복잡한 자연경관이나 불규칙한 성질을 가진 것들을 표현할 수 있음 - 산맥이나 구름과 같이 불규칙적이고 균열된 물체를 표현하기 위해 그래픽 이론을 토대로 실물과 유사하게 표현하는 기법 - 3차원 물체를 만드는 기본과정 중 단순한 형태에서 점차 복잡한 형상으로 구성하는 모델링 - 구름이나 바다 물결, 소용돌이, 담배 연기, 산, 강 등을 표현하는 기법
매핑 (Mapping)	- 모델링된 각 물체의 표면에 고유한 재질감 부여 - 범프 매핑(Bump Mapping)    - 오브젝트에 요철이나 엠보싱 효과를 표현하는 방법    - 벽돌이나 자갈처럼 울퉁불퉁한 표현을 할 때 사용    - 3차원 컴퓨터 그래픽스에서 다각형으로 표현된 물체표면에 요철정보를 첨부하는 기법    - 흰색 부분은 돌출되어 보이고 검은색에 가까울수록 들어가 보임 - 오패시티 매핑(Opacity Mapping)    모델에 투명한 부분과 불투명한 부분을 정하는 것 - 텍스처 매핑(Texture Mapping)    - 1974년 개발되었으며, 물체의 표면에 색과 패턴 부여    - 2차원 이미지를 3차원 이미지로 대응시키는 작업    - 솔리드 텍스처 매핑이라고도 함 - 리플렉션 매핑(Reflection Mapping)    물체에 반사된 것처럼 보이게 표현하는 방법
표면 모델링 (Surface Modeling)	- 물체를 구성하는 모든 면에 대한 정점과 연결선의 좌표로 입체를 표현하는 방법 - 면의 구분이 가능하고 은폐선과 은폐면을 제거하여 물체의 사실감을 높이거나 자유 곡면을 표현하는 데 적합함 - 모든 면에 데이터를 입력하므로 용량이 커짐

• 광원과 조명

간접조명	부드러운 빛을 내어 침실이나 병실 등 휴식 공간에 사용되는 조명 방법
퐁 쉐이딩 (Phone Shading)	- 음영 처리 기법 - 정규 벡터 보간법(Normal Vector Interpolation)이라고도 함 - 오브젝트의 각 점에 전달되는 빛의 양이 계산되어 부드러운 곡선 표현에 적합 - 렌더링 계산 시간이 많이 걸림
고러드 쉐이딩 (Gouraud Shading)	컴퓨터 그래픽스의 렌더링 중 물체의 각 꼭지점(Vertex)에서 빛의 양을 계산한 후 그 값들을 보관하여 각 점에 색 값을 할당하는 쉐이딩 기법
플랫 쉐이딩 (Flat Shading)	3차원 컴퓨터 그래픽스에 쓰이는 광원 기술

 

2. 웹 그래픽에서 나타나는 현상

• 안티 앨리어싱/안티 앨리어스(Anti-aliasing / Anti-alias)
  • 해상도가 낮은 상태에서 이미지를 확대해보면 계단 모양 또는 지그재그 모양으로 나타나게 되는데, 이때 나타나는 부자연스러움을 없애기 위해 픽셀의 그리드에 단계별 회색을 넣어 계단 현상을 없애주는 기능으로 비트맵 이미지에서 나타남
  • 비트맵 이미지의 픽셀이 정사각형 모양이므로 확대하면 이미지 경계가 계단 형식으로 표현되는 것을 부드럽게 만듦
• 무아레(Moire) 무늬
  '물결무늬'라는 의미의 프랑스어로 무아레는 간섭무늬, 물결무늬, 격자무늬라고도 하며, 규칙적으로 되풀이되는 모양을 여러 번 거듭하여 합쳐졌을 때, 이러한 주기의 차이에 따라 시각적으로 만들어지는 줄무늬

 

58. 애니메이션의 정의

 

1. 컴퓨터 애니메이션

• 움직임이 없는 무생물이나 상상의 물체에 인위적인 조작을 가해 움직임을 주는 것
• 일련의 정지된 그림을 빠르게 연속시켜서 보여줌으로써 움직이는 것처럼 착각 유도
• 애니메이션은 라틴어의 아니마투스(Animatus, 생명을 불어넣다)에서 유래
• NTSC 방식의 애니메이션에서 1초당 최소 30프레임 필요

2. 애니메이션 저작도구

디렉터(Director) : 스코어, 캐스트, 페인트, 링고로 구성

 

3. 애니메이션의 단계별 제작 순서

기획 → 시나리오 → 스토리보드 → 레이아웃 → 원화 → 스캐닝 → 디지털 드로잉 → 디지털 채색 → 편집 → 녹음

 

 

59. 애니메이션의 특징

 

1. 스프라이트(Sprite)

• 자연스러운 애니메이션 구사
• 원래는 화면 겹치기라는 의미
• 배경과 독립되어 있음

2. 프레임(Frame)

• 애니메이션에서 한 장의 영상을 의미하며, 정지된 화면 하나하나를 프레임이라고 함
• FPS : 매 초당 보이는 프레임의 수를 뜻하는 단위

3. 키프레임(Key Frame)

중요한 장면이 들어가는 프레임이라는 의미로, 트위닝을 삽입할 수 있음

 

4. 트위닝 기법

'사이에 있는 것(In Betweening)'이라는 뜻에서 유래한 용어로 각각의 프레임을 그리는 과정에서 중요한 장면만을 사람이 그려주면, 사이의 중간 모습들을 컴퓨터에서 만들어 주는 기능

 

 

60. 애니메이션의 효과 및 활용

 

1. 셀 애니메이션(Cell Animation)

• 1914년 '얼 하드(Earl Hurd)'가 고안함
• 배경 그림은 그대로 두고 캐릭터만 움직이게 하는 기법
• 종이에 그린 그림을 셀룰로이드에 옮긴 뒤, 그 뒷면에 채색을 한 다음 배경 위에 놓고 촬영하는 기법

2. 컷 아웃 애니메이션

• 오려낸 그림을 2차원 평면상에서 한 프레임씩 움직이면서 촬영하는 스톱 애니메이션
• 클레이 애니메이션이나 인형 애니메이션과 비슷하지만 3차원이 아닌 2차원이라는 점에서 구분됨
• 특정한 형태를 그린 종이를 잘라낸 후 각 종이들을 화면에 붙이거나 떼면서 원하는 이미지를 만들고, 그것들을 연결해서 움직임을 만들어 내는 애니메이션

3. 모핑(Morphing) 기법

• 2개의 서로 다른 이미지나 3차원 모델 간에 점진적으로 변화해 가는 모습을 보여주는 기법
• 처음 프레임과 마지막 프레임만 지정해 주고 나머지는 자동으로 생성하며, 현재 뮤직비디오나 영화에서 많이 사용되고 있음

4. 모션 캡쳐(Motion Capture)

• 캐릭터를 애니메이션화 할 경우 가장 쉬운 방법은 실제 데이터를 사용하는 것
• 비디오 및 기타 장비를 통해 사람과 동물 등의 움직임이나 운동을 받아들여 그 실제 값을 해당 캐릭터에 적용하면 움직임이 자연스러워 애니메이션의 효과를 극대화시킬 수 있음
• 사람, 동물, 기계 등 물체의 움직임에 대한 정보를 추출하여 디지털화시키는 것
• 추출 정보를 영화, 게임, 3D 애니메이션 등에 응용
• 인간공학적 디자인, 자동차 안전사고 실험 등의 동작 분석에 사용

5. 스톱모션 애니메이션

점성이 있는 소재를 이용해 한 프레임씩 촬영한 후 각 프레임을 연결하는 애니메이션 기법

 

6. 미니어처 효과

애니메이션 제작의 특수 효과 중 하나로 축소형으로 입체 모델을 만들고 여기에 다른 기법을 병합하여 장면을 만드는 것

 

7. 핀 스크린 애니메이션

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

 

8. 실루엣 애니메이션

• 검은 종이를 접거나 오려서 캐릭터와 배경의 형태를 만든 후 이것을 변화에 따라 순서대로 배열해 놓고 촬영하는 기법
• 캐릭터와 배경을 두꺼운 종이로 오려 제작하고, 그 뒤에서 조명을 비추어 그림자를 만든 후 촬영함
• 흑백의 강한 콘트라스트로 구성

9. 로토스코핑

• 실사와 애니메이션을 합성하는 기법으로 많이 사용됨
• 먼저 촬영한 실제 필름 위에 애니메이션을 위한 셀을 올려 놓고 실사 안에 추가하고자 하는 애니메이션을 삽입

 

웹디자인기능사 필기 무료 강의