프로토타입 제작하기

콘텐츠 수집 제작

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

1. 이미지 형식

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

1.1 psd

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

1.2 bmp

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

1.3 jpeg

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

1.4 gif

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

1.5 eps

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

1.6 pdf

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

1.6 png

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

2. 해상도

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

콘텐츠 통합 편집 및 제작

디지털디자인 소프트웨어를 활용하여 화면 구성 요소, 아이콘, 서체를 포함한 디자인, 애니메이션을 제작하고 비교할 수 있다.
제작된 화면 디자인에 필요한 사운드나 애니메이션을 구현하여 프로젝트 결과물과 유사한 프로토타입을 제작 할 수 있다.
프로토타입 제작물을 바탕으로 사용성 테스트를 하기 위한 방법론을 적용할 수 있다.

1. UI(User Interface)

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

2. 프로토타이핑

2.1 프로토타이핑의 개념

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

2.2 프토토타입핑의 목적

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

3.인터렉션 디자인

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

4. 애니메이션

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

4.1 애니메이션 방식

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

4.2 애니메이션 종류

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

5. 네비게이션

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