웹 개발 과정 순서, 서버부터 배포까지 집 짓기로 이해하기

버튼 한 번에 AI가 앱을 만들어 주는 시대라지만, 서버⁠·백엔드⁠·DB 같은 말이 낯설면 무엇이 빠졌는지조차 알기 어렵습니다. 이 글은 웹 개발 과정을 집 짓기 순서 하나에 맞춰 서버, 기획, DB, 백엔드, 프런트엔드, 배포, 유지보수까지 차례로 설명합니다. 세부 기술은 나중에 배워도 되니, 전체 그림부터 잡는 것이 목표입니다.

웹 개발 과정, '딸깍' 전에 알아 둘 전체 그림

요즘은 AI다, 바이브 코딩이다 하면서 버튼 한 번 누르면 뭐든 되는 것처럼 말합니다. 그런데 "10분 만에 앱 만들기"를 따라 해 본 비전공자는 껍데기는 만들었어도 서버, 백엔드, DB, 클라우드 같은 용어가 외계어처럼 들리고 전체 그림이 안 보이는 경우가 많습니다.

프로그래밍은 생각만큼 어렵지 않습니다. 처음 접하는 방식 때문에 어렵게 느껴질 뿐이고, 개념이 잡히면 금방 감이 옵니다. 반대로 순서를 모른 채 만들면 설계도 없이 집을 막 짓는 것과 같아서, 나중에 무너지거나 통째로 뜯어고쳐야 합니다.

집 짓기 순서 = 웹 개발 순서

집 짓기의 각 단계는 개발 단계와 이렇게 짝지을 수 있습니다.

• 땅 = 서버
• 설계도 = 기획
• 기초 공사 = 서버 기본 세팅
• 집 안 공간 나누기 = DB와 테이블
• 자재 고르기 = 개발 언어 선택
• 수도관⁠·전기선⁠·가스관 = 백엔드
• 벽지⁠·페인트⁠·조명⁠·가구 = 프런트엔드
• 사용 승인⁠·주소 등록⁠·집들이 = 배포
• 청소⁠·벽지⁠·보일러 수리 = 유지보수

하나씩 풀어 보겠습니다.

땅: 서버

서버는 24시간 켜져 있는 큰 컴퓨터입니다. 내 컴퓨터는 쓰다가 끄면 꺼지지만, 서버는 전 세계에서 수천 명, 수만 명이 동시에 들어와도 꺼지지 않고 돌아가도록 만든 컴퓨터입니다. 온라인 게임이 새벽 2시에도 되는 이유가 여기에 있습니다.

서버를 제대로 이해하려면 저장 장치, 네트워크, 운영체제, 서버 종류까지 배울 것이 훨씬 많습니다. 지금은 "24시간 켜진 큰 컴퓨터이자 집 지을 땅"이라는 것만 기억해도 충분합니다.

설계도: 기획

무엇을 만들지 정하는 단계입니다. 인터넷 쇼핑몰이라면 이런 것을 먼저 정합니다.

• 회원 가입 방식과 로그인 방법
• 결제를 카드로 할지, 휴대폰으로 할지
• 배송지를 몇 개까지 등록할 수 있게 할지
• 물건을 장바구니에 담게 할지
• 화면을 어떻게 구성할지

기획 없이 막 만들면 나중에 다 고쳐야 합니다. AI에게 개발을 맡길 때도 이 설계도가 곧 지시문이 됩니다. 정할 것을 먼저 적어 두면 AI가 엉뚱한 기능을 만드는 일이 줄어듭니다.

기초 공사: 서버 기본 세팅

땅을 평평하게 다지고 배수로를 파듯, 서버를 쓸 수 있게 기본 준비를 하는 단계입니다.

• 운영체제: 윈도우, 리눅스
• 네트워크 설정: IP 주소, 방화벽
• 데이터베이스 프로그램: PostgreSQL, MSSQL 같은 것
• 보안 설정, 개발 환경 세팅, 서버 용량과 메모리

용어를 지금 다 알 필요는 없습니다. "서버도 기본 세팅을 해야 쓸 수 있다" 정도로 이해하면 됩니다. 집 컴퓨터에 윈도우와 오피스 프로그램이 깔려 있어야 문서도 쓰고 검색도 하듯, 서버에도 필요한 프로그램을 깔고 설정해야 합니다.

공간 나누기: DB와 테이블

100평 땅을 사서 그중 30평에 집을 짓는다고 생각해 봅시다. 서버 안에 특정 공간을 정해 실제로 쓸 집을 짓는 것이 DB(데이터베이스)입니다. 그 안을 냉장고, 옷장, 창고처럼 용도별로 나눈 공간이 테이블입니다.

쇼핑몰이라면 회원 테이블, 상품 테이블, 주문 테이블을 따로 둡니다. 회원 정보는 회원 테이블에, 주문 내역은 주문 테이블에 넣는 식입니다.

자재 고르기: 개발 언어

원목으로 지을지 벽돌로 지을지 자재를 고르듯, 어떤 언어로 개발할지 정합니다.

• 파이썬: 배우기 쉽고 데이터 분석, AI 개발에 자주 쓰입니다.
• 자바: 기업용 프로그램에 많이 씁니다.
• 자바스크립트: 웹 화면을 만들 때 빠지지 않습니다.
• C언어: 운영체제나 기계를 직접 다루는 프로그램처럼 속도가 중요한 곳에 씁니다.

지금은 언어마다 쓰임새가 다르다는 정도만 알면 됩니다.

수도관⁠·전기선: 백엔드

눈에는 안 보이지만 데이터를 처리하고, 계산하고, 저장하는 부분입니다. 로그인을 예로 들면 흐름은 이렇습니다.

1. 아이디와 비밀번호를 입력하고 버튼을 누른다.
2. 정보가 네트워크를 타고 DB의 회원 테이블로 간다.
3. 저장된 정보와 일치하는지 확인한다.
4. 결과를 다시 화면으로 보낸다. 일치하면 로그인된 화면이, 일치하지 않으면 안내 메시지가 뜬다.

벽지⁠·조명⁠·가구: 프런트엔드

사용자 눈에 보이는 화면입니다. 버튼 모양, 색, 위치 같은 것들입니다.

화면을 꾸미는 것이 전부는 아닙니다. 구독 버튼 색을 눈에 띄게 하는 것처럼, 사용자가 의도한 행동을 하도록 이끄는 고민도 들어 있습니다. 그래도 근본은 사용자가 편하고 보기 좋게 화면을 꾸미는 일입니다. 프런트엔드를 이루는 HTML, CSS, 자바스크립트가 각각 무슨 일을 하는지는 따로 공부할 다음 주제입니다.

집들이: 배포

내가 만든 사이트나 앱을 인터넷에 공개해 누구나 찾아올 수 있게 하는 일입니다. 집에 주소가 있어야 손님이 찾아오듯, 웹사이트에도 주소(도메인)가 필요합니다.

여기서 자주 헷갈리는 이름이 깃허브(GitHub)입니다. 깃허브는 코드를 올려 두고 언제 무엇을 바꿨는지 기록하는 저장소입니다. 비유하면 내 프로그램의 설계 기록을 보관하고, 원하면 누구나 볼 수 있게 공개하는 등기소에 가깝습니다. 사이트를 실제로 띄워 주소를 붙이는 배포는 GitHub Pages, Vercel, Cloudflare Pages 같은 배포 서비스가 맡습니다. 요즘은 깃허브에 코드를 올리면 이런 서비스가 그 코드를 가져가 자동으로 배포하는 방식이 흔합니다.

도메인을 사서 연결하고 실제로 배포하는 작업은 단계가 여럿이라 처음엔 간단하지 않습니다. 지금은 "집을 완성하고 주소를 받아 사람들에게 공개하는 것"이 배포라고만 기억하면 됩니다.

청소⁠·수리: 유지보수

집도 청소하고, 벽지가 해지면 다시 붙이고, 보일러가 고장 나면 고칩니다. 프로그램도 한 번 만들고 끝이 아닙니다. 오류를 고치고, 새 기능을 넣고, 보안을 강화합니다. 휴대폰 앱에 가끔 뜨는 업데이트가 바로 유지보수입니다.

웹 개발 과정 한 줄로 다시 보기

앞의 내용을 집 짓기 순서로 다시 묶으면 이렇습니다.

땅(서버) → 설계도(기획서) → 기초 공사(서버 환경 세팅) → 자재(개발 언어) → 뼈대와 배관(백엔드: DB와 테이블 생성, DB와 웹페이지 연결) → 인테리어(프런트엔드) → 주소 등록⁠·집들이(배포) → 관리(유지보수)

이 순서가 머릿속에 있으면 AI가 만든 결과물에서 무엇이 빠졌는지 보입니다. 화면은 예쁜데 로그인이 안 된다면 백엔드와 DB가 빠진 것이고, 내 컴퓨터에서만 열린다면 배포가 남은 것입니다. 세부 기술은 그때그때 필요한 만큼 배우면 됩니다.

서버를 어디에 둘지(직접 사서 둘지, 빌려 쓸지)도 다음에 정할 문제입니다. 직접 짓는 집과 호텔에 비유되는 온프레미스와 클라우드의 차이, 그리고 AWS 같은 클라우드 서비스가 그 주제입니다.

맛보기: AI가 만든 코드로 웹게임 열기

전체 과정을 다 몰라도 화면 하나는 지금 바로 만들어 볼 수 있습니다. 준비물은 AI 챗봇(제미나이, 챗GPT 등), 메모장, 웹 브라우저입니다. 초등학생도 한글 타자 연습 게임을 이렇게 만들 수 있습니다.

1. AI 챗봇에 만들고 싶은 게임을 말로 적는다. "테트리스 형태로 만들어 줘. 추가로 반영하면 좋을 것들은 판단해서 넣어 줘."처럼 AI에게 판단을 맡기는 문장을 덧붙여도 된다.

초등학교 3학년이 한글 타자 연습을 할 수 있는 웹게임을 HTML 파일 하나로 만들어 줘. 난이도를 조절할 수 있게 해 줘.

2. AI가 내놓은 코드 전체를 복사해 메모장에 붙여 넣는다.
3. 메모장의 "다른 이름으로 저장"에서 파일 형식을 "모든 파일"로 바꾸고, 파일 이름을 "게임.html"로, 인코딩을 UTF-8로 정해 저장한다.
   • 확인: 저장한 폴더에 브라우저 아이콘 모양의 파일이 생긴다.
4. 그 파일을 더블클릭한다.
   • 확인: 브라우저에서 게임이 열린다.

처음부터 완벽하지 않을 수 있습니다. 글자가 동그라미 밖으로 삐져나오는 식의 오류가 보이면, 무엇이 이상한지 그대로 적어 AI에게 고쳐 달라고 하면 됩니다. 메모장 파일이 왜 바로 웹페이지가 되는지는 HTML의 원리를 알면 이해됩니다.