Wireframe, 1963년 Sketchpad의 3D 와이어프레임에서

한 줄로

UI 설계도입니다. 디자인 없이 구조만 표현하는 단순한 그림입니다. 1963년 컴퓨터 그래픽의 3D 와이어프레임에서 이름이 왔습니다.

어디서 왔나

원래 wireframe은 3D 모델링의 용어입니다. 1963년 이반 서덜랜드의 Sketchpad 시연부터 사용됐습니다. 3D 객체를 면(face) 없이 모서리 선만으로 표현합니다. 마치 철사로 만든 구조 같다고 wireframe입니다.

이 단어가 1990년대 후반 웹 디자인 분야로 옮겨왔습니다. UI를 시각적 장식 없이 구조만으로 표현하는 그림을 wireframe이라 부르기 시작했습니다. 정확한 첫 사용자는 불분명하지만, 1998년경 Nielsen Norman Group의 보고서에서 표준 용어로 등장합니다.

종류

Low-fi wireframe (저충실도)

회색 박스, 단순 선. 디자인 디테일 없음. 빠르게 그리고 빠르게 버립니다. 도구는 종이, Balsamiq, Whimsical입니다.

High-fi wireframe (고충실도)

실제 폰트, 실제 색상. 거의 mockup에 가까움. 개발자 핸드오프가 가능합니다. 도구는 Figma, Sketch입니다.

용어 구분

Wireframe: 구조만.

Mockup: 시각 디자인 적용.

Prototype: 인터랙션까지 포함.

왜 만드나

1. 초기 검토 빠르게: 시각 디자인에 시간 쓰기 전에 구조부터 확정.

2. 이해관계자 의견: 클라이언트가 "버튼 색 바꿔주세요"에 빠지지 않도록.

3. 개발자 합의: 데이터 구조와 화면 매핑.

옵시디언으로 wireframe

흥미로운 사실입니다. 많은 1인 디자이너가 종이나 옵시디언으로 wireframe을 시작합니다. Figma는 너무 정교해서 디자인에 빠지기 쉽습니다. 종이가 더 단순하고 빠르게 버릴 수 있습니다.

함정

Wireframe에 너무 많은 시간: low-fi의 가치는 빠른 반복입니다. 박스 그림자에 30분 쓰면 의미 없습니다.

Wireframe만 보여주면 클라이언트가 못 이해: 일부 사람들은 회색 박스를 보고 "이게 최종?"이라 묻습니다. 충분히 설명이 필요합니다.

바이브 메이커가 챙길 한 가지

새 화면을 만들기 전에 종이에 5분 wireframe을 그려보세요. 디지털 도구를 켜기 전 단계입니다. 종이 위의 그림이 30분짜리 Figma 작업보다 더 빠른 의사결정을 만듭니다.

관련

Mockup · Prototype · Sketchpad