[용어정리] 와이어프레임이 무엇이고, 왜 필요한가?

UI/UX 디자인을 진행하다 보면 가장 먼저 만드는 것이 바로 **와이어프레임(Wireframe)**입니다.
와이어프레임은 화면의 뼈대를 빠르게 설계하는 단계로, 완성된 디자인을 만들기 전에 구조와 흐름을 검증하는 과정이라고 할 수 있습니다.

 

1. 디자인은 이렇게 발전합니다

1️⃣ 스케치 / 와이어프레임 (Low-Fidelity)

• 화면 구성의 구조만 간단히 표현
• 색, 이미지, 아이콘 등은 최소화
• UX 흐름·정보 구조를 빠르게 확인하는 단계

2️⃣ 중간 단계 디자인 (Mid-Fidelity)

• 대략적인 구성 요소, 간단한 스타일 적용
• 흐름과 배치를 더욱 명확하게 정리

3️⃣ 완성 UI / 하이파이 디자인 (High-Fidelity)

• 색상, 타이포그래피, 컴포넌트, 인터랙션 등
  모든 시각적 디테일 포함
• 실제 제품과 가장 가까운 단계

 

2. 역할 구분

• 와이어프레임 → 구조·흐름 확인
• 하이파이 디자인 → 최종 시각 완성본

즉, 와이어프레임은 “빠른 설계”, 하이파이는 “정교한 디자인”에 초점을 둡니다.

 

3. 왜 ‘Wire(철사)’ + ‘Frame(틀)’이라는 이름일까?

실제 와이어프레임은

• 색 없음
• 그림자 없음
• 아이콘 상세 표현 없음
• 텍스트는 더미(LOREM)
  같은 최소한의 스타일만 사용해 ’뼈대만 존재하는 UI’ 형태라서
  마치 철사로 구조만 잡아 놓은 느낌입니다.

그래서 “Wireframe(철사 구조)”이라는 이름이 붙은 것입니다.

 

 

정리하면

 

와이어프레임은 UI의 ‘뼈대’를 구성하는 레이아웃 초안이며,
색·스타일 없이 UX 흐름과 정보 구조를 확인하는 단계입니다.