백엔드와 프론트엔드는 뭘까?

요즘 개발자라는 직업이 뜨고 있고, 다른 직군의 사람들도 개발자와 협업해야 하는 경우가 잦다 보니,

자연스럽게 관심을 갖는 분들이 많은 것 같다.

 

회사에서 비개발직군 사람들과 대화하다 보면 자주 받는 질문이 있다.

 

프론트랑 백엔드가 뭔가요?

당신은 우리 서비스에서 뭘 만드는 건가요?

 

질문을 여러 번 받다보니 버전도 여러가지가 존재하는데, 

개발을 처음 접한 지 몇 년 되지도 않은 나도, 그땐 어떻게 받아들였지? 어떤 점이 이해가 안됐지? 하는 기억이 안 난다. ㅋㅋㅋㅋ 개구리 올챙이 시절 기억 못한다더니, 난 아직 꼬랑지도 붙어있는데 기억을 못하는 격이다.

아무튼 개발에 대한 이해도가 전혀 없는 사람에게 설명하기가 참 어렵다.

 

처음엔 "눈에 보이는 화면 그리는게 프론트엔드고, 뒤에 로직 처리하거나 계산하고, 데이터베이스 조작하고 하는게 백엔드에요." 라고 설명하다가, 예시를 드는 게 좀 더 이해하기가 쉬운 것 같아서 적당한 예시를 찾다가 오늘 하나 떠올라서 기록해둔다.

---

웹 사이트는, 엑셀과 비슷하다고 할 수 있다.

 

우리는 어떤 정보들을 좀 더 쉽게 확인하기 위해 엑셀 시트를 사용한다.

그 중 가계부 엑셀 시트라고 가정하자.

 

내가 산 물건의 사진이 들어있을 수도 있고, 가격이나 상품명 같은 것들이 있을 것이다.

이렇게 정보가 보여지는 엑셀시트의 화면 자체가 프론트엔드다.

 

어떤 칸에서는 내가 이번달에 쓴 돈이나, 구매한 상품 갯수같은 것을 보여줄 수도 있을 것이다.

계산을 위해 우리는 셀에 함수를 넣는다. =SUM() 이렇게 생긴 것들.

단지 누군가가 수동으로 입력한 것들 외에, 자동적으로 다른 처리를 해주는 것이 백엔드다.

 

워드 파일처럼, 내가 모든 것을 수동으로 입력하고, 확인하는데만 사용할 수도 있다.

자동으로 어떤 계산이나 처리가 이루어지지 않고 보여지기만 하는 경우도 있다.

이런 경우 백엔드는 필요하지 않다. 프론트엔드만 있으면 된다.

예를 들면, 단순한 회사 홍보 페이지같은 것이 있다.

 

이처럼 눈에 보이는 시트 그 자체가 프론트엔드고, 셀에 설정된 계산이나 처리 등이 백엔드의 역할이라고 보면 된다.

 

내 지출내역을 입력했는데, 다음에 켰을 때에 사라져있다면 안될 것이다.

그래서 DB가 필요한데, 내가 입력한 값들을 보관하는 저장소 역할을 한다.

엑셀 시트의 경우 파일 자체에 저장되지만, 웹사이트에서는 DB에 저장한다.

다음에 시트를 켜면, 내가 입력한 사과 1000원, 바나나 2000원을 DB에서 불러와, 셀에 설정된 계산(백엔드)을 통해 시트(프론트엔드)에 표시해주게 된다.

 

하지만 로그인한 사용자마다 같은 가계부를 보여줘선 안된다. 사용자 각자가 입력한 정보를 보여주어야 한다.

그래서 데이터베이스에는 유저: 홍길동, 품목: 사과, 품목: 바나나 이런식으로 저장되고, 홍길동이 로그인하면 그 유저가 입력한 정보만 보여주게 된다. 

---

다음에 또 질문을 받는다면, 이렇게 설명해보면 좋을 것 같다.

물론 완전한 설명은 아니고, 요즘은 사용하는 기술에 따라 백엔드와 프론트엔드의 영역이 달라지기도 하지만...

프론트와 백엔드가 뭔지 궁금한 사람에게는 이해하는데 도움이 되는 설명이었으면 한다.