플러스프로젝트 배경
1) 문제점 발주사는 청년 주거 탐색 웹서비스(모바일 우선 반응형 웹)를 준비하며 이미 프로토타입을 갖고 있었고, 기획이 아니라 디자인 시스템과 화면별 UI 비주얼을 원했습니다. 공고가 가장 중요하게 본다고 적은 화면은 하나였습니다. 목적지까지 대중교통 N분 안에 갈 수 있는 권역을 지도에 그리고 그 안의 매물만 보여 주는 화면으로, 참고 서비스(네이버부동산·직방)에는 없는 화면입니다. 30·45·60분 권
프로젝트 성과
범례 한 번에 다섯 곳이 함께 바뀜
목적지 연세대에서 범례 30분을 누르자 권역 강조·안팎 마커·목록·필터 칩이 바뀌고 매물 수가 142곳에서 33곳으로 줄었습니다(샘플 데이터 206곳).
목적지 2곳 교집합 166곳
여의도·광화문 두 권역을 오렌지·파랑으로 그리고 겹친 곳만 빗금과 「둘 다 45분」 라벨로 표시했습니다. 범례에 A·B·둘 다 매물 수가 따로 붙습니다.
상태 4종과 복구 버튼
입력 전·계산 중·권역 안 매물 없음·권역이 화면 밖을 설계했습니다. 매물이 없으면 「60분으로 넓히기」, 화면 밖이면 「권역으로 이동」이 뜹니다.
화면·상태 보드 27프레임
공고에 적힌 화면과 상태를 390px 폰 프레임 27개로 늘어놓고, 프레임마다 원문 항목명과 설계 메모를 붙였습니다.
지도 레이어까지 담은 디자인 시스템
색(대비비 표기)·타이포·간격·아이콘·컴포넌트와 함께 권역 단계별 채움·외곽선·교집합 해치·마커 값을 토큰으로 정리했습니다.
핵심 기능
범례가 곧 컨트롤 — 30·45·60분과 A·B·둘 다
범례의 각 단계에 매물 수가 붙어 있고, 누르면 그 시간이 상한이 됩니다. 권역·마커·목록·칩·매물 수가 같은 화면에서 함께 바뀝니다.
진행 단계
공고 해석과 화면 목록
2026.09.
공고의 등시선 요구와 화면 목록을 원문 항목명 그대로 옮겨 화면·상태 대응표를 만들고, 샘플 매물 206곳과 목적지 후보를 정했습니다.
프로젝트 상세
1) 소개 청년 주거 탐색 서비스의 통근 권역(등시선) 지도 화면을 직접 눌러 보게 만든 제안용 디자인 시연입니다. 결과물 URL 첫 화면에서 추천 목적지나 시나리오 3개(연세대까지 30·45·60분 / 나는 여의도, 친구는 광화문 / 공공임대만 · 30분)로 바로 들어갈 수 있습니다. 코드로 그린 시연이라 Figma 원본은 아니며, 매물·공고는 합성 샘플이고 통근 시간은 지하철역만 쓰는 추정 모델입니다.
