Client Server Architecture

Client-Server Architecture

4. 250 자 개요

Client‑Server Architecture 는 네트워크 상에서 클라이언트 (Client) 가 요청을 보내고, 서버 (Server) 가 처리하여 응답하는 전통적 분산 시스템 모델이다. 클라이언트는 UI/로컬 상태 관리를 담당하며, 서버는 데이터 저장, 비즈니스 로직, 보안, 상태 관리 등 중앙 집약적 역할을 수행한다. 이 구조로 중앙 집중 관리를 통한 보안, 확장성, Fault Resistance 를 확보할 수 있으며, HTTP 웹 서비스, 데이터베이스 서버, 이메일 시스템 등 다양한 현대 시스템에서 활용된다.

배경

클라이언트 - 서버 아키텍처는 1960 년대 메인프레임 컴퓨터 시대에 시작되어, 다음과 같은 발전 과정을 거쳤다:

1. 메인프레임 시대 (1960-1980 년대): 중앙 집중식 처리 방식
2. PC 네트워크 시대 (1980-1990 년대): 분산 컴퓨팅의 등장
3. 웹 시대 (1990 년대 - 현재): HTTP 기반 웹 애플리케이션의 보편화
4. 클라우드 시대 (2000 년대 - 현재): 마이크로서비스 및 서버리스 아키텍처로의 진화

목적 및 필요성

주요 목적:

• 관심사 분리: 사용자 인터페이스와 비즈니스 로직의 분리
• 자원 공유: 중앙 집중식 자원 관리 및 공유
• 확장성: 시스템 구성 요소의 독립적 확장
• 유지보수성: 모듈화를 통한 개발 및 유지보수 효율성 증대

필요성:

• 대규모 시스템에서의 복잡성 관리
• 네트워크 환경에서의 효율적인 자원 활용
• 다중 사용자 환경에서의 동시성 처리
• 플랫폼 독립성 및 상호 운용성 확보

핵심 개념

클라이언트 - 서버 아키텍처는 분산 컴퓨팅의 핵심 개념으로, 다음과 같은 요소들로 구성된다:

• 클라이언트 (Client): 사용자 요청을 생성하고 결과를 표시하는 역할을 담당하는 시스템 또는 애플리케이션.
• 서버 (Server): 클라이언트로부터 요청을 받아 데이터 처리, 저장, 응답을 수행하는 중앙 시스템.
• 요청/응답 (Request/Response): 클라이언트가 서버에 요청을 보내고, 서버가 처리 결과를 응답하는 상호작용 방식.
• 네트워크 통신 (Network Communication): 클라이언트와 서버 간의 데이터 전송

실무 구현을 위한 핵심 요소

프로토콜 및 통신 측면:

• HTTP/HTTPS, TCP/IP, WebSocket 등 통신 프로토콜 선택
• RESTful API, GraphQL 등 API 설계 방식
• 데이터 직렬화 (JSON, XML, Protocol Buffers)

보안 측면:

• 인증 (Authentication) 및 권한 부여 (Authorization)
• 데이터 암호화 및 전송 보안
• 세션 관리 및 토큰 기반 인증

성능 및 확장성 측면:

• 로드 밸런싱 (Load Balancing)
• 캐싱 전략 (Caching Strategy)
• 연결 풀링 (Connection Pooling)

주요 기능 및 역할

클라이언트 역할:

• 사용자 인터페이스 제공
• 사용자 입력 처리 및 검증
• 서버와의 통신 관리
• 로컬 데이터 캐싱

서버 역할:

• 비즈니스 로직 처리
• 데이터베이스 접근 및 관리
• 클라이언트 요청 처리
• 보안 및 인증 관리

특징

핵심 특징

1. 분산성: 클라이언트와 서버가 물리적으로 분리
2. 비대칭성: 클라이언트와 서버의 역할이 명확히 구분
3. 확장성: 각 계층의 독립적 확장 가능
4. 투명성: 클라이언트는 서버의 내부 구현을 알 필요 없음

통신 특징

• 요청 - 응답 기반 통신
• 상태 비저장 (Stateless) 또는 상태 저장 (Stateful) 선택 가능
• 동기/비동기 통신 지원

핵심 원칙

1. 관심사 분리 원칙 (Separation of Concerns)

   • 프레젠테이션 로직과 비즈니스 로직 분리
   • 데이터 접근 로직의 독립성 유지
   • 각 계층의 책임 명확화

2. 단일 책임 원칙 (Single Responsibility Principle)

   • 클라이언트는 사용자 인터페이스에 집중
   • 서버는 비즈니스 로직 처리에 집중

3. 느슨한 결합 원칙 (Loose Coupling)

   • 인터페이스를 통한 통신
   • 구현 세부사항 숨김
   • 독립적인 배포 및 확장

작동 원리 및 방식

기본 작동 원리

sequenceDiagram
    participant Client as 클라이언트
    participant Server as 서버
    participant DB as 데이터베이스
    
    Client->>Server: 1. 서비스 요청
    Server->>DB: 2. 데이터 조회/수정
    DB-->>Server: 3. 결과 반환
    Server-->>Client: 4. 응답 전송
    Client->>Client: 5. 결과 처리 및 표시

1. 연결 설정: 클라이언트가 서버에 연결 요청
2. 요청 전송: 클라이언트가 서비스 요청 메시지 전송
3. 요청 처리: 서버가 요청을 분석하고 비즈니스 로직 실행
4. 응답 생성: 서버가 처리 결과를 응답 메시지로 생성
5. 응답 전송: 서버가 클라이언트에게 응답 전송
6. 결과 처리: 클라이언트가 응답을 받아 처리 및 표시

구조 및 아키텍처

graph TB
    subgraph "클라이언트 계층"
        UI[사용자 인터페이스]
        CL[클라이언트 로직]
        CC[통신 컴포넌트]
    end
    
    subgraph "네트워크 계층"
        NET[네트워크 프로토콜]
    end
    
    subgraph "서버 계층"
        SC[서버 통신]
        BL[비즈니스 로직]
        DAL[데이터 접근 계층]
    end
    
    subgraph "데이터 계층"
        DB[(데이터베이스)]
        FS[파일 시스템]
    end
    
    UI --> CL
    CL --> CC
    CC --> NET
    NET --> SC
    SC --> BL
    BL --> DAL
    DAL --> DB
    DAL --> FS

구성요소

구현 기법

Client-Server Architecture 구현 기법은 단순한 요청/응답을 넘어서, 통신 방식, 인증/보안, API 설계, 확장성, 성능 최적화, 실시간 처리까지 다양한 요소를 고려하여 설계되고, 프레임워크 선택과 운영 전략에 따라 크게 달라진다.

장점

단점과 문제점 그리고 해결방안

단점

문제점

도전 과제

분류 기준에 따른 종류 및 유형

실무 사용 예시

활용 사례

사례 1: 웹 기반 쇼핑몰 시스템

시스템 구성: 웹 브라우저 (클라이언트), 웹 서버 (서버), 데이터베이스

graph TD
    User(사용자) --> Browser(웹 브라우저)
    Browser -->|HTTP 요청| WebServer(웹 서버)
    WebServer -->|DB 질의| DB(데이터베이스)
    DB -->|결과| WebServer
    WebServer -->|HTTP 응답| Browser

워크플로우: 사용자가 상품 검색 → 클라이언트에서 서버로 요청 → 서버가 데이터베이스에서 정보 조회 후 응답 → 클라이언트에 결과 표시

역할: 클라이언트는 UI/UX 제공, 서버는 데이터 관리 및 비즈니스 로직 처리

차이점: 아키텍처 미적용 시 모든 처리가 단일 시스템에 집중되어 확장성, 유지보수성, 보안성 저하

사례 2: 전자상거래 플랫폼 사례

시스템 구성:

• 클라이언트: React 웹 애플리케이션, 모바일 앱
• 서버: Node.js Express 서버, 마이크로서비스 아키텍처
• 데이터베이스: MongoDB (상품 정보), Redis (세션, 캐시)
• 인프라: AWS EC2, ELB, CloudFront

시스템 구성 다이어그램:

graph TB
    subgraph "클라이언트 계층"
        WEB[웹 애플리케이션]
        MOBILE[모바일 앱]
    end
    
    subgraph "로드 밸런서"
        LB[ELB]
    end
    
    subgraph "애플리케이션 서버"
        API1[API 서버 1]
        API2[API 서버 2]
        API3[API 서버 3]
    end
    
    subgraph "데이터베이스"
        MONGO[(MongoDB)]
        REDIS[(Redis)]
    end
    
    WEB --> LB
    MOBILE --> LB
    LB --> API1
    LB --> API2
    LB --> API3
    API1 --> MONGO
    API2 --> MONGO
    API3 --> MONGO
    API1 --> REDIS
    API2 --> REDIS
    API3 --> REDIS

Workflow:

1. 사용자가 웹/모바일 앱에서 상품 검색
2. 클라이언트가 API 서버에 검색 요청
3. 로드 밸런서가 요청을 적절한 서버로 분배
4. API 서버가 MongoDB 에서 상품 정보 조회
5. 결과를 Redis 에 캐싱하여 성능 향상
6. 클라이언트에게 검색 결과 응답

클라이언트 - 서버 아키텍처의 역할:

• 사용자 인터페이스와 비즈니스 로직 분리
• 다중 클라이언트 지원 (웹, 모바일)
• 확장 가능한 서버 구성
• 중앙 집중식 데이터 관리

아키텍처 유무에 따른 차이점:

• 적용 시: 각 계층의 독립적 개발, 확장 가능, 유지보수 용이
• 미적용 시: 모놀리틱 구조, 확장 제약, 유지보수 어려움

구현 예시:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// 클라이언트 측 구현 (React)
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ProductList = () => {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        // 서버에서 상품 목록 요청
        const fetchProducts = async () => {
            try {
                setLoading(true);
                // API 서버로 HTTP 요청 전송
                const response = await axios.get('/api/products');
                setProducts(response.data);
            } catch (err) {
                // 에러 처리
                setError('상품 정보를 불러오는데 실패했습니다.');
                console.error('API 요청 실패:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchProducts();
    }, []);

    if (loading) return <div>로딩 중…</div>;
    if (error) return <div>에러: {error}</div>;

    return (
        <div>
            <h2>상품 목록</h2>
            {products.map(product => (
                <div key={product.id}>
                    <h3>{product.name}</h3>
                    <p>가격: {product.price}원</p>
                    <p>{product.description}</p>
                </div>
            ))}
        </div>
    );
};

export default ProductList;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

// 서버 측 구현 (Node.js Express)
const express = require('express');
const mongoose = require('mongoose');
const redis = require('redis');

const app = express();
const redisClient = redis.createClient();

// 상품 스키마 정의
const productSchema = new mongoose.Schema({
    name: String,
    price: Number,
    description: String,
    category: String
});

const Product = mongoose.model('Product', productSchema);

// 상품 목록 조회 API
app.get('/api/products', async (req, res) => {
    try {
        const cacheKey = 'products:all';
        
        // Redis 캐시에서 데이터 확인
        const cachedProducts = await redisClient.get(cacheKey);
        if (cachedProducts) {
            console.log('캐시에서 데이터 반환');
            return res.json(JSON.parse(cachedProducts));
        }

        // MongoDB에서 상품 정보 조회
        const products = await Product.find({});
        
        // 결과를 Redis에 캐싱 (10분 TTL)
        await redisClient.setex(cacheKey, 600, JSON.stringify(products));
        
        // 클라이언트에게 응답 전송
        res.json(products);
    } catch (error) {
        console.error('상품 조회 실패:', error);
        res.status(500).json({ error: '서버 오류가 발생했습니다.' });
    }
});

// 새 상품 추가 API
app.post('/api/products', async (req, res) => {
    try {
        const { name, price, description, category } = req.body;
        
        // 데이터 유효성 검증
        if (!name || !price) {
            return res.status(400).json({ error: '상품명과 가격은 필수입니다.' });
        }

        // 새 상품 생성
        const newProduct = new Product({
            name,
            price,
            description,
            category
        });

        // 데이터베이스에 저장
        await newProduct.save();
        
        // 캐시 무효화
        await redisClient.del('products:all');
        
        res.status(201).json(newProduct);
    } catch (error) {
        console.error('상품 추가 실패:', error);
        res.status(500).json({ error: '서버 오류가 발생했습니다.' });
    }
});

// 서버 시작
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`서버가 포트 ${PORT}에서 실행 중입니다.`);
});

Express.js + Redis + NGINX 기반 Client-Server Architecture

구성 요소:

1
2
3
4
5
6
7

Client
   ↓
[ NGINX ]
   ↓
[ Express.js API Server ]
   ↙           ↘
[ Redis ]   [ PostgreSQL ]

핵심 구성 및 구현

NGINX (Reverse Proxy + Load Balancer)

• 특징

  • Express 인스턴스에 트래픽 라운드로빈 방식으로 분산
  • WebSocket 프록시도 설정 가능

• nginx.conf 예시:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  http { upstream app_servers { server 127.0.0.1:3000; server 127.0.0.1:3001; } server { listen 80; location / { proxy_pass http://app_servers; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } } }

Express.js 서버 (RESTful API):

• 특징

  • RESTful API
  • Redis 를 통한 세션 관리
  • 확장 가능한 Node 기반 서버

• app.js 예시:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

  const express = require('express'); const session = require('express-session'); const RedisStore = require('connect-redis')(session); const redis = require('redis'); const cors = require('cors'); const app = express(); const redisClient = redis.createClient(); app.use(cors()); app.use(express.json()); // Redis 세션 설정 app.use(session({ store: new RedisStore({ client: redisClient }), secret: 'super-secret-key', resave: false, saveUninitialized: false })); // API 라우팅 app.get('/api/user', (req, res) => { // 예시 데이터 응답 res.json({ user: 'Alice', loggedIn: !!req.session.user }); }); app.post('/api/login', (req, res) => { const { username } = req.body; req.session.user = username; res.json({ message: 'Logged in' }); }); app.listen(process.env.PORT || 3000, () => { console.log(`Server running on port ${process.env.PORT || 3000}`); });

Redis (세션 + 캐시):

• 주요 역할:
  • 세션 스토리지 (connect-redis)
  • 캐시 계층 (예: API 결과 캐싱, 속도 향상)

예: API 캐시 미들웨어

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

const cacheMiddleware = (req, res, next) => {
  const key = `__data__${req.originalUrl}`;
  redisClient.get(key, (err, data) => {
    if (data != null) {
      return res.json(JSON.parse(data));
    } else {
      res.sendResponse = res.json;
      res.json = (body) => {
        redisClient.setex(key, 3600, JSON.stringify(body));
        res.sendResponse(body);
      };
      next();
    }
  });
};

// 적용
app.get('/api/data', cacheMiddleware, async (req, res) => {
  const data = await fetchFromDatabase();
  res.json(data);
});

Client‑Server Vs. Peer-to-Peer 비교

🧭 요약: 클라이언트 - 서버는 중앙 제어와 단순함이 강점이며, 피어 투 피어는 자율 분산과 자원 공유가 우위 dlek.

실무에서 효과적으로 적용하기 위한 고려사항 및 주의할 점

최적화하기 위한 고려사항 및 주의할 점

분석 요약

주제와 관련하여 주목할 내용

반드시 학습해야할 내용

용어 정리

참고 및 출처

주요 참고 자료

• Client‑Server Architecture Fundamentals
• Client‑Server Testing Challenges
• Backend Architecture Best Practices
• 2025 Backend Trends
• AWS Client‑Server Architecture 설명 문서
• Cloudflare Edge Computing 설명 문서
• Serverless Framework 공식 문서
• GraphQL 공식 문서
• Mozilla Developer Network – Client‑Server Overview
• OWASP – Web Service Security Cheat Sheet
• Microsoft – Cloud Design Patterns
• AWS – Best Practices for API Gateway
• NGINX – Microservices: From Design to Deployment
• Martin Fowler – Patterns of Enterprise Application Architecture
• Google Cloud – Microservices Architecture on Google Cloud
• The Twelve‑Factor App
• Web Fundamentals – Performance

추가 참고 및 표준 문헌

• RFC 7230 – Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing
• Fielding, Roy Thomas – Architectural Styles and the Design of Network‑based Software Architectures (REST 논문)
• Martin Fowler – Microservices 아티클
• AWS Well‑Architected Framework
• Google Cloud Architecture Center
• Microsoft Azure Architecture Center
• CAP Theorem (위키백과)
• Building Microservices – Sam Newman (O’Reilly)
• Designing Data‑Intensive Applications – Martin Kleppmann

웹 기반 튜토리얼 및 가이드

• GeeksforGeeks – Client‑Server Model 개요
• Kitrum – Client‑Server Architecture 장단점
• Zealousys – Client‑Server Architecture 개요 및 유형
• Lifewire – Client‑Server 네트워크 구조 설명