Published on

[4] 기초 웹 입문 가이드: 웹 서비스의 기본 구조

Authors
  • avatar
    Name
    Gecko Baem
    Twitter

서론

만약 당신이 개발에 관심이 있다면, 프론트엔드백엔드, 그리고 데이터 베이스에 대하여 한번쯤 들어봤을 것이다. 우리가 사용하는 웹 사이트의 핵심은 이 세 가지 요소의 유기적인 협력이 이루어져 있다고 보면 된다.

이 글에서는 이와 관련한 웹 서비스의 기본 구조에 대하여 서술할 것이다.

프론트엔드?

우리는 웹 사이트에 접속하면, 사이트 마다 각기 다른 디자인상호작용들이 존재하게 된다.

Youtube는 영상을 보는 목적으로 접속하고, GitHub은 개발에 용이한 편의 기능을 제공 받기 위해 이용하는 것처럼 말이다.

이렇게 우리가 웹 사이트와 상호작용 하고, 눈으로 보는 부분을 프론트엔드(Front-end) 라고 한다.

이러한 프론트엔드를 중점적으로 다루는 프론트엔드 개발자는 위에 서술한 바와 같이, 클라이언트가 웹 사이트를 사용함에 적절한 경험을 할 수 있도록, 주로 UI 개발을 담당하게 된다.

그렇다고 프론트엔드 개발자를 디자이너라고 생각하면 안된다.

물론 디자인을 맡는 경우도 있지만, 말 그대로 상호작용 구현 개발을 위해 존재하고, 디자인을 맡는 분야는 UI/UX 디자이너라고 따로 분리해서 지칭한다.

백엔드?

우리가 웹사이트를 이용하며 눈으로 보고, 상호작용을 하는 부분은 위에서 프론트엔드라고 했다면, 백엔드는 그 반대이다.

백엔드(Back-end) 에서는 서버, 데이터베이스, API 등 직접 안보이는 부분을 의미한다.

위에서 프론트엔드의 사례로 Youtube에서의 영상 시청이라고 했다면, 백엔드는 그 영상을 호출하고, 원하는 영상을 찾도록 검색 기능을 지원하는 것 이라고 보면 된다.

이러한 백엔드를 담당하는 백엔드 개발자는, 데이터 관리, 로직 처리, 시스템 연동 등 웹 서비스의 핵심 기능 개발을 맡게 된다.

프론트엔드 - 백엔드

지금까지 말한 정보를 바탕으로 생각하게 된다면, 프론트엔드백엔드는 서로 상부상조하는 관계인 것이다.

그러면 서로 간 협력이 어떻게 이루어져 있는지 대략적인 웹 서비스 구조를 본다면

image

위와 같은 구조로 이루어져 있다.

순서대로 설명하자면,

  1. 클라이언트 > 웹 서버 - 페이지 요청
  2. 웹 서버 > 어플리케이션 서버 - 필요한 기능 요청
  3. 어플리케이션 서버 > DB - 데이터 처리 시, 요청
  4. 서버 > 클라이언트 - 응답 생성
  5. 클라이언트 - 웹 페이지 로딩 성공

의 순서로 진행된다.

"왜 굳이 서버를 나누는거지? 그냥 다 합치면 안되나?"

라고 생각할 수도 있다. 하지만 서버를 분할하게 된다면, 성능 향상, 확장성, 보안 강화, 유지 보수 등, 이점이 많다.

따라서 대부분의 웹 서비스는 위와 같은 구조로 이루어져 있다.

결론

웹 개발은 프론트엔드, 백엔드 두 가지 요소의 조화를 통해 이루어지게 된다.

각 분야는 서로 다른 기술 스택과 역할을 요구 하지만, 웹 서비스 라는 하나의 목표를 향해 나아간다.

이 두 분야를 섭렵하여 최종적으로 풀스텍 개발자 업적을 달성하길 바란다.

프론트엔드백엔드에 대한, 보다 자세한 내용과 관련 기술 스택은, 다른 글에서 자주 다룰 예정이다.