웹 서비스를 만들려면 몇 가지 기본 개념을 알아야 합니다. 그러나 낯선 용어가 많아서 시작도 전에 피곤해지는 경우가 많죠. 이번 글에서는 웹 서비스 개발에 필요한 핵심 지식만 골라서 쉽게 이해할 수 있는 비유, 예시와 함께 설명해 보겠습니다. 개발 경험이 전혀 없어도 따라올 수 있도록 차근차근 풀어 볼 테니, 겁먹을 필요는 없습니다.

웹을 구성하는 세 가지 기술

웹사이트는 크게 세 가지 핵심 기술로 이루어집니다.

HTML: 뼈대와 구조
CSS: 꾸밈과 디자인
JavaScript: 동작과 상호작용

HTML은 집의 골조, CSS는 인테리어, JavaScript는 전기 설비 등에 비유할 수 있습니다.

다음 예제는 버튼 하나로 세 가지 기술의 역할을 동시에 보여줍니다.

이 코드에서 HTML은 버튼을 만들고, CSS는 버튼의 색상과 크기를 꾸며주며, JavaScript는 버튼을 클릭했을 때 알림창을 띄우는 동작을 부여합니다.

클라이언트와 서버 그리고 프론트엔드와 백엔드

웹 서비스는 크게 클라이언트와 서버로 나눌 수 있습니다.

클라이언트(client): 사용자의 기기에서 실행되는 프로그램입니다. 웹 브라우저나 모바일 앱처럼 사용자가 직접 보고 조작하는 화면이 여기에 속합니다.
서버(server): 클라이언트의 요청을 받아 처리하고, 필요한 데이터를 돌려주는 프로그램입니다. 눈에 보이지 않는 곳에서 데이터 처리와 저장을 담당합니다.

더 구체적으로 나누면 프론트엔드와 백엔드라는 용어가 등장합니다.

프론트엔드(frontend) : 클라이언트 쪽에서 사용자와 맞닿아 있는 부분입니다. 화면을 구성하고, 사용자가 버튼을 클릭하거나 텍스트를 입력할 때 이를 처리합니다.
백엔드(backend) : 서버 쪽에서 동작하는 부분입니다. 데이터를 검증하고, AI 서비스나 데이터베이스와 연동해 결과를 돌려줍니다.

즉, 클라이언트/서버는 큰 틀, 프론트엔드/백엔드는 그 안에서의 세부 역할을 나타낸다고 이해하면 됩니다.

프론트엔드와 백엔드의 관계를 레스토랑에 비유해 봅시다. 프론트엔드는 레스토랑의 홀과 같습니다. 사용자가 메뉴판을 보고 주문하고 음식을 받는 공간입니다. 웹 서비스에서 프론트엔드는 사용자가 직접 보고, 클릭하고, 입력하는 화면으로, 버튼, 입력창, 할 일 목록 같은 요소가 여기에 포함됩니다.

백엔드는 레스토랑의 주방에 해당합니다. 손님이 볼 수는 없지만, 주문을 처리하고 음식을 만드는 핵심 공간입니다. 웹 서비스에서는 화면 뒤에서 데이터를 처리하고 보관하며, AI 서비스에 요청을 보내거나 결과를 저장하는 일을 담당합니다.

API

API(Application Programming Interface)는 프로그램끼리 대화할 수 있도록 만든 약속된 통로입니다.

레스토랑에 비유하면 이렇습니다. 손님(클라이언트)이 “김치찌개 하나 주세요.”라고 주문합니다. 종업원(API)이 이 주문을 정확히 주방(서버)에 전달합니다. 주방에서 완성된 음식을 다시 손님에게 가져다줍니다. 웹에서도 같은 원리로 동작합니다. 클라이언트가 “사용자 123번의 할 일 목록을 주세요.”라고 요청하면 API가 dl를 서버에 전달합니다. 서버가 요청을 처리한 뒤 결과를 다시 클라이언트에 돌려줍니다.

JSON

JSON(JavaScript Object Notation)은 데이터를 주고받을 때 널리 사용하는 표준 형식입니다. 쉽게 말해, 프로그램끼리 주고받는 ‘주문서’ 같은 역할을 합니다.

예를 들어, 다음 JSON 데이터는 하나의 할 일 정보를 담고 있습니다.

코드에서 각 속성은 다음과 같은 의미를 가집니다.

id: 데이터의 고유 번호
title: 할 일의 제목
dueDate: 마감일
priority: 우선순위
completed: 완료 여부
tags: 태그 목록

JSON은 사람이 읽기 쉽고, 프로그램이 빠르게 처리할 수 있으며, 표준화 덕분에 다양한 시스템에서 호환성이 뛰어납니다.

웹 브라우저

웹 브라우저(Web browser)는 인터넷 주소를 입력했을 때 웹 서버와 통신해 HTML, CSS, JavaScript를 받아 화면에 보여주는 프로그램입니다. 대표적으로 Chrome, Safari, Edge, Firefox 등이 있습니다.

웹 브라우저의 주요 기능은 다음과 같습니다.

해석: HTML, CSS, JavaScript로 작성된 웹 페이지를 해석해 시각적으로 표시
상호작용: 클릭, 입력, 스크롤 등 사용자의 동작을 감지하고 처리
통신: 웹 서버와 데이터를 주고받아 새로운 정보나 페이지 가져오기
저장: 쿠키, 로컬/세션 스토리지를 활용해 로그인 정보나 사용자 데이터를 임시 저장
completed: 완료 여부
tags: 태그 목록

또한 모든 웹 브라우저에는 개발자 도구가 기본으로 포함되어 있습니다. 개발자 도구는 웹 페이지의 구조, 스타일, 동작을 직접 확인하고 디버깅할 수 있는 기능입니다. 보통 F12를 누르거나 마우스 오른쪽 버튼을 클릭해 ‘검사(Inspect)’ 메뉴를 선택하면 실행할 수 있습니다.

데이터베이스

데이터베이스(DB, Database)는 앱이나 웹 서비스에서 사용하는 정보를 체계적으로 저장하고 관리하는 시스템입니다. 도서관의 분류처럼 데이터를 정리해 두어 빠르고 정확하게 꺼내 쓸 수 있습니다.

예를 들어, 다음 표는 할 일 데이터를 데이터베이스의 테이블 형태로 정리한 모습입니다. 테이블(table)은 데이터베이스에서 정보를 저장하는 기본 단위입니다. 엑셀 시트나 구글 스프레드시트처럼 행(row)과 열(column)로 이루어진 표 형식이라고 생각하면 이해하기 쉽습니다.

데이터베이스에는 여러 종류가 있습니다.

관계형 데이터베이스(RDB, Relational DB): 데이터를 표 형태로 저장해 구조가 명확하고 전통적인 웹 애플리케이션에서 널리 쓰입니다. 대표적으로 MySQL, PostgreSQL이 있습니다.
NoSQL 데이터베이스 : RDB보다 자유로운 형식으로 데이터를 저장합니다. 특히 빅데이터 처리나 실시간 앱에 자주 활용되며, MongoDB, Firebase가 대표적입니다.

기타 용어

개발을 하다 보면 자주 만나는 기본 용어들이 있습니다. 낯설게 느껴질 수 있지만, 실습을 거듭하다 보면 점점 익숙해질 것입니다.

RUD: 데이터를 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)하는 기본적인 조작 방식을 뜻합니다. 할 일을 생성(추가)하거나 조회, 수정, 삭제하는 모든 동작이C RUD에 해당합니다.
IDE(Integrated Development Environment): 코드를 작성하고 실행하며 디버깅까지 한 번에 처리할 수 있게 해주는 통합 개발 환경입니다. (예: VSCode, Cursor)
SDK(Software Development Kit): 어떤 기능을 쉽게 구현할 수 있도록 미리 묶어놓은 도구 모음입니다. (예: Vercel AI SDK)
UI/UX: 사용자 인터페이스(UI)와 화면을 사용할 때 느끼는 사용자의 경험(UX)을 말합니다. 예를 들어, 버튼을 구성할 때 버튼 디자인과 사용 편의성을 함께 고려해야 합니다.
프레임워크(framework): 개발에 필요한 기본 구조와 도구를 미리 제공해 주는 틀로, 정해진 흐름 안에서 개발자가 코드를 채워 넣는 방식입니다. (예: Next.js, Django, Spring)

라이브러리(library): 특정 기능을 쉽게 가져다 쓸 수 있게 만든 코드 모음으로, 필요한 기능을 개발자가 직접 가져다 쓰는 방식입니다. (예: Lodash, Day.js)
배포(deployment): 완성한 앱을 인터넷에 올려 다른 사람들이 사용할 수 있도록 공개하는 과정입니다. (예: Verce, Netlify)
클라우드(cloud): 인터넷을 통해 제공되는 서버나 데이터 저장 공간 같은 컴퓨팅 자원을 의미합니다. (예: AWS, Google Cloud)
반응형(responsive): 화면 크기에 따라 자동으로 레이아웃이 조정되는 웹 디자인 방식입니다. 예를 들어, 모바일에서는 한 줄에 카드 하나씩 세로로 표시되지만, PC에서는 화면이 넓으므로 여러 카드를 가로로 나란히 배치할 수 있습니다.
컴포넌트(component): 버튼이나 입력창처럼 재사용 가능한 UI 조각을 말합니다. 하나의 컴포넌트는 디자인(화면에 보이는 모습)과 기능(동작)을 함께 포함할 수 있으며, 필요할 때마다 불러와 재사용할 수 있습니다. 예를 들어, 로그인 화면에 있는 버튼, 입력창, 체크박스는 각각 독립된 컴포넌트로 만들어 다른 화면에서도 그대로 사용할 수 있습니다.

버그(bug): 프로그램에서 의도와 다르게 동작하는 오류나 결함을 말합니다.
디버깅(debugging): 발생한 버그의 원인을 찾아내고 수정하는 과정을 뜻합니다.
테스트(test): 프로그램이 올바르게 동작하는지 확인하는 작업입니다.
리팩토링(refactoring): 코드 기능은 유지하면서 구조를 더 효율적이고 이해하기 쉽게 개선하는 것을 말합니다.
버전 관리: 코드의 변경 내역을 기록하고 관리하는 것을 의미합니다. 예를 들어, Git을 사용하면 코드를 수정할 때마다 변경 이력이 남아 과거 버전으로 되돌릴 수 있습니다.

마치며

이 정도 개념만 알아도 웹 개발을 시작하는 데 충분합니다. 하나씩 직접 사용해 보시면 자연스럽게 익힐 수 있을 것입니다. 완벽하게 이해하지 못해도 괜찮습니다. 기초 지식을 가지고 실습을 통해 더 자세하게 배워나가겠다는 적극적인 자세만 갖추었다면, 무엇이든 익힐 수 있습니다.

이 글은 길벗에서 출간된 책 <AI 자율학습 커서 x AI로 완성하는 나만의 웹서비스> 에서 발췌·편집한 글입니다. 원문은 [여기]에서 볼 수 있습니다.