화면설계와 프로토타이핑

 IT 현업에 계신 개발자라면, 특히 SI에 종사하고 있는 개발자라면 화면설계서 또는 화면 정의서를 작성하는 경우가 많을 겁니다. SI가 아니더라도 기획 단계에서 화면을 작성하는 경우도 있을 것이고, 이는 클라이언트들에게 개발팀이 만들어낼 산출물을 추상적으로 보여주는 역할을 수행합니다. 

 보통 경험상 이러한 작업물을 통상적으로 '프로토타입' 이라고 칭하며 파워포인트 또는 여러가지 툴등을 통해 프로토타입을 만들어 냅니다.

 프로토타입

프로토타입의 사전적인 의미는 원래의 형태 또는 전형적인 예. 기초 또는 표준 을 의미합니다 이는 위에서 언급한 대로 시제품이 나오기 전 제품의 미완성 초기 모델이라고 볼 수 있습니다. 프로토 타입은 보통  일반적으로 4가지 단계를 거쳐  만들어 집니다

• 1단계 : 기본적인 사용자 요구를 분석 
• 2단계 : 시스템 설계자가 위 단계에서 도출된 요구사항을 만족시키는 프로토타입을 개발
• 3단계 : 사용자가 개발된 프로토타입을 실제 사용함으로써 요구사항이 이행되고 있는지를 확인하며 여러 제안을 수립
• 4단계 : 프로토타입의 수정과 보완을 이루어냄 

그런데 위 4단계를 보며 생각하면 프로토타입은 일정한 동작을 수행해야 이루어 질 수 있는 단계들로 구성이 되어있습니다. 보통 통상적으로 만들어 내는 프로토타입은 문서나 이미지 인데 이러한 작업물들은 인터렉션을 수행하기에는 무리가 있습니다. 사실 이는 프로토타입이 아니라 와이어프레임이라 하는 것이 맞는 표현입니다. 그렇지만 용어자체가 생소하고 이러한 세세한 분류는 클라인언트에게 혼란을 줄 수 있기때문에 통상적으로  와이어프레임, 목업, 스토리보드, 프로토타입을 모두 묶어 프로토 타입이라고 이야기하는 현업의 암묵적인 약속? 이 형성되어 있는거 같습니다. 하나씩 상세히 알아보자면 

1. 와이어 프레임 :  인터페이스 구성요소(레이아웃, UI 뼈대)를 의미하며 기획 단계에서 주로 사용된느 제품의 모양 , 웹페이지등의 계락적인 레이아웃을 의미하며 우리가 가장 많이 생각하는 프로토타입의 모양 
2. 목업 : 평가를 위한 정적 모형,  기능을 제공하지는 않지만 산출물의 모델을 간접적으로 접할 수 있음
3. 프로토타입 : 평가를 위한 동적 모형, 제품에 대한 기능 및 테스트를 위해 제작하는 동적 모형, 인터렉션을 적용하여 사용성 테스트 사용

 

프로토타이핑 툴 

모두 사용해 보지는 못했지만 파워포인트 이외에도 프로토타이핑을 할 수 있는 여러 프로토타이핑 툴들이 있습니다. 간단히 유명한 것만 몇개 소개해 보겠습니다.

파워목업

https://www.powermockup.com/

PowerPoint Wireframe and Prototyping Tool | PowerMockup

 

카카오오븐

https://ovenapp.io/

OvenApp.io

발사믹 목업

https://balsamiq.com/

Balsamiq. Rapid, Effective and Fun Wireframing Software | Balsamiq