[DLOG] 프론트엔드, 백엔드 그게 뭔데? (feat. 앱 개발) - 1

들어가며

주변에서 어떤 일을 준비하고 있는지 물을 때 '백엔드 개발자' 라고 답변을 하면 대다수가 '그게 뭔데,,?', '무슨 차이가 있는건데?' 라는 질문을 받아본 적이 종종 있었다.

또는 개발자에 대해서 관심이 있는 주변인들 중 '프론트랑 백 중에서 어떤게 나랑 맞는지 잘 모르겠어' 라는 고민을 들어본 적도 종종 있었고, 나 또한 그런 고민을 했던 시기가 있었다.
그래서 개발자를 준비하기 시작한 초창기에는 프론트와 백의 차이에 대해서 굉장히 많이 찾아보았던 것 같다.

도대체 프론트엔드, 백엔드 개발자는 뭘 하는 사람들인지, 그리고 어떤 개발 파트가 나와 잘 맞을지 나의 경험과 주관으로 한번 정리해보려고 한다. 개발자를 이해하고 고민해보는데 이 글이 조금이나마 도움이 되었으면 좋겠다.

---

 

들어가기에 앞서, 프론트엔드/백엔드 개발자는 웹 개발자라고 부른다.
그런데 왜 앱을 주력으로 사용하는 많은 기업들(ex. 배민, 당근, 토스 등) 에서도 웹 개발자를 뽑을까?

앱 또한 유저를 마주하는 파트와, 요청을 처리하는 파트가 구분되어 있으며, (클라이언트 ↔ 서버)
보통 웹에서 데이터를 처리하는 로직과, 앱에서 데이터를 처리하는 로직을 같이 가져가기 때문일 것이다.

따라서 개발자의 큰 틀을

웹 프론트엔드 / 앱 ↔ 백엔드 개발자

 

로 보는 것이 이해에 조금 더 도움이 될 것 같다.

(그리고 개발자 종류가 이렇게 세 가지만 있는건 절대 아니다,, 데브옵스, 게임, 시스템, 임베디드 등등. 개발 직무의 종류와 현황에 대해 궁금하다면 https://programmers.co.kr/pages/2023-dev-survey 를 보는 것도 재밌을 것 같다)

---

AWS에서 설명하는 프론트엔드와 백엔드의 차이는 다음과 같다.

모든 애플리케이션은 크게 프런트엔드와 백엔드로 나뉩니다. 프런트엔드는 버튼, 체크박스, 그래픽, 문자 메시지와 같이 사용자에게 보이는 시각적 요소입니다. 사용자는 이러한 시각적 요소를 통해 애플리케이션과 상호 작용할 수 있습니다. 백엔드는 애플리케이션을 작동하는 데이터 및 인프라입니다. 백엔드는 사용자의 애플리케이션 데이터를 저장하고 처리합니다.
(https://aws.amazon.com/ko/compare/the-difference-between-frontend-and-backend/)

 

이 요약을 조금 더 와닿기 쉽게 설명해보기 위해 '자판기'를 예시로 설명해보자면 다음과 같다.

• 음료들이 3열로 배치되어있고, 품절된 음료에는 빨간불이 깜빡거리며,
  상단에는 새로나온 음료에 대한 광고가 나오고 있고, 구매를 원하는 음료의 버튼을 누를 수 있다
  ▶ 프론트엔드의 영역
• 자판기로 들어온 돈과, 선택한 음료의 금액이 얼마인지에 따라 잔돈은 얼마를 거슬러 주어야하며,
  품절된 음료는 없는지 재고를 파악하고, 만약 품절되었다면 이를 알려준다
  ▶  백엔드의 영역
  
  

✅ 프론트엔드란?

웹페이지의 레이아웃, 메뉴, 디자인 요소, 버튼, 이미지 및 그래프와 같이 사용자가 직접 상호작용할 수 있는 사용자 인터페이스

 

프론트엔드 개발자는 사용자 경험을 핵심 가치로 삼아 이러한 화면 요소들을 직관적이고 사용하기 쉬운 UI(User Interface)로 만드는 작업을 수행한다.

또한 사용자로부터 받은 데이터를 처리하기 위해 데이터의 유효성을 검사하거나 백엔드 로직으로 해당 데이터를 전달하여 비즈니스 로직이 수행될 수 있도록 하며, 백엔드 API로부터 받은 데이터를 사용자에게 보여주기 위해 가공하는 역할을 수행한다.

 

✅ 개발 목표

다양한 플랫폼과 디바이스에서 쉽게 상호 작용할 수 있고, 잘 설계되고, 빠르고 완벽하게 반응하는 UI를 만드는 것

 

1. 반응형 웹 디자인 / 크로스 브라우징 사용자들은 다양한 디바이스에서 접근이 가능한데 (ex. 웹, 태블릿, 모바일 등)

이때, 어떤 곳에서 접근을 하더라도 페이지 레이아웃이 깨지지 않고, 동등한 경험을 할 수 있도록 만들어야 한다.

 

만약 사용자 A가 자판기를 이용할 땐, 돈 투입->음료 선택->음료 get->잔돈 get 순서로 이루어지던 걸

사용자 B가 자판기를 이용할 땐, 음료를 선택할 수 없다던지, 돈 투입 순서가 다르다던지 하다면 정상적인 서비스를 이용할 수 없을 것이다.

 

2. 웹 성능 최적화 웹 페이지에는 단순 텍스트부터 용량이 큰 이미지, 그래프, 그 이상의 애니메이션 같은 것들을 보여줄 수 있다.

이때 페이지의 로딩이 느리다면 그 어떤 화려한 이미지와 애니메이션이더라도 사용자의 만족도는 큰 폭으로 떨어질 것이다.

따라서 웹 페이지의 로딩 속도를 개성하여 사용자에게 빠른 반응 속도를 보이도록 해야한다.

 

 

✅ 주요 기술 & 도구

프론엔드 화면은 크게 3가지로 구성된다.

1. 웹페이지의 전체적인 틀을 구성하는 HTML
2. HTML로 작성된 요소의 스타일과 레이아웃을 정의하는 CSS
3. 만들어진 정적인 웹페이지를 동적으로 만들어주는 Javascript

하지만 이렇게 만들어진 페이지는 정말 기초적인 페이지일 것이고, 정말 제대로 된 웹 프론트엔드를 위해선 Javascript 프레임워크/라이브러리를 사용할 줄 알아야 한다.

프레임워크/라이브러리를 사용하는 이유는 web-app을 만들기 위함인데,
페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 뜻한다.
페이지 전환시 페이지를 새로 요청하는게 아니라 자바스크립트로 HTML을 갈아치우면서 부드럽게 구현하는 것인데,
자바스크립트만으로 만드는 것보다 Vue/React/Angular 같은 라이브러리/프레임워크를 사용하면 빠르고 쉽게 개발이 가능하다.

 

가장 많이 사용되는 프레임워크/라이브러리는 다음과 같다.

React

; Facebook에서 개발한 라이브러리, Angular와 Vue와는 달리 사용할 수 있는 도구가 없지만 유연성을 제공하기 때문에 어떠한 라이브러리라도 리액트에서 구현이 가능하다.
→ 빠른 일정 안에 가벼우면서도 현대적인 애플리케이션을 개발할 때 적합

 

Angular

; Google에서 개발한 프레임워크, 프로젝트 생성을 시작으로 코드 최적화 작업에 이르기까지 모든 작업에서 사용할 수 있는 폭넓은 프레임워크이다.
→  장기 프로젝트이며 투자 규모가 큰 애플리케이션을 개발할 때 적합

 

Vue.js

; Angular와 React의 장점을 살리고 단점을 보완하여 만든 오픈 소스 프레임워크, 실시간 대시보드, 소셜 미디어 애플리케이션, 전자상거래 플랫폼 개발 등 다양한 플랫폼 개발에 사용
-> 시장 진입 단계에서 필요한 프레임워크를 선택할 때나 작고 가벼운 애플리케이션을 개발할 때 적합

 

라이브러리? 프레임워크?
✔ 라이브러리 == 만들어진 도구
: 필요한 기능이 미리 구현된 도구로, 필요한 곳에 어디서든 사용할 수 있다.
✔ 프레임워크 == 도움을 주는 도구
웹 개발을 쉽고 간편하게 할 수 있도록 도와주는 도구로, 요구에 따라 커스텀이 가능하다.

 

✅ 이런 사람들에게 잘 맞아요 (주관)

1. 디자인에 대한 거부감이 없다

보여지는 화면을 코드로 구현해내는 것이기 때문에 디자이너와의 협업이 정말 많고, 그만큼 소통을 해야할 일도 많다.

 

예를 들어 화면 속 버튼을 만들 때, 디자이너들은 곡률 하나하나까지 고려해서 디자인하지만

이걸 '버튼이 다 같은 버튼이지'라고 생각해버린다면 안된다.(프론트엔드에 대해 다시 생각해보는게 좋을지도)

 

그정도로 디자인의 디테일한 요소까지 소통이 오갈 수 있기 때문에 이를 예민하다고 여겨버리면 잘 맞지 않을 수 도 있을 것 같다. (하지만 요즘은 웹퍼블리셔도 있기 때문에 이러한 부담이 조금 덜할지도,,?)

 

2. 새로운 기술을 배우는 것에 거리낌이 없고, 새로운 도전에 즐거움을 느낀다

프론트엔드 트렌드는 계속해서 바뀌고, 신기술이 끊임없이 쏟아지기 때문에 이를 빠르게 따라가야한다. 만약 알고 있는 것만 고수한다면 어느순간 뒤처진 사람이 되어있을 것이다.

 

3. 내가 하는 일의 진전이 눈 앞에 바로바로 보여야 한다

프론트엔드는 보여지는 작업물을 만들기 때문에, 기능을 구현할 때 그 변화가 바로바로 눈에 보인다. 만약 내가 구현하고 있는게 잘 만들어진건지 바로 보이지 않는 것에 답답함을 느끼는 사람이라면 프론트엔드가 조금 더 재밌을 것이다.

 

 

💡  웹 퍼플리싱이랑 웹 프론트엔드 개발은 다른 것인가?

위에서 설명한 웹 프론트엔드는 디자인적인 요소들에 대한 설명이 많았던 것 같지만,

실제 웹 프론트엔드는 화면을 효율적으로 구현하는 것 뿐만 아니라, 사용자한테 받은 데이터를 백엔드로 전달하고 받아와서 다시 보여주는 역할들을 수행해야한다.

자판기에서 사용자에게 5,000원이 들어오면 5,000원을 받았다고 뒷단에 알려야 할 것이며,

'콜라'를 선택했다면 사용자가 콜라를 선택했다고 뒷단 알려야 할 것이다.

만약 뒷단에서 해당 음료가 품절이라고 알려준다면 프론트엔드는 사용자에게 '품절'이라는 문구와 애니메이션을 보여주어야 한다.

이러한 연결까지 하는 것이 프론트엔드다.

 

그래서 이를 웹 퍼블리싱과 웹 프론트엔드로 구분짓기도 한다.

• 웹 퍼블리싱 : 디자인 및 시각적 요소를 잘 구현하는 것에 초점
  퍼블리싱은 웹 사이트를 제작할 때, 웹 디자이너가 디자인한 것을 웹 표준성과 접근성에 부합하도록 HTML과 CSS를 활용해(최근엔 JS까지도 사용함) 페이지를 제작하고 편집하는 일을 수행한다. (정적인 페이지 구현)
• 웹 프론트엔드 : 백엔드와 연결하고 데이터 통신을 어떻게 할 것인지 유효성 검증 측면에서도 고민함
  퍼블리셔가 정적인 페이지를 구성해준다면, 이를 실제 동작하는 페이지로 만들기 위해서 백엔드 API를 연결 짓기도 하고, 크로스 브라우징, 웹페이지의 호환성, 페이지의 개선 등 웹사이트 전반에 대해 관리하고 유지 보수하는 일을 수행한다. (동적인 페이지 구현)

 

 

백엔드와 앱 개발자에 대해서는 다음편에