나무모에 미러 (일반/밝은 화면)
최근 수정 시각 : 2024-08-27 16:01:54

프론트엔드(프로그래밍)

웹 프레임워크 기술
{{{#!wiki style="margin:0 -10px"
{{{#!folding [ 펼치기 / 접기 ]
{{{#!wiki style="margin:-5px 0px -10px; word-break:keep-all"
$ 유료 포함 • 취소선 단종 및 중단
<colbgcolor=#f6f6f9,#2f3241> 프론트엔드<colbgcolor=#fcfcfd,#272935> CSS BootstrapTailwind CSSBulmaFoundationSkeletonPico
JSX ReactSolidJSAstroPreactGatsbyRemixInfernoQwik
JS AngularSvelteBackbone.jsjQueryAstrohtmxEmber.jsLit11tyMarkoVanJSAlpine.js
Vue Vue.jsVuePressGridsomeQuasarAstro
Python Reflex
백엔드 Java SpringStrutsGWTGrailsJoobyPlay! FrameworkScala
Kotlin Ktor
JS ExpressNestJSkoaHonofastify
.NET ASP.NET$
PHP LaravelCodeigniterReasonablephalconSymfonyzendCakePHPFuelPHPYiiSlimPHPixe
Python DjangoFlaskFastAPI
Ruby Ruby on RailsSinatra
Go GinechoFiber
풀스택 JSX Next.jsAstroSolidStartRemixQwik City
JS SvelteKitFreshAstroMarko
Vue Nuxt.jsAstro
Java Vaadin$
Python StreamlitReflex
Rust RocketActixLeptosAxum
하이브리드 .NET Blazor
Dart Flutter
Kotlin Kotlin Multiplatform
}}}}}}}}} ||


1. 개요2. 설명

1. 개요

Front-end. 프로그래밍의 한 분야. 웹사이트나 앱 등의 사용자 인터페이스(UI)를 개발하는 분야를 말한다. 반대말은 백엔드. 안드로이드 혹은 iOS 개발도 넓게 보면 프론트엔드 개발에 포함될 수 있다.

프로그래밍에서의 프론트엔드라 함은 컴퓨터 소프트웨어에서 사용자와 상호작용하는 부분을 지칭하고, 백엔드는 반대로 프론트엔드로부터 사용자의 입력을 받고, 그 입력을 처리하여 출력할 결과물을 다시 프론트엔드로 넘기는 부분을 지칭한다.

프론트엔드 개발자를 쉽게 말하자면, 나무위키에 접속하면 보이는 왼쪽 위의 '나무위키' 버튼, 그 옆의 '최근 변경', '최근 토론', '특수 기능', 그 오른쪽의 검색창, 그 아래의 실시간 검색어 등등, 이렇게 일반 사용자 눈 앞(Front)에 보이는 것을 개발하는 사람이다.

전 세계적으로 프론트엔드/백엔드 관련 얘기를 한다면 거의 대부분은 웹 프로그래밍을 말하지만, 개념 자체는 웹 개발에 한정되진 않는다. 아예 프론트엔드와 백엔드가 완전히 별개의 주체에서 개발하여 따로 배포하는 경우도 있다.[1]

프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무 스타일의 개발 방식으로 프론트단의 비지니스 로직과 사용자 영역의 개발을 담당하는 사람이다. 이와 다른 방식의 업무 스타일 직군으로는 웹퍼블리셔(UI 개발)와 개발자(서버 개발자)의 업무 분리 방식이 있다. 이 경우는 주로 서버 사이드가 클라이언트를 감싸는 방식이다. MVC로 치면 View 부분에 해당하는 영역을 맡는다.

2. 설명

프론트엔드 개발자는 백엔드 API에서 가져온 데이터의 출력, 입력을 통한 비즈니스 로직 구성과 사용자와 대화하는 사용자 인터페이스 부분을 작업하는 개발자를 말한다.

분별하기 헷갈리는 직종으로 웹 퍼블리셔가 있는데, 웹 퍼블리셔(해외에서는 UI 개발자로 불린다)는 HTML 중심이거나, 서버 사이드가 감싸는 구조 형태의 웹을 지향하는 웹 퍼블리셔와 개발자의 업무 스타일의 직군으로서 웹표준 반응형 웹과 UI를 만드는 디자인 쪽에 가깝기에 데이터 처리, 비즈니스 로직을 개발하진 않는다. 요즘은 마크업 개발자라고 불린다. 클라이언트 사이드 영역이기도 하지만, 프론트엔드 개발자는 프론트엔드, 백엔드의 완전한 분리 구조를 지향하는 업무 스타일의 직군으로서 웹 퍼블리셔와 같이 인터페이스의 디자인 관점도 있지만, 웹 퍼블리셔와 달리 DOM 조작이 아닌 컴포넌트 아키텍처와 데이터 상태의 변화로 처리하며, 이벤트나 서버와 API 통신해서 비즈니스 로직을 푸는 관점을 가장 중시한다.

프론트엔드 개발자는 프론트 영역 전반과 서버에 대한 이해력을 필요로 한다. 프론트엔드 개발자가 담당하기도 하지만, 종종 업무 효율을 위해 디자인 영역(HTML, CSS)만 작업해주는 마크업 개발자가 따로 있는 경우도 있으며, 프론트엔드 개발자는 해당 작업 파일을 받아 포팅 작업을 하고, 프론트엔드 영역을 개발하게 된다. 즉 프론트엔드 개발자는 바닐라 JS와 HTTP 프로토콜, 웹팩 등이 중요하다고 볼 수 있다.

백엔드 개발자도 기존 개발자와 스펙이 조금 다르고, 백엔드의 뷰는 화면 개발이 아닌 API 개발이고, 백엔드 인증 처리도 따로 알아야 하며, 데이터베이스 분석과 API서버를 개발한다. 웹 퍼블리셔와 개발자로 나뉜 방식은 모든 호출을 서버에서 가져와야 했고, 컴포넌트화가 안 되었지만, 프론트엔드와 백엔드로 나뉜 개발 방식은 서버의 컴퓨터와 사용자 컴퓨터가 http통신으로 데이터만 교환하고 완전히 분리 구조를 지향한다. 점점 데이터의 복잡성이 커지고, SPA(Single Page Application) 및 재사용성이 중요함에 따라 각광받는 직종이다. 이런 거 만들어주는 사이트들도 존재한다.

웹이 아닌 모바일쪽 프론트엔드라면 입력을 감지하고 이에 알맞는 기능을 동작시키는 기술도 중요하다. 하드웨어는 매우 기본적인 센서만 제공하기 때문에, 이를 해석하여 정확한 반응을 묘사해야하는 것은 프론트엔드 개발자의 영역이다. 스마트폰 앱을 사용할때 사용자가 쓰는 다양한 손가락 제스처 동작 기능들이 여기에 해당한다. 스마트폰은 유저가 어느 x, y 위치에 손가락을 눌렀는가 에 대한 정보만 개발자에게 제공한다. 개발자는 이 단순한 정보를 해석하여, 유저가 한번 터치한건지, 두번 터치한건지, 화면을 스크롤한건지, 화면을 스와이프 한건지 해석하고 어떠한 동작이 기능 구현에 있어 필요한지를 고려하여, 손가락만으로 원활하게 작동하는 그래픽 리액션을 표현해야한다.


[1] 이런 경우는 백엔드 프로그램에 이미 프론트엔드까지 포함되어 있지만, 엔드유저(일반 사용자)가 쓰기엔 불편하기 때문에 별도의 GUI 프론트엔드가 개발되는 사례가 많다. MPlayer의 프론트엔드 재생기처럼 오픈 소스의 사례가 많지만, 그 외에도 여럿 있다. 인텔 MKL의 오버클럭 테스트용 프론트엔드인 링스라던가..., 사실 최적화 프로그램의 여러 기능도 실상은 윈도우 자체에 있는 설정이나 기능을 엔드 유저의 특정 목적에 맞게 편하게 쓸 수 있게 해주는 프론트엔드인 경우가 정말 많다.