현대 웹 시스템 구조 및 아키텍처

홍진우·2022년 3월 21일
1

Back-End

목록 보기
1/10

본격적인 백엔드 공부와 API 개발에 앞서, 웹 시스템들이 시스템 구조적으로 어떻게 발전해왔고, 현대 웹 시스템 구조와 아키텍처는 어떻게 형성되었는가에 대해 알아보고자 한다.

목차

  • 웹 시스템들의 발전 역사
  • 현대 웹 시스템들의 구조 및 아키텍처
  • 현대의 개발팀의 구조

1) 웹 시스템들의 발전 역사

- 초기의 웹 시스템
초기에는 정말 단순히 문서(text)를 웹 브라우저를 통해 보여주는 정적인 페이지만 보여주는 구조

이후 단순했던 웹 서비스들이 복잡해지기 시작하면서 사용자 인터랙션(user interaction)이 중요해졌고, 웹 브라우저에서 실행이 가능한 프로그래밍 언어인 자바스크립트의 역할이 커지기 시작했다. 따라서, 단순히 HTML, CSS를 통해 정적인 문서를 보여주는 것에 넘어서, 동적인 기능들이 제공되기 시작했다.

AJAX

자바스크립트를 통해 사용자와 동적인 상호작용 기능을 구현하는 기술
웹 서버가 HTML 뿐만 아니라, 동적인 기능을 구현하는 자바스크립트 코드까지 같이 웹 브라우저에 전송
-> 웹 브라우저는 서버에서 전달받은 자바스크립트 코드를 실행해서 사용자에게 제공
-> 따라서, 전체 페이지를 로드하지 않아도 사용자의 인풋들을 동적으로 처리하고 새로운 데이터들을 제공할 수 있게 됨.

하지만, 여전히 현재 통용되는 API의 개념이 널리 사용되지는 않았고, 여전히 동일한 서버에서 HTML, 자바스크립트, 데이터(XML, 데이터를 전송하기 위한 markup 언어)가 전부 웹 브라우저 등의 클라이언트러 전송되었음.

- 백엔드와 프론트엔드 구별의 시작

동적인 서비스가 중요시 되고, 많은 웹서비스들이 발전하면서 자바스크립트의 영향력이 더욱 커짐
-> SPA(Single Page Application) 방식의 프론트 엔드 개발이 인기를 얻게 됨

SPA

단일 페이지로 모든 웹사이트/서비스의 기능을 구현하는 것.
페이지는 단순하게 기본 HTML 구조에 메인 자바스크립트 파일이 포함되어, 페이지 및 기능들을 동적으로 구현

이렇게 단일 페이지의 자바스크립트를 통해 모든 페이지를 동적으로 구현하게 되다보니, 자연스럽게 웹 브라우저가 필요한 서버와의 통신은 데이터 전송이나 생성, 수정에 관한 것이 대부분이 되었다.
즉, 사이트의 페이지를 렌더링하는데 필요한 자바스크립트 코드는 최초의 통신에서 모두 한 번에 받으므로 그 다음부터는 서버와 데이터만 주고 받으면 된다!!!

-> 이러한 구조 속에서 자연스럽게 프론트엔드 서버와 백엔드 서버가 나뉘게 되었고,

  • 프론트 엔드 서버는 페이지 렌더링에 필요한 HTML과 자바스크립트 파일을 전송하는 역할 담당
  • 백엔드 서버는 페이지에서 필요한 데이터 생성 및 전송을 담당하는 역할을 하게 되었다.

이를 통해
FE 엔지니어는 주로 시스템의 UI, UX 부분을 구현하는 역할을 담당하고,
BE 엔지니어는 프론트엔드 시스템과 데이터를 실시간으로 주고받을수 있는 기능을 구현하는 역할을 담당한다. 동시에 많은 수의 요청을 장애없이 실시간으로, 그리고 최대한 빠른 속도로 처리할 수 있는 시스템을 구현하는 것이 백엔드 개발자의 역할!

2) 현대 웹 시스템들의 구조 및 아키텍처


이제는 웹 시스템의 규모가 더욱더 커지고, 도잇에 처리해야하는 요청의 수와 데이터의 규모가 증가하면서, API 시스템들이 동시에 처리해야하는 문제들이 방대하고, 복잡해졌기 때문에 MSA(Micro Service Architecture) 같은 새로운 아키텍처 개념이 발전하게 됨으로써 API 서버들이 훨씬 더 세분화되며 규모가 커지게 되었다.

현대의 백엔드 개발자의 영역은 일반적인 백엔드 API 시스템 개발부터 Data Pipleline 시스템, Machine learning 시스템, Big Data 분석 시스템 등 비실시간 대규모 데이터 수집 및 분석 시스템까지 넓어지고 있다.

3) 현대의 개발팀의 구조

개발팀의 구성원들은 다음과 같다! 사실 그렇게 어려운 내용은 아니지만, 프로젝트 진행하면서 서로의 역할을 규정하고, 협업하는데 중요하다고 생각하여 정리해보고자 한다.

일반적으로 개발팀의 구성원들은 다음과 같다고 한다.

  • 기획자
    Product Manager : 개발하고자 하는 서비스를 정의하고 기획하는 역할 담당

  • 디자이너
    UI, UX를 구현하는 역할

  • 프론트 엔드 개발자
    HTML, CSS, JavaScript가 주요 기술 스택

  • 벡엔드 개발자
    API 시스템 개발

  • DevOps
    개발자가 시스템 개발 뿐만 아니라, 시스템 운영까지 담당하는 일종의 직군이라기 보단, 개발 분야에서 나타나는 문화나 추세를 일컫는 용어
    AWS 등의 클라우드 서비스가 발달함에 따라 서버 구축 및 운영 등의 시스템 인프라 스트럭쳐 구축과 관리, 빌드, 테스트, 배포 등의 과정을 자동화하여 전체적인 개발 사이클을 효율적으로 더 빨리 진행될 수 있는 개발환경을 구축하는 역할

  • 풀스택 개발자
    프론트, 백 둘다 할줄 아는 사람~

  • Sys Ops
    System Infrastructure의 구현과 관리 및 운영을 담당하는 실제 하드웨어를 다룰 수 있는 직군. 이제는 수요가 당연히 줄고 있겠지?

  • 테스터
    크게 2가지 역할로 구분
    1) 일반적으로 직접 손으로 테스트하는 메뉴얼 테스팅을 담당하는 QA(Quality Assurance)
    2) 테스트 자동화 시스템을 구현하는 테스터

profile
Yonsei Univ. Sports Industry studies/ Computer Science / Applied Statistics

0개의 댓글