프론트엔드와 백엔드
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
프론트엔드와 백엔드는 소프트웨어, 하드웨어, 비즈니스 등 다양한 분야에서 사용되는 용어이다. 소프트웨어 설계에서 프론트엔드는 사용자와 직접 상호 작용하는 부분을, 백엔드는 프론트엔드에 대한 출력을 생성하는 부분을 의미한다. 웹 개발에서는 프론트엔드가 사용자에게 시각적으로 보여지는 부분, 백엔드가 데이터베이스와 같은 사용자에게 드러나지 않는 부분을 지칭한다. 하드웨어에서는 네트워크 트래픽을 최적화하거나 보호하는 하드웨어를 프론트엔드, 회로의 동작을 기술하는 부분을 프론트엔드로 정의한다. 그 외에도 자동차, 자전거, 원자력 발전, 비즈니스, 스포츠 등 다양한 분야에서 프론트엔드와 백엔드라는 용어가 사용된다.
소프트웨어 설계에서 프론트엔드는 사용자와 직접 상호 작용하는 부분을, 백엔드는 프론트엔드에 필요한 출력을 생성하는 부분을 가리킨다. 이러한 프론트엔드와 백엔드의 분할은 추상화의 한 형태로, 시스템을 서로 다른 부분으로 나누어 개발 및 관리를 용이하게 한다.
2. 소프트웨어의 정의
다음은 소프트웨어 분야별 프론트엔드와 백엔드의 예시이다.
이 외에도, 대규모 컴퓨터 시스템에서는 데이터 입력을 처리하거나 작업 관리를 수행하는 컴퓨터를 프론트엔드, 출력 처리를 담당하는 컴퓨터를 백엔드라고 부르기도 한다.
2. 1. 웹 개발
웹 개발은 프론트엔드와 백엔드 구분이 가장 뚜렷한 분야 중 하나이다. 웹에서 프론트엔드는 사용자가 시각적으로 보는 부분을, 백엔드는 사용자에게 드러나지 않는 데이터베이스 공간(회원가입, 로그인 등)을 의미한다. 프론트엔드에서는 주로 HTML, CSS, 자바스크립트가 쓰이며, 최근에는 페이스북에서 개발한 싱글 페이지 애플리케이션 형태의 리액트가 많이 사용된다. 백엔드에서는 PHP가 널리 사용되었지만, 최근에는 Node.js가 주로 사용된다.[1]
소프트웨어 아키텍처에서 하드웨어와 최종 사용자 사이에는 여러 추상화 계층이 있을 수 있다. '프론트'는 하위 구성 요소를 단순화하는 추상화로, 사용자 친화적 인터페이스를 제공한다. 반면 '백'은 데이터 저장 및 비즈니스 로직을 처리한다.[4]
통신에서 '프론트'는 장치 또는 서비스이고, '백'은 서비스 제공을 지원하는 인프라이다.[4]
경험 법칙에 따르면, 클라이언트 측 (프론트엔드)은 사용자가 조작하는 구성 요소이고, 서버 측 (백엔드) 코드는 서버에 위치한다.[4]
2. 1. 1. 프론트엔드
웹에서 프론트엔드는 사용자가 시각적으로 보는 부분을 의미한다. 주로 HTML, CSS, 자바스크립트가 쓰이며, 최근에는 페이스북에서 개발한 싱글 페이지 애플리케이션 형태의 리액트가 많이 사용된다.[1][2] 사용자가 조작하는 모든 구성 요소는 클라이언트 측 (또는 "프론트엔드")이다.[4]
프론트엔드 개발에 필요한 지식은 다음과 같다.
| 필요한 지식 |
|---|
| HTML, CSS, 자바스크립트 등의 마크업 및 웹 언어 (Sass (스타일시트 언어), JQuery 포함) |
| 비동기 입출력 요청 관리 및 Ajax |
| 싱글 페이지 애플리케이션 (리액트 (자바스크립트 라이브러리), 앵귤러 (애플리케이션 플랫폼), Vue.js 등의 프레임워크 포함) |
| 웹 성능 (60 FPS 애니메이션 및 상호작용, 메모리 사용량 등) |
| 반응형 웹 디자인 |
| 크로스 브라우저 호환 이슈 및 우회 처리 |
| 헤드리스 브라우저의 단대단 테스트 |
| 자바스크립트 파일의 변환 및 번들링, 이미지 크기 축소 등을 위한 빌드 자동화 (웹팩, Gulp.js 사용) |
| 검색 엔진 최적화 |
| 웹 접근성 문제 |
| 김프, 어도비 포토샵 등의 이미지 편집 도구의 기본 사용 |
| 사용자 인터페이스 |
소프트웨어 아키텍처에서 프론트엔드는 사용자와 직접 상호 작용하는 부분을, 백엔드는 프론트엔드에 대한 출력을 생성하는 부분을 가리킨다. 이러한 분할은 추상화의 일종으로, 시스템을 관리하기 쉽게 만든다. 프론트엔드 처리를 수행하는 하드웨어 및 소프트웨어를 프론트엔드 프로세서(FEP)라고도 한다.
콘텐츠 관리 시스템에서 '프론트엔드'는 최종 사용자에게 보이는 뷰를 의미한다.[1][2] 음성 합성에서 프론트엔드는 입력 텍스트를 기호적 음성 표현으로 변환하는 부분을 의미한다.[3] 컴파일러에서 '프론트엔드'는 소스 코드를 중간 표현으로 번역하는 부분을 의미한다.[4]
2. 1. 2. 백엔드
Back-end영어는 사용자에게 직접 보이지 않지만, 웹 애플리케이션의 핵심 로직과 데이터 처리를 담당한다. PHP, 파이썬, 루비, Node.js, 자바, C# 등의 프로그래밍 언어를 사용하여 서버 측 로직을 구현하고, 데이터베이스와 연동하여 데이터를 관리한다. API를 통해 프론트엔드와 통신하며, 데이터베이스 관리, 보안, 인증, 권한 부여, 백업 등의 역할을 수행한다.[1][2] 최근에는 서버리스 아키텍처, 마이크로서비스 아키텍처 등의 도입으로 백엔드 개발 방식이 더욱 다양해지고 있다.통신에서 백엔드는 서비스 제공을 지원하는 인프라이다. 경험 법칙에 따르면, 서버 측 (또는 백엔드) 코드는 일반적으로 사용자와 물리적으로 멀리 떨어진 서버에 위치한다.
소프트웨어 아키텍처에서 하드웨어와 최종 사용자 사이에는 여러 개의 추상화 계층이 있을 수 있다. 백엔드는 일반적으로 데이터 저장 및 비즈니스 로직을 처리한다.
백엔드 개발자에게 필요한 지식은 다음과 같다.
| 항목 |
|---|
| 스크립트 언어 (PHP, 파이썬, 루비, 펄, Node.js) 또는 컴파일 언어 (C#, 자바, Go) |
| 데이터 액세스 계층 |
| 비즈니스 로직 |
| 데이터베이스 관리 |
| 확장성 |
| 고가용성 |
| 보안 문제, 인증 및 인가 |
| 소프트웨어 아키텍처 |
| 데이터 변환 |
| 백업 방법 및 소프트웨어 |
2. 1. 3. 프론트엔드와 백엔드의 협업
프론트엔드는 API를 통해 백엔드와 통신한다. 웹과 모바일 프론트엔드의 경우 API는 HTTP 요청/응답에 기반을 둔다.[12] API는 백엔드 포 프론트엔드(Backend for Frontend, BFF) 패턴을 사용하여 설계되며, 프론트엔드 측의 처리를 용이하게 하기 위해 응답을 처리한다.[12]2. 2. 컴파일러
컴파일러에서 프론트엔드는 컴퓨터 프로그래밍 소스 코드를 중간 표현으로 번역하고, 백엔드는 중간 표현을 사용하여 컴퓨터 출력 언어로 코드를 생성한다.[11] 백엔드는 일반적으로 더 빠르게 실행되는 코드를 생성하기 위해 최적화를 수행한다. 프론트엔드와 백엔드로 분할함으로써, 소스 코드를 처리하는 파서 섹션과 코드를 생성하고 최적화하는 백엔드를 분리할 수 있다. GCC와 같은 일부 설계는 여러 프론트엔드(서로 다른 소스 언어를 파싱) 또는 백엔드(서로 다른 대상 프로세서에 대한 코드 생성) 간의 선택을 제공한다.[4]주로 컴파일러 언어에서 상위 언어로 작성된 소스 코드를 컴파일 가능한 하위 언어로 기술된 소스 코드로 변환하는 프로그램을 프론트엔드라고 부르기도 한다. 유명한 것으로는 C++(C++) 언어에서 C 소스를 얻는 Cfront가 있다.
2. 3. 음성 합성
음성 합성에서 프론트엔드는 입력 텍스트를 심볼 음운 표현으로 변환하는 합성 시스템의 일부를, 백엔드는 음운 표현을 실제 소리로 변환하는 것을 가리킨다.[10]2. 4. 기타 소프트웨어
콘텐츠 관리 시스템(CMS)에서 프론트엔드와 백엔드는 각각 CMS의 최종 사용자에게 보이는 뷰와 관리 뷰를 가리킨다.[9] 음성 합성에서 프론트엔드는 입력 텍스트를 심볼 음운 표현으로 변환하는 합성 시스템의 일부이고, 백엔드는 음운 표현을 실제 소리로 변환한다.[10] 그래픽 파일 관리자는 컴퓨터 파일 시스템의 프론트엔드이고 셸은 운영 체제와 통신한다. 프론트엔드는 사용자와 마주하며 백엔드는 응답 시 운영 체제의 프로그램 실행을 종료한다. 컴파일러에서 프론트엔드는 컴퓨터 프로그래밍 소스 코드를 중간 표현으로 변환하며, 백엔드는 중간 표현을 가지고 컴퓨터 출력 언어 코드를 생성한다.[11]3. 하드웨어의 정의
하드웨어 분야에서도 프론트엔드와 백엔드 개념이 사용된다.
3. 1. 컴퓨터 네트워크
컴퓨터 네트워크에서 프론트엔드는 네트워크 트래픽을 최적화하거나 보호하는 모든 하드웨어를 지칭할 수 있다.[13] 네트워크 트래픽은 네트워크 진입 전 프론트엔드 하드웨어를 통과한다.[6] 이러한 장치를 애플리케이션 프론트엔드 하드웨어라고 부르는데, 그 이유는 네트워크의 아웃바운드측 프론트엔드나 경계에 위치하기 때문이다.3. 2. 프로세서 설계
프로세서 설계에서 프론트엔드 설계는 Verilog와 같은 하드웨어 기술 언어로 회로의 동작을 기술하는 것이고, 백엔드 설계는 해당 동작을 다이의 물리적 트랜지스터에 매핑하는 과정이다.[7] EDA에서 설계의 프론트엔드는 논리적, 전기적 설계를 수행하는 공정(논리 합성 등)을, 백엔드는 회로의 배치와 배선 등 레이아웃을 결정하고 물리적 검증을 수행하는 공정(디자인 룰 체크 등)을 지칭한다.3. 3. 무선 통신
무선 회로에서 안테나 측의 송수신 단자 회로 부분을 프런트엔드라고 부른다. 일반적으로 "약한 신호를 증폭하는" 경우와 "높은 주파수를 낮은 주파수로 변환하는" 경우를 지칭하는 경우가 많다.[7] 반면 백엔드는 증폭과 필터링을 수행하여 신호를 정제·편집한다. PA(전력 증폭기)나 고주파 스위치와 조합하여 프런트 엔드 모듈로 만든 제품이 세트 메이커를 대상으로 판매되고 있다. 마찬가지로 IC의 경우 프런트 엔드 IC라고 한다. 후단의 IF(중간 주파수) 부분 이후와는 최적의 공정이 다르기 때문에 IC를 분리한다. 그러나 최근에는 반도체 기술의 진보로 프런트 엔드와 IF를 1개의 칩으로 통합한 IC도 드물지 않게 되었다.4. 기타 분야
프론트엔드와 백엔드는 IT 분야 외에도 다양한 분야에서 활용되는 용어이다.
- 자동차의 앞면, 전조등, 방향 지시등, 프론트 그릴, 앞 범퍼가 있는 부분을 프론트 엔드라고 하며, 후방은 백 엔드라고 한다.
- 자전거의 프레임과 바퀴를 연결하는 부분은 엔드라고 부르며, 앞바퀴 부분을 프론트 엔드, 뒷바퀴 부분을 리어 엔드라고 부른다.
- 원자력 발전소에서, 연료 제조, 발전소 건설, 운영 등과 관련된 사업을 "프론트 엔드 사업"이라고 한다. 원자로의 폐로 및 방사성 폐기물 처리, 핵연료 주기와 관련된 사업은 "백 엔드 사업"이라고 한다.
- 금융 및 재무 분야에서도 프론트엔드와 백엔드라는 용어를 여러 의미로 사용한다. 예를 들어 회사형 투자 신탁 구매 시, 프론트엔드형 로드는 구매 시 수수료를 지불하고, 백엔드형 로드는 상환 시 수수료를 지불한다.[8]
- 컬링에서 리드와 세컨드 선수를 프론트엔드, 서드와 스킵을 백엔드라고 부른다.
- 비즈니스에서 신제품 개발의 초기 단계를 "퍼지 프론트엔드"라고 부르기도 한다.
- 마케팅에서는 구매자를 선별하기 쉬운 상품을 프론트엔드라고 부르고, 프론트엔드를 구매한 고객에게 추가적으로 판매하는 상품을 백엔드라고 부른다.
4. 1. 자동차
자동차의 앞면, 전조등, 방향 지시등, 프론트 그릴, 앞 범퍼가 있는 부분을 프론트 엔드라고 한다. 후방은 백 엔드라고 한다.4. 2. 자전거
자전거의 프레임과 바퀴를 연결하는 부분을 엔드라고 부르며, 앞바퀴 부분을 프론트 엔드, 뒷바퀴 부분을 리어 엔드라고 부른다.4. 3. 원자력 발전
원자력 발전소에서, 연료 제조, 발전소 건설, 운영 등과 관련된 사업을 "프론트 엔드 사업"이라고 한다. 또한 원자로의 폐로 및 방사성 폐기물 처리, 핵연료 주기와 관련된 사업을 "백 엔드 사업"이라고 한다.4. 4. 비즈니스
금융 및 재무 분야에서도 프론트엔드와 백엔드라는 용어를 여러 의미로 사용한다. 예를 들어 회사형 투자 신탁 구매 시, 프론트엔드형 로드는 구매 시 수수료를 지불하고, 백엔드형 로드는 상환 시 수수료를 지불한다.[8]그 외에도 비즈니스에서는 다음과 같은 의미로 사용된다.
- "백엔드 필"은 포이즌 필의 일종이다. 특정 조건을 만족했을 때 현재 주주가 소유한 주식을 채권이나 현금으로 교환할 수 있는 권리를 부여하여, 적대적 인수를 어렵게 하는 방식이다. 이 경우 공개 매수를 진행하는 자는 이 권리를 행사하면서 취득 가격의 상승을 막을 수 없다.
- 신제품 개발의 초기 단계를 프론트엔드라고 부르는 경우가 있다. 가장 어려운 단계이므로 "퍼지 프론트엔드" 등으로도 부른다.
- 마케팅에서는 구매자를 선별하기 쉬운 (판매하기 쉬운) 상품을 프론트엔드라고 부르고, 프론트엔드를 구매한 고객에게 추가적으로 판매하는 상품을 백엔드라고 부른다.
4. 5. 스포츠
컬링에서 리드와 세컨드 선수를 프론트엔드라고 부르고, 서드와 스킵을 백엔드라고 부른다.참조
[1]
웹사이트
Front End vs Back End of Your Website: Everything You Need to Know
https://letsgodojo.c[...]
2020-02-07
[2]
웹사이트
Difference Between Frontend and Backend MVC – Joomlatuts
http://joomlatuts.ne[...]
2016-12-30
[3]
웹사이트
L18: Speech synthesis (backend)
http://research.cs.t[...]
Texas A&M University
2016-12-29
[4]
웹사이트
Operating Systems Notes
http://www.personal.[...]
Kent State University
2016-12-30
[5]
웹사이트
The BFF Pattern (Backend for Frontend): An Introduction
https://blog.bitsrc.[...]
2021-02-24
[6]
웹사이트
Network Front-End Processors, Yet Again {{!}} June 2009 {{!}} Communications of the ACM
http://cacm.acm.org/[...]
2016-12-30
[7]
웹사이트
Front-End Design {{!}} Online Documentation for Altium Products
http://techdocs.alti[...]
2016-12-30
[8]
웹사이트
Mutual Fund Fees and Expenses
http://www.sec.gov/a[...]
Securities Exchange Commission
2008-08-21
[9]
웹인용
Difference Between Frontend and Backend MVC – Joomlatuts
http://joomlatuts.ne[...]
2016-12-30
[10]
웹인용
L18: Speech synthesis (back end)
http://research.cs.t[...]
Texas A&M University
2016-12-29
[11]
웹인용
Operating Systems Notes
http://www.personal.[...]
Kent State University
2016-12-30
[12]
웹인용
The BFF Pattern (Backend for Frontend): An Introduction
https://blog.bitsrc.[...]
2021-02-24
[13]
웹인용
Network Front-End Processors, Yet Again {{!}} June 2009 {{!}} Communications of the ACM
http://cacm.acm.org/[...]
2016-12-30
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com