프론트엔드 vs 백엔드: 무엇이 다를까?
프론트엔드는 사용자의 브라우저에서 실행되는 앱의 부분으로, 사용자가 보고 클릭하고 입력하는 페이지, 버튼, 양식, 애니메이션을 담당합니다. 백엔드는 사용자가 볼 수 없는 서버에서 실행되는 부분으로, 데이터를 저장하고 가져오며, 비즈니스 규칙을 적용하고, 누가 무엇을 할 수 있는지 확인하고, 결제나 이메일 같은 다른 서비스와 통신합니다. 두 영역은 API를 통해 소통하며, 데이터베이스와 함께 "풀스택" 앱을 이룹니다.
AI로 만들 때 이 구분이 중요한 이유
AI 빌더에 앱을 설명할 때, 의식하든 하지 않든 사실상 두 영역을 동시에 설명하게 됩니다. "고객이 시간대를 예약할 수 있어야 합니다"라는 문장은 예약 양식(프론트엔드), 어떤 시간대가 비어 있는지에 대한 규칙(백엔드), 예약을 저장할 곳(데이터베이스)을 모두 뜻합니다.
이 구분을 알면 실무에서 세 가지가 도움이 됩니다.
- 보안. 프론트엔드에 있는 것은 사용자가 보고 바꿀 수 있습니다. 규칙과 비밀 값은 백엔드에 있어야 합니다.
- 디버깅. "버튼이 반응하지 않아요"와 "버튼은 반응하는데 저장이 안 돼요"는 서로 다른 영역의 문제입니다. 어느 쪽인지 말해 주면 AI가 원인을 더 빨리 찾습니다.
- 호스팅과 비용. 프론트엔드만 있는 사이트는 저렴하고 호스팅이 간단합니다. 백엔드는 어딘가에서 계속 실행되어야 하므로, 비용과 유휴 상태일 때의 앱 동작에 영향을 줍니다.
일상에서 보는 비유
식당을 떠올려 보세요.
프론트엔드는 홀입니다. 메뉴, 테이블, 인테리어, 주문을 받는 직원이 여기에 해당합니다. 고객을 위해 설계되었고, 고객은 이 모든 것을 보고 만질 수 있습니다.
백엔드는 주방과 사무실입니다. 요리하는 요리사, 재고 창고, 계산대, 누구에게 할인을 줄지 정하는 관리자의 규칙이 여기에 있습니다. 고객은 이곳에 들어갈 수 없고, 들어가서도 안 됩니다.
API는 둘 사이를 잇는 통로입니다. 합의된 형식으로 주문이 들어가고 음식이 나오는 주문 창구와 같습니다. 데이터베이스는 재고 창고이자 주문 장부입니다.
고객은 자신의 주문서를 고쳐 쓸 수 있습니다(프론트엔드는 고객의 통제 아래 있으니까요). 하지만 주방은 여전히 무엇을 만들고 얼마를 받을지 스스로 결정합니다. 그래서 중요한 검사는 뒤쪽에 있어야 합니다.
각 영역이 하는 일
| 프론트엔드 | 백엔드 | |
|---|---|---|
| 실행 위치 | 사용자의 기기, 브라우저 안 | 여러분(또는 호스트)이 관리하는 서버 |
| 주요 역할 | 화면 표시, 입력 수집, 클릭 반응 | 데이터 저장, 규칙 적용, 권한 강제, 다른 서비스 호출 |
| 사용자가 코드를 보고 바꿀 수 있나요? | 예. 브라우저로 다운로드되기 때문입니다 | 아니요 |
| 비밀 API 키를 보관할 수 있나요? | 아니요 | 예, 환경 변수에 둘 수 있습니다 |
| 흔히 쓰는 기술 | HTML, CSS, JavaScript/TypeScript, React, Vue, Svelte, Tailwind | Node.js, Python(FastAPI, Django), C#, Java, Go, Ruby |
| 흔한 문제 | 모바일에서 레이아웃이 깨짐, 버튼이 반응하지 않음, 느린 페이지 | 데이터가 저장되지 않음, 잘못된 데이터 표시, 오류, 보안 구멍 |
일부 프레임워크는 이 경계를 흐리게 합니다. 예를 들어 Next.js는 하나의 프로젝트 안에 브라우저 코드와 서버 코드를 함께 담을 수 있게 해 줍니다. 그래도 개념은 같습니다. 질문은 항상 이 부분이 어디에서 실행되는가? 입니다.
실제 예시: 요가 수업 예약
누군가 요가 수업을 예약할 때 일어나는 일을 단계별로 살펴보겠습니다.
| 단계 | 위치 | 일어나는 일 |
|---|---|---|
| 1 | 프론트엔드 | 일정 페이지가 열리고 이번 주 수업 목록을 백엔드에 요청합니다. |
| 2 | 백엔드 | 데이터베이스에서 수업과 예약을 읽고, 남은 자리를 계산해서 목록을 JSON으로 돌려줍니다. |
| 3 | 프론트엔드 | 각 수업의 시간, 강사, 남은 자리를 보여 줍니다. |
| 4 | 프론트엔드 | 사용자가 수업을 고르고 이름과 이메일을 입력합니다. 양식은 이메일 형식이 맞는지 확인합니다(편의 기능일 뿐 보장은 아닙니다). |
| 5 | 프론트엔드 → 백엔드 | API를 통해 POST /api/bookings 요청을 보냅니다. |
| 6 | 백엔드 | 입력을 다시 검증하고, 수업이 꽉 찼는지 확인한 뒤, 예약을 저장하고, 비밀 키를 사용해 이메일 서비스에 확인 메일 발송을 요청합니다. |
| 7 | 백엔드 → 프론트엔드 | "예약 완료" 또는 "죄송합니다, 마감되었습니다"를 돌려줍니다. |
| 8 | 프론트엔드 | 예약 확인 화면을 보여 줍니다. |
4단계와 6단계를 보면 입력이 두 번 검사된다는 것을 알 수 있습니다. 프론트엔드 검사는 즉각적인 피드백을 주고, 실제로 효력을 갖는 것은 백엔드 검사입니다. 마음먹은 사용자는 프론트엔드를 아예 우회할 수 있기 때문입니다.
자주 쓰는 용어 설명
| 용어 | 뜻 |
|---|---|
| 클라이언트 / 서버 | 클라이언트는 요청을 보내는 브라우저(또는 앱)이고, 서버는 그 요청에 응답하는 쪽입니다. |
| UI | 사용자 인터페이스. 화면과 조작 요소를 뜻합니다. |
| API | 프론트엔드가 백엔드에 데이터나 작업을 요청하는 합의된 방식입니다. |
| 엔드포인트 | /api/bookings처럼 API 안의 특정 URL 하나를 뜻합니다. |
| 풀스택 | 프론트엔드 + 백엔드 + 데이터베이스를 함께 뜻합니다. 풀스택 앱이란을 참고하세요. |
| 정적 사이트 | 자체 백엔드 없이 프론트엔드만 있는 사이트이며, 모든 사람에게 같은 파일을 제공합니다. |
| SPA | 단일 페이지 애플리케이션. 새 페이지를 불러오는 대신 브라우저 안에서 화면을 갱신하는 프론트엔드입니다. |
| 서버 사이드 렌더링(SSR) | 서버가 페이지의 HTML을 미리 만들어서 보내는 방식입니다. 속도와 SEO에 도움이 될 수 있습니다. |
| 환경 변수 | 실행 시점에 백엔드에 전달되는 설정과 비밀 값으로, 코드 밖에 보관됩니다. |
내 앱에 백엔드가 필요할까요?
| 내 앱이… | 백엔드가 필요한가요? |
|---|---|
| 모든 사람에게 같은 정보를 보여 줌 | 아니요 |
| 나에게 이메일만 보내는 문의 양식이 있음 | 보통 작은 백엔드나 양식 서비스로 충분합니다 |
| 다른 사람들이 볼 데이터를 저장함 | 예 |
| 로그인과 비공개 데이터가 있음 | 예 |
| 결제를 받음 | 예. 최소한 결제 세션을 만들고 결제 웹훅을 받으려면 필요합니다 |
| 비밀 키가 필요한 유료 AI나 다른 API를 사용함 | 예. 키를 브라우저에 노출하지 않기 위해서입니다 |
흔한 실수와 오해
- 프론트엔드에 비밀 키를 넣기. 브라우저의 개발자 도구를 여는 누구에게나 보입니다. AI로 만든 앱에서 가장 흔하고 심각한 실수입니다.
- 규칙을 프론트엔드에만 적용하기. 관리자가 아닌 사용자에게 "삭제" 버튼을 숨기는 것은 보호가 아닙니다. 백엔드가 요청을 거부해야 합니다.
- 백엔드를 "그냥 데이터베이스"라고 생각하기. 데이터베이스는 데이터를 저장할 뿐입니다. 누가 데이터를 읽고 바꿀 수 있는지, 그리고 그 방식은 백엔드가 결정합니다.
- JavaScript는 곧 프론트엔드라고 생각하기. JavaScript와 TypeScript는 Node.js를 통해 서버에서도 실행됩니다.
- 엉뚱한 영역을 탓하기. 페이지는 정상인데 데이터가 틀리다면, 문제는 대개 디자인이 아니라 백엔드나 데이터베이스에 있습니다.
- 과하게 만들기. 포트폴리오에는 맞춤 백엔드가 필요하지 않습니다. 추가하면 비용과 움직이는 부품만 늘어납니다.
AI 빌더에게 요청할 내용
- "이 앱의 어떤 부분이 브라우저에서 실행되고, 어떤 부분이 서버에서 실행되나요?"
- "API 키를 모두 백엔드로 옮기고 환경 변수에서 읽도록 바꿔 주세요."
- "양식은 브라우저뿐 아니라 서버에서도 검증해 주세요."
- "관리자만 예약을 삭제할 수 있도록 백엔드에서 강제해 주세요."
- "페이지는 정상인데 데이터가 저장되지 않아요. 요청에 대한 백엔드 로그를 확인해 주세요."
- "이건 간단한 마케팅 사이트이니, 백엔드가 꼭 필요하지 않다면 프론트엔드만으로 유지해 주세요."
Mythex에서의 프론트엔드와 백엔드
새 Mythex 프로젝트는 Vite, React, TypeScript, Tailwind 기반 프론트엔드에서 시작하며, 앱에 백엔드가 필요하면 에이전트가 추가합니다. 또는 같은 프로젝트 안에서 Node, Python(FastAPI), C# 또는 Java로 만든 별도의 API를 프론트엔드와 함께 실행하도록 요청할 수도 있습니다. 미리보기에서 웹사이트와 API 서버를 전환할 수 있고, 게시하면 두 부분이 함께 배포되며, 필요할 때 데이터베이스와 파일 저장소가 추가됩니다. 문서에서 멀티 서비스 앱을 설명하고, 웹 호스팅 가이드에서는 라이브 상태에서 두 부분이 각각 어디에서 실행되는지 다룹니다. 앱 템플릿에서는 풀스택 예시를 빠르게 살펴볼 수 있습니다.
자주 묻는 질문
프론트엔드와 백엔드의 차이는 무엇인가요?
프론트엔드는 사용자의 브라우저에서 실행되는 앱의 부분으로, 사용자가 보고 클릭하고 입력하는 페이지, 버튼, 양식을 말합니다. 백엔드는 사용자가 볼 수 없는 서버에서 실행되며, 데이터를 저장하고, 비즈니스 규칙을 적용하고, 권한을 확인하고, 다른 서비스와 통신합니다.
모든 앱에 백엔드가 필요한가요?
아니요. 마케팅 사이트, 포트폴리오, 간단한 랜딩 페이지는 프론트엔드만으로 충분할 수 있습니다. 앱이 공유 데이터를 저장하거나, 로그인을 처리하거나, 결제를 받거나, 비밀 API 키를 사용해야 하면 어떤 형태로든 백엔드가 필요합니다.
HTML은 프론트엔드인가요, 백엔드인가요?
브라우저에서 실행되는 HTML, CSS, JavaScript는 프론트엔드입니다. 다만 JavaScript도 Node.js를 이용해 서버에서 실행할 수 있으며, 그때는 백엔드 코드가 됩니다. 언어가 아니라 코드가 어디에서 실행되는지가 기준입니다.
풀스택은 무슨 뜻인가요?
풀스택은 프론트엔드와 백엔드(보통 데이터베이스까지 포함)를 모두 다루는 것을 뜻합니다. 세 부분을 모두 갖춘 앱이 풀스택 앱이며, 풀스택 개발자는 이 모든 영역에서 작업합니다.