티스토리 뷰

javascript01

프로토타입 제작

  • 선정된 아이디어를 다양한 방법으로 프로토타입을 제작할 수 있다.
  • 제작된 프로토타입이 목적에 맞게 구성되었는지 분석하고 검증할 수 있다.
  • 프로토타입의 구성요소와 특징에 대한 분석을 통해서 수정 사항을 도출하고 이슈를 보완할 수 있다.

프로토타입 (Prototype)

프로토타입은 상품/서비스가 출시되기 전 만들어진 원형(archetype)을 의미한다. 프로토타이핑(prototyping)은 사용자의 요구사항, 사용자리서치를 통해서 도출된 니즈, 아이디어 등의 개념(Concept)을 담은 모형을 만들어 이후 사용자와 상품/서비스가 제공하는 기능의 추가, 변경 및 삭제 등을 요구사항에 대해 소통하는 도구, 개발이 진행되는 동안 개발 참여자간에 개념을 공유하는 도구를 만드는 설계과정이다.
요구사항 등을 반영한 개념 모델로 프로토타입을 1회 제작한 후 검증이 끝나면 이후 개발업무를 진행하는 경우도 있으나 일반적으로 프로토타입을 활용하는 경우 지속적으로 프로토타입을 재구축하며 개선시켜 나가는 반복적인 접근법-지속적 프로토타이핑을 적용한다. 프로토타입이 반드시 동작할 필요는 없으며 동작하지 않는 프로토타입을 “정적프로토타입(Static Prototype)” 반대의 경우를 “동작형 프로토타입(Working Prototype)" 또는 “상호작용형 프로토타입(Interactive Type)”으로 구분한다.

  1. 프로토타이핑의 형태

    프로토타이핑은 그 목적에 따라 크게 ‘실험적(experimental) 프로토타입’과 ‘진화적(evolutionary) 프로토타입’으로 구분된다.

    • 실험적 프로토타이핑

      실제 개발될 상품/서비스를 직접 개발해 요구사항을 검증하는 목적으로 제작되는 프로토타입을 제작하는 방식. 실험이 종료되면 더 이상 사용되지 않으므로 결과물을 “폐기형 프로토타입(Throwaway Prototype)이라고도 한다.

    • 진화적 프로토타이핑

      진화적 프로토타이핑은 제작된 프로토타입을 요구분석 도구로 활용하며 지속적으로 발전시켜 최종 상품/서비스를 개발하는 방식


  2. 프로토타이핑의 장점과 제약

    프로토타이핑은 상품/서비스의 개발에 있어서 다음과 같은 장점을 제공하나 프로토타입에 담아야 할 범위와 진화적 반복과정 등에 기인한 제약이 따른다.

    • Prototyping 의 이점
      • 신속하게 제작될 수 있으며, 반복을 통해 발전된 결과물을 얻을 수 있게 해준다.
      • 상품/서비스가 최종적으로 완성되기 전에 사용자로부터 추가/변경 요구사항, 아이디어 등 관련 피드백을 받을 수 있음.
      • 개발 참여 인력과 사용자, 개발 참여 인력간의 의사소통이 원활해진다.
      • 사용성과 관련된 문제를 조기에 식별할 수 있다.
      • 테스트에 대한 부담이 적으며 조기에 개선이 가능하다.
    • prototyping 의 제약
      • 프로토타입의 제작에만 집중하는 경우 타 업무의 문서화 등이 불충분할 수 있다.
      • 상품/서비스의 일부만을 대상으로 제작되었음을 간과하면 사용성이 과대평가 될 수도 있다.
      • 상품/서비스의 일부만을 대상으로 제작되어 테스트 수행 시 테스트 경로가 제한될 수 있다.
      • 지속적이고 반복적인 요구사항 수집에 대한 운영 및 통제가 어려울 수도 있다.
      • 반복을 종료하여도 충분함을 판단하기 어려울 수 있다.

  3. 프로토타이핑의 과정

    프로토타이핑을 적용하여 상품/서비스를 개발하는 경우 초기 또는 반복된 요구사항 수집과정을 결과를 상품/서비스에 반영하기 위해 다음의 과정을 수행한다.

    • 요구사항의 정의

      사용자로부터 요구사항을 도출하여 분석한다. 초기 프로토타입이 제작된 이후의 반복에는 프로토타입을 요구사항 분석 과정의 도구로 활용한다.

    • 프로토타입 개발

      사용자로부터 도출된 요구사항, 반복과정에서 얻어진 아이디어 등을 반영한 프로토타입을 제작한다.

    • 프로토타입의 검토

      개발된 프로토타입을 사용자에게 전달해 사용, 경험하게 하여 요구사항이 반영되고 있는지를 검토하고 프로토타입에 대한 평가와 추가적인 제안 등 요구사항을 수집한다.

    • 프로토타입의 수정

      프로토타입의 수정과 보완을 수행한다. 모든 사용자 요구사항이 수정과정을 통해 반영되었다고 판단하면 3단계 ‘프로토타입의 검토’ 과정을 반복한다. 상품/서비스 개발에 적용될 문제, 이슈, 니즈 등이 모두 반영될 때까지 또는 사용자가 만족할 때까지 3단계와 4단계를 반복한다.

    • 프로토타이핑 평가 및 종료

      상품/서비스 개발에 적용될 문제, 이슈, 니즈 등이 모두 반영되었다고 평가되는 시점, 사용자가 만족한다고 평가가 되면 프로토타이핑 과정을 종료한다.


  4. 프로토타이핑 방법의 구분

    프로토타이핑 방법은 최종 결과물과 얼마나 유사하게, 충실하게 반영하는가 하는 충실도(Fidelity)를 기준으로, 프로토타입에 반영하는 기능의 폭과 깊이 등 기준에 따라 다음과 같이 구분된다.

    • 충실도에 따른 구분

      프로토타이핑 방법은 프로토타입이 담고 있는 최종 결과물이 갖게 될 시각적 디자인,기능, 콘텐츠를 얼마나 충실하게 반영하고 있는가에 따라 구분될 수 있다.

      1. 낮은 충실도 프로토타이핑 (Low-Fidelity Prototyping)

        낮은 충실도 프로토타이핑은 신속하게 프로토타입이 제작되어야 하는 경우에 사용되는 방법이다.
        종이 위에 손으로 대충 그린 그림을 프로토타입으로 활용하는 페이퍼 프로토타이핑(paper prototyping) 기법이 주로 활용되며, 다음과 같은 특성이 있다.

        • 프로토타이핑을 위해 필요한 공간, 도구에 대한 제약이 거의 없으며, 적은 시간을 투여해 제작 가능하다.
        • 신속하게 사용자에게 인터랙션, 기능 등에 대한 제안을 수행하고 피드백을 얻을 수 있다.
        • 초기 아이디어 구현에서 대량의 시안을 만들고, 사용자가 보이는 반응을 확인하기 위한 목적으로 많이 사용된다.
      2. 높은 충실도 프로토타이핑 (High-Fidelity Prototyping)

        완성품에 가까운 시제품, 베타 버전 등 최종 결과물과 유사도, 완성도가 높은 프로토타입을 활용하는 방법으로 다음과 같은 특성이 있다.

        • 대규모의 개선이 뒤따라야 하는 상품/서비스의 전체 기능이나 외부로 보이는 디자인에 대한 평가용도로는 적합하지 않다.
        • 미처 발견하지 못한 작은 문제점을 찾고 반영하는 데에 적합하다.
        • 짧은 시간에 상품/서비스의 개발이 진행되는 경우 충분한 사용성 평가를 수행하는 것이 현실적으로 어려울 수 있다. 이러한 이유로 일반적으로 기존, 경쟁 상품/서비스와 확연한 차이가 있거나 많은 판매가 있을 것으로 예상하는 상품/서비스에만 활용된다.
    • 반영하는 기능의 폭과 깊이에 따른 구분
      • 수평적 프로토타이핑(Horizontal Prototyping)

        상품/서비스가 갖는 기능들의 깊이 보다는 폭 넓게 다양한 기능을 담는 것을 고려해 프로토타입을 작성하는 방법이다.
        기능을 깊게 보여주지 않으므로 프로토타입의 크기가 작고, 최상위 메뉴가 모두 표시되고 접근가능하나 하부 메뉴에 대한 조작은 실행되지 않는 수준 정도의 프로토타입을 제작한다.

      • 수직적 프로토타이핑(Vertical Prototyping)

        수직적 프로토타이핑은 상품/서비스가 제공해야 할 전체 기능들 중에서 개발과정에서 핵심적으로 다루어 야할 주요 기능만을 선별해 해당 기능의 시작부터 완료까지의 세부 기능을 깊이 있게 구현하는 방법이다.
        상품/서비스가 담고 있는 사용 경로 중 일부 경로만 전체 경로가 실행되게 프로토타입을 제작한다.

    • 시나리오 프로토타이핑(Scenarios Prototyping)

      사용자의 상품/서비스를 사용해 수행하고자 하는 작업에 대한 시나리오를 작성하고 해당 시나리오를 수행하는 데에 필요한 경로상의 기능들이 접근되고 실행될 수 있도록 프로토타입을 제작하는 방법. 시나리오에 기반을 두어 사용성을 평가할 수 있고 이에 따른 개선점을 신속하게 반영할 수 있는 장점이 있다.

    • 래피드 프로토타이핑

      일반적으로 래피드 프로토타이핑(Rapid Prototyping)은 급속조형이 가능한 3D 프린터등 장비를 사용해 시제품을 빠르게 제작할 수 있도록 지원해 주는 시스템을 말하며 급속조형법이라고 번역되기도 한다. 소프트웨어와 관련하여서는 반복적인 프로토타이핑을 적용한 개발의 각 단계를 동시에 중첩적으로 진행함으로써 빠른 반복 주기와 개발진행을 하는 방법을 의미한다. UI 또는 UX와 관련하여서는 신속(Fast)하게 프로토타입을 제작할 수 있는 방법을 선택하여 반복적 프로토타이핑의 단계를 제작-검토-정련(Refine)이라는 단순화된 과정으로 신속하게 반복하는 것을 의미하기도 한다.


  5. 프로토타이핑 제작 도구 및 제작 유형

    특정플랫폼에 특화되어 있는 제품을 포함해 프로토타이핑 제작 전용의 소프트웨어들을 사용하여 프로토타이핑을 제작할 수도 있지만 , 프로토타이핑을 위한 도구가 한정지어지는 것은 아니다. 시각적 표현이 가능한 방법들로 프로토타입의 제작에 적합하다 판단되는 도구, 재료, 방법을 이용한다. 다음은 프로토타이핑에 사용할 수 있는 도구들의 예이다.

    • 종이와 필기구
    • 출력된 이미지, 풀과 가위
    • 벡터 그래픽 편집 프로그램(이미지의 확대 축소시 해상도의 영향으로부터 자유로운 벡터 그래픽 편집 도구가 일반적으로 래스터(Raster)그래픽 편집 프로그램보다 선호된다.)
    • 문서, 스프레드시트, 프레젠테이션 작성 프로그램
    • 설치형, 웹기반 프로토타이핑 전용 프로그램
    • HTML, CSS 편집 프로그램

    실제 소프트웨어와 유사한 형태를 다음과 같은 형태로 프로토타입이 제작될 수 있다.

    • 목업(Mock up)
    • 스토리보드
    • 스케치
    • 시나리오
    • 스크린 샷(Screen Shot)
    • 기능을 보여주는 인터페이스 (Functional Interface)


와이어프레임 (Wireframe)

UI/UX의 기획단계 또는 시각적 요소들에 대한 디자인을 하기 전에 화면 구성요소의 배치와 속성, 기능, 네비게이션 등과 관련한 동작들을 간단한 선과 사각형 정도만을 사용해 윤곽을 그려 놓은 도면이다. 프로토타입과 비교하면 실제 상품/서비스의 화면과 일치하는 충실도가 낮고, 프로토타입이 사용자의 요구사항을 반영하여 만들어지는 반면 와이어프레임은 요구사항에 대한 식별 이전에 사용자의 개입 없이 기획, 제안 또는 프로젝트 계획수립에 대한 문서화 용도로도 사용할 수 있다. 와이어프레임은 다음과 같은 정보를 식별할 수 있게 해준다.

  • 콘텐츠들의 분류
  • 정보의 구조
  • 사용자 상호작용(Interaction)

와이어프레임은 위와 같은 기능을 제공하고, 신속하고 간단하게 작성될 수 있으며, 프로토타입과 마찬가지로 사용자의 요구사항을 파악하는 용도로 사용될 수 있으나 상품/서비스가 주는 시각적 느낌(Look and Feel)을 파악하기 어렵고 기능, 사용자 상호작용이 복잡하게 표현되어 있는 경우에는 사용자가 이를 이해하기 어려울 수 있다는 점과 한 화면상에 복잡한 상호작용이 있는 경우 이를 표현하기 어렵다는 점 등의 단점/제약이 있다.
프로토타이핑 전용 프로그램은 낮은 충실도의 와이어프레임과 중간-높은 충실도를 갖는 프로토타입의 제작을 모두 지원하는 경우가 일반적이며 상대적으로 적은 시간을 투여해 충실도와 사용자 친화고가 높은 프로토타입을 제작할 수 있다.

댓글
© 2018 webstoryboy