<서비스 기획> 06.제품 설계 (2) - 와이어프레임

와이어프레임

(Wire frame)

정의

• 앱/웹 서비스를 만들때 동선, 구조를 제안하기 위한 화면 설계도
• 디자인 요소가 들어가기 보다는 선(Wire)을 이용해 윤곽(Frame)을 잡는 것을 말함
• 기획자의 요구사항, 서비스의 기능 요소를 모두 파악하여 전략적으로 설계 필요
• 와이어프레임은 디자이너, 개발자 등과 의사소통을 위한 수단임

제작 방법

• 펜과 종이를 사용한 스케치
• 파워 포인트
• 그래픽 툴 활용

 

 

와이어 프레임 예시

 

 

와이어프레임에 포함 할 내용

• 화면에 어떤 정보가 나타나야 하는지?
• 어떤 레이아웃, 모습을 보여줘야 하는지?
• 세부 컨텐츠가 있다면 어떻게 표현해야 하는지?
• 다음 화면으로는 어떻게 이어지는지?
• 공통영역(내비게이션, 푸터 등)은 적절히 기능을 하는가?

 

 

추천 툴

• Sketch : Mac에서만 사용가능하고, 비용은 연간 99달러
• Figma : 협업을 위한 디자인 툴, 별도 프로그램 설치 없이 웹에서도 이용 가능
  • 운영체제 제약 없고 비용 무료)
• Adobe XD : 친숙한 인터페이스, 처음에는 무료 사용 가능
  • 운영 체제 제약 없음

 

 

프로토타입

(Prototype)

정의

• 본격적으로 개발에 들어가기 전, UI/UX 상호작용을 시뮬레이션 하기 위해 동적으로 만드는 모형
• 정적인 화면으로 설계된 와이어프레임보다, 사용자들의 경험에 대한 테스트를 진행해 볼 수 있음