문과가 카카오톡 선물하기로 알아보는 백엔드 불완전정복!
[코드스테이츠 PMB 13기] W6D1 데일리 과제 회고
들어가며
지난주 월요일, 노 베이스 상태로 카카오톡 선물하기의 플로우차트를 작성하고 프론트엔드와 백엔드가 무엇이며 어떻게 작동하는지 예측해보았다. 이후 코드스테이츠 프로덕트 매니지먼트 부트캠프(PMB)에서 2주에 걸쳐 데이터 분석 실무와 PM에게 필요한 개발 지식을 학습했다. 학습 후 달라진 것이 있을까? 완전 문과가 카카오톡 선물하기를 통해 백엔드를 나름대로 파헤쳐본다.
W7D4. W6D1 데일리 과제 회고하기
카카오톡 선물하기 유입부터 결제까지 유저 플로우차트
(https://brunch.co.kr/@bluebillowy/29)
오늘의 프로덕트
: 카카오톡 선물하기
1. 카카오톡 선물하기 유저 플로우차트(Flowchart)
- 아래는 유저 플로우차트 비포 앤 애프터다. 처음 작성한 플로우차트에서 더 구체적으로 작성할 수 있는 부분은 세세하게 작성했다. 오른쪽 이미지에서 빨간 점선에 해당하는 부분이 바뀐 부분이다.
- 다시 그린 플로우차트를 한 번 더 게시한다. 이미지를 클릭하면 확대해서 볼 수 있다. 새로 그린 플로우차트에서 포인트 입력 부분의 선을 겹치지 않게 하기 위해 고민했다. 저 부분이 지금 봐도 왠지 어색하기는 하지만 최선의 방법이었다.
2. 카카오톡 선물하기의 사용자 인터페이스(UI), 클라이언트, 서버, 데이터베이스(DB)
① 사용자 인터페이스(UI)
- 사용자 인터페이스는 사람(사용자)과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있도록 만들어진 물리적, 가상적 매개체이다.
- 쉽게 말하면 스마트폰으로 쳤을 때 우리가 사용하는 앱 화면이 사용자 인터페이스이다. 물리적으로 말하면 컴퓨터에 입력할 수 있는 키보드, 버튼을 클릭할 수 있는 마우스 등도 인터페이스이다.
- 카카오톡 선물하기로 보면 사용자 인터페이스는 사용자와 카카오톡 선물하기 데이터 베이스(데이터가 저장돼 집합체)를 이어주는 매개체이다.(사용자가 버튼을 누르면(요청)=>데이터베이스에 저장된 데이터를 불러와서=>동작이 실현되는 것)
- 카카오 선물하기 사용자는 크게 카카오톡을 여는 것=>친구 탭에서 생일인 친구를 선택하는 것=>생일인 친구 페이지에서 선물하기 버튼을 누르는 것=>물건을 선택하는 것=>결제하는 것 등의 동작을 할 수 있다.
자료 : 코드스테이츠 강의 자료 토대로 재구성- 이전 글에 작성한 내용은 아래 이미지와 같다.
자료 : 카카오톡 선물하기 유입부터 결제까지 유저 플로우차트 글 캡처② 클라이언트
- 사용자가 앞에서 소개한 UI 화면에서 버튼을 누르면 클라이언트가 이를 서버에 요청한다. 클라이언트는 서버에 요청을 보내고 사용자와 상호 작용하는 응용 프로그램이나 서비스이다.
- 카카오톡 선물하기를 예로 들면, 친구 탭에서 생일인 친구를 클릭하면=>생일인 친구 페이지(글, 이미지) 표시해줘, 선물하기 버튼을 누르면=>선물하기 페이지(글, 이미지) 표시해줘 등의 요청을 하는 것이다.
- 앞서 쉽게 표현했지만 물론, 클라이언트와 서버는 한글로 대화하지 않고 소통하는 방법이 따로 있다. 그것은 바로 API다. API는 애플리케이션 프로그래밍 인터페이스의 준말로, 클라이언트와 서버를 연결해주는 매개체이다.
- API는 손님과 요리사를 연결해주는 종업원(또는 키오스크), 한국어와 외국어의 소통을 도와주는 번역기, 시청자와 TV를 연결해주는 리모컨 등으로 비유할 수 있다.
자료 : 코드스테이츠 강의 자료 토대로 재구성- 카카오는 이러한 API를 공개하고 있다. 공개된 API를 오픈 API라고 한다. 카카오의 오픈 API를 제공하고 있는 카카오 디벨로퍼스에서 카카오톡 소셜 API 구현과 관련한 이미지를 가져왔다. 아래는 차례로 요청(Request)과 답변(Response) 이미지이다.
- 이전 글에 작성한 내용은 아래 이미지와 같다.
자료 : 카카오톡 선물하기 유입부터 결제까지 유저 플로우차트 글 캡처③ 서버
- 서버는 네트워크를 통해 앞서 말한 클라이언트에게 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미한다. 일반 사람도 흔히 사용하는 네이버 클라우드나 구글 클라우드 등도 클라우드 서버에 해당된다.
- 사용자는 클라이언트와 만나고 클라이언트는 서버와 통신하며, 서버는 데이터베이스(DB)와 통신한다.
- 카카오톡 선물하기를 예로 들면, 생일인 친구 페이지(글, 이미지) 표시해줘라는 클라이언트의 요청이 오면=>서버는 데이터베이스에서 자원을 끌어와 서버에 전달한다.
자료 : 코드스테이츠 강의 자료 토대로 재구성- 이전 글에 작성한 내용은 아래 이미지와 같다. 참고로 이전에 쓴 '서버가 터지는 것'과 관련해 예전부터 가졌던 궁금증인 '마케팅을 위해 일부러 서버를 증설하지 않고 서버를 터트린다?'는 가설은 PMB 수업을 통해 맞지 않는 것으로 밝혀졌다. 서버가 터지면 그 시간 동안 예매가 이뤄지지 못해 티켓 예매 사이트에서는 손실이 발생할 수 있다는 것이다.
자료 : 카카오톡 선물하기 유입부터 결제까지 유저 플로우차트 글 캡처④ 데이터베이스(DB)
- 데이터베이스는 기호, 문자, 숫자, 신호 등으로 기록되는 정보를 위한 기초적인 자료인 데이터의 집합이다.
- 데이터베이스는 컴퓨터 시스템에 전자 방식으로 저장돼 있으며 구조화돼있다. 중복된 데이터를 없애고, 자료를 구조화해 효율적인 처리를 할 수 있도록 관리된다. 따라서 여러 업무에 여러 사용자가 데이터베이스를 사용할 수 있다.
- 카카오톡 선물하기를 예로 들면 사용자와 사용자 친구 데이터, 사용자와 사용자 생일 데이터, 사용자와 사용자의 위시리스트 데이터, 사용자와 사용자 간 주고받은 선물 데이터, 생일에 주는 선물 데이터 등이 있을 수 있다.
자료 : 코드스테이츠 강의 자료 토대로 재구성
마치며
수업을 듣고 난 지금도 여전히 백엔드 요소와 용어는 어렵다. 그러나 수업 이전에 용어를 봤을 땐 뜬구름 잡는 단어 같았다면, 지금은 머릿속에 구체화 및 체계화하기 위해 노력을 할 수 있는 정도는 된 것 같다. 구체화, 체계화됐다는 완료형이 아니라 노력을 할 수는 있는 그라운드 정도라는 것이다.
배운 내용이라도 최대한 체계화하고 싶다는 생각으로 글을 작성하다 보니 시간이 오래 걸렸다. 문과가 카카오톡 선물하기로 알아보는 백엔드 불완전정복! 언젠가 완전정복이 되기를!
참고자료
- API란 무엇인가요?, AWS, https://aws.amazon.com/ko/what-is/api/
- 데이터베이스(DateBase), TCP school, http://www.tcpschool.com/mysql/DB
- 카카오 디벨로퍼스(Kakao developrs), https://developers.kakao.com/docs/latest/ko/kakaotalk-social/rest-api
