W6D1 데일리 과제 회고하기
오늘 과제는 이주 전에 작성한 W6D1 과제의 업그레이드된 버전이라고 생각하시면 됩니다!
W6D1을 작성할때만 해도 얄팍한 지식으로 과제를 진행한 이주 전 저와 달리 현재는 api,서버, 클라이언트가 뭔지 제대로 구분하고 설명할 수 있는데요.

들어가기 전..
W6D1 과제에 대해 빠르게 요약하면 에어비앤비를 주제로 선정하여 에어비앤비의 Flow Chart를 그려보고 에어비앤비의 UI, 클라이언트, 서버, DB 에 해당하는 내용을 알아보았는데요. 오늘 과제는 에어비앤비의 Flow Chart를 그려보기 전 클라이언트, 서버, DB에 대한 개념을 먼저 설명드릴 수 있도록 하겠습니다.
<이전 자료>

지난번 클라이언트 서버에 대한 이미지를 들고와봤는데요. 다시 보니 애매하고 처음보는 분이라면 이해가 잘되지 않을 것 같아. 클라이언트, 서버, DB에 대한 이미지를 예시와 함께 다시 그려보았습니다.

예시에 대해서 설명을 드리면,
클라이언트는 고객들이 주문을 하기 위한 무인단말기로 요리사에게 사용자의 요구를 컴퓨터 역할을 하는 키오스크
서버는 클라이언트의 주문에 음식을 제공하기 위해 냉장고에서 식자재를 들고오고 음식을 만드는 요리사
데이터베이스는 식당의 모든 식자재료를 보관해 놓는 냉장고
라고 예를 들 수 있습니다. 조금이나마 이해가 되시길 바랍니다.🙏🏻
클라이언트
- 클라이언트는 사용자에게 데이터를 입력받을 화면을 제공
- 입력받은 데이터 형식 검사 및 변환
- 사용자의 입력을 주로 처리하며 이를 서버에 요청을 보냄.
- 서버로부터 결과를 받고 사용자에게 UI 제공
- 업무 처리 부분은 서버에게 위임
- 데이터를 요청하고 받는 컴퓨터, 스마트폰이나 고객의 컴퓨터
서버
- 클라이언트의 접근 제어, 무효한 접근 차단, 트랜잭션 단위로 묶어서 관리하는 역할 수행
- 클라이언트의 요청을 받아서 처리하고, 이를 다시 클라이언트에 응답을 보냄
- 기능 변경에 유연한 대처 가능
- 데이터를 제공해 주는 컴퓨터
데이터베이스
- 여러 사람들이 공유하고 사용할 목적으로 통합 관리되는 데이터들의 모임
1. 에어비앤비의 Flow Chart
🤔 진입부터 숙소 예약까지의 여정을 살펴보자!
지난번 에어비앤비 앱 진입부터 숙소를 예약하고 종류하기까지 유저 플로우 차트를 그려보았습니다.

다시 그려본 에어비앤비의 유저 플로우 입니다. 유독 어렵게만 느껴진 유저 플로우인데용…
추가된 내용으로는 에어비앤비의 API 내용과 숙소 상세페이지, 예약 요청 플로우 부분을 추가해서 그려보았습니다.
유저가 서비스를 사용하면서 서버와 DB가 어떻게 작동할지 기술적인 부분까지 작성하고 싶었지만 …. 어렵네여오호
🙋🏻♀️ 혹시 잘못된 내용이나 참고할 내용있다면 댓글 달아주세요!

2. UI, 클라이언트, 서버, DB
🤔 지난 2주동안 (W6, W7) 강의를 바탕으로 1번에서 선택한 행동 시 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 예상하여 적어 보겠습니다.
Airbnb UI
에어비앤비 유저 흐름을 그려보았다면 작성한 플로우 차트의 흐름에 따라 전체적인 앱 화면 UI를 탐색해보았습니다.



창업자 두 명이 디자이너들인 만큼, 디자인이 아주 잘된 기업으로 유명한 에어비앤비는 접근을 생각하고 사용성을 고려해 디자인을 한다고 합니다. 에어비앤비는 사용자의 신체적 특징, 지식수준 등의 제한 사항을 고려해서 가능한 많은 사용자가 이용할 수 있도록 한 서비스라고 하는데요. 이는 브랜드 가치를 맞추는 것도 좋지만 모든 사람들이 서비스를 누리고 공유할 수 있도록 고려하여 만들었다고 하니 이러한 사실을 알고 앱 ui를 살펴보니 다르게 보이는 것도 같습니다. 기회가 된다면 에어비앤비의 UI에 대해서도 자세하게 분석해봐도 너무 좋을 것 같습니다!🤓 앗 그리고 에어비앤비의 디자인 프로세스는 애자일, 스프린트를 써서 제품 디자인을 한다고 합니다.(TMI)
🔎 단어 알아보기!
** 신속한 반복 작업을 통해 실제 작동 가능한 소프트웨어를 개발하여 지속적으로 제공하기 위한 소프트웨어 개발 방식을 뜻합니다.
** 스프린트는 팀이 일정량의 작업을 완료하는 시간이 정해진 짧은 기간입니다.
UI, 클라이언트, 서버, DB
캡처한 앱 화면 중 여행지 검색 및 상세 조건 필터링과 예약 요청 화면의 UI, 클라이언트, 서버, DB가 각각 어떻게 보이고 작동할지 예상하여 적어보고자 합니다.

여행지 검색 및 상세 조건 필터링에 해당하는 내용은 아래와 같습니다.

다음은 예약 요청 화면인데요.

예약 요청 화면은 사실 이외에 카드사 서버 등의 복잡한 과정을 걸치것이라고 생각합니다만.. 아직 잘 모르는 제가 생각하기는 여기까지이네요 ㅜㅜㅜㅜㅜㅜㅜ

이전 과제로는 여행지 검색 및 상세 조건 필터링과 예약 요청 화면에 대해서 반응 예측을 해보았다면 위에 그린 플로우 및 UI를 기반으로 다시 예측해보았습니다.

제가 생각한 흐름대로 작성하긴 했지만.. 정말 쉽지않구만요..ㅎㅎ
추가로 현재 에어비앤비는..

현재 에어비앤비에서 운영하고 있는 테크 블로그를 살펴보면, 최대 150배의 성능 향상을 달성하면서 클라이언트 통합을 최적화하기 위해 결제 데이터 읽기 흐름을 재설계한 방법을 기술한 Airbnb에서 통합 결제 데이터 읽기를 통해 에어비앤비의 통합 결제 데이터 읽기 계층 살펴볼 수 있습니다.

그리고 Airbnb가 오프라인 및 스트리밍 이벤트에서 파생된 데이터에 액세스 하기 위해 지속적이고 가용성이 높으며 대기 시간이 짧은 키-값 스토리지 엔진을 구축한 방법. Mussel — 파생 데이터를 위한 Airbnb의 키-값 스토어 을 통해 대규모 데이터 처리 엔진 또는 오프라인에 저장된 데이터인 파생된 데이터에 액세스 하기 위한 Mussel이라는 다중 테넌트 스토리지 플랫폼을 소개하고 이를 활용하고 있는 에어비앤비를 알 수 있습니다.

이외에도 블로그의 게시된 글 통해 느낀 바는 생각보다 현재 서비스에서 사용하는 아키텍처는 정말 복잡하구나, 대량 데이터를 처리하기 위해 많고 좋은 인프라를 사용하고 있다는 것을 알 수 있었던 에어비앤비였습니다.
2주 뒤 저는 그래도 개발적인 지식을 조금 쌓이긴 했지만 더 많은 공부를 해야겠다는 생각이 많이 들었습니다.
실제 현업에서 가서야 개발 지식을 배운 이유 및 필요성을 체감할 것 같지만용..ㅎㅎ
그래도 정말 2주 동안 배운 지식들이 저의 밑거름이 될 수 있기를 조금이나마 바래봅니다.
| 출처
'PMB_15기 > DAILY' 카테고리의 다른 글
| [코드스테이츠 PMB 15기_W8D2] 스크럼 가이드 요약, 오늘부터 애자일한 PM 되겠습니다. (0) | 2022.12.06 |
|---|---|
| [코드스테이츠 PMB 15기_W8D1] 야놀자의 라이브커머스 전용 카테고리, '야놀자 라이브' (0) | 2022.12.05 |
| [코드스테이츠 PMB 15기_W7D3] API의 개념과 카카오 로컬 주소 검색 Open API 알아보기 (2) | 2022.11.30 |
| [코드스테이츠 PMB 15기_W7D2] 기록이 쌓이면 내가 된다, 네이버 블로그 (0) | 2022.11.29 |
| [코드스테이츠 PMB 15기_W7D1] 매일 성장하는 사람들의 커리어 플랫폼, 서핏 (0) | 2022.11.28 |