와이어프레임은 시각적인 디자인 요소 없이 구조를 보여주는 최소한의 레이아웃 스케치입니다. 색상, 사진, 세련된 글꼴은 사용하지 않습니다. 상자, 선, 임시 텍스트만 있습니다. 핵심은 디자인을 결정하기 전에 요소들이 어디에 위치해야 하는지 파악하는 것입니다. 와이어프레임은 계층 구조, 내비게이션, 콘텐츠 흐름에 대한 질문에 답을 제공합니다. 제작 비용이 저렴하고 수정하기도 쉽습니다.

디자이너는 와이어프레임을 손으로 그리거나 Figma, Sketch와 같은 도구를 사용하거나 전용 앱을 이용해 그립니다. 저해상도 와이어프레임은 대략적인 상자와 휘갈겨 쓴 레이블을 사용합니다. 고해상도 와이어프레임은 실제 콘텐츠를 추가하고 간격을 더 정확하게 조정하지만, 색상이나 이미지는 사용하지 않습니다. 팀은 와이어프레임을 통해 이해관계자들의 의견을 조기에 조율합니다. 예를 들어, 클라이언트가 와이어프레임에서 버튼 위치 변경에 이의를 제기하면 나중에 완성된 화면을 다시 만드는 수고를 덜 수 있습니다.

와이어프레임은 무엇을 보여주는가

• 주요 페이지 섹션의 배치.
• 탐색 구조 및 메뉴 항목.
• 콘텐츠 계층 구조 및 그룹화.
• 버튼과 폼과 같은 상호작용 요소.

와이어프레임은 설계도가 아닙니다. 와이어프레임은 소통을 위한 도구입니다. 목표는 표면적인 작업에 시간을 쏟기 전에 구조에 대한 합의를 도출하는 것입니다.