최근 개발 방법론들에 의거하지 않고 내 마음대로 프로젝트를 진행하다가 완전히 큰 코 다친 후 기획 단계부터 다시 시작해나가고 있다.
이 과정에서 필요한 사전 지식들을 정리하고자 글들을 하나씩 정리해나간다.
와이어프레임
와이어프레임의 예시 , 출처 : https://uizard.io/blog/guide-to-wireframes/
와이어프레임이란 앱 또는 웹 페이지의 개략도 또는 설계도 이거나 구조, 레이아웃, 콘텐츠 배치를 전달하는 일련의 페이지이며 디자인의 일반적인 의도와 목적 을 나타낸다.
와이어프레임을 생성하는 와이어프레이밍 단계는 만들고자 하는 프로덕트의 2차원 다이어그램 표현으로, 디자인이나 개념의 핵심 구조, 기능을 보여주는데 도움을 준다.
와이어프레임에는 일반적으로 프로덕트의 레이아웃 텍스트와 이미지가 포함되어 있어 프로덕트 이해관계자들에게 목적과 의도를 보여줄 수 있다.
충실도에 따른 와이어프레임
충실도 (fidelity) 에 따라 와이어프레이밍 단계가 다르다. 충실도란 와이어프레임이 최종 프로더긑와 얼마나 유사한지를 나타내는 척도 이다. 이는 디자인의 세부 수준, 상호 작용성 및 시각적 표현을 포함한다.
충실도는 크게 저충실도 (Low Fidelity) , 고충실도(Hig Fidelity) 로 나뉜다.
note아 ! 사람들이 종종 말하는 Lofi 형태로 작업하잔게 이런 말이였구나
로우파이 와이어프레임
로우파이 와이어프레임이란 아주 기본적인 혀애틔 와이어프레임으로 프로덕트의 구조만을 개략적으로 보여주기 위해 만들어진다.
이미지나 텍스트와 같은 세부사항을 포함하지 않고 제품의 핵심 개념과 가치 제안을 전달하는데에만 집중한다.
로우파이 와이어프레임의 훌륭한 예시는 해당 링크 에서 확인해볼 수 있다.
로우파이 와이어프레임은 초기 디자인 아이디어 구상과 컨셉 공유에 적합하다.
로우파이 와이어프레임의 가장 좋은 점은 빠른 속도로 진행하여 이해관계자들과 의견을 공유 할 수 있다는 점이다.
하이파이 와이어프레임
하이파이 와이어프레임의 예시 출처 : Visily
하이파이 와이어프레임은 실제 유저 손에 프로덕트가 들어갔을 때 어떻게 보일지를 반영한다.
하이파이 와이어프레임은 완성된 프로덕트가 포함할 모든 콘텐츠, 스타일적 요소, 브랜드등이 모두 포함되어 있어 프로덕트가 실제로 어떻게 보일지 전달 할 수 있다.
주로 로우파이 와이어프레임 단계에서 구조를 구축 한 후 이해 관계자들간의 의사소통이 완료되면 프로토타입 생성을 위해 텍스트 및 디자인 추가, 사용자 여정에 따른 인터렉션 등 기능들을 자세히 추가해나가며 생성한다.