프론트엔드, 백엔드, 데이터베이스를 20분으로 정리한다면?

복잡하게만 느껴졌던 IT 시스템 구조, 한 번에 꿰뚫어 볼 수 있을까? 프론트엔드부터 백엔드, 데이터베이스까지, 20분 만에 핵심을 파악하는 여정이 시작된다. 이 영상은 IT 시스템의 기본 구조를 명확히 이해하도록 돕는다.

프론트엔드의 역할

프론트엔드는 사용자와 직접 상호작용하는 영역이다. 화면 개발, 이벤트 처리, 데이터 송수신이 주된 역할을 한다. 웹과 앱 모두 프론트엔드에 해당하며, 사용자의 입력을 기다리고 처리하며, 서버와 통신하여 데이터를 주고받는다. 프론트엔드는 사용자 경험을 결정짓는 중요한 요소이다.

웹과 앱의 작동 방식

웹은 웹 브라우저에서 URL을 입력하여 접속한다. DNS는 도메인을 IP 주소로 변환하여 서버에 접속하는 과정을 돕는다. 웹에서는 HTTP 프로토콜을 사용하여 서버와 통신하며, 서버는 HTML, CSS, 자바스크립트, 이미지 등의 파일을 응답으로 제공한다. 앱은 모바일에 설치되는 클라이언트 프로그램이다. 안드로이드와 iOS는 각각 다른 개발 언어를 사용하지만, 리액트 네이티브나 플러터와 같은 프레임워크를 사용하여 멀티 OS 앱을 개발할 수도 있다. 앱은 API를 통해 서버와 통신하며, 서버로부터 JSON이나 XML 형태의 데이터를 받아 화면에 표시한다.

백엔드의 핵심 기능

백엔드는 서버와 데이터베이스로 구성된다. 데이터베이스는 데이터를 저장하고 관리하는 역할을 수행한다. 서버는 클라이언트의 요청을 처리하고 데이터베이스와 연동하여 데이터를 제공한다. 서버의 주요 기능은 API 제공, 요청 응답, 데이터베이스 연동이다. 클라이언트가 데이터베이스에 직접 접근하는 대신, 백엔드 서버가 중계 역할을 수행하여 보안을 강화한다. 웹 서버는 아파치나 엔진엑스와 같은 서버를 사용하며, HTML, CSS, 자바스크립트, 이미지 등의 정적 파일을 제공한다. WAS(Web Application Server)는 웹 서버의 기능을 확장하여 데이터베이스 조회, 저장, 수정, 삭제 등의 동적인 기능을 수행한다.

데이터베이스 CRUD와 SQL

CRUD는 데이터베이스의 기본 연산인 생성(Create), 읽기(Read), 수정(Update), 삭제(Delete)를 의미한다. SQL(Structured Query Language)은 데이터베이스를 조작하기 위한 언어이다. WAS는 SQL을 사용하여 데이터베이스에 데이터를 요청하고 응답을 받는다. 서버는 주로 자바 스프링, 파이썬 장고, 자바스크립트 노드제이에스 등으로 개발되며, API 개발과 데이터베이스 연동이 주요 업무이다. 데이터베이스는 데이터를 체계적으로 저장하는 소프트웨어이며, MySQL, 오라클 등이 대표적이다. 데이터베이스는 테이블 형태로 데이터를 저장하며, 테이블은 레코드(행)와 컬럼(열)으로 구성된다.

데이터 흐름의 이해

앱에서 특정 데이터를 조회하는 버튼을 클릭하면 API가 호출된다. WAS의 애플리케이션은 데이터베이스에 SQL 쿼리를 전달하고, 데이터베이스는 해당 쿼리에 맞는 데이터를 응답한다. 응답된 데이터는 JSON 또는 XML 형태로 포맷되어 앱에 전달되고, 앱은 이 데이터를 화면에 표시한다. 이 흐름은 IT 시스템의 기본적인 작동 방식을 보여준다.

도시계획·공간행동학의 시선으로 보면

IT 시스템의 프론트엔드와 백엔드 구조는 도시의 인터페이스와 인프라 구조와 유사하다. 사용자가 직접 상호작용하는 웹/앱 화면은 도시의 간판, 도로, 공원과 같은 인터페이스에 해당한다. 데이터베이스와 서버는 도시의 보이지 않는 하수도, 전력망, 통신망과 같은 인프라에 비유할 수 있다. 도시 인프라가 원활하게 작동해야 도시민의 삶이 편리해지는 것처럼, 백엔드가 안정적으로 작동해야 프론트엔드의 사용자 경험이 향상된다.

출처

• 기술노트with 알렉. (2026-04-15). [프론트엔드 백엔드 데이터베이스 전체를 20분만에 보이게 해드립니다.

  바이브코딩](https://www.youtube.com/watch?v=l5z6UNa-ons). YouTube.