[웹개발 기초] 클라이언트-서버란 무엇인가? — 앱이 데이터를 주고받는 구조, 초보자도 이해되게 정리해봤습니다

 안녕하세요!

오늘은 웹이나 앱 개발을 처음 시작하거나, 바이브코딩으로 뭔가 만들어보려는 분들이 꼭 한 번은 마주치게 되는 개념인 클라이언트-서버 구조에 대해 정리해보려고 합니다.

솔직히 말하면 저도 처음엔 그냥 "어딘가에서 데이터 가져오는 거 아닌가?" 수준으로 넘어갔어요. 근데 막상 앱을 만들다 보면 이 개념이 흐릿하면 계속 막히는 순간이 오더라고요.

"API가 뭔지 모르겠어요", "요청이 왜 안 가는지 모르겠어요" 같은 질문들, 사실 다 여기서 출발합니다.

이 글에서는 어려운 말 없이, 실제 앱이 어떻게 데이터를 주고받는지를 중심으로 풀어볼게요.

[웹개발 기초] 클라이언트-서버란 무엇인가?

1. 클라이언트와 서버, 대체 뭐가 뭔지부터 잡고 가자

가장 먼저 용어 정리부터 해봅시다.

클라이언트(Client) 는 쉽게 말해서 "나" 입니다. 제가 지금 쓰고 있는 스마트폰, 노트북, 거기서 열려 있는 앱이나 브라우저가 클라이언트예요. "뭔가를 요청하는 쪽"이라고 기억하면 됩니다.

서버(Server) 는 "그 요청을 받아서 처리해주는 쪽" 입니다. 어딘가에 있는 컴퓨터인데, 항상 켜져 있고 요청이 오면 응답을 돌려줍니다.

비유를 하나 들어볼게요.

식당에 가면 손님이 직원한테 주문을 하죠. 직원이 주방에 전달하고, 주방에서 음식을 만들어서 가져다주는 구조잖아요.

여기서:

• 손님 = 클라이언트
• 직원 + 주방 = 서버
• 주문서 = 요청(Request)
• 나온 음식 = 응답(Response)

앱도 똑같습니다. 인스타그램 피드를 새로 고침하면, 내 폰(클라이언트)이 서버한테 "최신 게시물 줘" 하고 요청을 보내고, 서버가 게시물 목록을 돌려보내주는 거예요.

그 데이터를 받아서 화면에 뿌리는 게 클라이언트 역할입니다.

2. 요청과 응답, 이게 HTTP입니다 — 웹의 언어

클라이언트와 서버가 데이터를 주고받을 때 사용하는 약속된 방식이 있어요. 그게 바로 HTTP(HyperText Transfer Protocol) 입니다.

이름은 복잡해 보이는데, 그냥 "웹에서 데이터 주고받는 방법에 대한 규칙"이라고 이해하면 됩니다.

HTTP 요청에는 몇 가지 방식(Method)이 있어요. 자주 나오는 것만 보면:

메서드	하는 일	예시
GET	데이터 가져오기	게시물 목록 불러오기
POST	데이터 보내기(생성)	로그인, 글 작성
PUT / PATCH	데이터 수정하기	프로필 정보 변경
DELETE	데이터 삭제하기	계정 삭제

바이브코딩하다 보면 AI가 만들어준 코드 안에 GET, POST 이런 단어들이 보일 거예요. 이제 보이면 "아, 여기서 서버한테 데이터 요청하거나 전송하는 거구나" 하고 바로 읽힐 겁니다.

그리고 서버가 응답을 돌려줄 때는 상태 코드(Status Code) 도 같이 보냅니다.

자주 만나게 되는 것들만 정리하면:

• 200 → 성공, 잘 됐어요
• 201 → 생성 성공 (POST 요청 후 자주 나와요)
• 400 → 요청이 잘못됐어요 (내 쪽 문제)
• 401 → 인증 필요 (로그인 안 된 상태)
• 403 → 권한 없음 (로그인은 됐는데 접근 불가)
• 404 → 없는 주소 요청 (잘못된 URL)
• 500 → 서버 에러 (서버 쪽 문제)

개발하다가 콘솔에 404 뜨면 "내가 주소를 잘못 쳤구나", 500이 뜨면 "서버 쪽에서 뭔가 터졌구나" 이렇게 빠르게 원인 파악을 할 수 있어요.

3. API가 뭔지 드디어 제대로 이해해봅시다

클라이언트-서버 얘기를 하다 보면 반드시 나오는 단어가 API입니다.

API(Application Programming Interface) 는 한 마디로 "서버가 클라이언트한테 열어둔 창구" 예요.

서버 안에는 엄청난 양의 데이터가 있는데, 아무나 막 접근하게 둘 수는 없잖아요. 그래서 "이 주소로 요청하면 이 데이터 줄게요" 하고 정해진 방식으로만 열어둔 통로가 API입니다.

예를 들어 날씨 앱을 만든다고 하면:

• 내 앱(클라이언트)이 기상청 서버 API에 "서울 오늘 날씨 줘" 하고 요청을 보내고
• 서버가 JSON 형태로 날씨 데이터를 응답으로 돌려주고
• 내 앱이 그 데이터를 받아서 화면에 표시하는 구조예요.

클라이언트 (내 앱)
    ↓ 요청 (GET /weather?city=seoul)
서버 (기상청 API)
    ↓ 응답 ({"city": "서울", "temp": 28, "status": "맑음"})
클라이언트 (화면에 표시)

이 데이터를 주고받을 때 가장 많이 쓰이는 형식이 JSON(JavaScript Object Notation) 인데요.

생긴 게 이렇게 생겼어요:

{

  "name": "tia",
  "city": "서울",
  "temperature": 28
}

중괄호 안에 키:값 쌍으로 구성되어 있어요. 사람도 읽기 편하고, 컴퓨터도 파싱하기 편한 형식이라서 요즘 API 통신에서는 사실상 표준처럼 쓰입니다.

바이브코딩으로 AI가 코드를 만들어줄 때, fetch() 라든가 axios.get() 이런 코드가 보이면 "아, 여기서 API 요청 날리는 거구나" 하고 이해하면 됩니다.

4. 실제 흐름으로 한 번 더 짚어보기 — 로그인을 예로 들면

이론만 보면 흐릿하니까, 로그인 과정을 예로 들어서 전체 흐름을 한 번 따라가 볼게요.

① 사용자가 아이디/비밀번호 입력 후 로그인 버튼 클릭 → 클라이언트(앱 또는 브라우저)가 서버로 POST 요청을 보냅니다. 요청 안에는 이메일이랑 비밀번호가 담겨 있어요.

② 서버가 요청을 받고 데이터베이스 확인 → "이 아이디 있나? 비밀번호 맞나?" 검증합니다.

③ 맞으면 서버가 토큰(Token)을 응답으로 돌려줌 → 토큰은 "이 사람 인증됐어요"라는 증명서 같은 거예요. 로그인 후 다른 요청을 보낼 때 이 토큰을 같이 보내면 "로그인된 사람이구나" 하고 서버가 인식합니다.

④ 클라이언트가 토큰을 저장하고 메인 화면으로 이동 → 이제부터 요청마다 토큰을 같이 보내면서 인증된 사용자로서 서비스를 이용합니다.

[사용자 입력] 이메일 + 비밀번호

↓

[클라이언트] POST /api/login

↓

[서버] 검증 → 성공 시 토큰 생성

↓

[클라이언트] 토큰 저장 → 메인 화면 이동

↓

이후 모든 요청에 토큰 포함 → 서버가 인증 확인

이 흐름이 머릿속에 그려지면, 코드를 볼 때 "아 지금 어느 단계구나" 하고 위치 파악이 훨씬 쉬워져요.

5. 프론트엔드와 백엔드, 이제 진짜 구분이 됩니다

여기까지 왔으면 이제 자연스럽게 연결되는 개념이 있어요.

프론트엔드(Frontend) 는 클라이언트 쪽 개발입니다. 사용자가 실제로 보고 사용하는 화면을 만드는 영역이에요. HTML, CSS, JavaScript, Flutter, React Native 같은 것들이 여기 해당합니다.

백엔드(Backend) 는 서버 쪽 개발입니다. 요청을 받아서 데이터베이스를 조회하고, 처리하고, 응답을 돌려주는 로직을 담당해요. Python, Node.js, Java, Go 같은 언어들이 주로 쓰입니다.

그리고 둘을 이어주는 게 API예요.

[사용자] ↔ [프론트엔드 / 클라이언트] ↔ API ↔ [백엔드 / 서버] ↔ [데이터베이스]

바이브코딩으로 뭔가 만들 때, AI한테 "로그인 기능 만들어줘" 하고 시키면 프론트엔드 코드랑 백엔드 코드를 구분해서 알려주거나, API 연결 코드를 같이 짜줄 때가 많아요.

이 구조가 머릿속에 잡혀 있으면 AI가 뭘 만들어줬는지 훨씬 빠르게 파악할 수 있습니다.

클라이언트-서버 구조, 처음엔 막막하지만 보이기 시작하면 재밌어요

개발 공부를 하다 보면 유독 이 개념이 흐릿한 채로 넘어가는 경우가 많아요. 그냥 "코드 복붙하면 됐으니까" 하고 지나치다가, 어느 순간 에러가 터지면 이유를 몰라서 멍해지는 경험을 하게 됩니다.

오늘 정리한 내용만 잡아도:

• 클라이언트(요청하는 쪽)와 서버(응답하는 쪽)의 역할 구분
• HTTP 메서드(GET/POST 등)와 상태 코드(200/404/500)
• API가 뭔지, JSON이 뭔지
• 로그인 흐름처럼 실제 요청-응답 사이클
• 프론트엔드와 백엔드의 차이

이 정도는 완성이에요.

열공하세요! 🙌