1.2.2 2단계: 디자인

기획 단계에서 정한 방향을 바탕으로 사용자가 보는 화면을 만듭니다.

화면 설계

동네 맛집 앱은 홈 화면, 검색 화면, 식당 상세 화면, 리뷰 화면 등으로 이뤄집니다. 이러한 화면의 구성과 화면 간 이동 흐름을 설계하는 것을 화면 설계라고 합니다. 이는 기획 팀과 디자인 팀이 함께 작업하는데, 회사마다 그 방식이 조금씩 다릅니다. 기획 팀이 기본 구조를 잡고 디자인 팀이 구체화하는 경우도 있고, 디자인 팀이 전체 설계를 주도하는 경우도 있습니다.

화면을 설계할 때는 플로차트와 와이어프레임을 만듭니다. 플로차트(flow chart)는 사용자가 어떤 순서로 화면을 이동하는지, 버튼을 눌렀을 때 어떤 화면으로 넘어가는지 등의 전체 흐름을 정리한 것입니다. 그리고 와이어프레임(wireframe)은 각 화면에서 어떤 요소를 어디에 배치할지에 중점을 두고 화면의 구조와 구성을 설계한 것입니다. 예를 들어 홈 화면에서 음식 카테고리별로 맛집을 보여준다면, 플로차트에서는 해당 카테고리를 선택했을 때 어떤 화면으로 이동할지를 정리하고, 와이어프레임에서는 각 카테고리를 카드 형태로 배치할지, 리스트로 보여줄지 등 화면 구성안을 직접 그려봅니다.