와이어프레임이란 — 홈페이지·앱 기획에서 발주자가 보는 법과 디자인 시안과의 차이
와이어프레임 뜻은 색과 그림을 뺀 화면의 뼈대입니다. 스토리보드·프로토타입·디자인 시안과의 차이, 홈페이지·앱 발주자가 와이어프레임에서 확인할 7가지, 요구사항부터 개발까지 4단계 진행 순서를 표로 함께 정리했습니다.
결론부터 적습니다. 와이어프레임은 색과 그림을 빼고 화면의 배치·흐름·요소만 그린 뼈대입니다. 발주자는 여기서 메뉴 구조와 핵심 흐름이 맞는지를 보고, 색과 글꼴은 다음 단계인 디자인 시안에서 봅니다. 엔큐솔루션(NQ Solution)도 요구사항을 정리한 뒤 화면 흐름과 와이어프레임을 먼저 맞추고 시안으로 넘어갑니다.
와이어프레임 뜻 — 화면의 뼈대
와이어프레임(wireframe)은 철사로 만든 틀이라는 말에서 왔습니다. 화면에 무엇이 어디에 놓이는지, 버튼을 누르면 어디로 가는지를 회색 상자와 선으로만 그립니다. 사진 자리는 대각선을 그은 상자로, 글은 가는 줄로 표시하는 식입니다.
색과 그림은 일부러 뺍니다. 보는 사람이 «파란색이 마음에 안 든다»가 아니라 «문의 버튼이 왜 여기 있지»를 보게 하려는 것입니다.
왜 디자인보다 먼저 보나요?
고치는 비용이 단계마다 커지기 때문입니다. 와이어프레임에서 메뉴 하나를 옮기는 일은 상자 하나를 옮기는 일입니다. 같은 변경을 디자인 시안에서 하면 화면을 다시 그려야 하고, 개발 뒤에 하면 화면과 데이터, 관리자 기능까지 함께 고쳐야 합니다.
그래서 기능과 흐름은 가장 싼 단계에서 합의하는 것이 좋습니다. 로그인·결제·예약처럼 여러 화면을 오가는 기능은 와이어프레임에서 흐름을 끝까지 따라가 봐야 빠진 화면이 보입니다.
와이어프레임·스토리보드·프로토타입·디자인 시안 차이
비슷한 말이 많아 자주 헷갈립니다. 회사마다 부르는 이름이 조금씩 다르지만 보통 다음처럼 나눕니다.
| 구분 | 무엇인가 | 색·그림 | 눌러 보기 | 확인하는 것 |
|---|---|---|---|---|
| 와이어프레임 | 화면 배치와 요소의 뼈대 | 없음 | 없음 또는 간단 | 메뉴, 배치, 흐름 |
| 스토리보드(화면설계서) | 와이어프레임에 화면 번호·설명·동작을 붙인 문서 | 없음 | 없음 | 기능 설명, 예외 처리 |
| 프로토타입 | 눌러 볼 수 있게 이은 화면 묶음 | 있을 수도 없을 수도 | 있음 | 실제 사용 흐름 |
| 디자인 시안 | 색·글꼴·그림을 입힌 실제 화면 모습 | 있음 | 보통 없음 | 인상, 브랜드, 읽기 쉬움 |
국내 웹 기획에서는 스토리보드를 화면설계서와 같은 뜻으로 많이 씁니다. 영상 제작의 콘티를 뜻하는 스토리보드와는 다른 문서입니다. 프로토타입을 실제로 동작하는 최소 제품과 헷갈리기도 하는데, 그 차이는 MVP 외주 범위에서 다뤘습니다.
발주자가 와이어프레임에서 확인할 7가지
공개 화면만 보고 넘어가기 쉽습니다. 아래 일곱 줄을 화면마다 대 봅니다.
| 확인 항목 | 확인 질문 | 자주 빠지는 것 |
|---|---|---|
| 메뉴 구조 | 방문자 기준으로 메뉴 이름과 순서가 찾기 쉬운가 | 회사 내부 용어로 지은 메뉴 이름 |
| 핵심 흐름 | 문의·예약·구매까지 몇 번 눌러 도착하는가 | 완료 뒤에 보이는 화면 |
| 관리자 화면 | 글 등록, 문의 확인, 회원 관리 화면이 그려져 있는가 | 관리자 화면 전체 |
| 모바일 | 폰에서 메뉴와 버튼이 어떻게 접히는가 | 긴 표와 큰 이미지의 처리 |
| 빈 상태 | 글이 하나도 없거나 검색 결과가 없을 때 무엇이 보이는가 | 첫 오픈 날의 빈 게시판 |
| 오류 | 입력이 틀렸거나 결제가 실패했을 때 어떤 안내가 나오는가 | 오류 문구와 다시 시도하는 길 |
| 접근 권한 | 로그인 전후, 관리자와 일반 회원이 볼 수 있는 화면이 정해졌는가 | 권한이 없는 사람이 주소로 들어오는 경우 |
이 가운데 관리자 화면이 가장 자주 빠집니다. 오픈 뒤에 매일 쓰는 화면은 공개 화면이 아니라 관리자 화면이라 여기서 꼭 봐야 합니다. 공지 하나를 올리는 데 몇 번을 눌러야 하는지, 문의가 오면 어디서 확인하는지를 실제 담당자와 함께 따라가 봅니다.
엔큐솔루션의 진행 순서
엔큐솔루션은 요구사항 정리, 화면 흐름과 와이어프레임, 디자인 시안, 개발과 검수 순서로 진행합니다. 단가표 v1.1(2026-09-23 기준)에서 홈페이지 제작 범위에는 디자인 시안 1안과 수정 2회가 들어갑니다. 와이어프레임에서 흐름을 확정해 두면 이 수정 기회를 색과 글꼴 같은 디자인 판단에 온전히 쓸 수 있습니다.
| 단계 | 나오는 것 | 발주자가 확인하는 것 |
|---|---|---|
| 1. 요구사항 정리 | 기능 목록, 범위 | 필요한 기능과 우선순위 |
| 2. 화면 흐름·와이어프레임 | 메뉴 구조, 주요 화면 뼈대 | 배치, 흐름, 관리자 화면 |
| 3. 디자인 시안 | 핵심 화면 시안 1안, 수정 2회 | 인상, 색, 글꼴, 읽기 쉬움 |
| 4. 개발·검수 | 테스트 화면, 관리자 | 요구사항대로 동작하는지 |
와이어프레임은 상담한 대표와 이사가 직접 그리고, 같은 사람이 개발까지 이어 갑니다. 기획만 먼저 정리하고 싶다면 기획 서비스를, 시안 범위는 디자인 서비스를 봅니다. 단계별 일정은 홈페이지 제작 기간에, 시안 단계에서 볼 것은 디자인 시안 뜻에 이어 정리했습니다.
와이어프레임 도구는 무엇을 쓰나요?
피그마 같은 디자인 도구가 많이 쓰이고, 종이나 화이트보드, 발표 자료 도구로 그려도 됩니다. 중요한 것은 도구가 아니라 모든 화면과 흐름이 빠짐없이 그려졌는지입니다.
발주자가 직접 그릴 필요는 없습니다. 원하는 화면을 손그림이나 참고 사이트 캡처로 보내고 «무엇이 좋은지» 한 줄을 붙이면 됩니다. 업체는 그 자료를 와이어프레임으로 옮겨 다시 확인을 받습니다.
자주 묻는 질문
와이어프레임과 스토리보드 차이는 무엇인가요?
와이어프레임은 화면 하나의 배치를 그린 뼈대입니다. 스토리보드는 와이어프레임에 화면 번호, 기능 설명, 버튼 동작, 예외 처리를 붙여 개발자가 읽을 수 있게 만든 문서입니다. 국내 웹 기획에서는 화면설계서라고도 부릅니다.
와이어프레임과 프로토타입은 어떻게 다른가요?
와이어프레임은 화면 한 장 한 장의 구조이고, 프로토타입은 그 화면들을 이어 눌러 볼 수 있게 만든 것입니다. 흐름이 복잡한 앱이나 예약·결제 기능은 프로토타입으로 한 번 더 확인하면 빠진 단계를 찾기 쉽습니다.
와이어프레임 단계에서 색이나 디자인 의견을 내도 되나요?
내도 되지만 메모로 모아 두었다가 디자인 시안 단계에서 전하는 편이 좋습니다. 와이어프레임에서는 배치와 흐름에 집중해야 합의가 빨리 끝납니다.
홈페이지 제작을 맡기면 와이어프레임도 받나요?
업체마다 다르므로 견적서의 산출물 목록에서 확인합니다. 엔큐솔루션은 요구사항 다음 단계로 화면 흐름과 와이어프레임을 맞추고 디자인 시안으로 넘어갑니다.
와이어프레임 무료 툴이 있나요?
여러 디자인 도구가 무료 요금제를 두고 있습니다. 요금제 조건은 바뀔 수 있으니 각 도구의 공식 안내를 확인합니다. 발주자라면 손그림과 참고 사이트 캡처만으로도 충분합니다.