[Web] 웹 서비스 구조와 프론트엔드의 역할 이해하기

참고 영상: 웹 서비스 이해 01

웹 개발을 공부하다 보면 프론트엔드, 백엔드, 데이터베이스, API 같은 단어를 자주 접하게 된다.

각각의 개념을 따로 알고 있어도 실제 웹 서비스 안에서 어떻게 연결되는지는 헷갈릴 수 있다.

이번에는 웹 서비스의 전체 구조와 데이터가 이동하는 과정을 정리해 보았다.

웹 서비스의 전체 구조

웹 서비스의 기본적인 구조는 다음과 같다.

사용자 → 프론트엔드 → 백엔드 서버 → 데이터베이스

각 영역은 서로 다른 역할을 담당한다.

영역	주요 역할
사용자	버튼 클릭, 로그인, 검색 등 서비스 이용
프론트엔드	사용자에게 화면을 보여주고 입력을 전달
백엔드	요청을 처리하고 비즈니스 로직 실행
데이터베이스	회원, 게시글, 상품 등의 데이터 저장

사용자가 데이터베이스에 직접 접근하는 것은 아니다.

사용자는 프론트엔드 화면을 조작하고, 프론트엔드는 백엔드에 필요한 작업을 요청한다. 백엔드는 데이터베이스에서 정보를 조회하거나 저장한 뒤 결과를 다시 프론트엔드에 전달한다.

클라이언트란?

클라이언트는 서버에 서비스를 요청하는 쪽을 의미한다.

웹 서비스에서는 일반적으로 사용자가 이용하는 브라우저나 애플리케이션이 클라이언트가 된다.

예를 들면 다음과 같다.

• Chrome이나 Safari 같은 웹 브라우저
• 스마트폰 애플리케이션
• 데스크톱 프로그램

사용자는 클라이언트를 통해 로그인하거나 게시글을 작성하고 상품을 검색한다.

사용자
  ↓
웹 브라우저 또는 애플리케이션
  ↓
서버에 요청

프론트엔드는 대부분 클라이언트 영역에서 사용자와 직접 상호작용한다.

프론트엔드란?

프론트엔드는 사용자가 직접 보고 조작하는 화면을 개발하는 영역이다.

사용자가 보는 다음 요소들이 프론트엔드에 해당한다.

• 화면 구성
• 버튼
• 입력창
• 메뉴
• 이미지
• 애니메이션
• 사용자 입력 처리
• 서버로부터 받은 데이터 표시

예를 들어 로그인 화면에는 아이디와 비밀번호 입력창, 로그인 버튼이 있다.

사용자가 로그인 버튼을 누르면 프론트엔드는 입력한 값을 확인하고 백엔드 서버에 로그인 요청을 보낸다.

아이디와 비밀번호 입력
        ↓
로그인 버튼 클릭
        ↓
프론트엔드가 입력값 확인
        ↓
백엔드 서버에 로그인 요청

프론트엔드는 화면만 예쁘게 만드는 영역이 아니다.

사용자의 입력을 처리하고, 백엔드와 데이터를 주고받으며, 받은 결과를 화면에 알맞게 표현하는 역할까지 담당한다.

UI와 UX

프론트엔드와 함께 자주 등장하는 개념이 UI와 UX다.

UI

UI는 User Interface의 약자로, 사용자가 서비스와 상호작용하는 화면 요소를 의미한다.

예를 들면 다음과 같다.

• 버튼의 모양과 색상
• 메뉴의 위치
• 입력창 디자인
• 화면 레이아웃
• 아이콘과 이미지

UX

UX는 User Experience의 약자로, 사용자가 서비스를 이용하면서 겪는 전체적인 경험을 의미한다.

예를 들어 버튼이 예쁘게 만들어졌다면 UI가 좋은 것이다.

하지만 버튼의 위치를 찾기 어렵거나 클릭 후 반응이 느리다면 UX는 좋지 않을 수 있다.

UI → 사용자가 보는 화면과 요소
UX → 사용자가 서비스를 이용하며 느끼는 전체 경험

UI와 UX는 서로 밀접하게 관련되어 있지만 같은 의미는 아니다.

백엔드란?

백엔드는 프론트엔드에서 전달한 요청을 처리하는 영역이다.

주요 역할은 다음과 같다.

• 사용자 요청 확인
• 비즈니스 로직 실행
• 회원 인증과 권한 검사
• 데이터베이스 조회 및 저장
• 처리 결과 반환

예를 들어 사용자가 로그인 버튼을 누르면 백엔드는 다음 작업을 수행할 수 있다.

1. 프론트엔드에서 아이디와 비밀번호 전달
2. 백엔드가 로그인 요청 확인
3. 데이터베이스에서 회원 정보 조회
4. 비밀번호가 일치하는지 확인
5. 로그인 결과를 프론트엔드에 반환

백엔드는 사용자가 직접 확인하기 어려운 서버 내부에서 동작한다.

따라서 프론트엔드를 눈에 보이는 영역, 백엔드를 눈에 보이지 않는 처리 영역으로 이해할 수 있다.

데이터베이스란?

데이터베이스는 서비스에 필요한 데이터를 저장하는 공간이다.

웹 서비스에서는 다음과 같은 정보를 저장할 수 있다.

• 회원 정보
• 게시글
• 댓글
• 상품 정보
• 주문 내역
• 로그인 기록

게시글 작성 기능을 예로 들어보자.

사용자가 게시글 작성
        ↓
프론트엔드가 내용을 서버에 전달
        ↓
백엔드가 게시글 데이터 확인
        ↓
데이터베이스에 게시글 저장

게시글 목록을 조회할 때는 반대 방향으로 데이터가 전달된다.

프론트엔드가 게시글 목록 요청
        ↓
백엔드가 데이터베이스 조회
        ↓
데이터베이스가 게시글 데이터 반환
        ↓
백엔드가 프론트엔드에 결과 전달
        ↓
프론트엔드가 게시글 목록 표시

일반적인 웹 서비스에서 프론트엔드가 데이터베이스에 직접 접근하지는 않는다.

데이터 검증과 권한 확인 같은 중요한 로직을 백엔드에서 처리한 뒤 데이터베이스에 접근한다.

HTTP Request와 Response

클라이언트와 서버는 요청과 응답을 주고받으며 동작한다.

클라이언트 ── Request ──▶ 서버
클라이언트 ◀─ Response ── 서버

HTTP Request

클라이언트가 서버에 특정 작업을 요청하는 것이다.

예를 들면 다음과 같다.

• 로그인 처리
• 게시글 목록 조회
• 게시글 작성
• 상품 검색
• 댓글 삭제

HTTP Response

서버가 요청을 처리한 뒤 클라이언트에 결과를 돌려주는 것이다.

응답에는 다음과 같은 정보가 포함될 수 있다.

• 요청 성공 여부
• 조회된 데이터
• 오류 메시지
• HTTP 상태 코드

로그인 요청을 예로 들면 다음과 같다.

Request
{
  "email": "user@example.com",
  "password": "password"
}

서버가 요청을 정상적으로 처리했다면 다음과 같은 응답을 보낼 수 있다.

Response
{
  "success": true,
  "message": "로그인에 성공했습니다."
}

프론트엔드는 이 결과를 받아 사용자에게 로그인 성공 화면을 보여준다.

웹 서비스의 기본 동작 과정

전체 흐름을 순서대로 정리하면 다음과 같다.

1. 사용자 입력

사용자가 서비스에서 특정 행동을 한다.

로그인
게시글 작성
상품 검색
버튼 클릭

2. 요청 전달

프론트엔드가 사용자의 입력을 HTTP Request로 만들어 백엔드 서버에 전달한다.

브라우저 또는 앱
        ↓
HTTP Request
        ↓
백엔드 서버

3. 서버 처리

백엔드는 요청을 확인하고 필요한 로직을 실행한다.

필요하다면 데이터베이스에서 정보를 조회하거나 새로운 데이터를 저장한다.

요청 확인
   ↓
권한 및 데이터 검증
   ↓
비즈니스 로직 실행
   ↓
데이터베이스 조회 또는 저장

4. 응답 반환

백엔드는 처리 결과를 HTTP Response로 만들어 프론트엔드에 전달한다.

백엔드 서버
      ↓
HTTP Response
      ↓
프론트엔드

5. 화면 표시

프론트엔드는 응답 결과를 사용자가 이해할 수 있는 형태로 보여준다.

로그인 성공 화면
게시글 목록
검색 결과
오류 메시지

전체 흐름은 다음과 같이 정리할 수 있다.

사용자 이벤트
    ↓
프론트엔드
    ↓ HTTP Request
백엔드 서버
    ↓
데이터베이스
    ↓
백엔드 서버
    ↓ HTTP Response
프론트엔드
    ↓
화면에 결과 표시

API란?

API는 서로 다른 프로그램이 정해진 방식으로 요청과 응답을 주고받을 수 있도록 만든 접점이다.

웹 서비스에서는 주로 프론트엔드와 백엔드가 API를 통해 통신한다.

프론트엔드 ←→ API ←→ 백엔드

예를 들어 게시글 목록을 가져오는 API가 다음과 같이 정의될 수 있다.

GET /api/posts

프론트엔드는 해당 주소로 요청을 보내고, 백엔드는 게시글 목록을 응답한다.

게시글을 작성하는 API는 다음과 같이 만들 수 있다.

POST /api/posts

API에는 다음과 같은 규칙이 포함된다.

• 어떤 주소로 요청할 것인지
• 어떤 HTTP 메서드를 사용할 것인지
• 어떤 데이터를 전달할 것인지
• 어떤 형태로 응답할 것인지
• 요청이 실패했을 때 어떤 오류를 반환할 것인지

프론트엔드와 백엔드 개발자가 API 규칙을 약속하면 서로의 내부 구현을 모두 알지 못해도 협업할 수 있다.

웹 개발 직군

강의에서 웹개발 관련 직군도 알려주셔서 같이 작성해본다.

프론트엔드 개발자

사용자가 직접 보는 화면과 상호작용을 구현한다.

주요 업무는 다음과 같다.

• 웹 화면 구현
• 사용자 입력 처리
• UI 및 UX 개선
• 백엔드 API 연동
• 서버에서 받은 데이터 표시

백엔드 개발자

서버와 비즈니스 로직을 구현한다.

주요 업무는 다음과 같다.

• API 개발
• 인증 및 권한 처리
• 비즈니스 로직 구현
• 데이터베이스 연동
• 서버 성능과 보안 관리

DBA

DBA는 Database Administrator의 약자로 데이터베이스를 전문적으로 관리한다.

주요 업무는 다음과 같다.

• 데이터베이스 설계
• 데이터 관리
• 성능 최적화
• 백업과 복구
• 접근 권한 관리

DevOps 개발자

DevOps는 개발과 운영 환경을 연결하고 서비스가 안정적으로 배포될 수 있도록 관리한다.

주요 업무는 다음과 같다.

• 서버 및 클라우드 환경 구성
• 배포 자동화
• CI/CD 구축
• 서비스 모니터링
• 장애 대응

프론트엔드와 백엔드는 완전히 분리될까?

개념적으로 프론트엔드와 백엔드는 역할이 구분된다.

프론트엔드 → 사용자와 상호작용
백엔드 → 데이터와 비즈니스 로직 처리

하지만 실제 프로젝트에서는 두 영역이 긴밀하게 연결된다.

프론트엔드 개발자는 백엔드가 제공하는 API를 이해해야 하고, 백엔드 개발자는 프론트엔드에서 어떤 데이터가 필요한지 알아야 한다.

예를 들어 로그인 기능을 만들려면 함께 정해야 할 내용이 많다.

• 요청 주소
• 전달할 데이터
• 응답 데이터 구조
• 오류 처리 방식
• 인증 토큰 관리 방식

따라서 각 영역의 기술뿐 아니라 웹 서비스의 전체 흐름을 이해하는 것이 중요하다.

오늘 배운 내용

웹 서비스는 사용자가 보는 화면만으로 동작하지 않는다.

사용자의 행동이 프론트엔드에서 요청으로 만들어지고, 백엔드가 요청을 처리한 뒤 데이터베이스와 통신한다. 이후 처리 결과가 다시 프론트엔드로 전달되어 화면에 표시된다.

사용자
  ↓
프론트엔드
  ↓
API 요청
  ↓
백엔드
  ↓
데이터베이스
  ↓
백엔드
  ↓
API 응답
  ↓
프론트엔드 화면

이번 학습을 통해 프론트엔드는 단순히 화면을 꾸미는 역할이 아니라는 점을 알게 되었다.

프론트엔드는 사용자 입력을 처리하고 서버와 통신하며, 서버에서 받은 데이터를 사용자가 이해할 수 있는 화면으로 표현하는 역할까지 담당한다.

앞으로 API를 연동할 때도 단순히 데이터를 가져오는 것에 그치지 않고, 요청이 백엔드와 데이터베이스에서 어떻게 처리되는지 전체 흐름을 함께 생각해야겠다.