프론트엔드

사용자가 직접 보고 만지는 쪽을 만드는 자리입니다. 브라우저에 뜨는 화면이 여기서 나옵니다. 사용자가 누르고 입력한 것을 받아 서버 쪽으로 넘깁니다. 무엇을 하는 일이냐는 물음의 답이 한 문장이 아니라 목록으로 열립니다.

상세

프론트엔드는 무엇을 하는지가 아니라 어느 자리인지를 가리키는 말입니다. 서버 쪽 프로그래밍을 배우는 사람이 클라이언트 쪽 코딩에 능숙할 필요는 없습니다. 클라이언트 쪽 코딩의 기본 지식은 웹 프론트엔드를 만드는 개발자들과 일하는 데 도움이 됩니다. 이 대비가 이 낱말이 놓인 자리를 보여 줍니다. 클라이언트 쪽에 있고, 웹 위에 있고, 사람이 맡는 일입니다.

화면이 되는 자리는 사용자 에이전트 안입니다. WHATWG HTML Living Standard 는 사용자 에이전트가 여러 카테고리로 나뉘고 카테고리마다 적합성 요구가 다르다고 적습니다. 카테고리는 서로 겹칩니다. 웹 브라우저와 그 밖의 상호작용하는 사용자 에이전트가 그중 하나입니다. 같은 표준은 사용자 에이전트가 마크업을 파싱해 DOM(Document Object Model, 문서 객체 모델) 트리로 바꾼다고 적습니다. DOM 트리는 문서를 메모리에 담은 표현입니다.

내용을 만드는 코드가 어디서 도느냐로 자리가 갈립니다. 클라이언트 사이드 렌더링은 브라우저에서 자바스크립트로 HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어) 내용을 만드는 관행입니다. 서버 사이드 렌더링은 그 반대쪽으로, 서버가 HTML 내용을 만듭니다. 두 기법은 서로 배타적이지 않고 같은 애플리케이션 안에서 함께 쓸 수 있습니다.

flowchart TD
    A["HTML 내용을 만드는 코드가 도는 자리"] -->|서버| B["서버 사이드 렌더링"]
    A -->|브라우저| C["클라이언트 사이드 렌더링"]
    B --- |서로 배타적이지 않고 같은 애플리케이션 안에서 함께 쓸 수 있다| C

이 낱말이 코드 조각을 직접 가리키는 대목도 있습니다. CORS(Cross-Origin Resource Sharing, 교차 출처 자원 공유)는 브라우저가 프론트엔드 자바스크립트 코드의 교차 출처 응답 접근을 막을지 결정하는 시스템입니다. 여기서 프론트엔드는 브라우저 안에서 도는 자바스크립트 코드입니다. 자리를 가리키기도 하고 그 자리에서 도는 코드를 가리키기도 합니다.

한 문장 정의가 안 서는 이유가 여기서 드러납니다. 이 자리에서 마주치는 것이 한 가지가 아닙니다. 문서 구조를 짜는 일, 화면의 생김새를 정하는 일, 입력을 받는 일, 화면이 그려지는 순서를 다루는 일, 접근성, 성능, 코드를 묶어 내보내는 일이 같은 이름 아래 있습니다. 그래서 무엇을 하는 일이냐의 답이 목록으로 열립니다.

경계

서버 사이드 렌더링

서버에서 HTML 을 만들어 보내는 일도 이 구역인가. 아닙니다. 서버 사이드 렌더링은 서버에서 HTML 내용을 만들어 클라이언트로 보내는 관행입니다. 내용을 만드는 코드가 도는 자리가 서버입니다. 클라이언트가 자바스크립트로 HTML 내용을 만드는 쪽이 그 반대편입니다.

다만 두 기법은 서로 배타적이지 않고 같은 애플리케이션 안에서 함께 쓸 수 있습니다. 그래서 한 화면이 두 구역에 걸칠 수 있습니다. 서버에서 만든 페이지는 자바스크립트 없이도 어느 정도 쓸 수 있습니다. 인터넷이 느리거나 사용자가 자바스크립트를 껐거나 브라우저가 낡아 자바스크립트가 실행되지 않는 경우가 그렇습니다. 다만 그때 상호작용이나 클라이언트 쪽 로직은 동작하지 않습니다. 그 동작하지 않는 부분이 이 구역입니다.

기기 앱 화면

브라우저가 아니라 휴대 기기 앱의 화면을 만드는 일도 이 구역인가. 아닙니다. 그쪽에서도 UI(User Interface, 사용자 인터페이스)의 역할은 애플리케이션 데이터를 화면에 보여 주는 것입니다. UI 는 사용자 상호작용의 주된 지점 노릇도 합니다. 데이터가 바뀌면 UI 가 그 변화를 반영해 갱신됩니다. 사용자 상호작용 때문이든 네트워크 응답 같은 외부 입력 때문이든 마찬가지입니다. 하는 일의 모양이 같습니다. 갈리는 것은 그 화면을 무엇으로 짓느냐입니다. 웹 플랫폼 기술이 아니라 그 플랫폼의 UI 레이어 규약 위에서 짓습니다.

겹치는 대목도 있습니다. 프로그레시브 웹 앱은 웹 플랫폼 기술로 만들었지만 플랫폼 특화 앱과 비슷한 사용자 경험을 제공하는 애플리케이션입니다. 검색 엔진으로 찾을 수 있다는 것, URL(Uniform Resource Locator, 통합 자원 위치 지정자)로 링크할 수 있다는 것, 여러 폼 팩터에서 동작한다는 것 같은 웹의 가장 나은 부분을 그대로 누립니다. 거기에 서비스 워커와 푸시 같은 현대적 API(Application Programming Interface, 응용 프로그램 인터페이스)로 점진적으로 강화됩니다. 설치할 수 있다는 것, 오프라인에서 동작한다는 것, 서버와 동기화하며 사용자를 다시 끌어들인다는 것이 그렇게 붙는 기능입니다. 웹 플랫폼 기술로 짓는다는 점에서 이 구역입니다.

화면을 그리는 일과 디자인하는 일

화면을 디자인하는 일까지 이 구역인가. 아닙니다. 다만 선이 자주 넘나듭니다. 프론트엔드 개발자가 프로젝트에서 여러 가지 디자인 작업을 떠맡는 일이 잦습니다. 개발자들이 디자이너로 일하고 싶어하지 않을 수도 있습니다. 그래도 기본적인 사용자 경험과 디자인 이론을 갖추는 것은 웹사이트를 만드는 일에 관여하는 모두에게 보탬이 됩니다. 역할이 따로 있다는 것이 그 말의 전제입니다. 디자인은 이웃 자리이고, 그 일이 이 자리 사람에게 넘어오는 경우가 있을 뿐입니다.

프론트엔드만 부르는 중간 서버

프론트엔드만 부르라고 세운 중간 서버는 이 구역인가. 아닙니다. 이 레이어를 BFF(backend-for-frontend, 프론트엔드를 위한 백엔드) 서비스라고 부릅니다. 프론트엔드 클라이언트와 백엔드 서비스 사이에 놓입니다. 사이에 놓인다는 말 자체가 프론트엔드 바깥이라는 뜻입니다.

누가 굴리느냐는 다릅니다. 프론트엔드 팀이 자기 BFF 서비스를 독립적으로 관리합니다. 그래서 언어 선택과 릴리스 주기와 작업 우선순위와 기능 통합을 그 팀이 통제하게 됩니다. 애플리케이션이 웹 인터페이스와 모바일 앱처럼 여러 인터페이스를 지원하면 인터페이스마다 BFF 서비스를 하나씩 만듭니다. 코드가 놓이는 자리와 그 코드를 맡는 팀이 갈리는 예입니다.

이견

이 구역을 어디까지로 보느냐가 문서마다 갈립니다.

한쪽은 프론트엔드 개발자라는 말이 애매할 수 있다고 스스로 인정합니다. 사람마다 다른 것을 뜻할 수 있고, 프론트엔드에서 일하는 사람들이 아주 다양한 종류의 일을 하리라고 기대될 수 있다는 것입니다. 어디까지가 이 자리인지를 한 줄로 닫지 않는 쪽입니다.

다른 쪽은 컴포넌트가 도는 환경을 갈라 적습니다. 서버 컴포넌트는 번들링 전에 미리 렌더되는 새 종류의 컴포넌트이고, 그 환경은 클라이언트 앱이나 서버 사이드 렌더링 서버와 분리된 환경입니다. 서버 컴포넌트는 CI(Continuous Integration, 지속적 통합) 서버에서 빌드 시점에 한 번 돌 수도 있고, 웹 서버를 써서 요청마다 돌 수도 있습니다. 컴포넌트라는 단위가 브라우저 밖에서도 도는 자리를 명시하는 쪽입니다.

W3C 의 WCAG(Web Content Accessibility Guidelines, 웹 콘텐츠 접근성 지침) 2.2 는 책임을 셋으로 갈라 셉니다. 웹 접근성이 접근 가능한 콘텐츠에만 달린 것이 아니라 접근 가능한 웹 브라우저와 그 밖의 사용자 에이전트에도 달렸다고 적습니다. 저작 도구 역시 웹 접근성에서 중요한 역할을 한다고 적습니다. 화면에 나올 것을 만드는 쪽만으로 접근성이 닫히지 않는다고 이 문서가 적는 셈입니다.

같은 자리를 한쪽은 애매하다고 인정하고, 한쪽은 브라우저 밖까지 컴포넌트를 넓히고, 한쪽은 브라우저와 저작 도구까지 책임을 나눕니다. 이 구역의 끝이 어디인지가 보는 쪽을 따라 달라집니다.

관련 항목

이것을 이루는 언어와 기술

HTML · CSS · 자바스크립트 · 웹 컴포넌트 · 커스텀 엘리먼트

브라우저 안에서 맞물려 도는 요소

사용자 에이전트 · 브라우저 · DOM · DOM 트리 · 브라우저 이벤트 루프

화면을 만드는 렌더링 방식

클라이언트 사이드 렌더링 · 서버 사이드 렌더링 · 서버 컴포넌트

화면이 그려지는 처리 단계

레이아웃 · 리플로 · 리페인트

이것을 빌드·배포하는 도구

번들러 · 트리 셰이킹 · 미니파이 · 트랜스파일 · 패키지 매니저 · 소스맵 · 지속적 통합

상태를 쥐고 서버와 통신하는 수단

컴포넌트 · 상태 관리 · fetch · 캐싱 · 쿠키 · 세션 · 네트워크

이것이 지키는 규칙과 성질

접근성 · 저작 도구 · 동일 출처 정책 · CORS · 콘텐츠 보안 정책

이것을 정의·설명하는 문서와 조직

MDN · W3C · WCAG · Android Developers · Microsoft · Azure · React

이것을 재는 지표

코어 웹 바이탈 · Largest Contentful Paint · Interaction to Next Paint · Cumulative Layout Shift

성능을 끌어올리는 기법

지연 로딩 · Intersection Observer · 코드 분할

여기서 자주 터지는 문제

레이아웃 이동 · 번들 비대 · 하이드레이션 불일치 · 교차 사이트 스크립팅 · 클릭재킹 · 데이터 인젝션

이것과 경계를 가르는 이웃 개념

백엔드 · BFF · 프로그레시브 웹 앱 · 검색