Frontend

User Interface is like a joke. If you have to explain it, it's not that good.

— UI/UX 디자이너들 사이에서 바이블처럼 여겨지는 격언.

웹이나 앱에서 사용자가 눈으로 보고, 클릭하고, 직접 상호작용하는 모든 시각적/기능적 영역을 개발하는 분야. 그리고 디자이너의 화려한 시안과 백엔드의 투박한 API 데이터 사이에서 고군분투하며 브라우저 호환성과 사투를 벌이는 현대판 노가다

1. 개요

프론트엔드(Frontend) 개발은 웹 브라우저 내부에서 동작하는 화면(클라이언트 사이드)을 구축하는 직무 및 생태계를 의미한다.

과거에는 HTML 뼈대에 CSS 화장을 얹고 약간의 JavaScript 효과를 주는 비교적 단순한 영역으로 인식되었으나, 스마트폰의 보급과 SPA(Single Page Application) 기술의 탄생으로 브라우저가 거의 하나의 운영체제급 역할을 수행하게 되면서 급격하게 복잡해졌다.

현재는 백엔드 못지않은 엄격한 아키텍처와 상태 관리, 빌드 도구 체인을 다루어야 하는 고난도 기술 영역으로 진화했다.

2. 프론트엔드의 3대장

프론트엔드를 지탱하는 근본 중의 근본이자, 모든 프론트엔드 개발자가 거쳐야 하는 필수 삼종 세트다.

  1. HTML: 웹페이지의 뼈대를 세우는 마크업 언어.
  2. CSS: 레이아웃을 잡고 색상을 입히는 등 시각적 아름다움을 부여하는 스타일시트.
  3. JavaScript: 화면에 생동감을 불어넣고 사용자의 입력에 반응하여 데이터를 처리하는 프로그래밍 언어.

현대 프론트엔드는 이 세 가지 기본기를 바탕으로 React, Vue.js, Angular 같은 거대 라이브러리 및 프레임워크 생태계 위에 구축되어 있다.

3. 관련 밈 및 드립

3.1. 제 로컬에선 잘 되는데요? (Works on my machine)

프론트엔드 개발자가 QA 담당자나 고객으로부터 버그 리포트를 받았을 때 가장 먼저 무의식적으로 튀어나오는 방어 기제성 멘트다.

사용자의 브라우저 버전, 운영체제, 화면 해상도, 캐시 상태 등에 따라 화면이 깨지거나 스크립트 에러가 날 확률이 극도로 높기 때문에 발생한다. 이 멘트를 날린 개발자는 보통 몇 분 뒤 캐시를 지우거나 시크릿 창을 켜고 테스트한 뒤 조용히 버그를 수정하기 시작한다.

3.2. 자바스크립트 피로감 (JavaScript Fatigue)

"일어나 보니 또 새로운 프레임워크가 나와서 세계를 제패했다고 한다." —— 피로에 지친 현대 프론트엔드 개발자들의 한탄.

매년, 심지어는 매달 새로운 상태 관리 라이브러리(Redux, Recoil, Zustand 등)와 빌드 도구(Webpack, Vite, Turbopack 등)가 쏟아져 나와 트렌드가 급변하는 현상을 꼬집는 밈이다.

개발자들은 "내가 어제 배운 기술이 오늘 레거시(Legacy)가 되는 기적"을 매일 체험하며 끊임없는 공부 지옥에 시달린다.

4. 여담

  • 프론트엔드 vs 백엔드의 비주얼 차이: 프론트엔드 개발자와 백엔드 개발자의 성향 차이를 보여주는 유머 짤방이 매우 많다. 대체로 프론트엔드는 겉보기에 화려하지만 속은 꼬여있는 구조로 묘사되고, 백엔드는 투박한 흑백 화면에 기계적인 코드로 묘사된다.
  • 웹 퍼블리셔와 프론트엔드의 세대 교체: 과거에는 웹 퍼블리셔(Markup Developer)와 프론트엔드 개발자의 경계가 모호했으나, 현재는 시각적 구현을 넘어 복잡한 비즈니스 로직과 API 연동을 다루는 프론트엔드 엔지니어링 영역이 완전히 독립된 직군으로 정착했다.
  • Internet Explorer 무덤 비석: 전설의 브라우저 Internet Explorer의 공식 지원 종료일(2022년 6월 15일)에 전 세계 프론트엔드 개발자들은 환호성을 질렀으며, 한국의 한 개발자는 경주에 IE 무덤 비석을 세워 해외 언론에 대서특필되기도 했다.1

5. 관련 문서

각주

  1. 비석에는 "그는 다른 브라우저를 다운로드하기 위한 좋은 도구였습니다."라는 촌철살인의 명문이 적혀 있었다. ↩

이 문서를 가리키는 문서