[로드 투 정글] 2. 입학 시험(1) - 전체적인 큰 그림 그리기

입학 시험에서는 무엇을 만들어 내야 할까?

약 2주 간의 개별 학습 시간을 가진 후 입학 시험을 보게 되는데요. 주어진 요구사항에 맞게 CRUD가 가능한 웹 서비스를 만들어 배포한 뒤 작성한 코드와 내 웹 서비스가 배포된 웹사이트의 주소를 제출해야 합니다.

 

CRUD는 도대체 또 뭐고, 과연 내가 웹 서비스를 만들 수 있을까? 하는 생각이 들지도 모릅니다. 그렇지만 전체적인 큰 그림을 본 다음 학습 자료를 보면서 세부적으로 하나씩 차근차근 배워 나간다면, 분명 웹페이지 만들기부터 서버, DB, 배포까지 충분히 해낼 수 있는 자신을 발견할 수 있을 거라 생각합니다.

 

이 과정에서 단연 중요하다고 생각하는 것은 큰 그림을 그려보는 것인데요. 학습 자료를 통해 뭔가를 배우고 익히거나, 입학 시험을 치를 때에도 내가 지금 큰 흐름 속에서 어디까지 진행했고 앞으로 무엇을 해야 하는지 계획할 수 있는 것이 중요하다고 생각합니다. 그렇다면 큰 그림을 어떻게 그려야 할까요?

 

 

웹 서비스는 어떻게 작동할까?

웹 서비스가 작동하는 큰 흐름

 

위의 그림은 제가 그림판으로 정말 열심히 만든 웹 서비스가 작동하는 큰 흐름도입니다.

가상의 식당이 운영되는 큰 흐름

 

그리고 이어지는 그림은 역시 제가 그림판으로 열심히 수정한 식당이 운영되는 큰  흐름도입니다. 저는 웹 서비스가 작동하는 과정이 마치 식당이 운영되는 과정과 같다고 생각합니다. 웹 서비스가 사용자의 요청을 처리한다면, 식당은 손님의 주문을 처리하기 때문이죠. 그래서 각 그림에 있는 번호 순으로 전체적인 흐름과 개념들을 설명해 드려보고자 합니다.

 

1. 웹사이트 접속

맛집 골목에 있는 식당을 방문한다고 해 봅시다. 일단 네이버 지도에서 식당 이름을 치면 주소가 나올 것이고, 우리는 그 주소를 찾아서 맛집에 방문할 겁니다.

 

웹사이트에 접속하는 것 또한 식당에 방문하는 것과 똑같습니다. 우리가 알고 있는 유명한 포털 사이트 네이버에 들어가려면 주소창에 www.naver.com  이라는 주소를 치고 엔터를 땅 하고 눌러야 합니다.

 

2. 웹페이지 제공

맛집에 방문했습니다. 직원이 어서오세요! 하는 인사와 함께 메뉴판을 가져다 줍니다. 

 

마찬가지로 웹 서비스가 배포되어 있는 웹사이트에 접속하면, 가장 기본이 되는 웹페이지(index 페이지)를 띄워 줍니다. 네이버 주소를 치고 엔터를 땅 눌러서 들어가면 네이버의 기본 웹페이지가 표시됩니다. 이 웹페이지는 HTML, CSS, Javascript라는 3가지 요소들을 통해 만들어집니다. 그리고 JQuery를 통해서 Javascript를 훨씬 편하게 사용할 수 있습니다. 또한 웹페이지와 서버 간의 통신이 이루어져야 하는데 이는 Ajax가 담당합니다.

 

이때 메뉴판을 가져다 주는 직원처럼, 웹 서비스에서는 서버(Server)라는 친구가 웹페이지를 사용자에게 전달해 줍니다. 참고로 이 서버를 Flask라는 친구를 이용해서 만들게 됩니다.

 

그리고 직원이 메뉴판 전달 뿐만 아니라 주문 받기, 요리, 서빙, 계산 같이 손님을 응대하는 다양한 일을 하는 것처럼, 서버도 웹페이지 전달뿐 아니라 페이지 이동, 데이터 처리 등 사용자의 다양한 요청을 처리할 수 있는데, 특히 데이터 처리를 하는 데 있어서 가장 기본적인 기능들을 CRUD라 합니다.

 

CRUD는 각각 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 의미하는데요. 검색 결과 출력이나, 뉴스 페이지로 이동했을 때 뉴스들을 출력하는 것은 Read에 해당한다고 볼 수 있습니다. 나머지 기능들은 지금 저도 이용하고 있는 티스토리 블로그를 생각하면 이해하기 쉬울 것 같습니다. 포스트를 쓰는 것은 Create, 이미 쓴 글을 수정하는 것은 Update, 포스트를 삭제하는 것은 Delete에 해당하는 기능들입니다.

 

3. 사용자 요청

우리는 직원이 가져다 준 메뉴판을 보고 맛있는 메뉴들 중 뭘 먹을지 선택해서 직원에게 이 음식 좀 주세요! 할 수 있는데요. 마찬가지로 우리는 네이버 홈페이지를 탐색하면서 검색어를 입력하고 검색 버튼을 누르거나, 흥미로운 뉴스를 클릭할 수 있습니다. 해당 검색어에 대한 검색 결과를 보여주세요! 이 뉴스 페이지를 보여주세요! 하고 서버에 요청하는 것이죠.

 

하나 더 예를 들어볼까요? 티스토리에서 글을 쓰고 작성 버튼을 누르는 것도 사용자 요청입니다. 이 글을 내 티스토리 블로그에 추가해주세요! 하고 서버에게 요청하는 것입니다.

 

4. 사용자 요청 처리

우리가 주문을 마치면 직원은 그 주문을 듣고 주문지에 주문서를 작성합니다. 그리고 그 주문에 맞는 요리를 시작하겠죠.

 

웹페이지도 사용자의 요청을 받으면 서버가 그 요청이 무엇인지 파악한 뒤 그에 맞는 처리를 하게 됩니다. 만약 티스토리 블로그에 내가 쓴 글을 추가해달라는 요청을 서버가 받는다면, 이 내가 쓴 글을 받아와서 저장할 수 있는 형태로 만듭니다. 글 제목, 작성자, 글 내용, 작성일자, 조회수 등을 묶어 하나의 데이터로 만드는 것이죠.

 

5. 처리 결과 DB에 반영

작성된 주문서를 직원은 포스기로 가져가서 몇번 테이블이 어떤 음식을 시켰는지 등록합니다. 그래야 나중에 손님이 계산을 할 때 얼마를 내야 할 지 알 수 있기 때문이죠.

 

서버 또한 저장할 수 있는 형태의 데이터를 만들었다면 이를 어딘가에 저장해 놓아야 할 것입니다. 이 때 DB(데이터베이스)라는 곳에 이 데이터들을 저장해 모아놓습니다. 즉 DB는 데이터들을 보관하고 불러오는 장소입니다. 이 DB에 대해 MongoDB라는 친구를 사용하고, 서버와 DB를 중간에서 연결해 주기 위해 PyMongo를 사용하게 됩니다.

 

앞서 설명한 Flask와 PyMongo 모두 Python이라는 컴퓨터 언어를 기반으로 하고 있기 때문에 서버를 만들고 DB를 사용하기 위해서는 먼저 Python 사용법을 익혀야 합니다.

 

6. DB 반영 완료 응답 반환

식당의 포스기는 조금 특이하게도 주문 등록이 정상적으로 완료되면 '완료되었습니다!' 알림음이 띠링 하고 나옵니다.

 

위의 경우처럼, DB에 데이터 처리가 정상적으로 완료되었다면 서버는 그 여부를 반환받게 됩니다. 만약 정상적으로 데이터가 DB에 추가됐다면 그에 맞는 긍정적인 값을, 만약 오류가 생겼다면 부정적인 값을 돌려받습니다.

 

7. 사용자 요청 처리 완료 반환

처음에 손님이 요청했던 이 요리를 주세요! 라는 요청에 대해 식당 직원은 요리가 끝난 음식을 손님들에게 갖다 줍니다.

 

마찬가지로 서버는 사용자의 요청에 대한 처리가 모두 완료되면 그 결과를 사용자에게 최종적으로 전달해 줍니다. 만약 검색 결과를 보여달라는 요청에는 최종적으로 해당 검색 결과가 정리된 페이지로 이동하게 됩니다.

 

 

웹 서비스 개발의 마무리, 배포

웹페이지를 만들고, 이에 대한 서버도 다 만들고 나면 그 이후의 단계는 어떻게 될까요? 이제 사람들이 접속해 내가 만든 웹 서비스를 이용할 수 있게 되는 걸까요? 안타깝게도 그럴 수 없습니다.

 

웹페이지와 서버 개발은 로컬 서버에서 작업하게 되는데, 로컬 서버는 말 그대로 내 컴퓨터에서만 접속하고 이용할 수 있는 서버입니다. 다른 사람들은 이용할 수 없죠.

 

그래서 우리는 배포를 통해 만든 웹 서비스를 다른 사람들이 인터넷을 통해 접속해서 이용할 수 있게 해야 합니다. 배포가 끝나고 나면 사용자들이 해당 서버의 고유한 주소를 통해 웹사이트에 접속해 웹 서비스를 이용할 수 있게 됩니다.

 

그런데 사용자들이 언제든지 웹사이트에 접속하려면 서버가 항상 켜져 있어야 합니다. 내 컴퓨터를 항상 켜 놓을 수도 있지만, 아마 그리 좋은 생각은 아닌 것 같습니다. 그래서 웹 서비스 배포를 할 때에는 AWS EC2 같은 호스팅 서비스를 이용합니다. 항상 켜져 있는 컴퓨터를 하나 빌려서 내 서버를 켜 놓는다고 생각하면 편할 것 같습니다. 그리고 이 빌린 컴퓨터의 IP주소를 통해 누구나 웹사이트에 접속해 웹 서비스를 이용할 수 있습니다.

호스팅 서비스로 서버 배포하기

 

 

총정리

지금까지의 웹 서비스 작동 과정을 정리해 보겠습니다. 서버가 배포가 완료되면 누구나 웹사이트에 접속해 웹 서비스를 이용할 수 있게 됩니다.

 

먼저 사용자가 그 웹사이트에 접속하면, 서버가 기본 웹페이지를 전달해 사용자에게 표시해 줍니다. 그리고 사용자가 어떤 요청을 하면, 서버는 그 요청을 받아 처리하고 그 과정에서 DB에 데이터를 저장하거나, DB로부터 데이터를 조회해 가져옵니다. 마지막으로 이 모든 처리 결과에 대한 응답을 사용자에게 전달해 줍니다. 사용자가 웹사이트를 떠날 때까지 사용자가 요청하고 서버가 이를 처리하여 응답해주는 과정들이 반복됩니다.

 

그래서 우리는 HTML, JavaScript, JavaScript, 그리고 JQuery를 통해 웹페이지를 먼저 만들고, Flask로 서버를 만들어야 합니다. 그리고 Ajax를 통해 웹페이지와 서버가 데이터를 주고받습니다. 그리고 서버에서는 PyMongo를 통해 MongoDB에 데이터를 저장하고 불러옵니다. 웹페이지-서버 간 통신은 Ajax가, 서버-DB 간 통신은 PyMongo가 담당하는 것이지요. 마지막으로 이 모든 것을 처리하는 서버를 완성하고 AWS EC2에 이 서버를 올려 배포하게 되면 비로소 우리가 만든 웹 서비스를 사람들이 이용할 수 있게 됩니다.

 

지금까지 웹 서비스의 대략적인 작동 과정을 큰 흐름에 맞춰 알아보는 시간을 가지면서, 이제 우리는 웹 서비스라는 것이 어떻게 생겨먹었는지 그려볼 수 있게 되었습니다.

 

이제 전체적인 큰 그림을 보았으니 다음 포스팅부터는 각 과정의 큰 그림과 유용한 참고 정보들에 대해서 다뤄보겠습니다. 고생 많으셨습니다.