프론트 엔드, 백 엔드, 어드민, DB의 관계

2021.03.22

|

2940


*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 8만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오, 예상기간을 한 번에 비교해보세요:)
개발 환경에 대해 이해하려면 크게 4가지를 이해하면 됩니다. 바로 프론트 엔드와 백 엔드, 어드민과 DB의 관계를 이해하는 것입니다.

모든 서비스에는 최소한 세 가지 단위가 있습니다.

  • 사용자에게 노출되는 서비스 화면
  • 각각의 화면에 들어가는 데이터와 사용자 입력 정보들
  • 그리고 이 모든 것을 실시간으로 저장, 기록하는 창고

여기에서 사용자에게 노출되는 서비스화면을 프론트 엔드(Front-end) 라고 합니다. 프론트 엔드는 쉽게 말해 웹이나 앱의 화면 단위를 다루는 곳입니다. 어떤 컨텐츠가 화면에 들어가고, 그게 어디에 들어가는지, 또 어떻게 보일지를 다루게 됩니다. 

프론트 엔드 개발자는 웹사이트나, 앱 서비스에 들어가는 UI 컴포넌트를 코드로 작성하고 배치를 바꾸거나, 서버에 필요한 정보를 요청하는 기능을 만듭니다. 시각적으로 아름다운 배치와 편의성, 이 모든 걸 한꺼번에 다루는 사람이 프론트 엔드 개발자입니다. 
겉으로 드러나는 프론트 엔드와 달리 화면에 직접 보이지 않는 백 엔드 (Back-end)는 사용자가 입력한 정보와 각 화면에 들어가는 정보를 담고 있습니다. 그래서 백 엔드 개발자들에게는 시각적인 요소보다 데이터가 얼마나 정확한지, 데이터 전달 속도가 얼마나 빠른지가 더 중요합니다.


데이터베이스(DB)는 서비스의 각 페이지에 들어가는 모든 정보를 담고 있는 창고 역할을 합니다. 그래서 아주 작은 정보 단위들을 모두 담을 수 있고. 이 내용을 합쳐서, 상황마다 다른 정보 꾸러미를 만들어 내기도 합니다.

  • 사용자에게 노출되는 서비스 화면 : 프론트 엔드 (Front end)
  • 각각의 화면에 들어가는 데이터와, 사용자 입력 정보들 : 백 엔드 (Back end)
  • 그리고 이 모든 것을 실시간으로 저장, 기록하는 창고 (Data base / DB)

서로 어떤 역할을 하는지 이해가 되셨나요? 이제 프론트 엔드와, 백 엔드, DB의 역할에 대해 좀 더 자세히 알아보도록 하겠습니다.

프론트 엔드(Front-end)는 UI와 컴포넌트를 다룬다.

프론트 엔드는 실제 사용자가 보게 될 모든 화면을 다룹니다. 그리고 그 안에 들어갈 콘텐츠들이 무엇이고, 어떤 모습으로 보여줄 것인지를 꼼꼼하게 디자인하죠. 시각적인 지점이 영향을 많이 받기 때문에 미적 감각이 있고, 개발 언어도 잘 아는 사람들이 이 역할을 하게됩니다.

프론트 개발자는 웹서비스와 앱 서비스, 다양한 디바이스에 맞는 화면을 일관성 있게 만들어냅니다. 각각의 화면에 쓰이는 UI 컴포넌트는 무엇인지, 또 이걸 다른 화면에서도 재사용할 수 있는지, 사용성은 어떨지에 대해 다양한 고민을 하며 서비스를 만들어가죠.
프론트 개발자는 개발 환경에 맞게 코드로 UI를 만들고, 다시 이걸 꺼내 다른 화면에서도 사용할 수 있도록 블록, 단위화 시키는 일을 매우 중요하게 생각합니다. 그래서 이런 과정을 모아 디자인 시스템을 만들거나, 자체적인 가이드 라인을 만들어내는 역할도 하게 됩니다.

백 엔드 (Back-end)는 데이터의 이동을 다룬다.

백 엔드는 화려한 무대 뒤에 숨겨져 있는 공장 같은 곳입니다. 그래서 겉으로 드러나지 않는 수수께끼 같은 곳이죠. 백 엔드 개발자는 사용자가 입력하거나 정리된 정보를 보내고, 차곡차곡 저장하는 ‘자동화 시스템’을 만듭니다. 그래서 실제 서비스가 소수의 인원으로 원활하게 동작할 수 있게 돕습니다.


단순한 페이지 이동에서부터 아이템 만들기, 수정, 삭제 등 서비스 안에 들어있는 모든 기능은 동작 과정에서 여러 데이터를 주고받습니다. 마치 서비스를 이용하기 위해 우리가 휴대폰 인증을 받는 것처럼 데이터가 출발한 곳과 가려는 목적지를 확인하는 토큰(인증서)을 발급해줍니다. 
백 엔드 개발자는 이런 시스템을 설계하고, 만드는 작업을 합니다. 서비스 완성 이후에는 수천, 수만 명의 사람들이 서비스를 사용해도 서버가 멈추지 않도록 유지보수를 하는 역할도 하게 됩니다. 

데이터베이스(DB)는 서비스의 핵심이다.

모든 서비스에는 다양한 데이터 값들이 들어있습니다. 사용자의 ID 정보에서부터 구매기록, 활동내용, 문의사항 같은 것들도 모두 데이터베이스 안에 저장됩니다. 심지어 서비스 화면을 보여주기 위한 데이터들도 서버가 연결되지 않으면 사용이 불가능합니다. 

실제로 많은 서비스들이 클라우드와 자체 서버를 통해 서비스를 운영하고 있고, 서버가 멈추거나 에러가 생기는 경우 접속이 불가능해집니다. 이건 작은 서비스에서부터 거대한 은행들도 마찬가지인데요. 서버 속의 데이터는 항상 실시간으로 관리가 되고 있습니다.

데이터베이스는 실제 사용자들의 기록이기 때문에 이 내용이 손상되거나, 없어진 경우 서비스를 종료하게 되는 끔찍한 상황에 처할 수도 있습니다. 실제로 서버 관리와 데이터베이스 손상으로 서비스를 종료하게 되기도 하니 데이터베이스가 얼마나 중요한지는 말하지 않아도 알 수 있겠죠?

개발자가 서비스를 개발, 배포하는 과정

세상에 존재하는 모든 서비스들은 모두 비슷한 과정을 거쳐서 만들어지고, 또 수정이 됩니다. 그 과정을 정리하면 다음과 같은 단계로 나눌 수 있는데요.

  • 개발자가 코드를 짜고, 내용을 바꾼다.
  • 개별 테스트를 통해 제대로 실행되는지 체크한다.
  • 이 내용을 개발 서버에서 테스트한다.
  • 테스트가 성공적이라면 실제 서버에 업로드한다.
  • 사용자들이 이걸 잘 사용하는지 체크한다.

대부분의 서비스는 이런 과정을 반복해서 진행합니다. 그리고 그 과정에서 데이터베이스의 구조를 수정하거나, 서비스의 화면 별 UI를 수정하기도 하죠.

관리자 (Admin)도 사용자의 한 가지 타입이다?

우리는 일반적으로 서비스 운영자나 관리자도 개발자의 한 종류라고 생각하기 쉽습니다. 하지만 실제로 관리자는 큰 범주로 봤을 때, 여러 사용자 타입들 중 하나로 구분할 수 있습니다.

작은 앱 서비스 하나가 있다고 해봅시다. 이 서비스를 만든 개발자들이 있을 것이고, 그걸 운영하면서 일반 사용자들과 소통하는 관리자 계정이 있을 겁니다. 그리고 그 관리자는 사용자들이 우리 서비스를 잘 쓰고 있는지 확인하는 ‘관리자 사이트’에 들어갑니다.

관리자 사이트는 일반 사용자에 비해 많은 서비스 정보를 보여주는 화면입니다. 그러나 어디까지나 서비스 운영을 위해 필요한 정보를 다룰 뿐 서비스의 데이터베이스를 다루거나, 서버의 구조를 바꾸는 건 불가능합니다. 개발자와 운영자의 역할이 정확히 나뉘어 있다는 것이죠.

관리자는 분명 일반 유저에 비해 많은 정보를 다룰 수 있습니다. 그리고 규모가 작은 서비스라면, 이런 관리자가 서비스를 개발한 개발자 일수도 있습니다. 하지만 규모가 커진다면 어떨까요? 인사관리 시스템이나 결재 ERP 시스템처럼 서비스를 만든 회사와 쓰는 곳이 다르다면, 상황은 많이 달라지게 됩니다.

ERP 시스템처럼 커다란 프로그램은 개발한 곳과 쓰는 곳이 서로 다릅니다. 프로그램을 구매해 쓰는 회사 내에서, 또 다시 관리자 계정을 만들 수 있죠. 이런 관리자들은 일반 회사원보다 많은 정보를 확인하고, 관리할 수 있지만 실제 서비스의 데이터베이스를 변경하거나, 수정할 수는 없습니다.

서비스의 규모가 커졌을 뿐, 관리자는 여전히 ‘여러 사용자 타입’ 중 하나입니다. 그래서 서비스의 핵심 정보인 데이터베이스에는 함부로 접근할 수 없게 만들어 둔 것이죠.

지금까지 프론트 엔드와, 어드민, 백 엔드와 DB의 관계에 대해 알아보았습니다. 개발을 하는 사람과 운영하는 사람, 그리고 서비스를 이용하는 사람으로 나누어 보면 좀 더 쉽게 내용을 이해할 수 있을 것 같습니다.

  • 사용자에게 노출되는 서비스 화면: 프론트 엔드(Front-end)
  • 각각의 화면에 들어가는 데이터와, 사용자 입력 정보들: 백 엔드(Back-end)
  • 그리고 이 모든 것을 실시간으로 저장, 기록하는 창고(Data base/DB)

국내 1위 IT아웃소싱 플랫폼,
위시켓이 궁금하신가요?

앱 개발 비용 궁금하세요?
위시켓이 바로 알려드릴게요!

AdminBackendDatabaseDBFrontend개발 환경개발 환경 설명개발 환경 이해개발 환경간의 관계개발환경개발환경 관계개발환경 설명개발환경 이해개발환경간의 관계개발환경이란관리자데이터베이스데이터베이스란백엔드백엔드란사용자 타입사용자타입어드민어드민이란여러 사용자 타입여러 사용자타입여러사용자타입프론트엔드프론트엔드란
다음 글

위시켓 블로그의 새로운 소식 받기