0
웹에이전시 전문 프리랜서 개발자 프리터코더입니다.
이번 챕터에서는 웹사이트 개발 과정 중 매장찾기 기획 확인하기를 작업합니다.
<매장찾기 기획 확인하기> 글은 웹에이전시의 의뢰를 받아서 프리터코더가 웹사이트를 개발하는 과정을 가상으로 보여주는 웹에이전시의 개발자들은 어떻게 일하나 시리즈 중 하나입니다.
1
매장찾기 퍼블리싱 파일을 브라우저로 열어보면 이렇게 생겼습니다.
2
매장명을 클릭하면 모달 팝업이 보여집니다.
퍼블리셔 팁
어떤 항목을 클릭하면 모달 팝업이 보여지는지 알려주세요.
만약 조건에 따라 모달 팝업이 달라져서 퍼블리싱이 여러 개라면, 그것도 기재해 주세요.
3
이번 페이지에서 필요한 기능이 뭔지 기획서에서 찾아봅니다.
- 카카오 지도 연동
- 페이지에 진입했을 때 지도 주소는 미스사이공 회사 위치
- 페이지에 진입했을 때 전체 매장 목록이 보여짐
- 매장 목록에서 매장을 클릭하면 해당 지점으로 지도가 이동, 모달 팝업으로 정보가 보여짐
- 모달 팝업에 필요한 정보는 [주소, 전화번호, 운영시간, 가까운 역, 매장 서비스] 항목임
- 지도는 [시/도, 구/군, 매장명] 으로 검색 가능
- 시/도 항목 바꾸면 자동으로 해당하는 구/군 목록이 보여짐.
- 시/도 항목이 "시/도 선택"일 경우 전체 시/도 항목을 대상으로 검색
- 시/도 항목이 선택되었을 경우 해당하는 시/도 항목 내에서만 검색
- 구/군 항목이 "구/군 선택"일 경우 전체 구/군 항목을 대상으로 검색
- 구/군 항목이 선택되었을 경우 해당하는 시/도, 구/군 항목 내에서만 검색
- ... 기타...
이렇게 길게 쓰는 것도 좋지만, 간단하게 표로 만들어 보겠습니다.
액션별 UI 변경 표
| 액션 | 지도 | 시/도(검색) | 구/군(검색) | 매장명(검색) | 목록 |
|---|---|---|---|---|---|
| 페이지 진입 | 미스사이공 회사 위치 | 시/도(전체) | 구/군(전체) | 비어있음 | 전체 목록 |
| 시/도 변경 | - | 선택상자 변경 | 시/도에 해당하는 구/군 목록 불러오기 | - | - |
| 구/군 변경 | - | - | 선택상자 변경 | - | - |
| 매장명 입력 | - | - | - | 입력한 매장명 보임 | - |
| 검색 버튼 클릭 | - | - | - | - | 검색된 매장명 목록 |
| 목록 매장명 클릭 | 모달 팝업 | - | - | - | - |
검색 조건
| 시/도 | 구/군 | 매장명 | 결과 |
|---|---|---|---|
| 시/도 (전체) | 구/군(전체) | 비어있음 | 전체 목록 |
| 시/도 (전체) | 구/군(전체) | 입력됨 | 시/도 구분없이 매장명으로 검색 |
| 선택됨 | 구/군(전체) | 비어있음 | 선택된 시/도의 목록만 출력 |
| 선택됨 | 선택됨 | 비어있음 | 선택된 시/도, 구/군의 목록만 출력 |
| 선택됨 | 구/군(전체) | 입력됨 | 선택된 시/도의 목록 중 매장명 검색 |
| 선택됨 | 선택됨 | 입력됨 | 선택된 시/도, 구/군, 매장명 검색 목록 |
이런 식으로 표를 작성하면 특정한 조건을 빠뜨릴 위험도 적고, 개발자도 한번에 조건을 만들 수 있습니다.
기획자 팁
표로 정리하면 알아보기 쉬워요.
간혹 UI 만 만들고 스스로의 기준에 의해서 "당연히 이렇게 동작해야 하는 거 아니야?" 라고 하는 경우가 있습니다.
아주 오래전에는 이런식으로 말하는 사람들도 있었습니다만, 최근에는 다들 합리적으로 똑똑하게 일하시는 편이라서 자주 뵐 수 없는 경우기는 합니다.
일용직 개발자. freetercoder@gmail.com