지식 · IT·데이터·DX
프론트엔드 · 백엔드
Frontend / Backend
📂IT·데이터·DX⏱읽기 1분📊입문🔗관련 4
프론트엔드란?
한 줄 정의
프론트엔드는 사용자가 보는 화면(앞단), 백엔드는 그 뒤에서 데이터·로직을 처리하는 서버 쪽(뒷단). 웹 개발의 두 축.
⚡ 3줄 요약
- 프론트=사용자가 보는 화면
- 백=뒤에서 데이터·로직 처리
- 웹 개발의 두 축
프론트엔드는 버튼·글자·색처럼 '눈에 보이고 만지는' 부분으로, 브라우저에서 HTML·CSS·자바스크립트로 그려집니다. 백엔드는 로그인 검증·데이터 저장·계산처럼 '뒤에서 처리되는' 부분으로, 서버와 데이터베이스가 담당합니다.
식당에 비유하면 프론트엔드는 홀·메뉴판, 백엔드는 주방·창고입니다. 바이브 코딩으로 앱을 만들 때 'AI야, 이 화면(프론트) 만들어줘', '이 데이터를 저장하는 기능(백엔드) 붙여줘'처럼 나눠 요청하게 됩니다. 둘을 구분하면 어디를 고쳐야 할지 명확해집니다.
💡 쉽게 말하면
식당의 홀(프론트)과 주방(백) — 손님이 보는 곳과 뒤에서 요리하는 곳입니다.
실무에서 왜 중요한가
'화면이 이상하다'와 '데이터가 안 저장된다'는 고칠 곳이 다릅니다. 프론트/백 구분이 문제 해결의 첫 단추입니다.
프론트엔드 vs 백엔드
| 구분 | 프론트엔드 | 백엔드 |
|---|---|---|
| 역할 | 사용자가 보는 화면 | 데이터·로직 처리 |
| 위치 | 브라우저·앱(앞단) | 서버(뒷단) |
| 예 | 버튼·레이아웃 | 로그인·DB·결제 |
유래와 출처
웹이 복잡해지면서 '화면 표현'과 '데이터·로직 처리'의 역할이 분업화되며 자연스럽게 정착된 구분입니다. 특정 창시자보다 웹 개발 실무에서 형성됐습니다.
사례로 이해하기
예를 들어, 회원가입 기능을 프론트/백으로 나눠 만든다고 해봅시다.
- 프론트 — 이름·이메일 입력 폼과 '가입' 버튼 화면을 만듭니다.
- 전송 — 버튼을 누르면 입력값을 백엔드로 보냅니다.
- 백엔드 — 서버가 이메일 중복을 확인하고 데이터베이스에 저장합니다.
- 응답 — 성공/실패 결과를 프론트로 돌려줍니다.
- 표시 — 프론트가 '가입 완료' 화면을 보여줍니다.
관련 용어
서버 · 클라이언트서비스를 '요청하는 쪽'이 클라이언트(내 브라우저·앱), '제공하는 쪽'이 서버(중앙 컴퓨터). 둘이 주고받으며 서비스가 돌아간다.HTML · CSS · 자바스크립트웹페이지를 이루는 세 가지 기본 요소 — HTML은 구조(뼈대), CSS는 디자인(옷), 자바스크립트는 동작(움직임).데이터베이스데이터를 체계적으로 저장·검색·관리하는 시스템. 앱의 회원·주문·글 같은 정보가 여기에 담긴다.프레임워크 · 라이브러리라이브러리는 필요할 때 꺼내 쓰는 '기능 모음집', 프레임워크는 그 위에서 개발의 '틀·골격'을 제공하는 것. 바퀴를 다시 발명하지 않게 해준다.
이 용어와 연결된 교육
📚디지털 트랜스포메이션나눔경영컨설팅 기업교육 · 대면/온라인과정 보기 →이 주제로 사내 교육이 필요하신가요?
담당자 맞춤 커리큘럼·견적을 바로 받아보세요.
자주 묻는 질문
프론트엔드와 백엔드를 모두 다루는 것을 말합니다. AI 도구 덕분에 한 사람이 둘 다 하기 쉬워졌습니다.
눈에 보이는 프론트엔드가 진입이 쉽습니다. 다만 바이브 코딩에선 AI가 양쪽을 함께 만들어 주기도 합니다.
프론트엔드와 백엔드를 모두 다루는 개발자·역량을 뜻합니다.
눈에 보이는 결과가 빠른 프론트엔드부터 시작하는 경우가 많습니다. 취향·목표에 따라 다릅니다.