[정리] 와이어프레임과 프로토타입

• 문제 —DT, 유저저니맵, 페르소나, 고객 인터뷰, A/B테스트 —> UX
• UX — ? —> UI
• 와이어프레임
  • 실제 GUI 디자인이 입혀지기 전, 페이지의 골격을 확인하기 위해 만드는 기획 산출물 (=서비스 청사진, 와이어프레임)
  • 페이퍼프로토타입: Lo-Fi (실제로 만들어질 제품과는 거리가 있고, 커뮤니케이션 용도로만 사용. 정식 업무 산출물로는 사용X)
  • 와이어프레임: 화면의 흐름, 버튼과 같은 UI 요소를 알기 쉽게
    • 제품 디자인의 충실도가 낮은 표현 방법이지만 명확한 목표
    • 서비스의 레이아웃, 사용자 인터페이스 시각화, 제품의 UI 명확히 표현하는 것이 목표
    • 이점
      • 초기 피드백을 수집하기 용이함
      • 사용성 평가: 디자인이 아닌 사용성 자체에 집중하도록 노력 필요.
  • 와이어프레임만으로 디자인/개발 가능?! NO.
    • GUI 디자인은 진행할 수 있지만 인터렉션, 앱의 플로우(page to page)설계 X, 기획 단계에서 필요한 다양한 정책(법령, 기능의 상세)에 대한 설명 불가
    → 애자일: 유저 스토리와 프로토타입으로 인터렉션과 정책 설명
  • → 워터폴: 화면 설계서, 스토리보드를 통해 플로우, 정책 설명
• 프로토타입
  • 설계물의 성능, 적합성을 평가하기 위한 모형
  • 와이어프레임, GUI를 입힌 결과에 인터렉션, 플로우를 입혀 실제 개발 산출물과 비슷하게, UX를 보여준다.
  • 처음부터 완성도있게 만들려하지 않는다! 처음 설계 이후 개선/고도화를 통해 발전시켜 나가야 함. (처음부터 완성도있게 만들려고 하면 오히려 틀에 갇혀 발전시키기 어려움)
  • Lo-Fi(low fidelity)
    • 낮은 선명도, 손으로 그리는 핸드 스케치. 시간 및 리소스 절약, 복잡한 수정 절차가 없기 때문에 새로운 의견 바로 적용도 가능
    • 아이디어 회의 단계에서 자주 사용
    • 팀간 소통을 위한 정식 산출물은 X, 임시방편 정도
  • Mid-Fi
    • Lo-fi를 보기 좋게 다듬은 수준
    • 주로 Figma와 같은 디자인 툴이나 PPT를 사용해 만듦
    • PM이나 서비스 기획자가 가장 많이 만드는 산출물 중 하나
    • 레이아웃, 기능 배치, 영역, 글자 포인트, 이미지 등을 실제 산출물에 가깝게 조정
    • 서비스 기획자: Mid-fi+description → 스토리보드, 화면설계서라는 최종 산출물을 만들기도 함
  • High-Fi
    • 인터렉션+GUI → 완성본에 가깝게 디자인 (⇒ PM이 직접 만드는 경우는 드물다. 디자이너의 영역)
    • 핵심: 사용자 흐름에 불편함은 없는지, 개발할 서비스 구체화, 팀원 및 이해관계자와의 오해 줄이기
  • 사용되는 경우
    • 사용자 중심의 프로세스 첫단계
      : 디자이너, 개발자, 유저, 다른 이해관계자가 서로 아이디어를 소통하기 위해
    • UI가 디자인되고 개발되기 전, 프로덕트와 유저 간의 상호작용을 관찰하기 위해 (사용성 테스트 목적)
  • 장점
    • 프로젝트 초기에 유저가 직접 참여 가능
    • 비용 소모 효율적
    • 디자인/코딩 스킬 필요 X → 빠른 검증과 수정 가능
• 읽기자료
  • 와이어프레임 작성시 Tip
    • 간결성: 와이어프레임 제작의 핵심은 속도와 간결성
    • 간결한 주석: 구조적 맥락 생성, 핵심 아이디어 신속 전달에 도움
    • 피드백 장려
    • 와이어프레임 키트 이용
  • 프로토타입
    • 프로토타입 제작의 한계: 제품의 작동 방식을 이해하기 위해 직접 노력을 기울여야 하기 때문에 문서화된 형태로 사용X
    • Tip
      • 여러가지 프로토타입 디자인을 실행 (최대한 다양한 아이디어를 시도하는 것이 좋음)
      • 프로젝트에 적합한 선명도(Fidelity) 선택
      • 재사용 가능한 프로토타입 제작

와이어프레임과 프로토타입에 대한 모든 것

 

• 읽기자료 (와이어프레임 예시)

 

Wireframes by Top UX Designers

 

• 읽기자료 (와이어프레임 유형별 장단점)

What Is a Prototype: A Guide to Functional UX