와이어프레임은 디자인의 뼈대입니다. 이미지를 위한 상자, 텍스트를 위한 선, 버튼을 위한 레이블 등이 있습니다. 색상도, 글꼴도, 다듬어진 시각적 요소도 없습니다. 오직 구조만 남은, 뼈대만 있는 형태입니다.

와이어프레임은 디자인 프로세스 초기에 스케치 다음, 고해상도 목업 이전에 만들어집니다. 와이어프레임의 역할은 레이아웃에 대한 질문, 즉 내비게이션은 어디에 위치해야 하는지, 열은 몇 개여야 하는지, 계층 구조는 어떻게 되는지 등을 결정하는 것입니다. 와이어프레임을 일부러 투박하게 만드는 것은 의도적인 것입니다. 와이어프레임이 너무 완성도 높게 만들어지면 이해관계자들이 레이아웃의 실용성보다는 파란색의 색조에 대해 논쟁을 벌이기 시작할 수 있기 때문입니다.

와이어프레임이 보여주는 것

• 주요 요소 배치: 헤더, 네비게이션, 콘텐츠, 푸터
• 구성 요소의 상대적 크기 및 우선순위
• 화면이나 페이지 간의 흐름
• 버튼과 폼과 같은 상호작용 요소

Balsamiq이나 Figma 같은 도구 덕분에 와이어프레임 제작 속도가 빨라졌습니다. 하지만 여전히 종이와 마커를 사용하는 디자이너도 있습니다. 중요한 것은 도구가 아니라 그 안에 담긴 생각입니다. 와이어프레임은 대화를 시작하는 도구입니다. "구조는 이렇습니다. 어떻게 생각하세요?"라고 묻는 것이죠. 이 단계에서는 수정 비용이 저렴합니다. 시각 디자인이 완료된 후 사이드바 위치를 변경하려면 이후의 모든 작업을 다시 해야 합니다. 와이어프레임에서 미리 위치를 조정해 보세요.