Front-End(프론트엔드)와 Back-End(백엔드)란? feat.웹 서비스, 웹 프로그래밍

안녕하세요! 저는 현재 백엔드 직무를 구하기 위해 백엔드 공부를 하고 있는 취준생입니다. ~with zeroBase~ 

사실 여담으로 시작하자면 저는 제로베이스 백엔드스쿨을 수강하기 전 프론트엔드스쿨과 고민을 많이 했답니다.. 그럼 왜 백엔드 스쿨을 수강했느냐? 하신다면 목차 중 "프론트엔드 맛보기> 느낀점"을 확인해주세요 ㅎㅎ

 

개발에 관심 없으신 분들도 백엔드, 프론트엔드는 한번쯤은 들어보셨을 것 같은데요.

여기서 백엔드가 무엇인지 프론트엔드가 무엇인지 한번 짚고 넘어가겠습니다!

 

웹 개발의 종류 - 프론트엔드개발과 백엔드개발

웹 개발자의 분류: 프론트엔드 개발자, 백엔드 개발자

대한민국 수험생들이 1차적으로 문과생, 이과생으로 나뉘는 것 처럼,

웹 개발자들은 1차적으로 프론트엔드, 백엔드로 나뉩니다.

프론트엔드란?

Front-End 프론트엔드

기본적으론, 웹에서 실제로 눈에 보이는 것들을 프론트엔드라고합니다.

사용자가 웹에서 메뉴를 클릭하거나, 로그인 버튼을 누르거나, 로그아웃 버튼을 누르거나 글자, 폰트의 크기나 배치 등 눈에 보이는것들의 처리를 프론트엔드에서 합니다. 눈에 보이는 것들을 UI(user Interface), 인터페이스라고 표현하는데 이런 인터페이스를 관리하는 것이 프론트엔드 개발자의 할일인 것입니다!

대표적으론 HTML이 기본공부가 되어야하는데 웹페이지 자체가 html로 작성되기 때문입니다.

구글페이지에서 우클릭 후 검사 버튼 클릭

때문에 지금 보고 있는 웹페이지에서 마우스 우클릭을 한 후 검사 버튼을 누르게 되면, 아래와 같이 html을 확인할 수 있습니다. 웹에 관심없었어도 마우스 잘못클릭하거나 버튼 잘못눌렀을때 한두번은 보셨을 거에요 ㅎㅎ

구글 웹에서의 html

"아 너무 어려워보여!!"라고 할 것 없습니다. 구조만 파악하시면 기본적인 웹은 그냥 구현하실 수 있을거에요.

html뿐만 아니라 css, javascript 등으로 웹페이지를 예쁘게 만들 수 있어요! 예쁜거에 관심이 가는건 어쩔수 없으니까요!

백엔드란?

Back-End 백엔드

반대로 웹에서 사용자 눈에 보이지않는 것을 백엔드라고합니다. 사용자가 웹에 로그인하기 위해 로그인 아이디, 비밀번호를 치고 로그인 버튼을 누르면 로그인이 됩니다. 그럼 그 로그인되기까지 사용자의 아이디와 비밀번호가 맞는지 확인을 해야겠죠? 이러한 과정에서 필요한 알고리즘 계산, 보안 개념들이 백엔드에서 처리가 됩니다.

 

이러한 백엔드 과정도 위의 프론트엔드과정처럼 검사버튼으로 확인해 볼 수 있어요! 물론 보안적인 부분은 볼 수 없게 되어있지만, 기본적인 네트워크 흐름 정도는 확인할 수 있습니다.

네이버 웹페이지에서 검사버튼 누른 뒤 네트워크 탭을 누르면 나오는 화면

네이버 웹페이지에서 아무것도 하지않고 화면만 켜져있는 상태인데도 여러개가 나오는 걸 확인 할 수 있을거에요!

저도 아직은 백엔드에 대해서 잘은 몰라서 더 깊게 설명은 못해드리지만 status는 HTTP(네트워크 응용계층 프로토콜)상태를 뜻하는데 200의 의미는 "요청이 성공적으로 완료되었다"라는 뜻입니다.

 

---

 

이런 프론트엔드와 백엔드를 처음 접하시는 분들을 위해 흔히 실생활에 맞는 비유를 많이 하시는데요.

저도 그냥 재미 삼아 간단하게 예시를 들겠습니다. 제가 비유하는 부분이 틀리거나 부족하더라도 재미로 봐주시면 감사하겠습니다ㅎㅎ

 

예를 들어 음식을 판매하는 가게(서비스를 제공하는 웹)에서 홀서빙 직원(프론트엔드)과 주방 직원(백엔드)을 다음과 같이 생각해볼 수 있어요!

실생활에서의 프론트엔드와 백엔드에대한 비유 예시

(좌) 홀 서빙 직원 (우) 주방 직원

음식을 판매하는 가게 -> 서비스를 제공하는 웹

홀 서빙 직원 -> 프론트엔드

주방 직원 -> 백엔드

음식 -> 서비스

 

< 업무 특징 >

홀 서빙 직원 : 손님을 맞이하고, 손님이 홀서빙 직원에게 직접적으로 음식을 요청할 수 있습니다. 주방 직원이 만든 음식을 손님에게 제공해요. 외적인 부분이 노출되요. 손님이 음식에 대한 직접적인 요청(ex. 맵게 해주세요., 바싹 구워주세요. 등)이 아닌 다른 부가적인 눈에 보이는 것(ex. 휴지가 떨어졌어요., 화장실 어디로 가야해요?, 물컵 바꿔주세요. 등)에 대한 요청을 처리해야해요.

주방 직원 : 손님이 요청한 음식을 주방에서 만들어 홀서빙 직원에게 전달합니다. 오픈 주방이 아닌 경우 손님들은 주방 직원의 외적인 부분을 볼 수 없어요. 요리 실력에 따라 해당 직원을 찾는 가게들이 많아요. 음식에 대해 잘 알아야 해요.

 

< 업무에 대한 접근성 >

홀 서빙 직원 : 서빙을 안해봐도 어렵지 않게 느낄 수 있어요. 그러나 개인 역량에 따라 흥미도에 따라 홀서빙이 맞지 않을 수 있습니다.

주방 직원 : 요리를 해보지 않을 경우 어렵고 힘들어보일 수 있어요. 그러나 차근차근 보조 주방부터 차근차근 배우면 요리를 손님에게 제공할 수 있습니다.

 

< 업무에 대한 스트레스 > 

홀 서빙 직원 : 손님과 직접적으로 맞닿아 있기 때문에 손님의 요청에 시달릴 수 있어요. 손님의 컴플레인에 가장 공격을 많이 받을 수 있어요. 외적인 부분이 노출되요. 

주방 직원 : 음식에 문제가 있는 경우 주방 직원의 잘못이 가장 커요. 음식 신메뉴 개발 또한 맛을 보장해야하며 가게 유동성도 고려해야해요. 

 

마찬가지로 Full Stack(풀스택) 개발자를 이와 같은 상황으로 비유하자면, 홀서빙도 잘하고 주방 요리도 잘하는 직원이겠죠?

그러나 풀스택이 아니더라도 각 분야에 대해서 어느정도 이해를 해놔야 업무 효율이 좋아진다는 것도 아실거에요!! 왜냐 의사소통이 가장 중요한데 대화하지 않아도 눈만봐도 뭐가 필요한지 아는 파트너는 정말 최고겠죠? ㅎㅎ 물론 커뮤니케이션 대화가 가장 중요하답니다!!

 

프론트엔드 맛보기

Toy Project

저는 구름 에듀에서 무료로 제공하고 있는 판다코딩님의 나만의 MBTI 웹페이지 만들기를 들었습니다! 

하루 10분 Web Project > 나만의 MBTI 웹페이지 만들기

 

결과물

https://lovetypechecktest.netlify.app/ 

십이간지 연애유형

느낀점

저는 이 프로젝트(프로젝트라고 하기도 뭐하지만..)를 하고나서 백엔드를 공부해야겠다 라고 생각이 들었어요. 결국 페이지의 기능적인 구현(로그인, 로그아웃, 글쓰기 등등)이 필요하고 전 그걸 구현하는게 더 재밌어보이더라고요. 그러기 위해서는 데이터베이스의 더 깊은 지식가 필요하고 네트워크를 잘 이해해야하고 특히나 제가 접하지 않았던 Java라는 언어를 체계적으로 배우고 싶었어요. 그래서 저는 제로베이스스쿨의 백엔드과정을 선택했답니다!