웹 애플리케이션의 기본 구조: 화면·서버·데이터베이스 이해하기

예약 앱에서 날짜와 이름을 입력하고 예약 버튼을 누릅니다. 잠시 뒤 “예약이 완료되었습니다”라는 문구가 나타나요.

한 화면에서 끝난 것처럼 보이지만, 그 뒤에서는 세 부분이 역할을 나눠 처리합니다.

프론트엔드 → 애플리케이션 서버 → 데이터베이스

프론트엔드는 사용자의 입력을 받고 결과를 보여줍니다. 애플리케이션 서버는 요청을 확인하고 규칙에 따라 처리합니다. 데이터베이스는 계속 남아야 할 정보를 보관합니다.

이 세 부분이 요청과 결과를 주고받는 것이 웹 애플리케이션의 기본 구조예요.

AI가 Next.js를 선택했다면 이 구조 가운데 프론트엔드와 애플리케이션 서버를 한 프로젝트에서 함께 구성한 것입니다. Next.js가 무엇이고 왜 풀스택 프레임워크라고 부르는지 먼저 쉽게 살펴볼 수 있어요.

프론트엔드는 입력을 받고 결과를 보여줘요

브라우저에서 사용자가 보고 조작하는 부분을 프론트엔드라고 합니다. 버튼, 입력칸, 메뉴, 글처럼 화면에 보이는 요소와 사용자 상호작용을 담당해요.

예약 앱의 프론트엔드는 다음 일을 합니다.

• 예약 가능한 날짜를 보여줍니다.
• 이름과 연락처를 입력받습니다.
• 예약 버튼을 누르면 애플리케이션 서버에 요청을 보냅니다.
• 처리 결과를 받아 완료 메시지나 오류를 보여줍니다.

프론트엔드는 입력값이 비어 있는지 먼저 확인할 수 있습니다. 하지만 가격, 권한, 남은 자리처럼 반드시 지켜야 하는 규칙을 프론트엔드에만 맡기면 안 돼요. 브라우저에서 실행되는 코드는 사용자가 바꾸거나 우회할 수 있기 때문입니다.

애플리케이션 서버는 요청과 규칙을 처리해요

프론트엔드가 보낸 API 요청을 받아 기능을 실행하는 프로그램을 애플리케이션 서버라고 합니다. 이 글에서 줄여서 서버라고 부르는 대상도 애플리케이션 서버예요.

예약 요청을 받으면 애플리케이션 서버는 다음 내용을 확인합니다.

필요한 값이 모두 들어왔는가?
로그인한 사용자인가?
아직 예약할 자리가 남아 있는가?
같은 사용자의 중복 예약은 아닌가?

조건을 통과하면 데이터베이스에 예약을 저장합니다. 자리가 없다면 저장하지 않고 마감됐다는 결과를 프론트엔드에 돌려줘요.

백엔드는 애플리케이션 서버와 같은 뜻이 아닙니다. 백엔드는 애플리케이션 서버뿐 아니라 데이터베이스와 저장소, 인프라 등을 포함할 수 있는 더 넓은 영역이에요. 이 글의 가운데 요소는 그중 요청과 비즈니스 규칙을 처리하는 애플리케이션 서버입니다.

브라우저가 데이터베이스에 직접 접근하는 구조와 애플리케이션 서버를 거치는 구조의 차이는 Supabase를 연결하는 방법: 서버 접근을 추천하는 이유에서 더 자세히 살펴볼 수 있어요.

데이터베이스는 앱이 기억할 정보를 보관해요

예약이 완료됐다면 브라우저를 닫았다가 다시 열어도 기록이 남아 있어야 합니다. 이처럼 앱이 계속 기억해야 할 정보를 보관하는 곳이 데이터베이스예요.

화면에 보이는 값과 실제로 저장된 값이 어떻게 다른지는 바이브코딩으로 만든 앱, 데이터는 어디에 저장할까요?에서 먼저 살펴볼 수 있어요.

예약 앱이라면 데이터를 다음처럼 나눠 저장할 수 있습니다.

사용자
- 이름
- 이메일
- 연락처

수업
- 수업명
- 날짜와 시간
- 정원

예약
- 사용자 ID
- 수업 ID
- 예약 상태

애플리케이션 서버는 데이터베이스에 새로운 예약을 저장하고, 기존 예약을 조회하거나 수정하고 삭제합니다. 사용자 ID와 수업 ID를 이용해 누가 어떤 수업을 예약했는지도 연결할 수 있어요.

서버 코드가 데이터베이스를 조회하고 저장할 때 Prisma나 Drizzle 같은 도구가 어떤 역할을 하는지는 ORM이 무엇인지 설명한 글에서 이어서 볼 수 있습니다.

API는 프론트엔드와 애플리케이션 서버를 연결해요

프론트엔드와 애플리케이션 서버는 API를 통해 요청과 응답을 주고받습니다.

예약을 만들 때 프론트엔드는 이런 요청을 보낼 수 있어요.

요청
- 수업 ID
- 예약자 이름
- 연락처

애플리케이션 서버는 처리 결과를 정해진 형태로 돌려줍니다.

응답
- 성공 또는 실패
- 예약 ID
- 안내 메시지

API는 데이터를 저장하는 곳이 아닙니다. 프론트엔드가 애플리케이션 서버의 기능을 사용할 수 있도록 요청과 응답의 형식을 정한 약속이에요.

예약 버튼을 누르면 요청이 갔다가 돌아와요

전체 흐름을 이어보면 다음과 같습니다.

1. 사용자가 프론트엔드에서 예약 정보를 입력합니다.
2. 프론트엔드가 애플리케이션 서버 API로 예약을 요청합니다.
3. 애플리케이션 서버가 입력값, 권한과 예약 규칙을 확인합니다.
4. 애플리케이션 서버가 데이터베이스에 예약을 저장합니다.
5. 데이터베이스가 저장 결과를 애플리케이션 서버에 돌려줍니다.
6. 애플리케이션 서버가 성공 또는 실패 결과를 프론트엔드에 응답합니다.
7. 프론트엔드가 사용자에게 완료 메시지나 오류를 보여줍니다.

사용자
  ↓ 입력과 클릭
프론트엔드
  ↓ API 요청
애플리케이션 서버
  ↓ 예약 저장
데이터베이스
  ↓ 저장 결과
애플리케이션 서버
  ↓ API 응답
프론트엔드
  ↓ 완료 또는 오류 표시
사용자

화면에 먼저 “예약 완료”를 띄우는 것과 실제 저장 결과를 받아 보여주는 것은 다릅니다. 중간에 검사가 실패하거나 데이터베이스 저장 오류가 날 수 있으므로 프론트엔드는 애플리케이션 서버의 응답을 기다려야 해요.

정리

• 프론트엔드는 사용자의 입력을 받고 처리 결과를 보여줍니다.
• 애플리케이션 서버는 요청을 확인하고 권한과 비즈니스 규칙에 따라 처리합니다.
• 데이터베이스는 앱이 계속 기억해야 할 정보를 보관합니다.
• API는 프론트엔드와 애플리케이션 서버가 요청과 응답을 주고받는 약속입니다.
• 요청은 프론트엔드 → 애플리케이션 서버 → 데이터베이스로 전달되고, 결과는 반대 방향으로 돌아옵니다.

웹 애플리케이션의 파일이 많아 보여도 먼저 이 세 가지를 구분하면 구조를 읽기 쉬워집니다. 어디에서 입력을 받고, 어디에서 규칙을 확인하고, 어디에 결과를 저장하는지를 따라가 보세요.