와이어프레임이란? 뜻부터 홈페이지 기획 예시·툴까지 정리

와이어프레임은 홈페이지를 디자인하기 전에 화면마다 무엇을 어떤 순서로 둘지 정하는 설계도입니다. 이 글은 홈페이지 제작을 처음 맡은 마케팅·총무 담당자와 대표를 위해 와이어프레임의 뜻, 들어가야 할 내용, 만드는 순서, 도구와 AI 툴의 한계를 정리했습니다. 개념 설명에서 멈추지 않도록 웹닷이 실제 기업 홈페이지 프로젝트에서 고객 검토용으로 만든 화면설계서를 예시로 함께 싣습니다.

와이어프레임이란? 뜻과 목적

와이어프레임(Wireframe)은 색과 이미지를 빼고 회색 상자와 텍스트만으로 화면의 구조를 그린 설계도입니다. 철사(wire)로 뼈대(frame)만 세운 모형이라는 뜻에서 이름이 붙었습니다. 건축으로 치면 인테리어 시안이 아니라 평면도에 해당합니다.

와이어프레임이 정하는 것은 세 가지입니다. 이 페이지에 어떤 섹션이 들어가는지, 섹션이 어떤 순서로 놓이는지, 각 섹션에서 방문자가 무엇을 읽고 어디로 이동하는지입니다. 반대로 색상, 글꼴, 사진 분위기 같은 표현은 정하지 않습니다. 표현은 다음 단계인 디자인에서 다룹니다.

표현을 일부러 빼는 이유는 검토를 쉽게 하기 위해서입니다. 디자인 시안을 먼저 보여주면 검토자의 의견이 「파란색이 별로다」, 「사진이 어둡다」 같은 표현 문제로 쏠리고, 정작 「이 페이지에 인증 현황이 꼭 있어야 하는가」 같은 구조 결정은 뒤로 밀립니다. 회색 상자만 있으면 내용과 순서에 대한 의견만 남습니다.

와이어프레임, 목업, 프로토타입, 스토리보드 차이

네 용어는 완성도와 쓰임새로 구분합니다. 와이어프레임은 구조, 목업은 겉모습, 프로토타입은 동작을 확인하는 단계입니다. 스토리보드는 화면 흐름과 설명을 묶은 문서 형식을 가리킵니다.

실무에서는 경계가 겹칩니다. 피그마에서 만든 와이어프레임에 화면 연결을 걸면 저충실도 프로토타입이 되고, 와이어프레임에 설명표를 붙이면 화면설계서가 됩니다. 이름보다 중요한 것은 지금 단계에서 무엇을 확정하려는지입니다. UI와 UX의 차이부터 정리하고 싶다면 UI/UX 디자인이란? 개념과 차이점 완벽 정리를 함께 보세요.

디자인 전에 와이어프레임을 만드는 이유

와이어프레임의 가장 큰 역할은 디자인 단계에서 기획이 뒤집히는 일을 막는 것입니다. 구조를 고치는 비용은 단계가 뒤로 갈수록 커집니다. 와이어프레임에서 섹션 하나를 빼는 데는 몇 분이 걸리지만, 디자인이 끝난 뒤 빼면 그 페이지의 여백과 배치를 다시 잡아야 하고, 개발이 끝난 뒤라면 관리자 화면과 데이터 구조까지 손대야 합니다.

두 번째 역할은 고객 승인 기록입니다. 「메인에 제품 카테고리 6개를 둔다」, 「문의 유형은 4가지로 나눈다」 같은 결정을 디자인 착수 전에 문서로 확인받아 두면, 이후 「처음부터 이렇게 하자고 하지 않았나」 같은 기억 싸움이 줄어듭니다. 와이어프레임이 사실상 작업 범위를 확인하는 문서 역할을 하는 셈입니다.

세 번째 역할은 디자이너 전달입니다. 디자이너가 텍스트와 구조를 받은 상태에서 시작하면 「여기에 무슨 내용이 들어가나요」를 묻는 왕복이 줄고, 표현에 시간을 더 쓸 수 있습니다.

홈페이지 와이어프레임 예시: 웹닷 화면설계서 실제 화면

아래는 웹닷이 실제 기업·단체 홈페이지 프로젝트에서 고객 검토용으로 만든 화면설계서입니다. 화면 한 장이 프레임 하나이고, 왼쪽은 와이어프레임, 오른쪽은 번호별 설명표입니다. 고객사 식별 정보가 드러나는 영역은 잘라내고 실었습니다.

판형: 1920 폭 프레임, 왼쪽 와이어 + 오른쪽 설명표

프레임은 실제 PC 화면 폭인 1920px 기준이고 높이는 페이지 길이만큼 늘어납니다. 상단 띠에는 챕터(대메뉴), 화면 경로(예: 자격 › 결과 조회, /certification/exam-result), 화면 ID가 들어갑니다. 화면 ID가 있으면 고객과 「PG-014 화면 2번 섹션」처럼 정확하게 가리키며 이야기할 수 있습니다.

왼쪽 와이어 영역에는 섹션마다 주황색 번호가 붙고, 오른쪽 설명표의 같은 번호 행이 그 섹션을 설명합니다. 버튼처럼 섹션 안의 세부 요소는 「5-1」처럼 하위 번호를 씁니다.

텍스트는 실제 문구 그대로

예시의 와이어에는 「로렘 입숨」 같은 가짜 문장이 없습니다. 「80점 이상이면 합격이고, 80점 미만이면 재시험 대상입니다」처럼 홈페이지에 실제로 올라갈 문장이 들어 있습니다. 가짜 문장으로 검토하면 문장이 들어간 뒤에 길이가 넘치거나, 문안 자체에 대한 수정 요청이 디자인 단계로 넘어갑니다. 문구가 와이어 단계에서 확정되어야 디자인이 그 길이에 맞춰 나옵니다.

설명표에는 디자인 지시가 아니라 기획 의도를 적습니다

설명표의 각 번호는 두 줄로 나뉩니다. 위 칸은 사실입니다. 섹션의 구성, 동작, 콘텐츠 수량, 데이터를 어디서 가져오는지(관리자 입력인지 고정 문구인지)를 짧게 적습니다. 아래 주황색 「의도」 칸은 이 섹션이 왜 여기에 있는지를 한 문장으로 적습니다. 예시의 「주주·투자자가 기간과 상관없이 필요한 공고를 바로 탐색」처럼, 방문자가 무엇을 얻고 그것이 사업 목표에 어떻게 기여하는지가 들어갑니다.

반대로 픽셀 크기, 색, 정렬, 글꼴 크기는 적지 않습니다. 표현은 디자이너가 판단할 영역이고, 와이어프레임 단계에서 미리 정하면 디자이너가 더 나은 안을 낼 여지를 막습니다. 고객이 명시적으로 요청한 제약만 「고객 요청(날짜)」을 달아 예외로 적습니다.

홈페이지 와이어프레임에 들어가야 할 5가지

홈페이지 와이어프레임에는 구조, 실제 텍스트, 기능, 데이터, 기획 의도 다섯 가지가 들어가야 합니다. 상위 노출된 글 다수가 구조만 다루는데, 기업 홈페이지에서는 나머지 네 가지가 빠질 때 문제가 더 크게 생깁니다.

1. 구조: 섹션 목록과 순서, 각 섹션의 콘텐츠 수량(카드 4개, 버튼 2개 등). 페이지 배치 원칙은 웹디자인 레이아웃 가이드에 정리되어 있습니다.
2. 실제 텍스트: 제목, 본문, 버튼 문구를 실제 문안으로. 아직 자료가 없는 자리는 「사진 수령 시 교체」처럼 상태를 적습니다.
3. 기능: 검색, 필터, 로그인 후 열람, 파일 다운로드, 문의 접수 후 알림 메일처럼 화면이 하는 일.
4. 데이터: 그 내용이 고정 문구인지, 관리자가 등록하는 게시물인지, 외부 자료에서 가져오는지. 이것이 정해져야 관리자 화면 범위가 나옵니다.
5. 기획 의도: 섹션별로 왜 필요한지 한 문장.

검색 노출을 고려한다면 각 화면의 H1·H2 제목도 와이어프레임 단계에서 함께 정하는 편이 좋습니다. 제목 구조가 문안과 같이 확정되기 때문입니다. 자세한 방법은 홈페이지 SEO 적용 실전 가이드를 참고하세요.

관리자 화면도 와이어프레임으로 그립니다

방문자가 보는 화면만 그리고 관리자 화면을 빼면, 오픈 직전에 「공지는 저희가 직접 올릴 수 있나요?」 같은 질문이 나옵니다. 위 예시처럼 문의 내역 목록의 검색 조건, 목록에 보이는 열, 신규 접수 시 알림 방식까지 그려두면 담당자가 오픈 후 실제로 어떤 일을 하게 될지 미리 확인할 수 있습니다.

운영 규칙과 확인 요청도 문서에 남깁니다

화면 하나로 표현되지 않는 규칙은 별도 프레임으로 둡니다. 신청이 들어오면 어떤 상태를 거쳐 승인되는지, 각 단계에서 누가 처리하는지, 어느 시점에 알림 메일이 나가는지 같은 내용입니다. 자료가 부족해 결정이 필요한 항목은 「확인 요청」 목록으로 따로 모아 고객 답변을 받습니다. 결정되지 않은 채 디자인으로 넘어가는 항목이 없게 하려는 것입니다.

와이어프레임 만드는 순서

홈페이지 와이어프레임은 사이트맵 확정, 자료 배정, 메인 화면, 하위 화면, 관리자와 운영 규칙, 고객 검토 순으로 만듭니다. 각 단계는 앞 단계의 결과를 입력으로 씁니다.

1. 사이트맵 확정: 어떤 페이지가 몇 개 있는지 먼저 정합니다. 화면 수가 곧 와이어프레임 프레임 수입니다. 제품 상세처럼 같은 양식이 반복되는 페이지는 대표 화면 1개만 그리고 「동일 양식 ×N」으로 표기합니다.
2. 자료 배정: 회사소개서, 카탈로그, 기존 홈페이지 문구를 모아 어떤 내용이 어느 페이지에 들어갈지 나눕니다. 어디에도 쓰지 않는 자료도 「안 씀」으로 판정해 두면 누락과 중복이 함께 드러납니다.
3. 메인 화면: 사이트 전체의 방향이 드러나는 화면이라 먼저 그리고 먼저 확인받습니다.
4. 하위 화면: 대메뉴 순서대로 그립니다. 공통 헤더·푸터는 별도 프레임 하나로 정의하고 다른 화면에서는 반복하지 않습니다.
5. 관리자 화면과 운영 규칙: 게시판, 문의 관리, 권한, 상태값을 정리합니다.
6. 고객 검토와 확정: 화면에 직접 코멘트를 받고, 반영 후 확정본을 기준으로 디자인을 시작합니다.

와이어프레임 툴: 피그마와 그 밖의 선택지

와이어프레임 툴은 손그림이나 파워포인트로도 충분하지만, 고객과 디자이너가 함께 보는 홈페이지 프로젝트라면 피그마(Figma)가 가장 무난합니다. 디자인 단계에서도 같은 도구를 쓰기 때문에 와이어프레임 파일을 그대로 디자인의 출발점으로 넘길 수 있습니다.

피그마 와이어프레임의 장점

• 링크 공유와 코멘트: 피그마 도움말에 따르면 프로토타입 코멘트는 모든 요금제에서 쓸 수 있고, 로그인한 상태에서 파일 보기 권한 이상이 있으면 남길 수 있습니다. 프레젠테이션 보기에서 C 키를 누르면 코멘트 모드로 바뀝니다.
• 화면 위치에 붙는 코멘트: 코멘트가 특정 위치에 핀으로 붙어 「어느 문장을 고쳐달라는 것인지」가 분명합니다. 메일이나 메신저로 받는 피드백보다 오해가 적습니다.
• 프로토타입 연결: 화면 사이에 이동을 걸면 메뉴 흐름을 눌러보며 확인할 수 있습니다.

그 밖의 툴

발사믹(Balsamiq)처럼 손그림 느낌의 저충실도 와이어프레임 전용 도구, 화이트보드형 협업 도구도 있습니다. 아이디어를 빠르게 나누는 초기 회의에는 이런 도구가 가볍습니다. 다만 실제 문구와 설명표까지 담아 고객 승인을 받는 문서로 쓰려면, 디자인 단계와 같은 도구에서 만드는 편이 옮겨 그리는 수고와 누락을 줄입니다.

와이어프레임 AI 툴, 어디까지 쓸 수 있을까

AI 와이어프레임 툴은 일반적인 화면 패턴의 초안을 몇 분 만에 만드는 데는 쓸 만하지만, 우리 회사의 내용과 결정을 대신 채워주지는 못합니다. 피그마의 AI 기능인 First Draft를 예로 들면, 공식 도움말은 「아이디어를 몇 분 안에 편집 가능한 와이어프레임이나 디자인으로 바꿀 수 있다」고 설명합니다. 툴바의 Actions에서 First Draft를 고르고 웹사이트 와이어프레임 같은 라이브러리를 선택한 뒤 설명을 입력하는 방식입니다.

같은 도움말이 한계도 밝히고 있습니다. First Draft는 피그마가 만든 와이어프레임·디자인 라이브러리를 바탕으로 화면을 조립하기 때문에 흔한 웹·앱 패턴에는 잘 맞지만 그 틀을 벗어난 구성에서는 결과가 어긋날 수 있고, 자체 디자인 시스템으로 생성하는 것은 지원하지 않습니다. 또 2026년 5월 20일부터는 피그마 에이전트(베타)가 이 기능의 새 진입점이 된다고 안내하고 있어, 메뉴 위치와 이름은 계속 바뀔 수 있습니다. 2026년 10월 기준 기존 First Draft 진입점은 유료 요금제에서, 새 에이전트는 모든 요금제에서 쓸 수 있으며 베타로 순차 적용 중입니다.

홈페이지 기획에서 AI 초안이 채우지 못하는 부분은 다음과 같습니다.

• 회사의 사실: 인증 번호, 설립 연도, 제품 사양, 거래처 공개 가능 여부는 회사 자료와 확인 절차에서만 나옵니다. AI는 그럴듯한 빈자리를 만들 뿐입니다.
• 섹션의 이유: 「이 회사의 고객은 구매 전에 무엇을 확인하는가」에 대한 판단은 업종과 영업 방식을 알아야 내릴 수 있습니다.
• 관리자와 운영 규칙: 누가 무엇을 올리고 어떤 상태를 거쳐 처리하는지는 계약 범위와 내부 업무에 달려 있습니다.

AI 초안은 회의 전에 「이런 구성도 있다」를 빠르게 보여주는 참고 자료로 쓰고, 승인용 와이어프레임은 실제 자료와 결정으로 다시 채우는 방식이 안전합니다.

담당자가 와이어프레임을 검토할 때 볼 것

담당자는 와이어프레임에서 디자인이 아니라 내용과 범위를 검토하면 됩니다. 아래 체크리스트를 화면마다 확인하세요.

• 우리 회사 자료에 있는 핵심 내용(제품, 인증, 실적, 연락 방법)이 어느 화면엔가 빠짐없이 들어갔는가
• 문구의 사실관계가 맞는가. 숫자, 연도, 제품명, 고객사명 공개 여부
• 방문자가 각 화면을 다 본 뒤 갈 곳(문의, 견적, 자료 다운로드)이 있는가
• 오픈 후 우리가 직접 수정할 영역과 업체에 요청해야 하는 영역이 구분되어 있는가
• 회원가입, 결제, 영문 페이지처럼 범위가 큰 기능이 들어갔다면 계약 범위와 맞는가
• 「확인 필요」로 표시된 항목에 답했는가

자주 묻는 질문

와이어프레임은 몇 장이나 만들어야 하나요?

사이트맵의 화면 수만큼 만듭니다. 다만 제품 상세, 게시물 상세처럼 같은 양식이 반복되는 화면은 대표 화면 1장으로 정의하고 반복 수를 표기합니다. 관리자 화면과 운영 규칙 프레임은 별도로 추가됩니다.

모바일 와이어프레임도 따로 그려야 하나요?

구조와 문구가 PC와 같다면 PC 기준 와이어프레임 하나로 내용을 확정하고, 모바일 배치는 디자인 단계에서 다루는 경우가 많습니다. 모바일에서만 메뉴 구성이나 노출 섹션이 달라진다면 그 화면만 따로 그립니다.

와이어프레임이 확정된 뒤에도 수정할 수 있나요?

수정은 가능하지만, 확정 이후의 구조 변경은 디자인과 개발에 영향을 주므로 업체와 범위를 다시 확인하는 것이 일반적입니다. 그래서 확정 전 검토에 충분한 시간을 두는 것이 좋습니다.

문구를 아직 못 정했는데 와이어프레임을 시작해도 되나요?

시작할 수 있습니다. 업체가 받은 자료로 초안 문구를 넣고, 확인이 필요한 부분은 표시해 두는 방식이 일반적입니다. 중요한 것은 디자인에 들어가기 전에 그 표시가 모두 해소되는 것입니다.

웹닷은 사이트맵과 화면설계서(와이어프레임)를 디자인 착수 전 단계에서 만들고, 고객 검토를 거친 확정본을 기준으로 디자인과 개발, 검색 노출을 위한 제목 구조 설계를 빌드 단계에서 함께 처리합니다.

정리

와이어프레임은 색과 이미지를 빼고 화면의 구조와 내용을 먼저 확정하는 설계도입니다. 디자인이 시작되기 전에 무엇을 왜 넣는지 합의해 두면 시안 단계의 뒤집기가 줄고, 디자이너는 표현에 집중할 수 있습니다.