본문바로가기
시리즈 알려드려요, 깨알정보

프론트엔드와 백엔드

안녕하세요, 소이정입니다!

오늘은 개발 부분에 대해 소개해 드리려고 합니다.
최근 몇 년 간 개발자를 구한다는 구인구직을 많이 접하셨을 것 같은데요. 개발자로 성장할 수 있도록 국가에서도 국비를 지원하며 공부를 돕고 있습니다. 2025년부터는 초등학교, 중학교에서 코딩을 필수과목으로 지정하여 교육을 의무화한다고 합니다. 이렇게나 중요해진 개발 분야에 관심이 생긴 분들도 많이 늘어나는 추세입니다.

그런데 말입니다,,,
개발자를 서칭하다 보면 이런 단어들이 많이 보입니다. 프론트엔드 개발자, 백엔드 개발자...
흠... 이게 무슨 뜻이죠? IT업계에서 쓰는 어려운 전문용어인가요?
오늘은 바로 이 프론트엔드와 백엔드에 대해 알아보려 합니다!!

프론트엔드와 백엔드

개발이란?

소프트웨어나 하드웨어 등을 만들고 개선하는 과정을 일컫습니다. 
이 과정에서는 문제를 해결하고 필요한 기능을 구현하기 위해 다양한 기술과 도구를 활용합니다.

프론트엔드
백엔드
정의
사용자가 웹이나 앱에서 직접적으로 보고 사용하는 영역
  사용자가 직접 접근할 수 없는 관리자 영역
역할예시
드라마 내 배우
   드라마를 만드는 PD와 작가 등의 스탭진


이게 무슨 소리지~ 싶으시겠지만! 지금부터 본격적으로 알아볼 거예요!


출처 : pixabay


프론트엔드란 무엇인가요?

1-1 프론트엔드 개념
인터페이스(User Interface)라고 하며, 사용자가 웹사이트에서 바로 볼 수 있는 화면이라고 해요. 사용자가 보고, 조작하고, 상호작용하는 모든 것들을 포함해요. 여기서 인터페이스란, 슬라이더, 드롭다운 메뉴, 레이아웃, 폰트, 컬러 등의 요소들이 포함되어 있어요.

1-2 프론트엔드가 하는 일
프론트엔드는
인터페이스를 가꾸는 업무를 하는데요. 텍스트를 입력하고, 색도 바꾸고, 버튼도 생성하는 등등 이러한 업무를 한다고 보면 돼요.
사용자가 직접적으로 마주하고 사용하는 만큼 디자인적 요소들의 비중도 큰데요, 그만큼 시각적인 디테일을 꼼꼼하게 신경 쓰는 게 매우 중요합니다. 그래서 프론트엔드 개발자들은 디자이너와 협업이 무척 중요하답니다.

1-3 프론트엔드가 다루는 언어
HTML :
웹페이지를 꾸미기 위해서는 필수적으로 사용되는 언어이며, 시각적으로 웹페이지에 있는 요소들을 볼 수 있게 해주는 역할을 해줍니다. 전체적인 틀을 구성하는 뼈대라고 할 수 있어요.

CSS :
마찬가지로 웹페이지를 꾸미기 위해서 필수적으로 사용되는 언어이며, HTML로 작업한 웹페이지에 시각적인 부분을 추가해 주는 역할인데요. 이때 시각적인 부분은 색상, 레이아웃, 폰트 등이 있으며 갖춰진 뼈대에 옷을 입혀주는 역할이라고 생각하면 됩니다.

자바스크립트 :
만들고자 하는 웹에 다양한 기능을 추가해 주는 언어에요. 정적인 웹페이지를 동적으로 만들어주며, 클릭이나 스크롤, 링크 연결 등의 이벤트가 발생했을 때 기능이 실행되도록 도와줍니다.


백엔드는 무엇인가요?

2-1 백엔드 개념
서버나 데이터베이스를 관리해 주는 기술을 의미합니다. 사용자에게 직접적으로 보이 지거나 상호작용하지는 않지만, 프론트엔드를 포함한 웹사이트가 매끄럽게 작동되도록 도와줍니다.

2-2 백엔드가 하는 일
사용자가 원하는 정보를 제공할 수 있도록 데이터를 관리하거나 서버를 운영하는 일을 합니다. 다양한 서비스 API를 개발하고 연동하기도 하며, 기존 서비스의 유지 보수와 새로운 기능을 개발하여 추가하기도 한답니다. 예시로는 회원가입이나 로그인 같은 기능을 만들거나, 티켓팅이나 수강신청처럼 사용자의 접속이 몰리는 상황에서 시스템을 안정적으로 운용하고 응답시간을 최적화하는 일들이 있습니다.

2-3 백엔드가 다루는 언어
자바 :
데이터베이스, 네트워크 등 다양한 분야에서 활용되는 프로그래밍 언어입니다. 객체지향언어라는 점에서 큰 장점을 가지며, 보안에도 강합니다. 트위터에서 현재 자바를 사용한다고 해요.

파이썬 :
머신러닝, 사물인터넷과 같은 신기술에 자주 사용되는 언어이며, 세계에서 가장 인기가 많은 언어라고 하는데요. 라이브러리와 짧은 코드로 기능 구현이 가능하다는 장점을 가지고 있으며, 인스타그램에서 파이썬을 이용한답니다.

PHP :
웹 개발에서 주로 사용되는 언어이며, 스크립트 언어이자 수많은 웹 시스템의 기반이 되는 언어입니다. 웹 개발을 위해서만 특성화되어 있다는 점이 장점이자, 단점이며 워드프레스에서 현재 사용 중입니다.

C# :
다른 언어들에 비해 비교적 출시된 지 오래되어 많은 분야에서 활용되고 있습니다. 대표적으로는 Micro Visual Studio에서 사용 중입니다.

루비 :
동적 객체 지향 스크립트 언어이며, 다른 언어들과 다르게 단순한 코드를 작성할 수 있다는 장점을 가지고 있습니다. 코드를 몇 줄 작성하지 않아도 앱 만들기가 가능하답니다. 배우기도 쉽고 확장성도 높은 언어이지만, 국내에서는 사용률이 저조한 편이라고 합니다. 루비는 현재 Github에서 사용하여 개발을 하고 있습니다.

이 외에도 무수히 많은 개발 언어가 있어요. 개발 직군마다 선호하는 언어가 다를 수 있으니, 원하는 개발 직군이 있다면 어떤 언어를 선호하는지 확인하는 것이 도움이 됩니다.

백엔드는 주로 사이트의 기능적인 부분을 담당하기 때문에 일반 사용자에게는 노출되는 부분은 적은 편이에요.
프론트에서 교육, 서비스 등 무언가를 신청하거나, SNS 로그인처럼 타 사이트와의 데이터를 연동하거나, 상품을 주문하는 등 데이터를 기반으로 움직이는 기능적인 부분은 모두 백엔드에서 담당한다고 생각하시면 더 이해하기 쉽답니다.


그럼 프론트엔드와 백엔드의 차이점은 무엇인가요?

제일 큰 차이점은 다루는 언어가 다르다는 점! 그리고 집중해야 하는 포지션이 다르다는 점인 것 같아요. 언어가 비슷해도, 시각적인 것에 투자를 하느냐, 기능이 잘 구현되고 데이터를 관리하는 것이냐가 다르게 때문이에요. 백엔드 개발자는 사용자별 요구하는 기능이 천차만별이기 때문에 기술의 폭이 넓기 때문에 꾸준한 공부가 필요하며, 프론트엔드 개발자는 현 트렌드에 따른 웹페이지 형태의 변화와 기술을 발 빠르게 업데이트하고 적응해야겠죠?


실제로는 어떻게 적용되어 있는지 직접 확인해 보면 이해가 확실히 될 것 같아 예시로 네이버 홈페이지를 가져왔습니다.

출처 : 네이버 (이하 동일)

프론트엔드에 해당하는 부분은 어디 어디일까요? 시각적인 요소가 들어간 모든 곳이 해당됩니다.
큰 틀은 레이아웃이겠죠? 로고 옆에 검색창, 메뉴 옆에 날씨, 광고 옆에 로그인 이런 식으로요! 콘텐츠 간 사이 간격이나 폰트 간 간격들도 일정한 게 보이시나요? 이러한 간격들도 모두 프론트엔드 영역에서 작업 가능하답니다!

이 외에도 배너 이미지들의 롤링이나, 각 요소들의 모션 등도, 반응형 사이트의 경우 각각의 기기 사이즈마다 딱 맞춘 듯 표현해 내는 것도 프론트엔드 개발자의 역할이에요


그럼 백엔드의 역할이 들어간 곳은 어디일까요? 대표적으로는 로그인, 회원가입 기능이겠죠?

아래는 로그인 기능과 회원가입을 클릭하면 나오는 화면인데요. 회원가입을 하면 가입된 정보는 데이터로 저장됩니다.

이때 정보를 데이터로 저장하는 과정과 쌓여있는 데이터를 통해 로그인이 가능하다는 점이 백엔드에서 작업할 수 있는 기능입니다.
이 외에도 날씨 정보를 가져와서 노출하기, 검색 데이터 가져오기, 원하는 관심 주제 설정하기 등도 포함됩니다.



여기까지 프론트엔드와 백엔드 각각의 개념, 하는 일, 쓰이는 언어와 두 개의 차이점을 알아보았습니다.

나는 개발에 흥미를 느끼고 있는데 어느 분야가 더 잘 맞을까 고민이 될 때는
기능 구현과 데이터관리 등에 대한 흥미가 있다면 백엔드를,
시각적인 요소를 구현하는 게 더 재밌다면 프론트엔드를 공부해 보는 건 어떨까요?

도움이 되셨길 바라며 여기까지 작성하고 마치도록 하겠습니다.
감사합니다 :)