0
PORT
FOLIO

A Space to Future's Publisher

스크롤을 내려주세요!

About

소개 이미지

꿈을 설계하고 디자인 하다.

안녕하세요! 웹스토리보이입니다. 저는 공간을 만드는 것을 좋아합니다. 단 하사람이라도 제가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠습니다. 웹 사이트라는 공간은 상상을 넘어 우리에게 많은 창의력과 영감을 줍니다. 이러한 공간에서 다 같이 꿈을 꾸고 열정적인 엔지니어가 됐으면 좋겠습니다.

이 사이트는 웹스토리보이와 함께 포트폴리오를 완성하고 다같이 정보를 공유하는 사이트입니다. 스터디와 포트폴리오 강의는 매달 강남에서 열리며, 한달에 한번씩 모집합니다. 포트폴리오 강의는 포트폴리오를 만들기 위한 스킬을 배우는 강의이며, 기존에 학원에서 배우지 못한 중급 이상의 기술과 포트폴리오의 퀄리티를 높이는 강의입니다. 포트폴리오 스터디는 혼자서 만들기 힘든 포트폴리오를 도와주는 스터디입니다. 초보 단계에서 느낌는 어려움을 스터디를 통해 해결 할 수 있습니다. 혼자서 하면 힘들 수 있지만 다 같이 하면 좀 더 수월 할 수 있습니다.

웹스토리보이와 같이 포트폴리오를 완성하려면 첫째 유튜브에 공유된 웹표준 사이트 만들기, 반응형 사이트 만들기, 메가박스 사이트 만들기 영상을 보고, 포트폴리오 강의를 들으면서 스터디 하는 것을 추천합니다. 아직 우리는 부족한게 많고 가야할 길이 많이 남았지만 우리의 꿈을 위해 노력한다면 언젠간 99%의 실력이 될 것입니다.

  • 99HTML
  • 99CSS
  • 99Javascript
  • 99jQuery
passion led
us here

Project

UI.UX DESIGN/UI.UX 요구 분석

UI/UX 요구 분석

패스트 프로토타입 제작하기

프로토타입 제작

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

프로토타입 (Prototype)

프로토타입은 상품/서비스가 출시되기 전 만들어진 원형(archetype)을 의미한다. 프로토타 이핑(prototyping)은 사용자의 요구사항, 사용자리서치를 통해서 도출된 니즈, 아이디어 등의 개념(Concept)을 담은 모형을 만들어 이후 사용자와 상품/서비스가 제공하는 기능의 추가, 변경 및 삭제 등을 요구사항에 대해 소통하는 도구, 개발이 진행되는 동안 개발 참여 자간에 개념을 공유하는 도구를 만드는 설계과정이다.

요구사항 등을 반영한 개념 모델로 프로토타입을 1회 제작한 후 검증이 끝나면 이후 개발 업무를 진행하는 경우도 있으나 일반적으로 프로토타입을 활용하는 경우 지속적으로 프 로토타입을 재구축하며 개선시켜 나가는 반복적인 접근법-지속적 프로토타이핑을 적용한 다. 프로토타입이 반드시 동작할 필요는 없으며 동작하지 않는 프로토타입을 “정적프로 토타입(Static Prototype)” 반대의 경우를 “동작형 프로토타입(Working Prototype)" 또는 “상호작용형 프로토타입(Interactive Type)”으로 구분한다.

프로토타이핑의 형태

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

  • 실험적 프로토타이핑
    실제 개발될 상품/서비스를 직접 개발해 요구사항을 검증하는 목적으로 제작되는 프로 토타입을 제작하는 방식. 실험이 종료되면 더 이상 사용되지 않으므로 결과물을 “폐 기형 프로토타입(Throwaway Prototype)이라고도 한다.
  • 진화적 프로토타이핑
    진화적 프로토타이핑은 제작된 프로토타입을 요구분석 도구로 활용하며 지속적으로 발전시켜 최종 상품/서비스를 개발하는 방식
프로토타이핑의 장점과 제약

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

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

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

  • 요구사항의 정의
    사용자로부터 요구사항을 도출하여 분석한다. 초기 프로토타입이 제작된 이후의 반복 에는 프로토타입을 요구사항 분석 과정의 도구로 활용한다.
  • 프로토타입 개발
    사용자로부터 도출된 요구사항, 반복과정에서 얻어진 아이디어 등을 반영한 프로토타 입을 제작한다.
  • 프로토타입의 검토
    개발된 프로토타입을 사용자에게 전달해 사용, 경험하게 하여 요구사항이 반영되고 있 는지를 검토하고 프로토타입에 대한 평가와 추가적인 제안 등 요구사항을 수집한다.
  • 프로토타입의 수정
    프로토타입의 수정과 보완을 수행한다. 모든 사용자 요구사항이 수정과정을 통해 반 영되었다고 판단하면 3단계 ‘프로토타입의 검토’ 과정을 반복한다. 상품/서비스 개발에 적용될문제, 이슈, 니즈등이모두 반영 될때까지 또는 사용자가 만족 할때까지 3단계와 4단계를 반복한다.
  • 프로토타이핑 평가 및 종료
    상품/서비스 개발에 적용될 문제, 이슈, 니즈 등이 모두 반영되었다고 평가되는 시점, 사용자가 만족한다고 평가가 되면 프로토타이핑 과정을 종료한다.
프로토타이핑 방법의 구분

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

충실도에 따른 구분

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

  • 낮은 충실도 프로토타이핑 (Low-Fidelity Prototyping)
    • 낮은 충실도 프로토타이핑은 신속하게 프로토타입이 제작되어야 하는 경우에 사용 되는 방법이다. 종이 위에 손으로 대충 그린 그림을 프로토타입으로 활용하는 페이퍼 프로토타이 핑(paper prototyping) 기법이 주로 활용되며, 다음과 같은 특성이 있다.
      • 프로토타이핑을 위해 필요한 공간, 도구에 대한 제약이 거의 없으며, 적은 시 간을 투여해 제작 가능하다.
      • 신속하게 사용자에게 인터랙션, 기능 등에 대한 제안을 수행하고 피드백을 얻 을 수 있다.
      • 초기 아이디어 구현에서 대량의 시안을 만들고, 사용자가 보이는 반응을 확인 하기 위한 목적으로 많이 사용된다.
  • 높은 충실도 프로토타이핑 (High-Fidelity Prototyping)
    • 완성품에 가까운 시제품, 베타 버전 등 최종 결과물과 유사도, 완성도가 높은 프로 토타입을 활용하는 방법으로 다음과 같은 특성이 있다.
      • 대규모의 개선이 뒤따라야 하는 상품/서비스의 전체 기능이나 외부로 보이는 디자인에 대한 평가용도로는 적합하지 않다.
      • 미처 발견하지 못한 작은 문제점을 찾고 반영하는 데에 적합하다.
      • 짧은 시간에 상품/서비스의 개발이 진행되는 경우 충분한 사용성 평가를 수행 하는 것이 현실적으로 어려울 수 있다. 이러한 이유로 일반적으로 기존, 경쟁 상품/서비스와 확연한 차이가 있거나 많은 판매가 있을 것으로 예상하는 상품/서비스에만 활용된다.
반영하는 기능의 폭과 깊이에 따른 구분
  • 수평적 프로토타이핑(Horizontal Prototyping)
    상품/서비스가 갖는 기능들의 깊이 보다는 폭 넓게 다양한 기능을 담는 것을 고려 해 프로토타입을 작성하는 방법이다.
    기능을 깊게 보여주지 않으므로 프로토타입의 크기가 작고, 최상위 메뉴가 모두 표 시되고 접근가능하나 하부 메뉴에 대한 조작은 실행되지 않는 수준 정도의 프로토 타입을 제작한다.
  • 수직적 프로토타이핑(Vertical Prototyping)
    수직적 프로토타이핑은 상품/서비스가 제공해야 할 전체 기능들 중에서 개발과정에 서 핵심적으로 다루어 야할 주요 기능만을 선별해 해당 기능의 시작부터 완료까지 의 세부 기능을 깊이 있게 구현하는 방법이다.
    상품/서비스가 담고 있는 사용 경로 중 일부 경로만 전체 경로가 실행되게 프로토 타입을 제작한다.
시나리오 프로토타이핑(Scenarios Prototyping)

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

래피드 프로토타이핑

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

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

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

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

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

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

와이어프레임 (Wireframe)

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

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

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

Interview

Contact

소개 이미지

안녕하세요!

포트폴리와 스터디와 포트폴리오 강의는 여기서 신청을 받습니다. 스터디와 강의는 웹퍼블리셔 취업 또는 이직을 목표로 한 분만 지원을 받습니다. 다음의 내용을 적고 보내주시면 신청됩니다.

이름 : 누구누구
나이 : 몇 살
배움 이력 : ex)국비학원 6개월 수료
배움 과목 : ex)스터디 or 강의 or 둘다
취업 준비 기간 : ex)1개월
카카오 아이디 : 단톡 초대를 위함

강의와 스터디는 보통 대기 기간이 2~3달 정도 소요됩니다. 그 부분을 계산하시고 신청해주시기 바랍니다. 메일이 확인되면 메일로 신청 계좌가 전송되고 입급하시면 예약이 완료됩니다. 완성된 포트폴리오 사이트와 공부 방법들은 다 같이 볼 수 있도록 공유됩니다. 스터디 또는 강의를 참여하는 분들은 이 부분을 동의한 것으로 간주되며, 이 부분을 확인 후 신청해주시기 바랍니다. 여러분이 보내 주신 개인 정보는 참고만 하고 즉시 파기함을 알려드립니다.

kakao ID
@webstupids
public an
episode together.