와이어프레임 도구·작성법 — Figma vs Whimsical vs 종이
와이어프레임은 색·이미지 없이 페이지의 구조와 흐름을 잡는 흑백 골격도입니다. 디자인 시안 전에 와이어프레임으로 합의하면 본 작업에서 수정 횟수가 1/3로 줄어요. 도구·작성법·충실도 단계까지 정리.
와이어프레임 vs 시안
| 와이어프레임 | 디자인 시안 | |
|---|---|---|
| 단계 | 디자인 전 | 디자인 |
| 색·이미지 | 없음 | 있음 |
| 시간 | 1~3시간/페이지 | 4~10시간/페이지 |
| 목적 | 구조·흐름 합의 | 비주얼 합의 |
| 수정 비용 | 낮음 | 높음 |
순서: 사이트맵 → 와이어프레임 → 시안 → 퍼블리싱.
충실도 (Fidelity) 3단계
저충실도 (Low-fidelity)
종이·간단 박스. 30분/페이지.
- 큰 영역만 표시
- 텍스트는 lorem ipsum
- 핵심 결정만 빠르게
중충실도 (Mid-fidelity)
가장 흔함. 디지털 도구로 깔끔. 1~2시간/페이지.
- 영역 정확
- 실제 텍스트 일부 (제목·CTA)
- 회색조
고충실도 (High-fidelity)
거의 시안 수준. 색·실제 콘텐츠. 3~5시간/페이지.
- 시안과 거의 동일
- 디자이너·개발 단계 직전
💡 중충실도가 권장. 너무 단순하면 합의 X, 너무 자세하면 시안 작업과 중복.
도구 비교
무료
| 도구 | 장점 | 단점 |
|---|---|---|
| Figma | 가장 인기·강력·협업 | 학습 곡선 |
| Whimsical | 빠름·간단 | 디자인 자유도 ↓ |
| Excalidraw | 손그림 느낌 | 정밀도 ↓ |
| Miro | 협업·아이디어 정리 | 와이어프레임 전용 X |
| 종이·화이트보드 | 가장 빠름 | 공유 어려움 |
유료
| 도구 | 장점 | 가격 |
|---|---|---|
| Sketch | macOS 디자이너 표준 | $99/년 |
| Adobe XD | Adobe 통합 | $9.99/월 |
| Balsamiq | 와이어 전용 | $9/월 |
대부분 소규모 작업: Figma 무료 + 종이.
Figma — 가장 추천
시작
- figma.com ↗ 가입 (무료)
- 새 디자인 파일 생성
- 좌측 도구로 사각형·텍스트 추가
- 자주 쓰는 단축키:
R: 사각형T: 텍스트F: 프레임 (페이지 영역)V: 선택
페이지 = 프레임
Figma에선 각 페이지를 프레임으로:
- 1440×900 (데스크탑)
- 768×1024 (태블릿)
- 375×812 (모바일)
컴포넌트 재사용
자주 쓰는 요소 (헤더·푸터·CTA):
- 디자인 → Create Component (단축키
Cmd+Alt+K) - 다른 페이지에 인스턴스 사용
- 원본 수정 → 모든 인스턴스 자동 업데이트
무료 와이어 키트
Figma Community에 검색:
- “Wireframe Kit”
- “Low-fi Wireframe”
- “Wireframe Components”
다운로드 → 본인 파일에 복사·재사용.
와이어프레임 작성 절차
1. 사이트맵 준비
사이트맵 가이드 완성 후 시작.
2. 페이지 우선순위
- 핵심 페이지 (홈·서비스·문의) 먼저
- 부수 페이지는 핵심 완성 후
3. 영역 그리기
각 페이지를:
- 헤더 (로고·메뉴·CTA)
- Hero (메인 비주얼 영역)
- 본문 섹션 (3~5개)
- 푸터
4. 콘텐츠 배치
각 영역에:
- 헤딩 (실제 H1·H2)
- 본문 (Lorem ipsum·실제 일부)
- CTA 버튼
- 이미지 영역 (회색 박스 + 캡션)
5. 모바일 버전
데스크탑과 별도로:
- 모바일 햄버거 메뉴
- 단일 컬럼
- CTA 큼직하게
6. 사용자 흐름 표시
페이지 간 화살표·번호로 흐름 표시:
홈 → 서비스 → 가격 → 문의 폼Figma의 Prototype 모드로 클릭 가능한 데모도 가능.
와이어프레임 필수 영역 — 10가지 패턴
1. 헤더
[로고] [메뉴1] [메뉴2] [메뉴3] [CTA버튼]2. Hero
[헤드라인 - 한 줄 가치 제안]
[서브카피 - 보완 설명]
[CTA1 - 메인] [CTA2 - 보조]
[대표 이미지·영상]3. 기능·서비스 3컬럼
[아이콘1] [아이콘2] [아이콘3]
[제목] [제목] [제목]
[설명] [설명] [설명]4. 후기·사례
[고객 사진] [이름·역할]
[큰 따옴표 후기]
[★★★★★]5. 가격표
| Basic | Pro | Enterprise |
| 가격 | 가격 | 가격 |
| 기능1 | 기능1 | 기능1 |
| 기능2 | 기능2 | 기능2 |
| [버튼] | [버튼] | [문의] |6. FAQ
+ 질문 1
+ 질문 2
+ 질문 3펼침/접힘 표시.
7. CTA 섹션 (반복)
[큰 헤드라인]
[부가 설명]
[CTA 버튼]페이지 중간·하단에 자주.
8. 푸터
[로고] [메뉴] [연락처] [SNS]
[카피라이트]9. 폼
[이름 ___________]
[이메일 _________]
[메시지
________
________]
[전송 버튼]10. 갤러리·포트폴리오
[이미지] [이미지] [이미지]
[이미지] [이미지] [이미지]와이어프레임 검토 체크리스트
- 헤더·푸터 모든 페이지 일관
- 각 페이지의 핵심 CTA 명확
- 사용자 다음 행동 자연스럽게 유도
- 모바일 버전 있음
- 텍스트 분량 현실적 (Lorem 너무 짧지 않게)
- 이미지 영역 비율 적정
- 사용자 흐름 따라가도 막힘 없음
클라이언트와 공유
공유 방법
- Figma: 링크 공유. 댓글 가능.
- PDF: 다운로드해서 메일.
- 노션·이미지: PNG로 익스포트.
피드백 받기
3가지 질문:
- 페이지 구조가 맞나?
- 빠진 영역 있나?
- 우선순위(가장 강조할 것)가 맞나?
디자인·색 피드백은 이 단계 X. 와이어프레임은 구조만.
⚠️ 자주 하는 실수
- 건너뛰기: 와이어프레임 없이 시안부터 → 중간 대수술
- 너무 자세히: 색·폰트까지 잡아서 시간 낭비
- 모바일 누락: 데스크탑만 → 모바일에서 문제 발생
- 단독 결정: 클라이언트 합의 없이 → 나중에 수정 요청
- 표준 패턴 무시: 너무 창의적이면 사용자 혼란
❓ FAQ
Q. 소규모 작업이라 와이어프레임 필요 없지 않나요? A. 본인 머릿속 정리에 효과적. 작은 사이트라도 30분이면 큰 그림 잡힘.
Q. 종이 vs 디지털? A. 초기 아이디어는 종이. 공유·반복·수정은 디지털.
Q. 와이어프레임에 시간 얼마나?
A. 한 페이지 12시간. 사이트 전체 (10페이지) 1020시간. 시안 작업의 30% 정도.
Q. AI로 와이어프레임을 만들 수 있나? A. ChatGPT·Galileo·v0.dev 등 시도. 빠르지만 디테일·실제 사용 의도 약함. 아이디어 초안으로 활용.
Q. 와이어프레임을 코드로 바로 만들 수 있나? A. Figma Plugin (Anima·Locofy) 일부 가능. 다만 코드 품질 ↓. 실무는 디자이너·개발자가 처음부터.