핵심 비유
건물을 짓기 전에 '설계도'를 그리듯, 앱도 만들기 전에 화면 뼈대를 그린다. 와이어프레임은 색·그림·꾸밈을 다 빼고 "어디에 무엇이 있고, 버튼을 누르면 어느 화면으로 가는가"만 네모로 표시한 흑백 스케치다. 손으로 네모를 그려도 충분하다 — 중요한 건 예쁨이 아니라 '구조와 흐름'이다.
핵심 포인트
- 와이어프레임은 색·꾸밈 없는 '뼈대' 그림이다 — 글씨와 네모만으로 무엇이 어디에 있는지 보여 준다.
- 화면 3개면 앱의 핵심이 보인다 — ①첫 화면(앱을 열면 뭐가 보이나) ②핵심 기능 화면(주된 일을 하는 곳) ③결과 화면(끝나면 뭐가 나오나).
- 화면과 화면 사이의 이동이 'UX 흐름'이다 — "버튼을 누르면 → 다음 화면" 화살표로 길을 그린다.
- 그림은 말보다 정확하다 — "여기에 큰 버튼"이라고 그려서 보여 주면, 개발자나 AI가 훨씬 정확히 만든다.
- 처음부터 예쁘게 그릴 필요 없다 — 손그림·네모 박스로 빠르게 그리고 고치는 게 더 좋다(꾸미기는 나중).
교사 팁
A4 한 장을 세 칸으로 접게 한 뒤, 각 칸에 '첫 화면 / 핵심 기능 화면 / 결과 화면'을 네모와 글씨만으로 그리게 한다. "예쁘게 그리지 마세요, 네모랑 글씨만!"이라고 강조하면 미술 부담이 사라지고 구조에 집중한다. 다 그린 학생끼리 종이를 바꿔 "이 버튼 누르면 어디로 가요?"라고 서로 물으면, 흐름의 구멍(돌아갈 길 없음, 결과 화면 빠짐)이 드러난다. 이는 sprint Step4의 화면 스케치와 직접 연결되며, '보이는 쪽(화면)'이 곧 프런트엔드라는 F5의 개념으로 이어진다(architecture 5장 '보이는 쪽과 안 보이는 쪽' 참고).