[UX/UI 디자인 스터디] 와이어프레임
화면의 구성과 흐름을 매우 단순하게 만들어 빠르게 공유하는 와이어프레임!!
화면과 시나리오를 최대한 단순한 형태로 만들어서 빠르게 만든 것을 뜻한다.
.
- 와이어프레임 = 선(와이어)으로 그려진 화면.
- 어떻게 만들지 논의하는 과정을 거치고 나면, 본격적인 디자인을 하기 전에 주로 하게 된다.
- 낮은 단계의 프로토타입이라는 뜻에서 Lo-fi Prototype 이라고 부르기도 함.
- 전체적으로 형태와 방향을 먼저 잡는 것.
와이어프레임을 만드는 이유
👪 팀원 간의 다른 생각을 통일할 수 있고 협업을 원활하게 한다.
글로 된 문서만 보고 디자인과 개발을 하게 되면, 서로 생각이 조금씩 달라서 문제가 생길 수 있다. 아무리 단순한 디자인이더라도 화면의 형태를 같이 보면서 이해가 다른 부분을 줄일 수 있다.
🎨 디자인을 관리하기 쉽고, 불필요한 부분에 시선을 뺏기지 않는다.
처음부터 너무 완성된 UI로 작업하게 되면 중요한 사용자 시나리오에 집중하기 어렵고, 디자인 변경이나 수정할 때 빠르게 변경하기 힘들다. 최대한 단순한 형태로 중요한 흐름만 만든다면 집중하기도 좋고, 디자인 방향을 조금씩 잡아가면서 완성도를 끌어올릴 수 있다.
⭐ 습관 형성 모델을 반복적으로 실험해 볼 수 있어요
와이어프레임을 만드는 이유 중 가장 중요한 것은, 참여 전략과 북극성 지표를 토대로 설계한 습관 형성 모델이 잘 작동할 수 있는지를 확인하는 것이 필요하기 때문. 습관이 형성될 수 있도록 사용자 시나리오를 작성하고, 와이어프레임을 통해 그 과정이 매끄러운지, 부족한 건 없는지를 빠르게 검증해 볼 수 있다.
와이어프레임을 그리는 법
와이어프레임의 목적은 빠르고 효율적인 커뮤니케이션과 일관된 디자인 방향이다. 최소한의 가독성만 확보 (글씨가 읽혀지면 됨) 하고 서로 이해할 수만 있다면 어떤 방식을 사용해도 좋다.
와이어프레임 규칙 정하기
- 와이어프레임에서 표현할 것과 표현하지 않을 것을 과감하게 고르기.
- 최대한 단순하고 빠르게 그릴 수 있도록 단색의 선을 사용하는 것을 권장.
그리고자 하는 화면 스케치하기
- 최대한 단순하게 그리는 게 핵심
- 시나리오에 필요하지 않은 부분은 과감하게 글자나 단순한 도형으로 대체
- 텍스트의 경우 최대 길이를 가늠할 수 있도록 실제 사용할 내용으로 넣어주면 좋다
와이어프레임의 핵심
세세한 부분들을 그리지 않아도 전체적인 모양과 구조를 이해하는 데는 문제가 없다는 걸 알 수 있다. 이렇게 대략적인 형태를 잡은 상태에서 사용자 시나리오를 테스트하고 논의하다 보면, 시나리오에서 보완해야 할 부분도 찾을 수 있고 앞으로의 결과물이 어떤 형태가 되겠다는 걸 팀원들이 서로 이해할 수 있다.
화면을 선으로 연결하는 이유
와이어프레임으로 만든 화면들을 선으로 연결하는 이유는 화면들이 어떤 관계로 이어져 있는지 파악하기 위함이에요. 디자인과 레이아웃을 단순하게 만들어 각 화면들이 어떻게 연결되어 있는지, 이 화면에서 저 화면으로 이동하려면 어떤 동작을 하게 되는지를 알기 쉽도록 선으로 연결하는 거랍니다!
🔌 플러그인 소개 : Simpleflow
프레임끼리 선으로 연결할 수 있는 플러그인