Notice
Recent Posts
Recent Comments
Link
관리 메뉴

web sprit

웹개발을 위한 웹사이트 제작 아키텍처 본문

Front End Developer/웹 개발 아키텍처

웹개발을 위한 웹사이트 제작 아키텍처

커드만 2025. 8. 29. 19:09

우리가 웹사이트를 만들려면 프론트, 백앤드, 서버 등... 이런것들이 있어야 웹사이트를 만든다는
어느정도의 개념은 있습니다. 어떻게 보면 지금 설명하려는 전체적인 흐름에서 모든것을 설명할 수 없지만
어떻게 만들어지는가의 개념의 이해를 위해 필요한 내용들을 다루려 합니다.
저 또한 이 개념을 알기위해 정리하는 부분이라 이것에 대해 많은 지식을 가지신 분이라면 댓글로 알려주시면 수정하도록 하겠습니다.


1. 운영체제

데이터, 서버 등을 다루기 위해 일단 하드웨어가 필요합니다.
더 단순히 말하면 컴퓨터가 필요한 거겠죠.
우리가 윈도우를 설치하여 컴퓨터에 사용하듯 
웹개발을 위해 운영체제를 정하여 설치 하여야 합니다.

대표적으로 운영체제는

운영체제
Linux Windows Unix


Linux, Windows, Unix 등 하드웨어를 직접 관리하는 시스템 소프트웨어가 있어야 합니다.
현재는 리눅스와 Windows가 서버 시장의 대부분을 차지하고 있습니다.


2. 웹서버

클라이언트(브라우저) 요청을 받아 정적 콘텐츠(HTML, CSS, JS, 이미지 등)를 제공, 동적 요청은 애플리케이션 서버에 프록시 전달, SSL 처리, 로드밸런싱
웹서버는 HTTP(S) 프로토콜로 클라이언트와 통신하며, 동적 콘텐츠 요청 시 애플리케이션 서버나 프레임워크로 요청 전달.
대표 제품: Nginx, Apache, IIS(윈도우)

웹서버
Nginx Apache IIS(윈도우)

4. 애플리케이션 (Application Layer) - 프로그래밍 언어

역할: 실제 동작하는 비즈니스 로직과 서비스 기능(예: 로그인,게시판,결제 처리 등)
프로그래밍 언어: 위 런타임 환경에서 사용하는 Java, Python, JavaScript, C#, PHP 등 다양함
연결: 미들웨어에서 실행, 데이터베이스 및 외부 API와 연동해 실제 서비스 기능 제공.

 

4-1. 런타임/미들웨어 (Application Server / Runtime Environment) - 서버사이드(백엔드) 환경

웹서버가 전달한 동적 요청을 처리하여 비즈니스 로직 실행, 데이터베이스와 연동, API 제공, 트랜잭션 관리 등을 담당.
서버에서 실행되는 애플리케이션 코드가 돌아가는 실행 환경(런타임)과, 여러 애플리케이션과 시스템을 연결해주는 소프트웨어 계층(미들웨어)을 포함하는 개념입니다.

node.js, Python, Java, .NET, PHP

- 대표 기술 및 언어별 서버
Java: Tomcat, Jetty, JBoss, Spring Framework
Node.js (JavaScript 런타임): Express.js, Koa
Python: Django, Flask, FastAPI (서버는 uWSGI, Gunicorn 등으로 구동)
.NET: IIS + ASP.NET Core
PHP: Apache + PHP 모듈 또는 PHP-FPM

언어: Java, JavaScript, Python, C#, PHP 등 서버 사이드 프로그래밍 언어
연결: 웹서버가 HTTP 요청을 전달하면, 미들웨어(런타임)가 이를 해석 후 내부 로직 처리 후 응답 생성.


5. 데이터베이스
회원 정보, 게시글, 설정 값 등 사이트 데이터를 저장합니다.
소규모라면 MySQL, PostgreSQL, SQLite, MongoDB 같은 무료 DB도 충분합니다.


etc. 선택적으로 추가할 요소
캐시: 자주 요청되는 데이터를 임시 저장해 성능 향상(예: Redis).
스토리지/CDN: 이미지나 동영상 같은 큰 파일이 많으면 별도 저장소와 CDN 이용 추천.
도메인/SSL: 도메인 등록과 HTTPS 보안 인증서 적용 필수.


데이터 흐름 예시

사용자가 웹브라우저에서 로그인 요청

요청이 네트워크와 웹서버를 거쳐 애플리케이션 서버에 도착

애플리케이션 서버가 데이터베이스에 사용자 정보 조회

데이터베이스가 사용자 정보를 반환

서버가 로그인 성공 여부를 판단하고 응답 생성

응답이 웹서버→네트워크→클라이언트로 전달

클라이언트가 사용자에게 로그인 결과 표시

 

간단 아키텍처 예시
사용자 (웹 브라우저) → 웹서버(Nginx) → 애플리케이션 서버(Express.js) → 데이터베이스(MySQL)

Comments