와이어프레임 도구·작성법 — Figma vs Whimsical vs 종이
목차
- 와이어프레임 vs 시안
- 충실도 (Fidelity) 3단계
- 저충실도 (Low-fidelity)
- 중충실도 (Mid-fidelity)
- 고충실도 (High-fidelity)
- 도구 비교
- 무료
- 유료
- Figma — 가장 추천
- 시작
- 페이지 = 프레임
- 컴포넌트 재사용
- 무료 와이어 키트
- 와이어프레임 작성 절차
- 1. 사이트맵 준비
- 2. 페이지 우선순위
- 3. 영역 그리기
- 4. 콘텐츠 배치
- 5. 모바일 버전
- 6. 사용자 흐름 표시
- 와이어프레임 필수 영역 — 10가지 패턴
- 1. 헤더
- 2. Hero
- 3. 기능·서비스 3컬럼
- 4. 후기·사례
- 5. 가격표
- 6. FAQ
- 7. CTA 섹션 (반복)
- 8. 푸터
- 9. 폼
- 10. 갤러리·포트폴리오
- 와이어프레임 검토 체크리스트
- 클라이언트와 공유
- 공유 방법
- 피드백 받기
- 자주 하는 실수
- FAQ
- 관련 가이드
와이어프레임은 색·이미지 없이 페이지의 구조와 흐름을 잡는 흑백 골격도입니다. 디자인 시안 전에 와이어프레임으로 합의하면 본 작업에서 수정 횟수가 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 디자이너 표준 | $12/월 (연간 청구) 또는 Mac 라이선스 $120 |
| Adobe XD | 단종 수순 — 유지보수 모드 | 신규 단독 구독 판매 중단 |
| Balsamiq | 와이어 전용 | $16/월~ |
대부분 소규모 작업: 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가지 질문:
1. 페이지 구조가 맞나?
2. 빠진 영역 있나?
3. 우선순위(가장 강조할 것)가 맞나?
디자인·색 피드백은 이 단계 X. 와이어프레임은 구조만.
자주 하는 실수
- 건너뛰기: 와이어프레임 없이 시안부터 → 중간 대수술
- 너무 자세히: 색·폰트까지 잡아서 시간 낭비
- 모바일 누락: 데스크탑만 → 모바일에서 문제 발생
- 단독 결정: 클라이언트 합의 없이 → 나중에 수정 요청
- 표준 패턴 무시: 너무 창의적이면 사용자 혼란
FAQ
Q. 소규모 작업이라 와이어프레임 필요 없지 않나요?
A. 본인 머릿속 정리에 효과적. 작은 사이트라도 30분이면 큰 그림 잡힘.
Q. 종이 vs 디지털?
A. 초기 아이디어는 종이. 공유·반복·수정은 디지털.
Q. 와이어프레임에 시간 얼마나?
A. 한 페이지 1~2시간. 사이트 전체 (10페이지) 10~20시간. 시안 작업의 30% 정도.
Q. AI로 와이어프레임을 만들 수 있나?
A. ChatGPT·Galileo·v0.dev 등 시도. 빠르지만 디테일·실제 사용 의도 약함. 아이디어 초안으로 활용.
Q. 와이어프레임을 코드로 바로 만들 수 있나?
A. Figma Plugin (Anima·Locofy) 일부 가능. 다만 코드 품질 ↓. 실무는 디자이너·개발자가 처음부터.
관련 가이드
- 사이트맵·정보 구조 설계
- 의뢰 전 요구사항 정리
- 디자인 시스템·토큰
- 모바일 우선 디자인
- 홈페이지 제작 의뢰서 작성법 — 준비한 자료를 실제 의뢰로 연결하는 방법