🎨 디자인와이어프레임(Wireframe)

와이어프레임(Wireframe)이란?

와이어프레임은 웹사이트, 앱, 서비스 화면 등을 설계할 때 레이아웃과 기능 구조를 시각적으로 표현한 스케치 또는 청사진이에요.

디자인 요소나 컬러 없이, 구성 요소(버튼, 이미지, 텍스트 등)의 위치와 관계를 단순한 선, 박스 등으로 나타내요.

와이어 프레임 예시

와이어프레임의 주요 목적

• 콘텐츠 구조 정리: 어떤 정보가 어디에 위치할지 미리 구상
•  커뮤니케이션 도구: 기획자, 디자이너, 개발자 간 의사소통을 원활하게 해 줌
• 기능/흐름 검토: 사용자 여정, 클릭 동선, 페이지 흐름을 사전에 확인

 와이어프레임 vs 목업 vs 프로토타입

 자주 쓰는 와이어프레임 툴

• Figma: 협업이 쉬운 UI/UX 디자인 도구
• Adobe XD: 와이어프레임부터 프로토타입까지 지원
• Balsamiq: 손그림 느낌의 빠른 스케치 스타일
• Sketch: 맥 기반의 UI 설계 도구

 관련 키워드

와이어프레임, UX 설계, 사용자 흐름, 화면 설계도, UI 기획, 프로토타입, 목업