클라이언트-서버 모델
지난 글에서 블라인드 같은 커뮤니티 어플에서 컨텐츠 공유를 효율적으로 하기 위해서는
클라이언트-서버 모델에 따라 개발을 해야 한다고 간략히 알아봤습니다.
클라이언트는 서버에게 요청을 보내고, 서버는 클라이언트의 요청을 처리하고 응답을 보내준다고 했는데
이번 글에서는 이 모델을 레스토랑의 업무와 비교를 해보며 조금 더 자세히 들여다 보겠습니다.
Front-of-House와 Back-of-House
북미의 레스토랑 구인 광고를 보면 FOH, BOH라는 표현이 등장합니다.
Front-of-House와 Back-of-House의 첫 글자를 딴 건데요,
레스토랑의 일을 손님과 소통을 하는 앞쪽(front)과 업무를 수행하는 뒤쪽(back)으로 구분지은 것입니다.
레스토랑에서 손님이 음식을 주문하는 과정을 보면 이해가 쉬울 겁니다.
- 레스토랑에 입장하면, 직원이 손님을 응대하며 자리로 안내해줍니다.
- 직원이 손님에게 메뉴를 설명하고 음식 주문과 다양한 요청을 접수합니다.
- 음식 주문을 받은 직원은 주방에 주문을 전달합니다.
- 주방 직원은 들어온 주문에 따라 음식을 준비합니다.
- 음식이 준비되면 주방 직원은 이 사실을 홀 직원에게 알리고, 주방 직원은 준비된 음식을 손님에게 전달합니다.
FOH와 BOH로 나눠서 생각해보면 다음과 같습니다.
- FOH: 손님 응대, 자리 안내, 주문 접수, 주방에 주문 전달, 준비된 음식 전달
- BOH: 식재료 준비, 주문에 따라 음식 요리
대부분의 경우 FOH는 손님과의 소통과 요청 전달 등 서비스 쪽에 무게를 둔다면, BOH는 직원 간의 소통과 레스토랑의 핵심이라고 할 수 있는 요리에 무게를 두고 있습니다.
이렇게 업무의 성격이 둘이 많이 다르기 때문에, 각 업무를 맡을 직원을 뽑을 때 요구하는 능력도 조금 다릅니다.
- FOH: 손님과 직접적으로 소통하기 때문에 외모가 단정한 것을 선호, 친절한 태도, 소통 능력 등을 요구함.
- BOH: 손님과 소통하는 능력보다는 직원 간의 소통, 요리 능력, 주문 동시 처리 능력 등을 요구함.
Front-end와 Back-end (+ full-stack)
레스토랑의 FOH, BOH 업무에 대해 읽으시면서, ‘어딘가 클라이언트-서버와 비슷한데’라고 생각하셨다면 정확히 보신 겁니다.
실제로도 클라이언트 개발자를 프론트엔드 개발자, 서버 개발자를 백엔드 개발자라고 지칭합니다.
클라이언트는 FOH 직원들처럼 사용자들과 직접적인 접점이 있기 때문에
개발자가 디자이너와 협력해서 어플을 조작하기 편하고 예쁘게 만드는 능력이 중요합니다.
지난 글에서 소개했던 UI(user interface: 유저 인터페이스)를 만드는 업무가 프론트엔드 개발에서 큰 비중
을 차지합니다.
서버에서는 BOH 직원들처럼 사용자들과 직접적인 소통은 하지 않고 클라이언트의 요청을 수행하기 때문에, 프론트엔드 개발자들 요청을 할 수 있도록 창구를 열어주고, 데이터 저장과 관리 업무를 함께 보는 경우가 많습니다.
이전 글에서 설명했듯이 사용자가 요청을 보내기 위해서는 클라이언트의 UI를 사용해야 합니다. 클라이언트가 서버에 요청을 전달하기 위해서는 API(application programming interface)를 통해서 소통합니다.
API란 클라이언트가 서버에 어떻게 요청을 보내야하고, 서버는 클라이언트에게 어떻게 응답을 줄 것인지 정한 둘 사이의 약속이라고 보시면 되는데, 바로 다음 부분에서 인터페이스가 무엇인지 설명하면서 조금 더 자세히 다루겠습니다.
레스토랑에서 규모에 따라 FOH와 BOH를 구분하기도 하지만 한 직원이 양쪽 업무를 모두 수행하기도 하듯이, 개발자들도 프론트엔드와 백엔드를 구분해서 업무를 맡기기도 하고, 양쪽 업무를 함께 시키기도 합니다. 후자처럼 양쪽 업무를 전부 하는 경우를 보통 “풀스택(full-stack) 개발자”라고 합니다.
인터페이스란?
위에서 UI와 API를 언급하며 ‘인터페이스’라는 단어를 썼는데, 처음에는 어떤 단어인지 저도 잘 와닿지 않았습니다. 그래서 이해를 돕기 위해 간단히 전화기의 역사를 살펴보며 인터페이스의 개념을 다져보겠습니다.
- 전화의 초기 시절에는 교환원을 통해 전화를 걸었습니다. 전화를 가진 사람들도 많지 않았고 기술적으로도 직접 연결을 하기 어려웠기 때문입니다. 사람들은 수화기를 들고 나서 교환원에게 걸고 싶은 번호를 알려줬고, 교환원은 물리적으로 선을 연결해서 전화 통화가 가능하게 했습니다.
- 다이얼 전화기가 소개되면서 사용자들은 원형 다이얼을 사용하여 직접 번호를 다이얼할 수 있게 되었습니다. 이전처럼 교환원과 통화를 할 필요는 없어졌지만, 번호를 돌릴 때마다 다이얼이 원위치 될 때까지 기다려야 했습니다.
- 버튼 전화기로의 전환은 버튼을 누르는 것으로 번호를 더 빨리 정확하게 입력할 수 있도록 했습니다. 전보다 빠르게 전화 번호를 입력할 수 있게 되었죠.
- 스마트폰 시대에 들어와서는 터치 화면의 버튼을 누르는 방식으로 진화했고, 전화를 걸기 전에 번호를 잘못 누르면 지울 수도 있게 되었습니다. 그리고 음성 인식 기술이 발전하면서 이제는 전화를 걸고 싶은 사람의 이름을 부르는 것만으로 전화를 걸 수 있게 됐습니다.
이 과정을 표로 간단히 정리해보면 다음과 같습니다.
| 종류 | 최초의 전화기 | 다이얼 전화기 | 버튼 전화기 | 스마트폰 |
| 전화를 거는 방법 | 없음 (교환원) | 다이얼 돌리기 | 버튼 누르기 | 터치 버튼, 음성 인식 |
사용자가 전화 기능을 쓰기 위한 조작 방식이 계속 바뀌었는데,
이렇게 기계의 기능을 사용할 수 있도록 사용자와 기계 사이의 소통 창구를 우리는 ‘사용자 인터페이스’라고 부릅니다.
블라인드 어플에서는 컨텐츠를 서로 공유하고 댓글을 서로 다는 것이 주된 기능입니다. 화면의 다양한 요소들을 통해서 사용자들이 글을 작성하고 서로의 글을 확인할 수 있기 때문에, 스마트폰의 어플에서는 화면이 곧 사용자 인터페이스가 됩니다.
API란?
인터페이스는 사용자-기계 또는 사용자-어플 사이에서만 있는 게 아닙니다. 프로그램 사이에서도 서로 기능을 사용하는 것이 가능한데, 이것 역시 ‘인터페이스’라는 약속을 통해 서로가 의도를 이해할 수 있도록 해야 합니다. 이렇게 프로그램끼리 또는 프로그램 안에서 서로의 기능을 쓸 수 있도록 약속을 한 것이 바로 API입니다.
클라이언트-서버 모델에서 클라이언트가 요청을 보내고, 서버는 요청을 받아서 기능을 수행하고 요청에 대한 응답을 준다고 했었습니다. 따라서 기능을 제공하는 쪽인 서버에서 클라이언트에게 ‘이렇게 요청을 하면 내가 이런 응답을 줄게’라고 방법을 제시하게 되는데, 이 방법을 가리켜 API라고 하는 것입니다.
블라인드의 맥락에서 보면, 클라이언트인 블라인드 어플은 스마트폰에 설치되어 있기 때문에 인터넷을 통해 서버에 요청을 보내게 됩니다. 이 요청은 우리가 인터넷에서 네이버나 구글에 들어갈 때 주소를 입력하는 것과 크게 다르지 않습니다.
실제로 우리가 사용하는 ‘IE’, ‘크롬’ 등의 브라우저도 서버에 요청을 보내고 응답을 받기 때문에 클라이언트입니다.
테크빌더 블로그를 보기 위해 주소창에 https://tech-builder.tistory.com/을 입력하면 브라우저에서 티스토리 서버에 블로그 글을 달라고 요청하게 됩니다. 그렇게 요청을 보내면 서버에서는 웹 페이지의 내용을 응답으로 보내주고 브라우저에 페이지가 뜨는 것이죠.
개발에서 말하는 API는 위에서 말한 것보다 조금 더 깊이 들어가긴 하지만, 비개발자 입장에서 개발자와 소통할 때 언급되는 API는 대부분이 인터넷을 통해 어떤 데이터를 요청을 할 수 있는 창구를 말한다고 봐도 무방할 것입니다.
이번 글에서는 클라이언트-서버 모델을 레스토랑의 FOH, BOH 업무와 비교해보며, 프론트엔드와 백엔드로 개발 업무를 나누고, 둘 다 하는 경우에는 풀스택이라고 부른다는 것을 알아봤습니다.
또한 ‘인터페이스’가 정확히 무엇을 뜻하는지, 그리고 API가 무엇인지 자세히 알아보았습니다.
다음 글에서는 요청을 개시하고 응답을 받아서 사용자에게 보여주는 클라이언트를 만드는 프론트엔드 개발에 대해서 알아보겠습니다.
이 글이 도움이 되셨으면 좋아요와 구독 부탁드리고, 궁금하신 점이 있으시면 댓글을 남겨주시면 보다 쉽게 설명해드리겠습니다.
'스타트업 개발자 채용' 카테고리의 다른 글
| 블라인드 어플을 만드는 데 필요한 것들-4 (0) | 2024.02.25 |
|---|---|
| 블라인드 어플을 만드는 데 필요한 것들-2 (0) | 2024.02.13 |
| 블라인드 어플을 만드는 데 필요한 것들 (1) | 2024.02.06 |
