[웹 디자인 기능사] 09. 웹 그래픽 제작

* Youtube Link - https://www.youtube.com/watch?v=tdAuDFqfc9w&list=PL6i7rGeEmTvpaBlHGWlhtAWZxc9hM4nCd&index=9

 

웹 디자인 프로세스

웹 디자인 - 웹과 디자인이 합해져있는 말. 웹 사이트를 설계하고 디자인하는 것. 정확한 정보 전달을 목표로 그래픽 요소를 더해 보다 효율적인 웹 페이지를 제작한다.

 

웹 디자인 = 웹 사이트를 설계하고 디자인하는 것

웹 디자인 = 웹 + 디자인

정확한 정보 전달을 목표로 그래픽 요소를 더해 보다 효율적 웹 페이지를 제작한다.

 

웹 디자인 시스템은 하드웨어와 소프트웨어로 나뉘어진다.

컴퓨터 그래픽스와 비슷한 부분이 있다.

 

인력 구성

웹 기획자 - 어떤 웹 사이트를 제작할 것인지를 전체적으로 구성하고 설계하는 역할을 한다. 웹 사이트를 기획함에 있어서 기업이 추구하는 목표에 맞도록 사이트 컨셉을 정하는 역할을 하고 어떻게 사이트의 스펙을 정할 것인지를 정해주는 아주 중요한 역할

콘텐츠를 배치하는 것에 기획, 사이트의 전체적인 제작사항 등을 담당

웹 프로듀서

웹 마케터까지 세분화 시킬 수 있다.

웹 디자이너 - 웹 에디터와 그래픽 프로그램을 이용해서 디자인을 하는 사람. 문자, 그림, 동영상, 음성 등을 재가공하고 디자인하는 역할, 웹 프로그래머와 많은 대화를 해야 한다.

웹 프로그래머 - 기술적인 요소들을 제작하는 역할. 홈페이지에서 운영되는 여러 응용 프로그램을 개발. 웹 프로그래밍 언어들을 잘 활용할 수 있어야 한다.

 

웹 디자인하는 과정들을 잘 기억해주길 바란다.

1. 프로젝트 기획 단계 - 웹 사이트 자체를 만들기 위해서 전체 프로젝트를 기획하는 단계. 가장 중요한 것은 주제를 설정. 어떠한 주제로 웹사이트를 만들 것인가. 시장 조사. 목표 설정.

2. 웹 사이트 기획 - 웹 기획자가 이 부분에서 많은 역할을 한다. 팀 구성. 사이트 구조와 관련되서 여러 아이디어들을 도출. 사이트의 컨셉들을 정의. 자료 수집. 사용하게 될 사용자들의 분석. 웹 사이트의 분위기. 메뉴 등 콘텐츠 디자인에 대해서 정의. 스토리 보드 제작.

3. 웹 사이트 구축 - 사이트 디자인, 사이트 구축. 동시에 진행되는 부분들이 있다. 사이트 디자인에서는 콘텐츠 제작. 레이아웃에 맞춰서 배치. 사용자가 어떤 내용들을 찾아 들어갈 수 있도록 해주는 네비게이션을 구축. 그리고 기본적인 테스트와 틀린 부분들을 수정하는 디버깅 작업들을 하게 된다. 사이트 구축 단계에서는 실질적으로 사이트를 만들어가는 과정. 세부 디자인. 웹 프로그래밍을 이용해서 사용자들이 사용하게 될 응용 프로그램들을 제작. 웹 서버 세팅. 실질적으로 데이터를 올려 놓음. 이를 웹 출판이라고 함. 웹 사이트가 실제적으로 만들어져서 오픈되는 것 까지 다 된다.

4. 유지 및 관리 - 테스트/디버깅, 웹 사이트 홍보, 데이터 베이스 백업

 

웹사이트 기획 단계에서 이루어지는 스토리보드라는 것은

일종의 작업 지침서, 웹 사이트에 대한 설계도

그림과 설명을 병행, 시각화

디자인 작업에서 쉽게 콘텐츠를 배치시킬 수 있다.

웹 사이트의 전체적인 내비게이션을 확인할 수 있음

시행 착오를 줄일 수 있음

개발자들간의 의사소통의 도구가 된다.

 

정보 체계화

정보의 양, 상관관계, 일관성에 대해서 고려

콘텐츠들을 체계적으로 정리하고 그룹화하고 세분화하여 구조적으로 설계하는 것과 관련된 일련의 작업들을 정보 체계화라고 한다.

콘텐츠를 수집하고 수집된 정보들을 그룹화, 그리고 구조화, 또한 정보의 계층 구조 설계, 콘텐츠 구조 설계 테스트 등으로 작업이 이루어진다.

 

아이디어 발상법

웹 사이트를 기획할 때 많은 도움을 주는 많은 방법들

 

브레인스토밍 - 머리를 맞대고 토론을 하면서 많은 양의 아이디어를 도출하는 방식, 비판등재의 원리, 무조건적인 비판 금지

연상결합법 - 관련없는 사건이나 요소로부터 주관적으로 떠오른 정보에서 유사점이나 차이점을 발견해나가는 것

입출력법 - 주어진 문제에 대해 강제로 도달해야 되는 지점을 연결 (문 앞에 서면(input), 문이 열린다(output)을 의미)

시네틱스법 - 관련 없는 요소들을 서로 연결시켜서 새로운 것을 유추해 내는 방법

고든법 - 고든이라는 학자가 개발한 고든법, 짧은 키워드만 제시한 다음에 아이디어를 자유롭게 펼쳐나가는 것

사회자가 '건다'라는 동사를 제시하면 이에 대한 여러 주제들을 내어놓는 것

체크리스트법 - 다양한 항목을 질문 형태로 체크리스트로 만들어서 여러 사항을 검토하고 분석하는 것

 

레이아웃

콘텐츠를 적절하게 배치시킨 구조 또는 형태를 웹 페이지의 레이아웃이라고 한다.

레이아웃을 만들 때의 주의사항

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

콘텐츠의 연결이 일관성이 있어야되고 논리적이어야 함

중요한 콘텐츠를 먼저 배치한 후 그 다음에 세부사항들을 결정

텍스트와 그래픽 요소를 적절히 조화시키는 것도 중요

 

텍스트 레이아웃 - 텍스트를 위주로 레이아웃을 구성, 간결하다는 특징, 서술형으로 열거하게 되면 단조로울 수 있음

테이블  레이아웃 - 구성 요소를 일목 요연하게 배치, 표를 이용, 전체적으로 내용들을 정리하기 쉽다

프레임  레이아웃 - 웹 페이지를 분할하기 위해서, 웹 브라우저 창을 분할하기 위해서 사용, 독립적으로 페이지를 운영하기 쉬운 반면 프레임들을 너무 많이 사용하면 혼란 스럽다.

이미지 레이아웃 - 웹 페이지에서 시각적인 효과를 높이고 싶을 때 사용, 한 장의 이미지만 사용하는 이미지를 사용했다면 변경이 쉽지 않다. 용량이 큰 이미지일 경우 로딩속도가 느려지기 때문에 많이 사용하지 않도록 함

 

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

메뉴 - 웹 페이지에 나타나는 주요 메뉴들

링크 - 연결되어 있는 하이퍼링크 자체

이미지 맵 - 이미지 하나 에다가 여러 링크를 적용

사이트 맵 - 웹 페이지 전체 구조를 한 눈에 볼 수 있도록 해준 형태 (원하는 페이지로 바로 이동, 최적의 네비게이션 제공)

사이트 메뉴바 - 좌측, 우측에 링크들을 모아 둔 것

네비게이션 바 - 메뉴를 한 곳에 모아놓은 그래픽이나 문자열 모음

 

순차 구조 - 선형 구조 , 앞 뒤로만 이동이 가능하다. 강의 노트 

강의 노트, 연대기, 회원가입 절차등 순서를 지켜야 하는 사이트에 적합한 네비게이션 구조

그리드 구조 - 순자 구조를 여러 개 합해 놓은 형태, 수평적 또는 수직적인 내비게이션 구조가 가능

계층 구조 - 가장 일반적으로 사용, 큰 메뉴로 부터 작은 메뉴로까지 계층적으로 내려가는 것. 정보가 계층정으로 연결되어 있음. 특정 정보를 중심으로 해서 하위 페이지로 이동하는 네비게이션 구조.

 

네트워크 구조 - 개별 정보가 있는 웹 페이지의 정보가 순서 없이 나열되어 있는 복잡한 구조

수많은 페이지가 나열

초보 사용자들에게 혼동을 야기할 수 있다.

사용자가 네비게이션을 할 때 현재 위치가 어디 쓰이는지 가장 많이 놓칠 수 잇는 구조

엔터테이먼트 사이트나 체험 사이트 등 특수한 사이트를 개발을 할 때 사용.

 

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

1) 일관성을 유지

2) 현재 위치를 알려줌

3) 명확한 링크를 사용

4) 내비게이션을 2가지 이상 제공

 

웹 디자인 프로레스에서 고려해야될 사항들

- 일관된 주제

- 디자인 : 복잡하거나 현란한 디자인이 되지 않도록 함, 웹 안전 색상 고려 (모든 시스템에 공통적으로 사용되는 216가지의 색상을 사용하는 것)

 

- 인터페이스: 너무 많은 링크로 사용자에게 불편을 주지 않도록 함

메타포를 이용해서 사용자가 친숙하게 사용할 수 있는 사용자 환경을 제공해야 함 

메타포 : 연상 어떤 것을 은유하는 것

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

홈페이지를 윈도우 환경과 비슷하게 만든다면 휴지통 모양의 메뉴를 만든다면 사용자는 이 휴지통에 무언가를 버려야 된다고 생각하게 될 것.

 

웹 사이트에서 사용되는 파일 포맷과 기타 파일 포맷

GIF - 컬러 수가 최대 256가지로 제한, 빠른 전송 때문에 웹용 이미지로 많이 사용, 89a 버전은 투명한 웹용 이미지 제작 및 애니메이션이 가능, 무손실 압축을 사용

JPEG - RGB 컬러와 CMYK 컬러를 지원, 이미지 손실이 많은 압축을 사용

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

TIFF - 모든 종류의 시스템에서 호환되는 포맷 방식, 인쇄를 목적으로 하는 용도로 사용되고 있음

 

PDF - 어도비 아크로뱃의 파일 포맷의 확장자 

Photoshop(*.PSD) - 포토샵 기본 파일 포맷, 편집 원본 파일을 저장할 때 사용

 

웹 용 이미지 파일에 대해서 조금 더 자세히 알아보겠다.

GIF (Graphic Interchange Format)의 약자이다.

미국 CompuServe 사가 만든 파일 포맷이다.

8bit를 지원. -> 한 픽셀에 256가지 색상을 표현할 수 있다.

무손실 압축 기법인 LZW을 이용하여 이미지가 손상되지 않는다.

버전이 87a와 89a가 있다.

89a만이 이미지를 투명하게 나타내고 애니메이션을 제작할 수 있다.

한 픽셀단 256가지 색상만 나타내기 때문에 디더라는 방식을 사용한다.

디더는 이미지에 포함되지 않은 색상을 마치 포함된 색상처럼 구성해주는 기법

노랑색과 파랑색을 겹쳐 놓으면 겹쳐놓은 이 부분은 녹색부분으로 나타난다. 이런식으로 어떤 기술을 사용하는 것이 디더링이 되겠다.

 

JPG(JPEG)

연합 사진 전문가 그룹에서 개발한 파일 포맷이다.

24bit를 사용.

한 픽셀에 색상이 나타낼 수 있는 범위가 24bit를 이용. 매우 많은 수의 색상을 표현할 수 있다.

압축률이 높은 손실 압축을 사용한다. 하지만 손실압축을 사용하기 때문에 이미지의 세부 정보는 상실된다.

 

PNG 파일 포맷

Portable Network Graphic의 약자로 GIF 포맷을 대체하기 위하여 개발되었다.

GIF 포맷과 성질이 비슷하지만 애니메이션을 만들 수 없다.

GIF와 달리 풀컬러 즉 많은 수의 컬러를 사용할 수 있어서 섬세한 이미지를 나타낼 수 있다.

웹 브라우저에서 이미지의 일부를 투명하게 나타낼 수 있다.

인터레이스 - 웹 상에서 이미지가 점진적으로 또렷하게 나타나게 할지 아닐지를 결정하는 것.

 

*.java, *.class - 자바 관련 파일 포맷

*.js - 자바스크립트 파일 포맷

*.swf - 플래시

* .mpg - 동영상

* .avi - 동영상

* .mov - 동영상

 

웹 그래픽 제작 기법

2D 평면 디자인의 과정

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

 

캐드 (CAD)

일러스트레이터 (Illustrator)

포토샵 (Photoshop)

 

3D 형상 제작 과정

모델링 (어떤 오브젝트를 윤곽선에 따라서 디자인 하는 것) 

렌더링 (모델링된 오브젝트에 표면처리를 하기 위한 렌더링 작업이 있다.) 

이 렌더링 과정에 투명 작업 부터 매핑 작업까지 포함될 수 있다.

 

모델링 (Modeling)

3차원 모델링의 종류

와이어 프레임 모델 - 오브젝트의 골격만을 표현

솔리드 모델 - 고체 모델 

서페이스 모델 - 표면 모델

프랙탈 모델 - 단순한 모양에서 시작해 복잡한 기하학적 형상을 구축, 영화에서 어떤 식물이 갑자기 자라나거나, 어떤 것이 갑자기 폭증하는 것들을 나타낼 때 사용

파티클 모델 - 입자를 이용해 표현하는 모델링

 

조명방식

간접조명: 빛을 천장이나 벽 쪽을 비춰서 반사광을 이용하여 효율성은 떨어지지만 조도가 균일해서 부드러운 빛을 낼 수 있는 조명.

 

3D 형상 제작 과정

렌더링 - 만들어진 형상에다가 표면을 처리하는 것, 그림자나 색체변화 그리고 질감을 더하여 주는 것.

투영부터 매핑까지 5단계로 처리된다.

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

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

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

쉐이딩 - 음영, 빛의 비춤, 투명 처리

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

 

배경 이미지와 메뉴 - 배경 이미지의 반복을 없애기 위해서 스타일 시트를 이용해서 배경 이미지의 반복 횟수를 줄여주는 것이 좋다. 

배경이미지가 용량이 매우 크게 되면 로딩이 늦게 되므로 주의해야 함

템플릿 디자인 - 템플릿은 형판, 보기판 이라는 뜻을 가진 단어로, 템플릿 디자인이란 홈페이지의 레이아웃의 형을 만드는 것을 말함

개략적인 디자인을 만든 다음에 세부적인 디자인 요소를 별도로 만드는 방법

웹 페이지를 추가하게 될 때마다 간편하게 웹 페이지를 제작할 수 있음

웹 안전 색상 - 216가지 색상을 이용한다.

 

안티 - 앨리어싱

텍스트를 디자인할 때 사용하게 되는 옵션

주로 비트맵 방식의 프로그램에서 이 옵션이 나타나고 있다.

곡선으로 쪼개지지 않는다.

사각형이 들숙날숙하게 보인다.

조금 더 감쇄하기 위해서 사용하는 옵션이 바로 안티 앨리어싱이다.

 

컴퓨터 애니메이션의 제작 과정

스토리보드 제작 -> 모델링 -> 애니메이션 -> 쉐이딩 및 페인팅 -> 특수효과 추가 -> 조명 -> 렌더링 -> 레코딩

 

프레임 방식 - 정해진 시간안에 정지된 프레임 여러개를 한꺼번에 보여주는 것 

1초에 24컷의 이미지를 보여주는 것. 영화나 광고는 1초에 30컷의 프레임을 진행시ㅁ

루틴을 시키면 움직이는 것 처럼 보일 것이다.

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

중간 단계를 생성하는 방법을 보간법이라고 한다.

사각형만 그린 다음 프로그램을 통해서 가운데 값을 계산하도록 한다.

그러면 원에서 사각형으로 이동하는 결과가 나오게 된다. 

이러한 기법 자체를 트위닝이라고 한다.

 

기획/시나리오

스토리보드 제작

제작

음향 합성

레코딩

 

셀 애니메이션 - 배경은 그대로 두고 캐린터만 움직이는 초창기 애니메이션 기법

투명한 필름 위에 수작업으로 캐릭터를 채색한 후 배경 위에 놓고 촬영 및 편집함

스톱모션 애니메이션 - 한 프레임씩 따로 따로 촬영을 한 후에 각 프레임을 연결해서 영사하는 기법

영화가 1초당 24프레임으로 구성되는 것을 만든다면 24개의 프레임을 각각 다 촬영을 해야 되는 것이다.

클레이 애니메이션 - 찰흙이나 점성이 있는 소재를 만들어서 이 소재를 이용해서 인형을 제작한 후에 그 인형을 조금씩 조금씩 움직여가면서 콤마 촬영을 하는 것. 콤마 촬영이라는 것은 카메라로 수동으로 버튼을 조작하면서 하나 하나를 모두다 찍어내는 것.

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

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

로토스코핑 - 실사와 애니메이션을 합성하는 기법

플립북 - 책이나 노트 등에 변해가는 동작을 페이지마다 그린후 일정한 속도로 종이를 넘겨 애니메이션을 확인하는 작업

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

강아지가 사람으로 변한다던가 할 때 모핑 기법을 활용한다.

 

크로마키 - 블루에서 영상을 찍었을 때 파란 화면 대신에 다른 화면을 합성을 함으로써 두 영상이 마치 원래 하나인 것 처럼 만드는 것.

모션 캡처 - 실제 생명체의 움직임을 추적해서 모델링 된 캐릭터에 적용시켜주는 기술 

표정을 만들어내기 위해서 작은 센서들을 붙여놓고 있다.

말을 하거나 웃거나 하게 되면

이 센서값이 컴퓨터로 전달이 된다.

전달된 데이터 값을 만들어낸 캐릭터에 입히면

사람처럼 좀 더 자연스럽게 표현이 된다.

 

감사합니다.