[7] 프론트엔드와 백엔드
웹사이트는 어떻게 만들어질까?
지난 글에서 서버가 정확히 어떤 역할을 하는지 살펴보면서 '프론트엔드'와 '백엔드'에 대해서도 간단히 알아봤는데요. 오늘은 이 두 영역이 서로 어떤 일을 하고, 어떻게 협력하는지 조금 더 구체적으로 알아보려고 해요. 그리고 궁극적으로는 하나의 웹사이트나 앱이 어떤 식으로 만들어지고 작동하는지, 사용자의 눈에 보이는 화면부터 보이지 않는 서버 속까지, 그 흐름을 함께 따라가보려고 합니다.
1. 프론트엔드 vs 백엔드, 도대체 뭐가 다른 걸까?
웹사이트나 앱을 만든다고 했을 때, 모든 걸 혼자 다 하는 게 아니라 보통 역할을 나눠서 개발합니다. 크게 두 가지 분야가 있어요.
프론트엔드(Frontend): 사용자 눈에 보이는 부분
백엔드(Backend): 화면 너머, 내부에서 돌아가는 부분
비유를 해보면, 프론트엔드는 사람의 얼굴이나 겉모습 같이 사용자에게 보이는 부분을, 백엔드는 사람의 소화기관이나 뇌처럼 보이지 않지만 중요한 역할을 담당하는 부분이라고 할 수 있습니다.
예를 들어, 쇼핑몰 사이트에 들어갔을 때, 상품 목록이 보이고, 버튼을 누르면 장바구니에 담기는 걸 확인할 수 있죠? 이건 프론트엔드의 영역이에요. 하지만 그 장바구니에 어떤 상품이 담겼는지 기억하고, 결제를 처리하고, 배송지를 저장하는 건 모두 백엔드에서 담당해요.
gemini 이미지 생성 활용2. 프론트엔드 개발자와 백엔드 개발자는 어떤 도구를 쓸까?
각 영역을 담당하는 개발자들은 서로 다른 도구를 써요.
프론트엔드 개발자는 주로, HTML로 화면의 뼈대를 만들고 CSS로 색, 크기, 배치 등 디자인을 담당해요. 그리고 JavaScript를 통해 사용자와 동적 상호작용이 가능하도록 구현합니다. React, Vue, Svelte 같은 라이브러리나 프레임워크를 사용해 개발을 더 쉽고 체계적으로 하기도 합니다.
이와 달리 백엔드 개발자는, Node.js, Python(Django), Java(Spring), Ruby on Rails 같은 서버 언어/프레임워크와 MySQL, PostgreSQL, MongoDB 같은 데이터베이스를 다룹니다.
3. 실제 서비스는 어떻게 작동할까?
우리가 자주 사용하는 로그인 기능으로 실제 서비스의 프론트엔드/백엔드가 어떻게 작동하는지 살펴볼게요.
1)먼저 사용자가 이메일과 비밀번호를 입력하고 ‘로그인’ 버튼을 클릭합니다. 이건 프론트엔드의 역할이에요. 화면에 입력창을 만들고, 사용자의 입력을 받아 버튼 동작까지 처리하는 거죠.
2)그다음, 사용자가 입력한 이메일과 비밀번호 정보는 서버로 전송됩니다. 여기서부터는 프론트엔드가 백엔드에게 요청을 보내는 과정이라고 볼 수 있어요. “이 사람이 말하길 자기가 이 이메일이고, 비밀번호는 이거래요. 맞는지 한번 확인해줘!”라고 전달하는 셈이죠.
3)백엔드는 이 요청을 받고 본격적으로 작업에 들어갑니다. 해당 이메일이 실제로 존재하는지, 그 계정의 비밀번호가 맞는지를 데이터베이스에서 확인하는 거예요. 정보가 맞으면 “로그인 성공!”이라는 응답을 다시 프론트엔드로 돌려보냅니다.
4)그러면 다시 프론트엔드가 이 응답을 받아 사용자에게 알려줘요. “로그인 성공! 환영합니다 :)”라는 메시지를 보여주고, 다음 화면으로 자연스럽게 넘어가도록 처리하죠.
gemini 이미지 생성 활용4. 프론트엔드와 백엔드는 어떻게 협업할까?
프론트엔드와 백엔드는 API라는 약속된 통신 방식으로 서로 데이터를 주고받아요. 백엔드 개발자는 "로그인할 때 이 주소(/login)로 요청을 보내면, 이런 결과를 줄게"라고 정의해두고, 프론트엔드는 그에 맞춰 데이터를 주고받도록 코드를 짜는 거죠. 마치 택배 기사님이 "여기 놓고 갈게요!" 하면, 받는 사람이 알아서 문 앞에서 가져가는 것처럼요.
gemini 이미지 생성 활용오늘은 프론트엔드와 백엔드의 역할과 협업 방식에 대해 자세히 살펴보았습니다. 사용자의 눈에 보이는 화면부터 그 뒤에서 정보를 처리하는 서버까지, 하나의 서비스가 어떻게 작동하는지 그 흐름을 이해하는 시간이 되었다면 좋겠습니다.
다음 글에서는 온라인 환경에서 더욱 중요해지고 있는 해킹과 보안에 대해 자세히 알아보겠습니다. 특히 많은 피해를 야기하는 피싱과 스미싱의 사례와 예방 방법에 대해 다뤄보겠습니다.
읽어주셔서 감사합니다.
