LumoMate
LumoMate/용어집/DisciplineProduct / Process

와이어프레임

와이어프레임(Wireframe)은 색·이미지를 빼고 화면의 뼈대만 회색 박스로 그려 본 초기 설계도입니다. '어디에 무엇이 있는가'에 집중하기 위해 일부러 단순하게 만듭니다.
와이어프레임의 개념을 표현한 편집형 일러스트.

쉬운 설명

디자인을 처음부터 색·이미지·아이콘까지 다 갖춰 만들면, 사람들이 진짜 중요한 질문 — '이 흐름이 말이 되는가, 이 정보 우선순위가 맞는가' — 대신 '이 색이 별로다', '아이콘이 이상하다' 같은 표면적 의견에 집중하기 쉽습니다. 와이어프레임은 의도적으로 '꾸미지 않은' 상태로 그려서 구조에 대해 토론하게 만듭니다.

와이어프레임의 목적은 세 가지로 압축됩니다. ① 정보 우선순위 확인(가장 중요한 게 가장 잘 보이는가), ② 흐름 검증(여기서 저기로 어떻게 가는가), ③ 빠른 의견 수집(꾸미지 않으니 30분에서 1시간이면 한 화면을 만들 수 있음). '예쁜 디자인'은 그 후 단계의 일입니다.

도구는 가벼울수록 좋습니다. 종이·화이트보드·간단한 디자인 도구(Balsamiq·Whimsical·Figma의 와이어 모드)로 회색 박스·선·플레이스홀더 텍스트만 사용합니다. 한 화면이 아니라 여러 장을 늘어놓고 '여기서 여기로 어떻게 가나'를 살펴보는 경우가 많습니다.

와이어프레임 이후 단계는 mockup(색·이미지가 들어간 정적 디자인), prototype(클릭이 되는 가짜 앱)으로 이어집니다. 충실도가 올라갈수록 만들기는 오래 걸리고, 의견은 더 디테일해집니다. 단계별로 다른 종류의 피드백을 모으는 것이 와이어프레임 흐름의 핵심입니다.

주의할 점: 와이어프레임을 너무 오래 다듬으면 안 됩니다. 회색 박스의 가치는 '빠르게 버릴 수 있다'에 있고, 디테일이 많이 들어가는 순간 그 가치가 사라집니다. 또 회사 안에서 '와이어프레임 = 디자인 끝'으로 오해하면 위험합니다 — 와이어는 시작점일 뿐, 본격 디자인·테스트·구현이 그 뒤에 따라옵니다.

와이어프레임의 개념을 본문 안에서 다른 각도로 비춰 보는 편집형 일러스트.
FIG. 1와이어프레임을 다른 각도에서 다시 봅니다.

비유로 보면

와이어프레임은 건축의 평면도와 비슷합니다. 벽지·가구·창문 디테일을 다 그리지 않습니다. 대신 방의 위치와 크기, 동선이 분명히 보입니다. 그 단계에서 '이 동선이 어색하다'는 토론이 자연스러워지고, 실제 건축이 시작된 뒤에는 그 변경이 훨씬 비싸집니다.

어디에서 만나나

신제품·신기능의 초기 단계, 기존 화면을 크게 개편할 때, 외부 영업·투자자 시연 전의 흐름 정리, 사용자 인터뷰의 자극 자료, 개발자와 화면 기획을 맞추는 회의. 디자인 도구가 풍부해지면서 직접 코드로 첫 인터랙티브 와이어프레임을 만드는 팀도 많아졌습니다.

작은 예시

팀이 새 가계부 앱의 메인 화면을 의논할 때, 디자이너가 흰 종이에 '상단=잔액, 중간=최근 거래 5건, 하단=빠른 입력 버튼'을 사각형 세 개로 그립니다. 이 단계에서는 '상단에 잔액 대신 이번 주 소비 합계가 낫지 않을까?' 같은 구조 차원의 토론이 자연스럽게 나옵니다.

자주 하는 오해

오해
흔한 오해 셋. ① '와이어프레임은 그림 그리는 사람의 일' — 기획·개발·리서치가 함께 그리면 더 빠르게 결정됩니다. ② '예쁘게 그려야 의견이 잘 모인다' — 정반대입니다. 회색 박스가 가장 거침없는 의견을 만들어 냅니다. ③ '와이어 = 디자인 완료' — 와이어는 시작이고, 그 뒤의 모든 단계가 진짜 디자인입니다.

한 줄 정리

와이어프레임의 비결은 '예쁘지 않을수록 좋다'입니다. 회색 박스가 가장 솔직한 피드백을 끌어냅니다.
매주 월요일 오전 8시

한 주에 한 통,
오래 남는 이해를 보냅니다.

흘려보내지 않는 글만 골라 보내드립니다. 광고와 추적, 외부로 빠지는 미끼 링크 없이 메일 안에서 끝나는 한 통입니다.

언제든 한 번의 클릭으로 해지할 수 있습니다. 스팸은 보내지 않습니다.