Wireframe
와이어프레임
화면의 구조와 정보 배치를 단순한 선·박스로만 표현한 디자인 초기 스케치로, 색·이미지를 빼고 '어디에 무엇이 들어갈지'만 먼저 정하는 단계입니다.
쉽게 말하면?
건물을 지을 때 도면을 먼저 그리고 인테리어를 나중에 정하듯, 화면도 정보 배치를 먼저 정한 뒤에 색·폰트·이미지를 입힙니다. 와이어프레임은 그 도면 단계입니다. 한국 토스·당근에서도 디자이너가 본격 디자인 전에 와이어프레임으로 PO·기획자와 합의합니다. 미국에서는 '종이에 그리는 와이어프레임'이 가장 빠른 검증 방법으로 여전히 권장됩니다. AI 시대에는 ChatGPT·Claude가 '회원가입 화면 와이어프레임 그려 줘' 같은 요청에 텍스트로 즉시 답해 줍니다.
한 줄로 비유하면?
와이어프레임은 건물 도면입니다. 어디에 방·문·창이 들어갈지만 먼저 정합니다.
어디에 쓰이나?
종이 와이어프레임
30분 안에 펜으로 그리는 초기 와이어프레임은 가장 빠른 검증 방법.
결과: 잘못된 정보 구조를 일찍 잡아낼 수 있습니다.
Figma 와이어프레임
협업·공유에 적합한 디지털 와이어프레임 표준.
결과: 디자이너·기획자·개발자가 한 화면에서 동시 검토.
주의할 점은?
와이어프레임이 입문자에게 중요한 이유는 세 가지입니다.
첫째, '구조를 먼저, 미감은 나중에'라는 디자인 원칙을 배우는 진입점입니다. 색에 끌리지 않고 정보 배치를 객관적으로 평가합니다.
둘째, 비용이 거의 없습니다. 종이 또는 무료 Figma만 있으면 됩니다.
셋째, AI 도구가 도와줍니다. ChatGPT·Claude에 '결제 페이지 와이어프레임' 요청하면 ASCII 또는 마크다운으로 즉시 답하고, 그것을 Figma로 옮기면 시작점이 됩니다.
어떻게 발전해 왔나?
관련 태그
참고 자료
- NN/g Wireframe Guide — 공식 대표 학습 자료 · Nielsen Norman · 2026 접속 — https://www.nngroup.com/articles/wireframe-prototype/
- Figma 와이어프레임 가이드 — 공식 가이드 · Figma · 2025 — https://www.figma.com/templates/wireframes/
- State of UX 2024 — 와이어프레임 도구 통계 · UX Tools · 2024 — https://uxtools.co/survey-2024/
- Sketching User Experiences 책 — Bill Buxton 표준 교과서 · Morgan Kaufmann · 2007 — https://www.billbuxton.com/SketchingUserExperiences-Workbook.pdf
- 토스 디자인 — 한국 와이어프레임 사례 · 토스 · 2024 — https://design.toss.im/
대표 출처
Nielsen Norman Group이 페이지에 대한 의견을 남겨주세요
여러분의 의견은 다음 갱신에 반영됩니다.