파파야화면 보드

샘플 데이터 · 제안용 디자인 시연

화면 · 상태 보드 27

공고 ②에 적힌 화면과 상태를 390px 폰 프레임으로 늘어놓았습니다. 각 프레임은 실제 지도 화면을 그 상태로 고정해 띄운 캡처이고, 「실시간으로 보기」를 누르면 그 자리에서 움직이는 화면으로 바뀝니다. 프레임 위 라벨이 원문 항목명입니다.

등시선(통근 권역) 화면 일체

공고가 가장 중요하게 본다고 적은 화면. 같은 지도 위에 권역·마커·클러스터·범례·칩이 겹칠 때의 상태를 모두 고정해 두었습니다.

등시선 · 지도 검색 — 목적지 입력 전 안내 화면 — 설계 메모 빈 지도 대신 한 문장 약속 + 추천 목적지 3개 + 시나리오. 첫 탭까지의 거리를 줄였다.

통근시간 필터 바텀시트 — 목적지 입력 · 30/45/60 · 목적지 추가 화면 — 설계 메모 A·B 슬롯을 먼저 보여 줘서 「두 번째 목적지」가 있다는 걸 입력 전에 알린다.

등시선 — 계산 중 로딩 화면 — 설계 메모 스피너 대신 목적지에서 퍼지는 링 + 범례·카드 스켈레톤. 곧 생길 모양의 자리를 먼저 보여 준다.

등시선 · 권역 폴리곤 — 권역 표시 30/45/60 · 농도형 화면 — 설계 메모 채움은 도로 아래, 외곽선은 라벨 아래. 가격 태그는 흰 바탕이라 오렌지 권역 위에서도 사라지지 않는다.

등시선 · 권역 폴리곤 — 계단형(등고선 라벨) 화면 — 설계 메모 채움을 거의 빼고 선 위에 「30분」 라벨. 매물이 빽빽한 줌에서 지도 판독을 우선할 때.

범례(= 컨트롤) — 30분 탭 — 상한이 바뀐 상태 화면 — 설계 메모 범례 한 번 탭으로 폴리곤 강조·안/밖 마커·리스트·칩·시트 머리 숫자가 동시에 바뀐다.

권역 안팎 매물 구분 — 안/밖 토글 — 권역 밖 숨기기 화면 — 설계 메모 기본은 「흐리게」(비교 여지를 남김), 토글로 「숨기기」. 3단이 아니라 2단으로 결정을 줄였다.

목적지 2개 중첩 — 교집합(둘 다 45분) 강조 화면 — 설계 메모 A 오렌지 · B 파랑은 한 단계 낮추고, 둘 다 되는 곳만 잉크 빗금 + 잉크 외곽선. 색이 셋 섞이지 않게.

목적지 2개 중첩 — 범위 A만 보기 화면 — 설계 메모 범례의 A·B·둘 다 = 범위 선택. 다른 쪽은 외곽선만 남겨 맥락은 유지.

등시선 — 권역 안 매물 없음 화면 — 설계 메모 원인(조건)과 복구(60분으로 넓히기 · 조건 풀기)를 한 카드에. 공공임대 공고 카드는 그대로 남긴다.

등시선 — 권역이 화면 밖 — 이동 안내 화면 — 설계 메모 권역 쪽 가장자리에 방향 화살표 알약. 누르면 권역에 맞춰 이동한다.

지도 타일과 겹침 — 컬러 베이스맵에서도 화면 — 설계 메모 밝은 지도(Positron)와 컬러 지도(Voyager) 두 곳에서 같은 토큰이 읽히는지 확인하는 프레임.

지도 검색 · 리스트 · 필터

네이버부동산·직방의 관용 구조(상단 필터 칩 · 가격 태그 마커 · 숫자 원 클러스터 · 리스트 바텀시트)는 유지했습니다.

매물 리스트 바텀시트 — half 스냅 · 안 먼저 + 「권역 밖 매물 N」 구분선 화면 — 설계 메모 안 매물을 통근 시간순으로 먼저, 구분선 아래 밖 매물. 대출 가능 배지는 카드 오른쪽 아래 고정.

지도 검색(마커) — 마커 선택 → 미리보기 카드 화면 — 설계 메모 선택 마커는 잉크 바탕 + 그림자. 범례 자리를 미리보기 카드가 잠시 대신한다.

거래유형·가격·면적 필터 시트 — 결과 수 미리보기 화면 — 설계 메모 「권역 안 N곳 · 전체 M곳 보기」 — 적용 전에 통근 조건과 함께 결과를 알려 준다.

빈 결과 — 조건에 맞는 매물 없음 화면 — 설계 메모 권역과 무관하게 필터가 너무 좁을 때. 복구 버튼 하나만.

매물 상세 · 대출 가능 여부

상단에 「직장까지 32분」 형 통근 요약(목적지별)과 권역 미니 지도, 아래 3탭.

매물 상세 · 기본 정보 — 통근 요약 「연세대 32분」 · 대출 가능 화면 — 설계 메모 가격 다음 줄에 대출 배지. 통근 요약은 목적지 색 원(A/B)으로 지도와 연결한다.

매물 상세 · 단지 정보 — 단지 정보 탭 화면 — 설계 메모 정보 표 row 40px. 공공임대 단지면 관련 공고로 이어지는 행이 붙는다.

매물 상세 · 시세 — 시세 탭(렌더 시각 기준 12개월) 화면 — 설계 메모 이 매물 가격선을 오렌지 점선으로 겹쳐 비싼지 싼지 바로 읽히게.

부가 화면 · 상태

진입 선택 · 온보딩 · 오류 · 로딩 · 공공임대 공고 상세.

진입 선택 — 공공임대 / 전세·월세 화면 — 설계 메모 선택이 필터 기본값이 된다. 나중에 칩에서 바꿀 수 있다고 미리 말해 부담을 줄였다.

온보딩 — 1/3 · 통근 권역 소개 화면 — 설계 메모 캐릭터 없이 도형만 — 30·45·60 동심원이 곧 기능 설명.

온보딩 — 2/3 · 범례가 곧 컨트롤 화면 — 설계 메모 시그니처 인터랙션을 첫 사용 전에 한 번 보여 준다.

온보딩 — 3/3 · 두 목적지 교집합 화면 — 설계 메모 빗금 = 둘 다 가능. 지도에서 쓰는 표기를 그대로.

로딩 — 지도 스켈레톤 화면 — 설계 메모 스피너 금지. 블록·도로 모양 자리 표시.

오류 — 통근 권역 계산 실패 화면 — 설계 메모 목적지는 그대로 두고 「다시 계산」 · 「목적지 바꾸기」.

오류 — 지도 타일 실패 화면 — 설계 메모 지도가 없어도 목록과 통근 시간은 볼 수 있게 「목록으로 보기」 복구 경로.

공공임대 공고 상세 — 모집 중 · D-day(렌더 시각 기준) 화면 — 설계 메모 모집 기간·호수·조건 3칸 요약 → 자격 → 이 공고의 단지 매물 → 통근 권역으로 연결.