개인작업 / zenoBlog 2026.06.05 · 조회 2 · 좋아요 0

[CHAPTER 0] Part 4. 클라이언트와 서버 차이

웹을 구성하는 두 가지 핵심 축인 클라이언트(프론트엔드)와 서버(백엔드)의 역할, 실행 위치, 보안적 차이를 ZenoBlog(라라벨) 개발 환경을 예시로 명확하게 비교합니다.

[CHAPTER 0] Part 4. 클라이언트와 서버 차이

1. 정의

웹 생태계는 서비스를 요구하는 클라이언트(Client)와 서비스를 제공하는 서버(Server)의 끊임없는 대화로 이루어집니다. 클라이언트는 내 블로그에 접속한 방문자의 스마트폰이나 웹 브라우저(크롬 등)를 뜻하며, 서버는 그 요청을 받아 데이터를 가공해 돌려주는 클라우드 컴퓨터(Railway)를 뜻합니다.

2. 필요한 이유

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

22살에 과일 판매로 매출 1000만원 달성한 노하우

₩159,000

크몽

도쿄 해리포터 스튜디오 투어 입장권

₩60,343

KKday

2026 최단기간 한번에 합격하는 정보보안기사

₩39,000

크몽

개발을 할 때 클라이언트와 서버의 차이를 명확히 구분하지 못하면, "이 코드가 방문자의 컴퓨터에서 도는 건지, 내 서버에서 도는 건지" 헷갈리게 됩니다. 에러가 났을 때 자바스크립트(Alpine.js)를 고쳐야 할지, PHP(Laravel)를 고쳐야 할지 디버깅의 기준을 잡기 위해 이 둘의 역할 분담을 반드시 이해해야 합니다.

3. 핵심 개념

클라이언트 (요청자): 사용자 눈에 보이는 화면(UI)을 그리고, 클릭이나 스크롤 같은 사용자의 행동을 수집하여 서버에 "이것 좀 처리해 줘"라고 요청(Request)합니다.
서버 (제공자): 클라이언트의 요청이 들어오면 데이터베이스(DB)를 뒤져서 진짜 정보를 찾거나 계산을 수행한 뒤, 그 결과를 클라이언트에게 응답(Response)합니다.
자원(리소스)의 위치: 클라이언트는 방문자의 기기 자원(배터리, CPU, 메모리)을 소모하여 작동하고, 서버는 서비스 제공자가 돈을 내고 빌린 컴퓨터 자원(Railway 서버 사양)을 소모하여 작동합니다.

4. 주변 기초 개념

프론트엔드 (Frontend): 클라이언트 측에서 작동하는 영역입니다. HTML, CSS(Tailwind), JavaScript(Alpine.js)가 여기에 해당합니다.
백엔드 (Backend): 서버 측에서 작동하는 보이지 않는 영역입니다. 라라벨(PHP), MySQL 데이터베이스, 리눅스 운영체제 등이 여기에 해당합니다.
API (Application Programming Interface): 클라이언트와 서버가 서로 데이터를 주고받기 위해 정해놓은 '대화 규칙'입니다. "메뉴판" 같은 역할을 합니다.

5. 실제 비교 (누가 통제하는가?)

제휴 광고 · 일부 링크는 수수료를 받을 수 있습니다

화물차리스 전문 화물박사 - 1톤트럭, 특장차 즉시출고

화물차 리스 전문 화물박사

클라이언트와 서버의 가장 결정적인 차이는 '통제권'에 있습니다.

클라이언트 (통제 불가능): 브라우저에서 실행되는 모든 코드(HTML, CSS, JS)는 방문자가 마음대로 뜯어보고 수정할 수 있습니다. 키보드 F12 키를 눌러 개발자 도구를 켜면, 방문자가 임의로 글씨를 바꾸거나 가격을 조작할 수도 있습니다. 따라서 클라이언트는 절대 신뢰할 수 없는 영역입니다.
서버 (완전 통제): 서버 내부의 코드(PHP)와 데이터베이스(MySQL)는 방문자가 절대 들여다보거나 조작할 수 없습니다. 오직 개발자가 의도한 대로만, 정해진 API를 통해서만 접근이 가능한 안전한 성역입니다.

6. 예시 (ZenoBlog의 '좋아요' 기능)

방문자가 블로그 글에서 하트(좋아요) 버튼을 눌렀을 때 둘의 역할 분담입니다.

클라이언트의 일:
1. 방문자가 하트 아이콘을 클릭합니다.
2. 브라우저의 자바스크립트가 이를 감지하고, 브라우저 화면의 하트 색상을 우선 빨간색으로 칠해서(렌더링) 사용자에게 반응을 보여줍니다.
3. 동시에 뒷단에서 서버를 향해 "글 번호 15번에 좋아요 하나 추가해 줘"라고 통신(Fetch API)을 보냅니다.
서버의 일:
1. 클라이언트의 통신을 수신합니다.
2. 라라벨 코드가 작동하여, 이 방문자가 이미 좋아요를 누른 적은 없는지 검증합니다.
3. 문제가 없다면 MySQL DB에 접속해 글 15번의 like_count(좋아요 수) 컬럼을 +1 증가시킵니다.
4. 클라이언트에게 "좋아요 성공"이라는 결과 메시지를 응답합니다.

7. 주의점 (클라이언트 맹신 금지)

프론트엔드 유효성 검사(Validation)에만 의존하면 안 됩니다.
ZenoBlog에서 글을 쓸 때 "제목을 입력하세요"라는 경고창을 자바스크립트(클라이언트)로 띄울 수 있습니다. 하지만 악의적인 사용자는 자바스크립트를 강제로 끄거나 우회해서 빈 제목의 데이터를 서버로 강제 전송할 수 있습니다. 따라서 반드시 서버(라라벨의 Form Request)에서 한 번 더 데이터를 엄격하게 검증(Validation)해야 텅 빈 글이 DB에 저장되는 재앙을 막을 수 있습니다.

8. 요약

클라이언트는 방문자의 기기에서 작동하며 화면을 보여주고 입력을 받는 '눈과 귀' 역할을 합니다. 반면, 서버는 멀리 떨어진 데이터센터에서 24시간 작동하며 복잡한 계산과 데이터 저장을 수행하는 '뇌와 심장' 역할을 합니다. 개발자는 항상 클라이언트의 입력값을 의심하고, 중요한 로직과 보안 처리는 반드시 서버에서 수행해야 합니다.