비개발자를 위한 IT 상식 #1 웹사이트는 무엇으로 이루어지는가 — 프론트엔드,백엔드,데이터베이스
개발자와 한 팀에서 일하다 보면 분명 한국어로 대화하는데 무슨 말인지 모르겠는 순간이 옵니다. “그건 프론트 작업이라 금방 돼요”, “백엔드를 손봐야 해서 며칠 걸립니다”, “DB에 안 쌓이고 있어요” 같은 말이 그렇습니다. 기획서를 쓰고, 화면을 디자인하고, 서비스를 마케팅하는 사람에게 이 단어들은 매일 듣지만 정확히는 모르는 말로 남기 쉽습니다.
이 시리즈는 코드를 한 줄도 쓰지 않는 사람을 위한 IT 상식 강좌입니다. 개발자가 되기 위한 글이 아니라, 개발자와 정확하게 대화하기 위한 글입니다. 용어 하나를 제대로 알면 회의에서 헤매는 시간이 줄고, 버그를 정확히 신고할 수 있고, 일정이 왜 그렇게 잡히는지 납득이 됩니다.
이번 시리즈는 비개발자를 위한 IT 상식 5편으로 구성됩니다.
- #1 웹사이트는 무엇으로 이루어지는가 — 프론트엔드,백엔드,데이터베이스 ← 이번 글
- #2 API란 무엇인가
- #3 서버, 클라우드, 그리고 배포
- #4 버그, 핫픽스, 롤백 — 개발자가 장애에 대응하는 법
- #5 Git과 버전 관리 — 여러 명이 한 코드를 고치는 법
첫 글의 목표는 단 하나입니다. 우리가 매일 쓰는 웹사이트와 앱이 프론트엔드, 백엔드, 데이터베이스라는 세 층으로 나뉜다는 것, 그리고 각 층이 무슨 일을 하는지 감을 잡는 것입니다.
화면 뒤에는 세 개의 층이 있습니다 #
쇼핑몰에서 상품을 검색하고, 장바구니에 담고, 결제 버튼을 누르는 짧은 과정에도 사실은 서로 다른 일을 하는 세 부분이 함께 움직입니다. 식당에 비유하면 이해가 빠릅니다.
- 프론트엔드는 손님이 앉는 홀입니다. 메뉴판, 테이블, 직원의 응대처럼 손님 눈에 보이고 손님이 직접 만지는 모든 것입니다.
- 백엔드는 주방입니다. 주문이 들어오면 요리를 만들어 내보내는 곳이고, 손님 눈에는 보이지 않습니다.
- 데이터베이스는 식자재 창고이자 장부입니다. 재료를 보관하고, 누가 무엇을 주문했는지 기록을 남깁니다.
손님이 보는 것은 홀뿐이지만, 홀만으로는 음식이 나오지 않습니다. 웹사이트도 똑같습니다. 화면은 전체의 일부일 뿐이고, 그 뒤에 보이지 않는 두 층이 함께 일하고 있습니다.
프론트엔드 — 눈에 보이는 모든 것 #
프론트엔드는 사용자의 화면에 직접 나타나는 부분입니다. 버튼의 색, 글자의 크기, 메뉴가 펼쳐지는 움직임, 입력창에 글자를 칠 때의 반응이 모두 프론트엔드의 영역입니다. 사용자의 컴퓨터나 스마트폰에서, 정확히는 크롬이나 사파리 같은 웹브라우저 안에서 실행됩니다.
프론트엔드를 만드는 기본 재료는 세 가지입니다. HTML이 화면의 뼈대를 잡고, CSS가 색과 모양을 입히고, JavaScript가 움직임과 반응을 더합니다. 디자이너와 기획자가 가장 자주 마주하는 부분이 바로 여기입니다. “이 버튼을 오른쪽으로 옮겨 주세요”, “폰트를 키워 주세요”, “로딩 애니메이션을 넣어 주세요” 같은 요청은 대부분 프론트엔드 작업입니다.
다만 화면에 보인다고 해서 모두 프론트엔드인 것은 아닙니다. 화면에 표시되는 상품 가격이나 회원 이름 같은 내용물은 백엔드에서 받아 온 결과입니다. 프론트엔드는 그 내용을 보기 좋게 배치해서 보여 줄 뿐입니다. 이 구분이 다음 두 층을 이해하는 출발점입니다.
백엔드 — 보이지 않는 곳에서 판단하는 부분 #
백엔드는 사용자 눈에 보이지 않는 서버에서 실행되는 부분입니다. 로그인할 때 비밀번호가 맞는지 확인하고, 주문이 들어오면 재고가 있는지 따지고, 결제 금액을 계산하고, 권한이 있는 사용자인지 검사하는 일을 합니다. 서비스의 규칙과 판단이 모여 있는 곳이라서 흔히 비즈니스 로직이라고 부릅니다.
프론트엔드가 “결제 버튼을 눌렀습니다"라고 알리면, 백엔드는 “이 사용자가 로그인 상태가 맞는지, 잔액이나 한도가 충분한지, 재고가 남았는지"를 차례로 확인한 뒤 결제를 진행할지 거절할지 결정합니다. “로그인이 안 돼요”, “결제가 자꾸 실패해요” 같은 문제의 상당수는 화면이 아니라 이 백엔드의 판단 과정에서 생깁니다.
같은 버그라도 어느 층의 문제인지에 따라 고치는 난이도가 크게 다릅니다. 버튼 색을 바꾸는 프론트엔드 수정은 짧게 끝나는 경우가 많지만, 결제 규칙을 바꾸는 백엔드 수정은 잘못되면 실제 돈이 오가는 문제로 이어지므로 신중하게 진행됩니다. 개발자가 “그건 백엔드라 시간이 좀 걸립니다"라고 말하는 이유가 여기에 있습니다.
데이터베이스 — 모든 것을 기억하는 저장소 #
프론트엔드와 백엔드만 있으면 한 가지가 빠집니다. 바로 기억입니다. 회원 정보, 주문 내역, 게시글, 상품 목록처럼 오래 보관해야 하는 정보를 어딘가에 저장해 두어야 합니다. 그 저장소가 데이터베이스입니다.
데이터베이스는 거대한 엑셀 표를 떠올리면 가깝습니다. 회원 표에는 한 줄마다 한 명의 정보가 들어가고, 주문 표에는 한 줄마다 하나의 주문이 기록됩니다. 백엔드는 필요할 때 이 표에서 정보를 꺼내 오고, 새 정보를 적어 넣고, 바뀐 내용을 고칩니다. 사용자가 회원가입을 하면 회원 표에 한 줄이 추가되고, 주문을 하면 주문 표에 한 줄이 쌓이는 식입니다.
“어제 가입했는데 오늘 보니 정보가 사라졌어요” 같은 문제는 데이터베이스와 관련이 깊습니다. 데이터베이스는 전원이 꺼져도 내용이 남는다는 점에서 화면이나 서버의 일시적인 처리와 다릅니다. 서비스가 쌓아 온 모든 기록이 결국 이곳에 남기 때문에, 데이터베이스는 가장 조심스럽게 다루는 층이기도 합니다.
한 번의 클릭이 세 층을 거치는 과정 #
세 층이 어떻게 함께 움직이는지, 로그인 한 번을 예로 따라가 보겠습니다.
- 사용자가 화면에서 아이디와 비밀번호를 입력하고 로그인 버튼을 누릅니다. 여기까지가 프론트엔드입니다.
- 프론트엔드가 입력된 값을 백엔드로 보냅니다. 백엔드는 이 아이디가 실제로 있는 계정인지 확인하기 위해 데이터베이스에 회원 정보를 요청합니다.
- 데이터베이스가 해당 회원의 저장된 정보를 백엔드에 돌려줍니다. 백엔드는 입력된 비밀번호가 저장된 값과 맞는지 비교합니다.
- 맞으면 백엔드가 “로그인 성공"이라는 결과를 프론트엔드에 돌려주고, 프론트엔드는 사용자에게 환영 화면을 보여 줍니다. 틀리면 “비밀번호가 올바르지 않습니다"라는 메시지를 보여 줍니다.
버튼 한 번에 세 층이 차례로 대화한 셈입니다. 이때 프론트엔드와 백엔드가 정보를 주고받는 약속을 API라고 부르는데, 이 부분은 다음 편에서 따로 다루겠습니다.
왜 이걸 알면 일이 편해지는가 #
세 층을 구분할 수 있게 되면 실무에서 바로 달라지는 것이 있습니다.
- 버그를 정확히 신고할 수 있습니다. “화면에는 1,000원으로 보이는데 결제하면 1,100원이 빠져나가요"처럼 적으면, 개발자는 화면이 아니라 백엔드의 계산을 의심하면 됩니다. 어느 층의 문제인지 가늠한 신고는 해결 속도를 크게 높입니다.
- 일정 감각이 생깁니다. 프론트엔드 수정인지 백엔드 수정인지에 따라 작업의 무게가 다르다는 것을 알면, “이건 왜 하루가 걸리고 저건 왜 일주일이 걸리는지” 납득하기 쉽습니다.
- 회의에서 길을 잃지 않습니다. 개발자들이 나누는 대화의 큰 줄기를 따라갈 수 있고, 필요할 때 정확한 질문을 던질 수 있습니다.
정리 #
이번 글에서는 웹사이트와 앱이 세 층으로 이루어진다는 큰 그림을 살펴봤습니다.
- 프론트엔드는 사용자 눈에 보이고 직접 다루는 화면입니다.
- 백엔드는 보이지 않는 서버에서 규칙을 판단하고 처리하는 부분입니다.
- 데이터베이스는 정보를 오래 보관하고 기록하는 저장소입니다.
이 세 층은 떨어져 일하지 않고, 사용자의 행동 하나마다 끊임없이 서로 대화합니다. 그 대화가 어떤 약속 위에서 이루어지는지가 다음 편의 주제입니다. 다음 글에서는 개발자들이 입에 달고 사는 단어인 API가 무엇인지 알아보겠습니다.