F. 앱 기획 챕터의 「화면 설계」 편. 논증형 교안 포맷(인디고)으로, 슬라이드마다 강사가 읽고 그대로 말할 수 있는 설명 산문을 넣었습니다. 화면 3개 흐름은 흑백 와이어프레임 목업 + 화살표로 직접 보여 줍니다. 텍스트가 잘리지 않도록 슬라이드 높이는 가변(최소 16:9)으로 두었습니다.
이 장은 와이어프레임·흐름 이론을 나열한 게 아니라 "만들기 전에 무엇을 그리나"라는 한 질문을 끝까지 따라가는 하나의 논증이다. 본론에 들어가기 전, 우리가 지나갈 전체 길을 먼저 펼쳐 둔다. 통념(예쁘게부터)을 깨고 → 흑백 뼈대를 주장하고 → 왜 그게 싼지(설계도 비유) → 화면 3개로 핵심을 잡고 → 화면을 화살표로 잇고 → "그래도 예쁨은?" 반론에 답한 뒤 → 결론으로 닫는다.
앱을 그려 보자고 하면 학생들은 거의 예외 없이 색을 고르고 아이콘을 찾고 글꼴을 바꾸는 일부터 시작한다. 머릿속의 '멋진 앱 화면' 이미지를 그대로 베끼려는 것이다. 그런데 이건 순서가 거꾸로다 — 어디에 무엇이 있고 버튼을 누르면 어디로 가는지(구조·흐름)가 아직 정해지지도 않았는데 색칠부터 하는 셈이기 때문이다.
한 화면을 예쁘게 칠한 뒤에야 "어? 결과 화면을 빼먹었네", "여기서 뒤로 갈 길이 없네"를 깨닫는다. 그러면 예쁘게 칠한 걸 다시 지우고 처음부터 손봐야 한다 — 꾸미기에 쓴 시간이 통째로 날아간다.
이 강의가 증명하려는 한 문장은 이것이다 — 앱은 만들기 전에 '와이어프레임(흑백 뼈대)'부터 그린다. 와이어프레임은 색·그림·꾸밈을 다 빼고, "어디에 무엇이 있고, 버튼을 누르면 어느 화면으로 가는가"만 네모와 글씨로 표시한 흑백 스케치다. 손으로 네모를 그려도 충분하다. 중요한 건 예쁨이 아니라 구조와 흐름이다.
색·아이콘·글꼴·이미지가 다 들어간 완성에 가까운 그림. 보기엔 그럴듯하지만 고치기가 무겁다 — 한 곳을 바꾸면 색·정렬·여백을 다시 맞춰야 한다. (= 높은 충실도)
네모 + 글씨만. 어디에·무엇이·어디로만 표시한다. 1분이면 한 화면을 그리고, 틀리면 지우고 다시 그리면 된다. (= 낮은 충실도, low-fidelity)
건물을 떠올려 보자. 설계도 단계에서 벽 위치를 바꾸는 건 지우개로 선 하나 지우면 끝이다. 하지만 다 지은 집의 벽을 옮기려면 부수고 다시 쌓아야 한다 — 시간도 돈도 몇 배다. 앱도 똑같다. 그리기 단계에서 화면을 고치는 게 가장 싸고 빠르다. 와이어프레임이 일부러 흑백·네모로 '대충' 생긴 이유가 여기 있다 — 버리기 쉬워야 마음 편히 고친다.
화면을 처음부터 다 그릴 필요는 없다. 어떤 앱이든 딱 세 화면이면 핵심이 드러난다 — 앱을 열면 보이는 ①첫 화면, 주된 일을 하는 ②핵심 기능 화면, 끝나면 나오는 ③결과 화면. 아래는 '오늘 급식 확인 앱'을 흑백 뼈대로만 그린 예다. 색도 아이콘도 없이 네모와 글씨뿐인데도 앱이 무엇을 하는지 한눈에 보인다. 그리고 화면마다 버튼은 1~2개로 시작한다 — 화면마다 "여기서 할 가장 중요한 한 가지"를 정하면 사용자가 헤매지 않는다.
화면 하나하나도 중요하지만, 진짜 앱 경험은 화면과 화면 '사이'에서 일어난다. "버튼을 누르면 → 다음 화면"을 화살표로 잇는 것 — 이것이 UX 흐름이다. 그리고 반드시 '돌아갈 길(뒤로 가기)'도 함께 그려야 한다. 들어갔는데 나올 길이 없으면 사용자는 그 화면에 갇힌다.
각 버튼 옆에 "누르면 가는 화면"을 화살표로 잇는다. 첫 화면의 [오늘 급식 보기] → 급식 화면, 급식 없는 날 → 결과 화면처럼.
들어간 화면마다 ← 뒤로를 둔다. 결과 화면에서 첫 화면으로 못 돌아오면 사용자는 앱을 끄는 수밖에 없다 — 흐름의 가장 흔한 구멍이다.
"색도 디자인도 결국 중요하지 않냐"는 반론은 맞다. 완성된 앱은 당연히 예뻐야 하고, 색·아이콘·글꼴도 사용자 경험의 일부다. 다만 디자이너는 그림을 '충실도(fidelity)' 단계로 나눠 그린다 — 처음엔 낮은 충실도(흑백 뼈대)로 구조를 잡고, 구조가 굳은 다음에 색·이미지를 입혀 높은 충실도(시안)로 올린다. 예쁨을 빼는 게 아니라, 자리를 뒤로 미루는 것이다.
| 단계 | 무엇을 | 지금 정하는 것 / 미루는 것 |
|---|---|---|
| 1 | 낮은 충실도 와이어프레임 | 구조·흐름·버튼 위치를 정한다 / 색·꾸밈은 미룬다 |
| 2 | 중간 — 회색조·실제 글 | 정보 위계·글 분량을 본다 / 최종 색은 아직 |
| 끝 | 높은 충실도 시안(예쁨) | ← 구조가 선 다음에 색·아이콘·이미지를 얹는다 |
왜 굳이 그려야 할까? 그림이 말보다 정확하기 때문이다. "여기에 큰 버튼이 있고, 누르면 결과 화면으로 가요"라고 말로만 설명하면 듣는 사람마다 다르게 상상한다. 하지만 네모로 그려서 보여 주면 모두가 같은 그림을 본다. 그래서 그 그림을 받은 사람 — 개발자나 AI — 가 훨씬 정확하게 만든다. 와이어프레임은 '내 머릿속 앱'을 남에게(그리고 AI에게) 정확히 건네는 공용 언어다.
"급식 보는 앱 만들어 줘"라고만 하면, 받는 쪽은 첫 화면도·버튼 위치도·결과 화면도 멋대로 상상한다. 내 머릿속과 다른 앱이 나온다.
"이렇게 생긴 화면 3개를 이 화살표대로 이어 줘"라고 와이어프레임을 건네면, 개발자도 AI도 같은 목표를 본다. 결과물이 내 의도에 가까워진다.
이 장은 와이어프레임·흐름 이론을 모은 게 아니라, "만들기 전에 무엇을 그리나"라는 한 질문을 끝까지 따라간 추론이었다. 출발점은 "처음부터 예쁘게"라는 통념이었고, 도착점은 "색·꾸밈을 뺀 뼈대와 흐름을 먼저"라는 주장이었다. 그 사이를 설계도 비유·화면 3개·와이어플로우·충실도가 각자의 역할로 이어 주었다.