[내일배움캠프TIL] 본캠프20일차 - 기획안 작성(2) 와이어프레임

기획안 작성(2) 와이어프레임

1. 들어가며
2. 기획안 작성(2) 와이어프레임
3. 마치며

---

📝 서론

1. 들어가며

와이어프레임은 서비스 기획자가 사용자 경험과 기능 구조를 구체화하고, 팀원들과 효과적으로 소통하기 위한 핵심 도구다. 본 문서에서는 와이어프레임의 정의부터 단계별 설계 방법까지 정리한다. 📖

 

---

🔍 본론

2. 기획안 작성(2) 와이어프레임

 

1. 와이어프레임이란?

• UI 및 핵심 기능을 단순한 선과 도형으로 나타낸 구조도
• 웹/앱 서비스의 정보 구조, 사용자 흐름, 기능 배치 등을 시각화

2. PM이 와이어프레임을 그리는 이유

• 기획 구체화: 단순히 화면 배치가 아닌, 사용자 흐름과 기술적 구조(API, DB 등)를 함께 고려하게 됨
• 커뮤니케이션 도구: 와이어프레임은 기획의 의도를 팀원에게 설득하는 데 중요한 수단이 됨

3. 와이어프레임 설계 시 주의사항

• ✅ 정보 흐름 중심: 디자인보다 구조/흐름에 집중
• ✅ 빠른 초안 우선: 완벽보다 빠른 그리기와 반복 수정이 중요
• ✅ 기능이 아닌 행동 설계: 유저의 '손'과 '눈'의 움직임 고려

---

💡 와이어프레임 설계 단계

 

 1️⃣ 화면의 목적 정의

• “기능 먼저”가 아닌 “사용자가 하려는 행동(목표 행동)”을 먼저 정의해야 함
• 목표 행동을 방해하는 요소(이탈 지점, 불편 요인)를 함께 파악

🧩 예시 (결제 완료 화면)

단계	질문	반영 요소
1. 구매 후	뭘 샀지?	결제한 상품 정보
2. 배송 입력	언제 오지?	배송일/금액
3. 결제 확인	잘 됐나?	성공/실패 메시지
4. 이후 탐색	뭐하지?	다음 행동 안내

---

2️⃣ 노출 정보 나열 및 우선순위화

• 사용자의 판단/행동 흐름에 따라 정보를 정리 및 우선 배치

🧩 심리 단계별 예시(구매 화면)

단계	심리	정보
인식	이게 뭔가?	상품명, 이미지
판단	괜찮은가?	후기, 가격 등
행동	사야겠다	구매 버튼

---

3️⃣ 레이아웃 설계

• 🔼 우선순위에 따른 배치
  • 한 번만 보면 되는 정보 → 상단
  • 자주 봐야 하는 정보 → 고정 영역
• 🔁 행동 순서에 따라 구성
  • 정보 → 판단 → CTA 버튼 (ex. 상품 보고 → 구매 버튼)
• 👀 시선 흐름 고려
  • 모바일: 상 → 하
  • PC: 좌 → 우 → 하 (Z패턴)
  • 정보 리스트: F패턴
• 👍 Thumb Zone 고려
  • 클릭/입력은 오른손 엄지 기준
  • 입력 최소화, 자동완성 활용

---

 4️⃣ 예외 상황별 와이어프레임 설계

• 실패/오류 시나리오 반영

  상황	예시
  실패 시	이메일 중복, 인증 오류
  정보 없음	최근 활동 없음, 검색결과 없음
  비일반 대상	탈퇴 회원 댓글 처리
  과소/과다	첨부파일 수 제한 등
  중단/장애	임시 저장, 재시도 기능

---

🎯 결론

3. 마치며

와이어프레임은 단순한 화면 설계가 아니라, 사용자의 행동을 유도하고 서비스의 핵심 흐름을 설계하는 과정이다. 완벽한 초안보다 빠른 시도와 반복적인 개선을 통해, 더 나은 사용자 경험을 만들어가는 것이 중요하다. 🚀