이럴 때 사용해요

• 제품 디자인의 세부사항들을 결정할 준비가 되어있을 때

이렇게 해보세요

1. 와이어프레임을 그릴 도구를 선택한다.
2. 제품의 해상도를 정하고 설명을 적을 공간을 만든다.
3. 내용을 구성해 와이어프레임을 그린다.
4. 팀원들에게 공유하고 피드백을 받아 반영한다.

상세 내용

1. 도구를 선택한다 : PPT, Sketch, Figma, XD, 발사믹, 키노트, 액슈어, 옴니그래플, 비지오 포토샵 등 와이어프레임에 사용될 도구를 선택한다.
2. 템플릿을 만든다 : 기기와 해상도를 결정하고 정보를 적을 수 있는 공간을 확보하여 템플릿을 만든다.
3. 와이어프레임의 내용을 구성한다 : 와이어프레임으로 전환하려는 스케치를 모두 모은다. 아직 아이디어가 떠오르지 않는 화면이 있다면 디지털 와이어프레임을 만들기 전에 시간을 내어 스케치를 시작하라.
4. 와이어프레임을 시작한다
   • 순서와 상태 : 사용자들은 어떻게 해서 이 화면/부분에 들어오며, 여기에서 어디로 갈 것인가? 사용자의 진입 경로에 따라 상태가 다른가?
   • 정보의 밀집도 : 해당 화면 에서의 주된 메시지나 동작은 무엇인가? 어떤 것이 제일 먼저 눈에 띄어야 하는가?
   • 그리드 : 디자인은 깔끔하고, 균형 잡혀 있고, 잘 정리되어 있다는 느낌을 주는가?
   • 디자인 원칙 : 제품 내의 화면은 앞서 만들었던 디자인 원칙에서 표현한 사용자 경험을 반영하는가?
   • 에러 메세지와 상태 : 기능이 예상대로 작동하지 않을 경우 사용자가 보게 되는 것은 무엇인가?
   • 팀원을에게 공유하여 다음 내용을 체크한다.
   • 말이 되는 디자인인인가?
   • 사용자들이 제품을 사용하면서 기대하는 것과 일치하는가?
   • 흐름 또는 화면에 이상한 구석이 있는가?
   • 디자인의 특정 부분과 상호작용할 때 무슨 일이 일어나기를 바라는지 의견을 받는다.
   • 디자인한 내용이 그들의 기대에 부응하는가

Tip

• 사람들에게 중간중간 꼭 보여준다. : 작업 시간을 줄여주고 현실성 있는지를 체크할 수 있다. 동료들에게 사용자 중심 디자인 프로세스를 이해시키는 데 도움이 된다.
• 그리드(타일)로 작업 한다 : 일관되고 균형잡힌 깔끔한 디자인을 만드는 것에 도움된다.
• 도구의 호환성을 고려한다 : 공유할 사람들이 와이어프레임을 얼마나 수정할 수 있을지 생각해보라.
• 흑백으로 작업 한다 : 화면에 대한 기본적인 내용에 집중하기 위함이다.