6장. 화면 설계: UX와 기능 흐름 설계하기➀

와이어프레임과 사용자 플로우

앱 개발 프로젝트에서 가장 많은 시행착오를 겪는 부분이 화면 설계다. 기능 명세서와 데이터베이스 설계도 탄탄했는데 막상 화면을 그려보니 뭔가 막막하고 어색한 면이 있다. 사용자가 원하는 정보를 찾기 위해 3번, 4번씩 화면을 넘겨야 하고, 중요한 기능은 구석에 숨어있고, 불필요한 정보는 화면을 가득 채우고 있다.

화면 설계는 단순히 버튼과 텍스트를 배치하는 작업이 아니다. 사용자의 목적과 행동을 이해하고, 그들이 가장 효율적으로 목표를 달성할 수 있는 경로를 만드는 것이다. 마치 도시 설계자가 사람들의 동선을 고려해서 도로와 건물을 배치하는 것과 같다.

AI 시대에도 이 원칙은 변하지 않는다. AI가 화면을 자동으로 생성해 줄 수는 있지만, 사용자의 실제 니즈와 사용 맥락을 이해하는 것은 여전히 인간의 몫이다. 코드 생성이 자동화될수록 화면 설계의 중요성은 더욱 커진다.

이 장에서는 작품 도슨트 앱을 예시로 화면 설계 과정을 살펴본다. 미술관이나 박물관에서 특정 작품 앞에 서서 그 작품에 대한 전문적인 해설을 듣는 앱이다. 사용자는 작품을 보면서 오디오 가이드를 통해 작품의 배경, 작가의 의도, 예술사적 의미를 이해할 수 있다.

사용자는 대부분 미술관이나 박물관이라는 조용하고 집중을 요하는 환경에서 앱을 사용한다. 화면을 오래 보기보다는 작품 감상에 집중하면서 필요한 순간에만 앱을 조작한다. 이런 특수한 사용 환경을 고려한 설계가 필요하다.

와이어프레임과 사용자 플로우

도슨트 앱의 화면 설계를 시작할 때 가장 먼저 해야 할 일은 사용자가 이 앱을 언제, 어디서, 어떻게 사용하는지 파악하는 것이다. 미술관에서의 작품 감상은 일반적인 앱 사용과는 완전히 다른 맥락을 가진다.

미술관에서의 작품 감상 시나리오

이관람씨(28세, 직장인)가 주말에 국립현대미술관을 방문했다고 가정해 보자. 평소 미술에 관심은 있지만 전문 지식은 부족하다. 전시장에서 백남준의 비디오 아트 작품 앞에 서서 "이 작품이 무엇을 의미하는지, 작가가 무엇을 표현하려 했는지" 알고 싶어 한다.

기본 사용자 플로우:

작품 앞 도착 → 앱 실행 → QR 코드 스캔 또는 작품명 검색

작품 기본 정보 확인 (제목, 작가, 제작연도, 재료, 크기)

오디오 해설 시작 → 이어폰 착용 → 작품 감상과 해설 청취

해설 구간별 이동 (작품 전체 → 세부 → 배경 이야기 → 예술사적 의미)

상세 정보 탐색 (작가 생애, 다른 작품, 관련 자료)