프론트엔드 백엔드 처음 배울 때 헷갈리는 이유

화면 속 버튼을 누를 때마다 어떤 일이 일어날까요? 프론트엔드와 백엔드가 데이터를 주고받는 핵심 통신 방식(HTTP, RESTful API)을 전문가가 해부합니다. 웹 서비스 개발의 근본 원리를 지금 확인하세요.

아이디와 비밀번호를 입력하고 버튼을 눌렀을 뿐인데,
어떤 코드는 화면에서 움직이고 어떤 코드는 서버에서 돌고,
또 결과는 다시 화면으로 돌아옵니다.

그래서 처음엔 프론트엔드와 백엔드가 따로 존재한다기보다
한 덩어리처럼 느껴져요.

특히 로그인은 이 구분이 한 번에 겹쳐 보이는
대표적인 기능입니다.

입력창은 눈앞에 있고,
버튼을 누르는 순간 데이터는 밖으로 나가고,
서버는 사용자를 확인한 뒤 다시 답을 보내거든요.

웹에서는 이런 흐름이
클라이언트의 요청과 서버의 응답으로 오가며 동작합니다.

🔹 눈에 보이는 화면과 실제 처리가 한 번에 움직입니다

로그인 페이지에서 먼저 보이는 건
프론트엔드가 맡는 부분이에요.

입력창을 보여주고,
버튼을 누를 수 있게 만들고,
비밀번호 칸을 가리거나,
빈칸이면 경고 문구를 띄우는 일들이
여기에 들어갑니다.

여기까지만 보면 프론트엔드는
그냥 예쁘게 보이게 하는 역할처럼 느껴질 수 있는데,
실제로는 사용자의 행동을 받는 첫 관문에 더 가깝습니다.

사용자가 무엇을 입력했고,
버튼을 눌렀는지,
지금 로딩 중인지,
오류 메시지를 어떻게 보여줄지까지
화면 쪽에서 계속 관리하니까요.

사용자가 프론트앤드를 통해 구현된 화면에서 작업하는모습 AI이미지생성도구로 직접 제작하였습니다.

 

🔸 버튼을 누른 다음부터 백엔드 일이 시작되는 건 아닙니다

많이 헷갈리는 지점이
바로 여기예요.

버튼을 누르면 이제부터는 백엔드 차례라고 생각하기 쉬운데,
실제로는 프론트엔드가 요청을 만들어 보내는 순간까지도
계속 개입합니다.

예를 들어 사용자가 로그인 버튼을 누르면,
프론트엔드는 입력값을 정리해서
서버로 보낼 준비를 합니다.

웹에서는 이런 데이터를 보낼 때
보통 HTTP 요청이라는 형식으로 전달하고,
폼 전송에서는 GET과 POST 같은 방식이 쓰입니다.

로그인처럼 민감한 정보는
보통 요청 본문에 담아 보내는
POST 방식으로 다루는 경우가 많아요.

그러니까 흐름을 아주 단순하게 보면 이렇습니다.

화면에서 입력을 한다.

→ 프론트엔드가 요청을 만든다
→ 서버로 보낸다
→ 백엔드가 그 요청을 받는다

여기서부터 백엔드는
실제 확인 작업에 들어갑니다.

아이디가 존재하는지,
비밀번호가 맞는지,
이 사용자가 로그인 가능한 상태인지,
필요한 경우 데이터베이스를 조회해야 하는지도
이쪽에서 처리해요.

서버사이드 코드는
이런 요청 처리,
사용자 인증,
세션과 권한 처리 같은 일을 맡습니다.

데이터베이스와 서버간 정보 처리를보여주는 이미지 AI이미지생성도구로 직접 제작하였습니다.

 

🔷 로그인 성공도 화면이 혼자 아는 게 아니라 답을 받아서 바뀌는 겁니다

처음에는
“로그인 버튼을 눌렀더니 홈으로 넘어갔다” 정도로만 보이는데,
그 장면도 사실은 중간 단계가 있습니다.

백엔드가 확인을 끝내면
서버는 다시 응답을 보내요.

성공했는지,
실패했는지,
실패라면 왜 안 되는지 같은 결과가
여기에 담깁니다.

HTTP 응답에는
상태를 나타내는 코드도
함께 들어갈 수 있습니다.

그다음 프론트엔드는
그 답을 받아서 화면을 바꿉니다.

로그인 성공이면
메인 화면으로 이동시키고,
실패면
“비밀번호가 맞지 않습니다” 같은 문구를 보여주는 식이죠.

결국 화면을 바꾸는 건 프론트엔드,
판단해서 결과를 보내는 건 백엔드라고 보면
이해가 조금 쉬워집니다.

 

🔶 처음 배울 때 자꾸 섞여 보이는 이유는 기능을 기준으로 보기 때문입니다

사람은 보통
“로그인”을 하나의 기능으로 기억해요.

그런데 개발에서는
그 하나가 여러 조각으로 나뉘어 있습니다.

입력창을 띄우는 일,
입력값을 검사하는 일,
서버로 보내는 일,
사용자 정보를 확인하는 일,
결과를 다시 보여주는 일.

이걸 전부 한 번에 배우면
어디까지가 프론트엔드인지,
어디서부터 백엔드인지
흐려질 수밖에 없어요.

이럴 때는 기능 이름으로 보지 말고
데이터가 어디에 있느냐로 보면
좀 더 분명해집니다.

브라우저 안에서 바로 바뀌는 화면과 사용자 반응은
프론트엔드 쪽에 가깝고,
서버에서 확인하거나 저장하거나
권한을 판단하는 일은
백엔드 쪽에 가깝습니다.

로그인 하나에도 역할이 갈라져 보이는 이유가
바로 이 구조예요.

마지막으로 정리하면,
로그인은 버튼 하나를 누르는 단순한 동작처럼 보여도
실제로는 입력 → 요청 → 확인 → 응답 → 화면 변경으로
나뉘어 움직입니다.

그래서 처음 배우는 사람 눈에는
한 기능이면서도
두 영역이 계속 겹쳐 보이죠.

프론트엔드는 사용자가 마주하는 쪽을 맡고,
백엔드는 그 뒤에서 확인과 처리 기준을 맡는 구조라고 보면
이해하기 훨씬 쉬워집니다.