🌱7주차 첫 번째 학습 일지🌱 와이어프레임과 프로토타이핑 [제로베이스 PM스쿨 29기]

 

뿌듯하게 6주차 실무 과제를 제출하고 피드백을 기다리고 있던 나 ....

예상치 못한 평가를 받았어요

저는 분명 와이어프레임을 만들었다고 생각했는데,

멘토님께서 제가 만든 것은 와이어프레임이 아니라 프로토타이핑이라고 하셨죠 ,,,, 🥺

 

예시안 참고해서 열심히 만들었는데 ....

다음부턴 과제의 개념을 잘 짚고 넘어가야지 하는 다짐과 ...

일단 이번 과제, 뭐가 잘못됐는지 알아야겠다는 생각이 들어서!

 

오늘의 학습 일기는

와이어프레임과 프로토타이핑의 차이에 대해서 써보려고 합니다. 

 

참고 글) https://blog.adobe.com/ko/publish/2018/03/06/everything-you-need-to-know-about-wireframes-and-prototypes

 

와이어프레임 (https://brunch.co.kr/@cliche-cliche/71)

와이어프레임(Wireframe; Skeleton)

와이어프레임 이란?

• 제품을 구성하는 서로 다른 레이아웃을 정적인 로우 피델리티 상태로 재현한 것
• 간단한 모양만을 사용하여 인터페이스를 시각적으로 묘사한 것
• 구조(페이지 요소의 구성 방식), 콘텐츠(페이지에 표시될 내용) 및 기능(인터페이스의 작동 방식)을 설명하는 데 사용됨

와이어프레임의 역할

• 디자인의 현재 진행 상태, 향후 비전, 작업 경로 등을 공유할 수 있음

와이어프레임의 모양

• 실제 완성된 제품과는 전혀 다른 모습
• 와이어프레임으로 알 수 있는 시각적 특징은 매우 제한적 대부분의 디자인 요소가 포함되기 전의 상태
• 인터페이스에서 생략된 부분은 자리표시자로 표시(X표)
• 일부 자리표시자는 보다 효과적으로 확인할 수 있도록 실제의 그래픽 요소나 텍스트로 발전하기도 함

와이어프레임의 목적

• 디자이너가 작업을 시작하고 크리에이티브 팀의 작업 방향을 설정하는 기초 역할
• 다음 단계로 넘어가기 전에 꼼꼼하게 계획할 기회를 제공
• 디자이너는 시각 디자인의 세부 묘사에 너무 치우치지 않고 전체적인 디자인 전략을 테스트할 수 있음

와이어프레임을 제작해야 하는 시기

• 세부적 시각 작업을 하기 전 디자인 프로세스의 초기 단계

와이어프레임 제작 이점

• 의사소통의 수단
  • 하나의 그림이 천 마디의 말을 대신함
  • 이해 관계자와 팀원들은 앱 또는 웹 사이트가 어떤 화면에 표시되는지 효과적으로 이해할 수 있음
• 작업의 기록

와이어프레임 제작의 한계

• 사용자 테스트용으로는 적합하지 않음
  • 피드백 수집에는 유용하겠지만 정적 형태이기에 전반적 사용자 경험 평가가 어려움
• 애니메이션 적용 효과, 복잡한 전환 또는 제스처와 같은 복합적 디자인 아이디어를 설명하는 경우 유용하지 않음

와이어프레임 제작 방법

• 펜과 종이를 사용한 스케치
  • 와이어프레임은 손으로 쉽게 그릴 수 있음
• 그래픽 디자인 스프트웨어 사용
• UX 디자인 소프트 웨어 사용

 

프로토타입 (https://brunch.co.kr/@cliche-cliche/71)

프로토타입

프로토타입이란?

• interactive 한 경험을 구축함으로써 아이디어를 타진하는 과정
• 유저 인터페이스 상호작용을 시뮬
• 디자이너가 자신의 창작물과 실제 상호작용 할 수 있는 첫 번째 단계

프로토타입의 모양

• 와이어프레임과 유사해 보이지만 다름
• 로우피델리티 프로토타입
  • 디자이너가 디자인 프로세스 초반에 검토할 수 있도록 디자인 컨셉을 대략적으로 재현한 것
  • 기능과 인터랙션 면에서 제한적
  • 스케치 또는 와이어프레임에서 만든 클릭 가능한 프로토타입
• 하이 피델리티 프로토타입
  • 실제 웹 사이트 또는 앱의 기능과 디자인 세부사항을 시뮬하는 인터랙티브한 프로토타입

프로토타입의 목적

• 실제 제품을 연결하는 가교 역할
• 사용자와 인터페이스 사이의 인터랙션을 시뮬레이션

프로토타입 제작 시기

• 일반적으로 실제 개발을 시작하기 전에 시각 디자인과 인터랙션 디자인을 함께 연결해야 하는 경우

프로토타입 제작의 이점

• 효과적인 아이디어 홍보 수단
• 문제점 이해
• 의사소통 수단
• 검증 수단
• 사용자 조사 단계에서 유용

프로토타입 제작의 한계

• 문서화된 형태로 사용할 수 없음

프로토타입 제작 방법

• 종이를 사용한 프로토타입
  • 빠르고 쉽지만 사용자에 대한 엄청난 상상력이 필요하고 많은 인터렉션 문제점을 반영하지 못할 수도
• 프레젠테이션 소프트웨어 사용
• 디자인 소프트웨어 사용
• 기본 프로토타이핑 툴 사용

결론

• 와이어프레임과 프로토타입은 기능 면에서는 다르지만 모두 제품팀이 보다 나은 제품을 제작할 수 있게 해주는 유용한 수단
• 사용자를 염두에 두지 않은 채 제품의 와이어프레임 또는 프로토타입을 제작하면 안 된다

 

 

저처럼 와이어프레임과 프로토타입을 헷갈리지 않기를 바랍니다,,, 🥺

다들 화이팅!