Flow Chart를 통해 내부 구조 예상해보기 (직방, Before) / 코드스테이츠 PMB 16기 W6D1

W6D1

---

직방의 원룸 지도로 찾기 검색 과정은 어떤 구조로 되어 있을까?

 오늘은 특정 서비스를 선정 후, 고객이 서비스에서 할 수 있는 행동을 'Flow Chart'로 작성해보고, 그 과정 속에서 'UI, 클라이언트, 서버, DB'가 어떻게 보이고 작동되는지 예상해보는 시간이다. 주제로 '직방의 원룸 지도로 찾기 검색 과정'을 선정했고, 2주 뒤 개발 관련 학습을 마무리한 후에 다시금 내용에 관해 회고할 목적으로 작성하는 것이기에 오늘의 내용은 개인적인 예상과 추측이 많이 들어갈 수 있음을 미리 밝히겠다.

---

1. 이용자의 직방 원룸 지도로 찾기 검색 Flow Chart

- 먼저 선정 이유에 대해서는 직방에 등록되고 저장된 많은 양의 원룸 데이터(DB) 중 이용자가 본인의 니즈에 따라(클라이언트), 직방이 선정해 놓은 조건을 보고(UI), 선택한(클라이언트) 조건 데이터를 직방에 전달하고(서버), 저장된 데이터 중 조건에 맞는 원룸 데이터를 추출해(DB) 역의 과정으로 이용자에게 전달되는 과정이 비교적 뚜렷하게 드러난다고 생각했기 때문이다.

 

- 따라서 2주 뒤에 더 많은 학습을 통해 현재 예상에 치우쳐 작성한 부분들을 좀 더 확실하게 개선하고, 구조 파악에 더 심도있게 다가갈 수 있을 것이라 판단해 직방 원룸 검색 과정을 Flow Chart로 작성해보고자 한다. 

 

'직방의 원룸 지도로 찾기 검색 과정' Flow Chart

---

2. Flow Chart를 통해 내부 Flow 예상해보기

1) 앱 실행

- 클라이언트는 앱을 실행한다.

- '메인 홈' UI가 표시된다.

직방의 메인 홈

2) '원룸' 버튼 클릭

- 클라이언트는 '원룸' 버튼을 클릭한다.

- '원룸 페이지' UI가 표시된다.

3) '지도로 찾기' 클릭 & 지도에서 지역 선택

- 클라이언트는 '지도로 찾기' 버튼을 클릭하고, 표시된 지도 UI에 따라 설정하고싶은 지역이나 범위를 선택한다.

- 이용자의 선택에 따라 해당 지역의 원룸의 수를 UI로 표시한다.

- 서버는 선택된 지역을 DB에 전달하고, DB에서 추출된 원룸 데이터를 UI로 전송한다.

- DB는 서버에서 선택된 지역에 관한 데이터를 받아 그 지역에 맞는 저장된 원룸 데이터를 추출한다.

지역마다 표시되는 원룸의 수 UI

4) 조건 설정 창 클릭 & 조건 선택

- 클라이언트는 조건을 설정하고 싶을 시 조건 창('전월세, 금액', '구조, 면적' 조건 총 두개의 창)을 클릭하고 원하는 조건을 선택한다.

- 조건 설정을 원하지 않을 경우 바로 6)'이 지역 매물보기' 버튼을 클릭한다.

- 조건 창 클릭 시 해당되는 창의 UI가 표시되고, 설정할 수 있는 조건들을 표시해준다.

설정할 수 있는 조건들

5) '적용하기' 클릭

- 클라이언트는 4)의 과정을 통해 조건을 선택하고, 적용하기를 클릭한다.

- 해당 조건에 맞는 원룸의 수가 UI로 표시된다.

- 서버는 선택된 조건을 DB에 전달하고, 추출된 원룸 데이터를 UI로 전송한다.

- DB는 서버에서 선택된 조건에 대한 데이터를 받아 그 조건에 맞는 원룸 데이터를 추출한다.

조건 설정시 해당되는 원룸의 수만 표시된다.

6) '이 지역 매물보기' 클릭 & 추출된 원룸 보기

- 클라이언트는 이 지역 매물보기를 클릭한다.

- UI는 5)의 과정을 통해 추출된 원룸들을 표시한다.

- 클라이언트는 추출된 원룸들을 볼 수 있고, 검색의 과정은 끝이 난다.

조건에 맞는 원룸들 표시

---

 오늘은 '직방의 원룸 지도로 찾기 검색 과정'을 Flow Chart로 그려보고, 그를 바탕으로 클라이언트, UI, 서버, DB가 어떻게 보여지고 작동하는지에 대해서 예상을 해볼 수 있었다. 앞서 언급했듯 2주 뒤에 양질의 학습들을 바탕으로 예상했던 내용들을 훨씬 더 개선할 수 있기를 바라면서 오늘 글을 마무리하도록 하겠다.