프론트엔드와 백엔드

 

 

프론트엔드 개발자? 백엔드 개발자? 많이 들어보셨을 겁니다. 

웹 애플리케이션은 크게 프론트엔드와 백엔드로 나누어집니다. 단어 그대로 앞단, 뒷단으로 분류한 것인데요, 이 둘의 관계는 앞서 배웠던 ‘클라이언트와 서버’ 와 밀접한 관련이 있습니다. 

프론트엔드는 사용자에게 보여지는 화면 영역을 의미합니다. 클라이언트와 서버에서 사용자에 해당하는 영역은 어디였죠? 클라이언트입니다. 즉 프론트엔드는 클라이언트를 위한 개발이라고 할 수 있습니다. 

반면에 백엔드는 사용자에게 보여지지 않는 영역을 의미합니다. 이번에는 어느 영역에 해당될까요? 서버 영역입니다. 백엔드는 서버를 위한 개발이라고 할 수 있지요. 서버뿐만 아니라 운영체제, 데이터베이스, 네트워크 등 백엔드 영역은 실제로 굉장히 넓습니다. 때문에 시스템의 규모가 클수록 백엔드 내에서도 전문분야를 나누어 맡게 되는 경우가 많습니다.  

 

 

프론트엔드와 백엔드

 

 

쉬운 이해를 위해 실제상황에 적용시켜봅시다.  

여러분은 구글에 회원가입을 하려고 합니다. 회원가입 페이지로 들어갑니다. 

 

 

구글 회원가입 페이지

 

 

 그림과 같이 우리에게 보여지는 화면이 프론트 엔드 영역입니다. 텍스트 박스, 이미지, 버튼, 체크박스 등의 요소를 적절한 장소에 배치하고 사용자가 정보를 입력하도록 화면이 개발되어 있습니다. 이렇게 사용자와 직접적으로 연결되는 것을 UI(User Interface), 즉 사용자 인터페이스라고 하고, 사용자 경험이 반영된 개발을 UX(User Experience)라고 합니다. 알맞은 정보를 모두 입력한 후 다음 버튼을 누르면 “완료되었습니다”라는 알림과 함께 새로운 계정이 생성되겠죠. 여기까지가 사용자에게 보여지는 부분입니다. 그렇다면 보여지지 않는 부분에서는 어떤 일이 일어날까요? 

여러분의 정보가 구글 서버로 전달이 되고 이 정보는 데이터베이스에 저장됩니다.  데이터베이스에 저장된 정보를 통해서 다음번에는 계정 생성 없이 만들어 놓았던 계정으로 로그인이 가능해 집니다. 그러나 이 부분은 여러분에게 보여지지 않습니다. 사실상 보이지 않는 부분에서 훨씬 더 많은 일들이 일어납니다. 이 영역이 바로 백엔드 영역입니다. 

 

 

회원가입 시 일어나는 (보이지 않는) 일

 

 

 To be continued . . .

* 비전공자를 포함한 모두를 대상으로 제가 가진 IT지식을 공유하고자 합니다.

   틀린 내용이 있다면 언제든지 지적해 주시면 감사하겠습니다. 🙂          

 

 

Cheers 헤나님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.