화면설계 2026.09.30 공개 조회 32

펫시터 매칭 앱 화면설계 예시

펫시터 매칭 앱 IA에서 핵심 화면 5장(홈·시터 목록·시터 상세·맡기기·내 예약)을 휴대폰 크기로 그린 화면설계 예시예요.

플랜디의 화면설계 공개 예시로 들어 있는 앱이에요. IA에 적은 화면이 실제 화면 한 장으로 어떻게 그려지는지 볼 수 있어요. 화면 속 이름·날짜·평점은 화면을 채우기 위한 예시 값이에요.

화면 5장에 담긴 것

화면마다 무엇을 하는 곳이고, 화면 안에 무엇이 들어 있는지 표로 정리했어요.

화면 5장

펫시터 매칭 앱 화면 구성
화면	화면에서 하는 일	화면에 들어 있는 것
홈	날짜와 동물을 고르고 시터 찾기를 시작해요.	날짜와 동물 선택 칸, 추천 시터 카드, 날짜로 맡기기 버튼, 아래쪽 이동 메뉴
시터 목록	조건에 맞는 시터를 비교해요.	조건 요약(날짜·동물·지역), 시터 카드(이름·지역·전문·평점·돌봄 방식·가능 일정)
시터 상세	시터를 자세히 보고 맡길지 정해요.	돌봄 방식(방문 돌봄·시터 집 위탁), 가능 일정, 소개, 이 시터에게 맡기기 버튼
맡기기	날짜·동물·돌봄 방식을 정하고 요청을 보내요.	맡길 날, 동물 종류(소형견·중대형견·고양이), 돌봄 방식, 요청할 시터, 매칭 요청하기 버튼
내 예약	요청한 맡김의 진행 상태를 확인해요.	다가오는 예약과 지난 예약, 상태(확정·완료·요청중), 같은 시터에게 다시 요청 버튼

메뉴 구조에 적어 둔 항목이 화면 한 장이 되는 과정이에요.

읽는 법 3가지

IA의 시터 목록, 시터 상세, 맡기기, 내 예약이 같은 이름의 화면이 되고, 홈은 시작 화면이에요. 맡기기 흐름의 핵심 입력은 한 화면에 모았어요.

화면은 모두 가로 360, 세로 780 크기의 모바일 화면이에요.

시터 이름, 날짜, 평점은 화면이 비어 보이지 않게 넣은 예시 값이에요. 실제 서비스의 시터나 후기가 아니에요.

질문에 답하면 기획서 초안이 만들어져요. 회원가입 후 무료로 시작해 보세요.

비슷한 샘플과 인기 샘플이에요.