프로토타입 제작하기

콘텐츠 수집 제작

제작을 위한 기초 자료를 수집하고 필요한 이미지, 동영상을 촬영하거나 화면을 디자인할 수 있다.

1. 이미지의 형식

• 이미지 파일은 일정한 규약에 의해 디지털 정보로 저장되며, 데이터 파일로 포맷이 이루 어진며 형식에 따라 용량의 차이를 나타낸다

1-1 psd

포토숍의 기본 포맷 방식이다. 이미지의 레이어, 채널, 패스 등으로 작업한 정보를 그대로 저장할 수 있으며, 수정, 보완, 재사용이 가능하도록 다양한 작업 정보를 갖지만 용량이 커지는 단점과 포토숍 프로그램이 없으면 이미지를 확인 할 수 없다는 단점이 있다.

1-2 bmp

비트맵 이미지의 대표적 파일 형식으로 입출력 속도는 빠르지만 압축하지 않은 상태로 저 장되며 픽셀이라는 개별적인 점들의 집합으로 각 픽셀의 위치 및 색에 대한 정보가 담겨 져 있다

1-3 jpeg

파일의 용량을 압축하여 크기를 줄이는 방식이지만 그만큼 화질의 손실을 보게 되는 압축 방식의 이미지이다. 용량의 가벼움으로 웹 페이지와 디지털 디자인에 많이 활용되는 이미 지 방식이다.

1-4 gif

jpeg보다 압축률은 떨어지지만 사이즈가 작아 전송속도가 빠르고 이미지의 손상도 적다는 장점을 가지고 있다. 여러장의 이미지를 한 개의 파일에 담을 수 있어, 저용량의 애니메이션을 만들기에 용이하다.

1-5 eps

인쇄 등 출력을 위한 포맷 방식으로 포스트스크립트 명령어가 포함되어 있는 파일 형식이 다. 주로 일러스트레이터로 작업하면서 파일 용량이 크지만 많이 사용되고 있다.

1-6 pdf

eps와 같이 포스트스크립트를 포함한 파일형식이나 뛰어난 호환성으로 모든 환경에서 확 인이 가능하며 문서를 이미지 형태로 보여주기에 적합한 파일 형식으로 사용되고 있다.

1-7 png

gif, jpeg 보다 압축률이 높으며 투명한 배경으로 저장되기 때문에 웹 환경에서 많이 사용 되고 있는 이미지 포맷 형식이다

2. 해상도

가로, 세로 1인치 안에 들어가는 픽셀의 개수를 의미하고, 1인치당 몇 개의 픽셀로 이루어 졌는지를 나타내는 ppi(pixel per inch)와 1인치당 몇 개의 점(dot)로 이루어졌는지를 나타 내는 dpi(dot per inch)를 주로 사용한다. 픽셀 또는 해상도의 수가 많을수록 고해상도의 정밀한 이미지로 표현할 수 있다

3. 영상 파일의 종류

3-1 mpeg

'moving picture exports group'의 약자로 국제 표준 영상 파일이ㅕ, pc에서는 주로 mpg 확장자로 표시된다. 일반적인 동영상 파일을 고압축하여 파일의 크기를 획기적으로 줄이 고 화질 면에서도 뛰어나다.

3-2 avi

소리와 영상이 번갈아 기록된다는 뜻을 가지고 있으며, 압축률이 높지 않아 용량 크기는 크지만 제작 시에 여러 가지 압축 코덱을 사용하여 파일 크기를 조절 할 수 있다.

3-3 asf

통신망에서 실시간으로 멀티미디어 서비스를 받는데 최적화되어 있다. 또한 소리 파일로 쓰일 수 있어서 mp3와 비슷하면서도 파일 크기가 더 작다. 영상, 소리, 그림, URL, 응용 프로그램까지 포함되어 있다

4. 소리 파일의 종류

4-1 wav

윈도 운영 체제의 기본 소리 파일 형식으로 다른 저장 방식에 비해 파일 크기가 매우 커 서 효과음, 편집, CD 제작에 쓰인다.

4-1 mp3

사람이 들을 수 있는 신호만 모아서 압축하여 웨이브 파일의 약 50% 크기고 줄였으며 스 테레오 음악용으로 많이 쓰인다

콘텐츠 통합·편집 및 제작

1. UI(User Interface)

UI란 사람이 사용자가 되어 어떠한 사물이나 기계장치, 컴퓨터 프로그램 등과 의사소통을 하려는 목적으로 만들어진 물리적 또는 가상적 매개체를 뜻한다. UI는 사용자가 사물을 조 작하는 입력 시스템과 사용자의 잉ㅂ력에 반응하여 결과를 보여주는 출력 시스템으로 나 뉜다. UI를 평가 할 때의 사용성의 정의는 ‘인터페이스를 사용함에 있어서 사용자가 생리 학적, 심리적인 측면에서 지각한는 효과성과 효율성의 정도’라고 할 수 있다. 효율적으로 입력하여 효과적으로 출력을 얻어 내는 것이 UI가 지향해야 할 목표라고 할 수 있다.

2. 프로토타이핑

2-1 프로토타이핑의 개념

개발자들과 사용자들의 의사소통상의 효과를 증진시키기 위하여 취하는 시스템 개발 기법 이다. 프로토타이핑 기법을 수행할 때 중요한 점은 개발자와 사용자 간의 상호 이해 및 지식 교환을 위한 작업이라는 점을 명심하는 것이다. 일반적인 분석 방법을 취할 경우 양 자 간에 서로 다른 이해를 가져올 수 있으므로, 프로토타입이라는 의사소통 도구를 만들 자는 것이다

2-2 프로토타이핑의 목적

먼저, 오직 사용자의 요구 분석이 목적인 경우 폐기 처분용 프로토타입을 만들 수 있고, 둘째 가급적 빨리 개발해야 하는 경우 셋째 상세 설계와 구현까지 마친 다음 대량 생산에 앞서 시험용으로 개발된 프로토타입이 있을 경우, 넷째 입출력의 사례를 보여줄 뿐 실제 데이터도 없고 절차 논리도 구현되지 않는 프로토타입이 있다. 다섯 번째 개발된 프로토 타입을 계속 진화시켜 최종적인 시스템으로 발전시키는 진화형 프로토타입이 있다

2-3 인터렉션 디자인

인터렉션 디자인은 인간이 제품이나 서비스를 사용하면서 상호작용하는 것을 용이하게 하 는 디자인 분야이다. 주로 인간과 컴퓨터의 상호작용을 디자인하는 것으로, 컴퓨터에 의해 작동되는 전자제품 시스템이 행동과 사용자의 행동 간의 상호작용을 용이하게 하는 기술 이자 응용 예술 분야이다.

2-4 애니메이션

애니메이션이란 움직임 없는 무생물적인 존재를 여러번에 걸쳐 변형시키고 이를 연속 촬 영 또는 기타 영상적 기법을 이용하여 마치 움직이는 듯한 눈의 착각을 일으키도록 하는 기술이다

애니메이션 방식

정해진 시간에 한 컷 한 컷을 보여주는 방식으로 정지 화면을 빠르게 보여 주어 움직임이 있는 것처럼 착시를 일으키게 하는 프레임 방식과, 시작 프레임과 끝 프레임을 지정하여 중간 프레임이 자동적으로 생성되도록 하는 키 프레임 방식이 있다

애니메이션 종류

애니메이션은 크게 그림, 모델, 컴퓨터 애니메이션으로 구분된다. 그림 애니메이션은 셀, 종이, 유리, 모래, 핀 스크린,으로 분류되고, 모델 애니메이션은 인형, 클레이, 컷 아웃 애 니메이션으로 분류되며, 컴퓨터 애니메이션은 2D, 3D 애니메이션으로 분류된다.

2-5 네비게이션

콘텐츠를 분류하고 체계화시킨 후, 이를 연결시켜 방문자가 웹 사이트를 이용할 수 있도 록 하는 체계이다. 사용자가 웹 사이트 내에 있는 다양한 페이지를 이동할 수 있도록 지 원하며, 웹 사이트에서 제공되는 정보를 쉽게 찾을 수 있도록 도와준다. 특히 , 인터넷 비 즈니스를 위한 사이트의 경우에는 고객이 쉽고 편리하게 자신의 목적에 맞는 상품을 찾을 수 있도록 네비게이션을 설계하는 것이 중요하다.