프론트엔드와 백엔드와 데이터베이스를 식당 역할로 구분하기

웹서비스 견적이나 AI 코딩 대화를 보면 프론트엔드, 백엔드, 데이터베이스라는 말이 자주 나옵니다. 세 가지를 프로그램 이름으로 외우기보다 식당의 홀, 주방, 장부로 나누면 훨씬 이해하기 쉽습니다.

사용자가 보는 화면은 홀이고, 주문 규칙을 처리하는 곳은 주방이며, 회원과 주문 기록을 보관하는 곳은 장부입니다. 하나의 기능도 세 역할을 오가며 완성됩니다.

프론트엔드는 사용자가 보고 누르는 부분이다

프론트엔드는 브라우저나 앱 화면에서 사용자가 직접 만나는 영역입니다. 글자, 색, 버튼, 입력칸, 메뉴뿐 아니라 버튼을 눌렀을 때 로딩 표시를 보여 주거나 잘못된 값을 안내하는 동작도 포함합니다.

React 같은 도구는 화면을 버튼, 카드, 목록 같은 작은 컴포넌트로 나누어 조립하게 도와줍니다. 중요한 건 React라는 이름이 아니라 화면을 반복 가능한 조각으로 나눈다는 생각입니다.

• 회원가입 폼을 보여 줍니다.
• 이메일 형식이 맞는지 먼저 안내합니다.
• 서버에 요청을 보낸 뒤 기다리는 상태를 표시합니다.
• 성공하면 다음 화면으로 이동하고 실패하면 이해할 수 있는 오류를 보여 줍니다.

프론트엔드만으로도 계산기처럼 브라우저 안에서 끝나는 기능을 만들 수 있습니다. 하지만 여러 기기에서 같은 계정을 쓰거나 결제를 처리하려면 서버 쪽 역할이 필요해집니다.

백엔드는 보이지 않는 규칙을 실행한다

백엔드는 브라우저가 보낸 요청을 받고, 권한과 업무 규칙을 확인하고, 필요한 데이터를 모아 응답합니다. 식당으로 보면 주문이 가능한지 확인하고 조리 순서를 결정하는 주방에 가깝습니다.

예를 들어 회원가입 요청이 오면 이메일이 이미 있는지 확인하고, 비밀번호를 안전한 방식으로 처리하고, 데이터베이스에 새 회원을 기록한 뒤 성공 여부를 돌려줍니다. 이 규칙을 프론트엔드에만 두면 사용자가 브라우저 코드를 바꿔 우회할 수 있으므로 중요한 검사는 서버에서도 해야 합니다.

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 하는 환경입니다. 같은 JavaScript 언어로 화면과 서버를 모두 만들 수 있지만, 실행 장소와 책임은 다릅니다.

데이터베이스는 오래 남겨야 할 사실을 보관한다

데이터베이스는 회원, 상품, 주문, 글처럼 나중에도 다시 찾아야 하는 정보를 구조적으로 보관합니다. 스프레드시트와 비슷해 보이지만 여러 사용자가 동시에 읽고 써도 규칙을 지키도록 설계된 점이 다릅니다.

관계형 데이터베이스에서는 표를 만들고 행으로 자료를 저장합니다. SQL이라는 언어로 필요한 행을 찾거나 추가하고 수정합니다. PostgreSQL 공식 튜토리얼도 관계형 데이터베이스 개념과 SQL을 처음부터 다룹니다.

데이터베이스가 모든 파일을 넣는 창고는 아닙니다. 큰 이미지나 영상은 파일 저장소에 두고, 데이터베이스에는 주소와 설명만 기록하는 방식이 흔합니다. 어떤 정보를 얼마나 오래 보관할지도 개인정보와 비용을 생각해 정해야 합니다.

회원가입 한 번에도 세 역할이 이어진다

사용자가 가입 버튼을 누르는 순간을 순서대로 따라가 보겠습니다.

1. 프론트엔드가 이메일과 비밀번호 입력을 받습니다.
2. 프론트엔드가 비어 있는 칸 같은 기본 오류를 먼저 알려 줍니다.
3. 백엔드로 회원가입 요청을 보냅니다.
4. 백엔드가 중복 이메일과 비밀번호 정책을 확인합니다.
5. 백엔드가 데이터베이스에 새 회원 정보를 기록합니다.
6. 데이터베이스 결과에 따라 백엔드가 성공 또는 실패를 응답합니다.
7. 프론트엔드가 환영 화면이나 오류 메시지를 보여 줍니다.

어느 단계가 실패했는지에 따라 고칠 곳도 달라집니다. 버튼이 눌리지 않으면 프론트엔드, 요청은 갔지만 500 오류가 나면 백엔드, 중복 데이터가 생기면 데이터베이스 제약과 서버 규칙을 함께 봐야 합니다.

AI에게 기능을 요청할 때 세 부분으로 나눈다

"로그인 만들어 줘"라고만 말하면 AI가 중요한 결정을 임의로 채울 수 있습니다. 화면, 서버 규칙, 저장 정보를 나누면 결과가 구체적이 됩니다.

화면: 이메일과 비밀번호 입력, 로딩과 오류 메시지
서버: 5회 실패 시 잠시 차단, 성공 시 세션 발급
데이터: 회원 ID, 이메일, 가입일 저장, 비밀번호 원문 저장 금지
검증: 잘못된 이메일, 중복 가입, 빈 값, 모바일 화면 테스트

이렇게 쓰면 구현을 몰라도 요구사항의 빈틈을 찾을 수 있습니다. 특히 "어디에 저장하나", "누가 볼 수 있나", "실패하면 무엇을 보여 주나"를 묻는 습관이 중요합니다.

오늘 바로 해볼 작은 실습

평소 쓰는 서비스 하나를 골라 기능을 세 칸으로 나눠 적어 보세요. 배달 앱의 주문이라면 프론트엔드는 메뉴와 결제 화면, 백엔드는 영업시간과 배달 가능 여부 확인, 데이터베이스는 주문과 주소 기록입니다.

1. 화면에서 사용자가 입력하는 값을 적습니다.
2. 서버가 반드시 확인해야 할 규칙을 적습니다.
3. 나중에도 남겨야 할 정보를 적습니다.
4. 실패했을 때 사용자가 볼 메시지를 적습니다.

이 분류만 익혀도 AI가 만든 코드를 검토할 때 "버튼은 있는데 서버 검사가 없다"거나 "저장해야 할 값이 새로고침하면 사라진다"는 문제를 훨씬 빨리 찾을 수 있습니다.