[프론트엔드] 웹 개발에서 말하는 "서버", 대체 어떤 서버를 말하는 걸까?

 

 

웹 개발을 하다 보면 "서버"라는 단어가 정말 많이 나옵니다.

• 서버사이드 렌더링
• 백엔드 서버
• 웹 서버
• DB 서버
• 프록시 서버
• 리버스 프록시
• API 서버

같은 문장에서 "서버"라는 단어가 중복되며 쓰이기 때문에, 개발을 처음 접하거나 프론트엔드 중심으로 프로젝트를 진행해온 분들은 ‘서버’가 도대체 뭘 의미하는 건지 헷갈릴 수밖에 없습니다.

오늘은 막 취업했을 당시, 실제로 많이 헷갈리고 이해하기 쉽지 않았던 '서버'라는 키워드에 대해 이야기해볼까 합니다.

이 글에서는 실전 웹 서비스에서 등장하는 서버의 종류들을 개발자 관점에서 아주 명확하게 구분하고 설명해드릴게요.

많은 초보 개발자 및 비개발자 분들에게 도움이 되길 바랍니다.

 

---

 

서버란?

 

기본적으로 "서버"란, 클라이언트(사용자)의 요청을 받고 응답을 처리해주는 프로그램 또는 컴퓨터를 의미합니다.

조금 더 쉽게 말하면, 우리가 집에서 쓰는 데스크탑이나 노트북도 조건만 맞는다면 서버 역할을 할 수 있어요.
즉, 특정 기능을 수행하도록 설정하거나 프로그램을 설치하면, 그 장비는 특정한 '서버'가 되는 것이죠.

예를 들어볼까요? 흔히들 온라인 게임을 하기 위해서 

그런데 중요한 건, "무슨 역할을 하느냐"에 따라 서버의 종류가 나뉘고, 실제로는 같은 물리 서버에서 여러 종류의 서버 역할이 동시에 실행될 수도 있다는 점이에요.

 

 

예를 들어볼까요?

친구들과 함께 영화를 보기 위해 내 컴퓨터에 있는 영상을 공유하고 싶다고 해볼게요.
이럴 때 ‘공유 폴더’를 만들어서, 같은 인터넷을 쓰는 친구들이 내 컴퓨터에 접속해 영상을 볼 수 있게 설정할 수 있어요.

이 경우, 내 컴퓨터는 친구들의 요청(영상 재생 요청)에 응답해주는 역할을 하게 되죠.
바로 이 순간, 내 컴퓨터는 ‘파일 서버’ 역할을 하게 된 거예요.

이처럼 특정한 기능이나 역할을 수행하도록 설정된 컴퓨터는 ‘서버’라고 부를 수 있어요.

 

좀 더 개발자스러운 이야기를 해보자면,

만약 내 컴퓨터에 웹 서버 프로그램(예: Apache, Nginx)을 설치해서 외부에서 접속할 수 있도록 설정한다면,
그 순간 내 컴퓨터는 ‘웹 서버’ 역할을 하게 됩니다.

 

그리고 하나 더 재미있는 사실은, 한 대의 컴퓨터가 동시에 여러 역할을 할 수도 있다는 점이에요.
예를 들어, 영화도 공유하고, 사진도 보여주고, 문서도 열 수 있도록 설정한다면,
이 컴퓨터는 동시에 ‘영상 서버’, ‘사진 서버’, ‘문서 서버’ 역할을 하는 셈이죠.

 

이처럼 ‘서버’는 그 역할에 따라 다양하게 분류되고, 구성 방식도 유연하게 조정할 수 있는 개념입니다.

 

그럼 이어서 실제로 우리가 쉽게 접할 수 있는 환경에는 어떤 서버들이 존재하는지에 대해 자세히 알아보도록 합시다.

 

---

우리 주변에는 어떤 서버들이 존재할까?

아마 일반인들이 쉽게 접할 수 있는 서버는 게임 서버, 웹 서버 정도의 개념일거에요.

예를 들어, 온라인 게임을 할 때 접속하는 서버, 우리가 매일 사용하는 웹사이트를 띄우는 서버들이죠.

하지만 실제 개발자로 일하게 되면, 훨씬 더 다양한 종류의 서버를 마주하게 됩니다.

그러다보니 지금부터는 IT에 좀 더 밀접한 용어들을 사용해볼까 합니다.

 

실제 웹 개발자로서 실무에 들어가게 되면 당장 접할 수 있는 서버의 종류는

• 프론트엔드 개발 서버 (browser live server, react server, vite server 등)
• API 서버
• 데이터베이스 서버
• 프록시 서버

저는 처음 개발을 배울 때 단순히 “프론트 서버”, “백엔드 서버” 정도로만 나누어 생각했어요.
그런데 이렇게 뭉뚱그려 말하면, 문제가 생겼을 때 정확하게 소통하기가 어려워요.

예를 들어, 누군가 "프론트 서버가 안 돼요!" 라고 하면,
그게 브라우저에서 실행 중인 Vite 서버가 꺼진 건지,
아니면 프론트 화면은 열리는데 API 요청이 안 되는 건지…
전혀 감을 잡기 힘들죠.

그래서 정확한 커뮤니케이션을 위해서는 ‘서버의 역할’을 구분해서 말하는 습관이 중요합니다.

 

각 항목별로 자세히 알아볼까요?

 

프론트엔드 개발 서버

• 우리가 개발 중일 때 사용하는 서버입니다.
• 로컬 환경에서 코드를 수정하면, 바로 브라우저에 반영되도록 도와줘요.
• 빠른 개발을 위한 핫 리로딩, HMR(Hot Module Replacement) 기능이 주 목적입니다.
• 예시: Vite, React Scripts, Next.js dev, Live Server

 

웹 서버 (정적 웹 서버 / 배포 서버)

• 완성된 웹사이트를 사용자들이 접속할 수 있도록 인터넷에 공개된 서버입니다.
• HTML, CSS, JS 같은 정적 파일을 요청에 따라 클라이언트에게 전달하는 역할을 합니다.
• 보통 CDN(Content Delivery Network)과 함께 구성되기도 해요.
• 예시: Nginx, Apache, Netlify, Vercel, Cloudflare Pages

 

API 서버

• 사용자 요청(회원가입, 로그인, 게시물 조회 등)을 처리하고, 필요한 데이터를 응답해주는 서버예요.
• 백엔드에서 주로 작성하며, 클라이언트(프론트엔드)와 실제 데이터간의 중간다리 역할을 해줍니다.
• 프론트엔드가 "이 데이터 좀 줘!", "이걸 저장해줘!"라고 요청하면 그걸 대신 처리해주는 백엔드의 핵심이라고 볼 수 있습니다.
• 보통 백엔드 개발자가 Node.js, Spring, Django 같은 프레임워크로 구성합니다.

 

데이터베이스 서버

• 실제 데이터를 저장하고 꺼내주는 역할을 합니다.
• 로그인 정보, 게시글, 댓글 등 모든 '실제 값'은 여기에 저장돼요.
• API 서버에서 요청이 들어오면, 데이터베이스 서버가 이를 처리해서 전달하는 구조죠.
• 데이터베이스의 종류나 구조는 다소 복잡할 수 있어서, 이 내용은 별도의 글에서 더 자세히 다뤄보겠습니다.
• 예시: MySQL, PostgreSQL, MongoDB 등

 

프록시 서버

• 프록시(Proxy)라는 말 그대로, ‘대리인’ 역할을 하는 서버예요.
• 중간에서 클라이언트의 요청을 대신 전달하거나, 때로는 요청을 가로채서 처리하기도 합니다.
• 개발 중에는 보통 CORS 문제 우회나 로컬에서 API 서버 연결 등에 자주 사용됩니다.
• 프록시에도 다양한 종류와 전략이 존재하기 때문에, 이 내용 역시 다른 글에서 더 깊게 다뤄볼 예정입니다.
• 예시: Vite의 proxy 설정, Nginx 리버스 프록시 등

 

 

---

이 서버들이 동작하는 흐름은 어떻게 될까?

실무에 들어가면 접할 서버의 종류들에 대해 알아봤으니, 실제 흐름을 통해서 좀 더 이해도를 높여보도록 할까요?

우리가 만들어 배포한 사이트에 유저가 로그인하는 시나리오를 예시로 서버의 동작 흐름을 간단히 설명해보겠습니다.

당연한 얘기지만, 이미 배포를 했기 때문에 이 흐름에서는 개발 서버는 존재하지 않습니다.

 

1. 사용자가 브라우저에서 로그인 버튼을 클릭합니다.
   • 사용자가 ID와 비밀번호를 입력하고 "로그인" 버튼을 누릅니다.
   • 👉 이때, **프론트엔드 개발 서버 (또는 웹 서버)**에서 동작 중인 UI가 로그인 요청을 보냅니다.
2. 프론트엔드는 API 서버에 로그인 요청을 보냅니다.
   • HTTP 요청 (POST /login 등)을 API 서버로 전송합니다.
   • 이 요청에는 사용자가 입력한 ID와 비밀번호가 담겨 있습니다.
3. API 서버는 데이터베이스 서버에 사용자 정보를 확인하라고 요청합니다.
   • API 서버는 "이 사용자 정보가 맞는지 확인해줘!"라고 **DB 서버에 질의(Query)**를 보냅니다.
4. 데이터베이스 서버가 결과를 API 서버에 전달합니다.
   • ID와 비밀번호가 일치하는지 확인하고, 그 결과(성공/실패)를 API 서버에 응답합니다.
5. API 서버가 결과를 프론트엔드로 응답합니다.
   • 로그인 성공 여부, 사용자 정보, 토큰 등이 포함되어 응답됩니다.
6. 프론트는 받은 응답에 따라 화면을 업데이트합니다.
   • 성공 시: 메인 페이지로 이동하거나 사용자 이름을 표시합니다.
   • 실패 시: 에러 메시지를 보여줍니다.

 

사용자의 인터렉션은 이런 서버의 흐름을 갖게됩니다!

이런 의문을 가질 때도 있었는데...

서버라는 개념은 직접 눈으로 보거나 만질 수 없다 보니, 처음에는 어떤 역할을 하는지 막연하게 느껴질 수 있어요.

 

예를 들어,

"서버는 요청을 받아주는 컴퓨터다"라는 말을 듣고 나서, 내 노트북도 인터넷에 연결만 하면 누군가에게 서버가 될 수 있는 건가? 하고 생각했던 적이 있었어요.

물론 물리적으로는 가능하지만, 실제로는 특정한 기능을 수행하도록 설정된 프로그램이나 환경이 갖춰져 있어야만 비로소 ‘서버 역할’을 할 수 있다는 걸 나중에 알게 됐죠.

 

또 한 번은 React나 Vite 같은 프레임워크에서 npm run dev 명령어를 실행했을 때 “개발 서버가 실행 중입니다”라는 메시지를 보고, 나도 이제 서버 개발을 하는 건가? 하고 착각했던 기억도 있어요.

하지만 실제로 그건 사용자 요청을 처리하는 진짜 서버가 아니라, 화면을 빠르게 확인하기 위한 임시 개발용 서버라는 걸 알고 나서야, 서버도 그 종류와 역할에 따라 완전히 다른 존재라는 걸 조금씩 이해하게 됐어요.

 

지금 보면 참 부끄러우면서도 귀여웠던 경험인 것 같습니다ㅎㅎ;;

 

 

 

입문자가 알면 간단한 서버 지식!

서버 개념을 제대로 이해하려면 단순히 ‘컴퓨터’로 받아들이기보다는, 클라이언트의 요청을 받아 어떤 역할을 수행하는 주체로 바라보는 것이 중요해요. 그리고 이 역할은 상황에 따라 달라질 수 있다는 점도 함께 기억해두면 좋아요. 같은 물리적인 서버라도, 거기서 어떤 프로그램이 실행되느냐에 따라 웹 서버가 될 수도, API 서버나 데이터베이스 서버가 될 수도 있으니까요.

 

 

또 어떤 다양한 서버들이 존재할까?

이미 살펴본 것처럼, 서버에는 정말 다양한 종류가 존재합니다. 어떤 역할을 수행하느냐에 따라, 그게 곧 '그 역할의 서버'가 되는 것이지요.

그렇다면 우리가 지금까지 살펴본 서버들 외에 또 어떤 서버들이 있을까요?

예를 들어,

로그인과 권한 확인을 담당하는 인증 서버,

자주 요청되는 데이터를 미리 저장해 빠르게 응답하는 캐시 서버,

전 세계 어디서든 정적 자산을 빠르게 전달해주는 CDN 서버 같은 것도 있어요.

 

이들은 대부분 프론트엔드 개발자가 직접 다루지는 않지만, 전체 시스템을 이해하는 데 꼭 필요한 개념들이죠.

 

 

마무으리

지금까지 프론트엔드 개발자가 실무에서 마주치는 다양한 서버들과 그 흐름, 그리고 처음에 헷갈리기 쉬운 개념들까지 함께 정리해봤어요. 처음엔 막연하게 느껴질 수 있지만, 이렇게 하나씩 구조를 잡아가다 보면 문제 상황을 더 빠르게 파악하고, 정확하게 소통할 수 있는 힘이 생깁니다.

서버 개념에 익숙해졌다면, 다음엔 클라이언트와 서버 간 통신 방식이나, 서버리스(Serverless)에 대해서도 살펴보면 좋아요! 다음 글에서 다뤄볼게요ㅎㅎ

이 글이 서버 개념을 정리하는 데 조금이나마 도움이 되었길 바랍니다 :)