[IT 백과사전] 클라이언트/프론트엔드, 서버/백엔드?

기획자나 PM으로써 스크럼 등에 참여하면 많은 개발 관련 단어들을 듣고, 이해하기 위해 노력을 하는 경우가 대부분이다.

 

그 중,  가장 많이 듣게 될 클라이언트/프론트엔드, 서버/백엔드에 대해서 최대한 깔끔하게(?) 정리해보고자 한다. 

 

---

 

중요한 건 '어디서 작동하는가'

우선, 각 단어에 대해서 설명하기 이전에 일반적인 IT 서비스가 어떻게 운영되고, 구조가 어떻게 되는지 이해할 필요성이 있다.

 

기본적으로, IT 서비스는 다음과 같이 운영된다. 

 

서비스 특징에 따라 많은 부분이 변경될 수 있다.

 

예를 들어, 내가 쇼핑몰 어플리케이션의 장바구니 서비스를 기획했다고 가정했을 때, 각각 진행해야 하는 요소들은 다음과 같다.

 

예: 쇼핑몰 장바구니 서비스

기획자의 생각

고객이 어떤 물건 상세페이지에서 '장바구니에 추가' 버튼을 누르면 장바구니에 추가되고, 추후에 '장바구니' 버튼을 눌러 확인하려고 하면 '장바구니에 넣은 물건'이 장바구니에 리스트 형태로 나타나면 되겠다.

 

이렇게 생각하고, 기획을 진행했다고 가정한다면, 실제로 서비스의 사용자 행동과 데이터 흐름은 다음과 같다.

 

1. 고객이 상세페이지에서 '장바구니에 추가' 버튼을 누른다.
2. 웹사이트에서 '장바구니에 추가' 버튼이 눌리면 서버에 '장바구니에 넣을 물건'의 정보를 API의 형태로 전달한다.
3. 서버에서 '장바구니에 넣을 물건'의 정보의 유효성을 검증하고, 데이터베이스(DB)에 쿼리를 보내 저장한다.
4. 서버에서 저장이 잘 되었음을 웹사이트에 API의 형태로 전달한다.
5. 웹사이트에서 제대로 잘 되었다는 정보를 받고 '저장 완료!' 창을 띄운다. (안 띄우더라도 API 응답은 보내줘야 한다.)

 

1. 고객이 '장바구니' 버튼을 누른다.
2. 웹사이트에서 '장바구니' 페이지로 리다이렉션 시키고, '장바구니에 넣은 물건들'의 정보를 서버에 API로 요청한다.
3. 서버에서는 데이터베이스(DB)에 쿼리를 보내 해당 유저가 '장바구니에 넣은 물건들'의 정보를 서버로 가져온다.
4. 서버에서 약속된 형태로 이쁘게 API 형태에 "장바구니에 넣은 물건들"의 정보를 웹사이트에 API 응답으로 전달한다.
5. 웹사이트에서 해당 정보를 사용자에게 이쁘게 보여준다.

 

이를 통해 서로 어떤 역할을 하는지 이해할 수도 있겠지만, 각 파트별로 어떤 역할을 하는지 자세하게 알아보자.

 

클라이언트/프론트엔드 개발자의 생각

'장바구니에 추가' 버튼을 누르면 '장바구니에 넣을 물건'에 대한 정보를 API로 전송해야겠다. 그리고 '장바구니' 버튼을 누르면 '장바구니' 페이지로 리다이렉션 되도록 하고, '장바구니에 넣은 물건들' 정보를 API로 요청해서 보여주는 화면을 만들어야겠다. 

 

클라이언트 단에서는 사용자가 버튼을 눌렀을 때 '어떤 정보를 보내고 받을지' 고려해야 한다.

 

다시 말해서, 클라이언트 개발자는 '사용자에게 어떻게 보일지'와 함께, '사용자의 행동에 따라 어떤 API를 요청할지'를 고민하는 위치이다.

 

서버/백엔드 개발자의 생각

'장바구니에 넣을 물건'에 대한 정보가 API의 형태로 오면 이를 데이터베이스(DB)에 저장하도록 쿼리를 만들어야겠다. 그리고 '장바구니에 넣은 물건들' 정보 요청 API가 오면 데이터베이스(DB)에서 쿼리로 정보를 가져와서 약속한 API 응답 구조에 맞춰서 보내야겠다.

 

서버 단에서는 사용자가 아닌, 클라이언트와 데이터베이스(DB) 사이에서 '어떤 정보를 어떻게 전달하고 저장할지' 고려해야한다.

 

다시말해서, 서버 개발자는 '데이터를 어떻게 전달할지'와 함께, '데이터를 어떤 모습으로 전달할지'를 고민하는 위치이다.

 

 

 

---

그래서 클라이언트/프론트엔드란?

쉽게 말하면, 우리가 어떤 서비스를 사용할 때에 마주하는 웹, 앱, 게임 등을 뜻한다.

클라이언트는 고객과 서버 사이를 연결해주는 역할을 한다.

 

모든 서비스는 결국 고객이 서버의 데이터를 조회하고 수정하는 것이라고 생각하면 된다.

 

예를 들어, 채팅 서비스라고 한다면 고객이 서버에 채팅 메시지를 저장하고, 서버에 저장된 채팅 데이터를 조회하는 것이 채팅 서비스의 본질이다.

 

하지만, 그렇게 하기엔 사람들이 서버에 어떻게 정보를 저장하는지, 어떻게 조회하는지도 모른다.

 

그리고 안다면 더 문제가 생길 수 있는데, 모두가 서버에 직접 접속한다면 보안 등의 중대한 이슈가 발생할 수 있다.

 

클라이언트는 이렇게 고객이 서버의 정보를 저장하고 조회하는 작업을 간단하고 훨씬 쉽게 만들어주는 것이라고 생각하면 된다.

 

그 외의 다양한 작업(애니메이션, 프론트레벨 비즈니스로직) 등이 있을 수 있지만, 클라이언트의 본질은 결국 데이터의 조회와 저장이 얼마나 수월한지 라고 할 수 있을 것이다.

 

그리고 클라이언트는 주로 API로 서버와 소통하니, 이는 추후 API와 관련된 포스팅에서 추가할 수 있도록 하겠다.

 

 

그래서 서버/백엔드란?

서비스의 모든 데이터에 대해 저장/조회 등을 가능하게 하고, 이를 클라이언트가 쉽게 가져가도록 하는 서버와 데이터베이스를 뜻한다.

백엔드 개발자는 일반적으로 스크립트 서버와 데이터베이스를 모두 개발한다.

 

사실 서버와 백엔드라고 혼용하여 포스팅을 하고 있지만, 큰 의미적인 부분에서는 구분이 필요하다.

 

서버는 그냥 컴퓨터를 의미한다. 많은 사람들이 접속해서 이 데이터 줘라 저 데이터 줘라 하면 전달하는데에 특화된 컴퓨터라고 생각하면 된다.

 

서버 개발자는 이 컴퓨터 안에서 이 데이터 줘라 저 데이터 줘라 하는 모든 요청들에 대해 어떻게 반응할 지 결정하고, 이를 코드화 시키는 작업을 담당한다.

 

이를 편의상 코드(스크립트라고도 한다) 서버라고 해보자.

 

데이터 베이스도 여기에 저장한다면 좋겠지만(실제로 그렇게 하는 서비스도 있다), 일반적으로 개발자들은 코드 서버에 데이터베이스를 두고 싶어하지 않는다. (기술적인 이유가 있다)

 

그래서 일반적으로 컴퓨터를 두 개 두고서, 하나는 코드 서버로, 다른 하나는 데이터 베이스(DB) 서버로 두는 경우가 많다. (컴퓨터를 실제로 두 개를 쓰기보다는, 하나를 여러 개 처럼 쓸 수 있는 방법을 쓰는 편이다.)

 

코드 서버는 클라이언트에서 오는 API를 받아 데이터 베이스 서버에게 정보를 요청하는 등의 작업을 하는 서버이다.

 

그리고 나머지 데이터 베이스 서버는 모든 데이터가 들어있는 서버로, 코드 서버에서 요청을 보내면 해당 정보를 전송해주거나 새로 저장하는 등의 작업을 수행한다.

 

백엔드는 (일반적으로) 두 개의 서버를 모두 통칭하는 의미로써, 데이터를 주기 위해서 물밑에서 일하는 부분이라고 생각하면 된다.