프론트엔드 vs 백엔드: 초보자가 꼭 알아야 할 차이점

쇼핑몰이나 블로그처럼 사용자가 실제로 쓰는 웹 서비스를 혼자 만들어보고 싶다면, 가장 먼저 부딪히는 고민이 프론트엔드와 백엔드 중 뭐부터 공부해야 하느냐입니다. 둘 다 웹 개발이라는 이름으로 묶여 있지만 하는 일도 다르고 배우는 기술도 다릅니다. 이 글에서는 두 영역이 각각 뭘 담당하는지, 어떤 기술을 배우게 되는지를 공식 문서를 기준으로 정리합니다.

AI와 블로그·관리 화면을 만들면서 화면(프론트엔드)과 서버(백엔드)를 오가다 보니, 둘이 정확히 뭐가 다른지 한번 정리하고 싶었습니다.

프론트엔드와 백엔드, 각각 무슨 일을 하는가

Mozilla의 웹 개발 학습 문서(MDN)는 클라이언트 사이드(client-side)와 서버 사이드(server-side)라는 말로 이 둘을 구분합니다. 클라이언트 사이드는 사용자의 브라우저에서 실행되는 코드이고, 서버 사이드는 웹 서버에서 실행되는 코드입니다. 흔히 부르는 프론트엔드와 백엔드가 각각 여기에 해당합니다.

서버 사이드, 즉 백엔드가 하는 일을 MDN은 이렇게 설명합니다. 브라우저가 요청을 보내면 그에 맞는 콘텐츠로 무엇을 돌려줄지 결정하고, 사용자가 입력하거나 제출한 데이터와 요청이 올바른지 검증합니다. 또 데이터베이스를 이용해 데이터를 저장하거나 조회하고, 이 사용자가 로그인한 사용자가 맞는지, 어떤 권한을 가졌는지도 확인합니다. 쇼핑몰로 치면 장바구니에 담긴 상품 정보를 저장하고, 결제 요청이 들어왔을 때 재고가 있는지 확인하고, 로그인한 사용자 본인의 주문 내역만 보여주는 일이 전부 백엔드의 몫입니다.

브라우저는 HTML 문서를 읽어서 JavaScript가 읽고 바꿀 수 있는 구조로 만들어 두는데, 이 구조를 DOM(Document Object Model)이라고 부릅니다. 상품 목록이 어떻게 보이는지, 버튼을 눌렀을 때 어떤 애니메이션이 나오는지, 장바구니 아이콘이 화면 어디에 있는지 같은 것들이 프론트엔드가 다루는 영역입니다.

프론트엔드 개발자가 배우는 기술

MDN의 공식 커리큘럼은 프론트엔드 개발자가 갖춰야 할 핵심 기술을 몇 가지 모듈로 나눠 제시합니다. 가장 기본이 되는 건 HTML로 콘텐츠를 구조화하는 법, CSS로 스타일과 레이아웃을 잡는 법, JavaScript의 기본 문법입니다. 여기에 더해 웹이 어떻게 동작하고 브라우저가 콘텐츠를 어떻게 불러오는지에 대한 웹 표준 지식, 장애가 있는 사용자도 문제없이 쓸 수 있게 만드는 접근성, 코드 변경 이력을 관리하는 버전 관리, 디자인의 기초 개념, 협업에 필요한 소프트 스킬(soft skill, 의사소통이나 팀워크 같은 비기술적 역량)도 코어 모듈에 포함됩니다.

MDN 커리큘럼은 HTML, CSS, JavaScript 기본을 '코어 모듈'로, JavaScript 프레임워크 같은 내용은 그다음 '선택 확장 모듈'로 나눕니다. 확장 모듈을 어떤 순서로 배울지는 정해 두지 않았습니다.

백엔드 개발자가 배우는 기술

AWS 공식 문서는 백엔드 개발자에게 필요한 역량을 네 가지로 설명합니다. 먼저 Python, Ruby, Java, PHP 등 여러 프로그래밍 언어 중 하나 이상을 다룰 수 있어야 하고, 관계형 데이터베이스와 비관계형 데이터베이스를 설계하고 관리하는 능력이 필요합니다. 로그인한 사용자를 확인하고 접근 권한을 통제하는 보안 지식도 필요합니다. 마지막으로 REST, GraphQL, WebSockets 같은 방식으로 API(Application Programming Interface, 프론트엔드와 백엔드가 데이터를 주고받기 위해 정해둔 약속)를 설계하는 능력도 포함됩니다.

어떤 순서로 배우면 좋을지에 대해서는 교육 플랫폼 Boot.dev의 로드맵이 구체적인 단계를 제시합니다. 먼저 Node.js, Python, Go 중 언어 하나를 정해서 집중하고, 그다음 자료구조와 알고리즘을 익힙니다. 이후 SQL을 중심으로 한 데이터베이스 기초를 배우고 필요에 따라 NoSQL도 공부합니다. 그다음 단계로 웹 프레임워크를 다루고, API를 설계하는 법을 배운 뒤, 마지막으로 만든 서비스를 실제로 배포하고 운영하는 방법을 익히는 순서입니다. 쇼핑몰을 예로 들면, 언어와 프레임워크로 서버를 돌리는 법을 배운 다음 상품과 주문 데이터를 어떻게 데이터베이스에 저장할지 설계하고, 그걸 꺼내 쓸 API를 만든 뒤, 실제 서버에 올려서 사람들이 접속할 수 있게 하는 흐름입니다.

처음 배울 때 자주 헷갈리는 것들

백엔드를 처음 배우는 사람들이 자주 겪는 혼란에 대해 DEV Community에 올라온 한 개발자의 경험담이 있습니다. 이 글에 따르면 Express 같은 프레임워크는 복잡한 세부 사항을 알아서 숨겨주기 때문에, 단순히 서버를 켜고 라우트(route, 특정 주소로 들어온 요청을 처리하는 경로)를 몇 개 만들어보는 것만으로는 이해에 도달하기 어렵습니다. 그 결과 CORS 에러(다른 출처의 서버에 요청을 보낼 때 발생하는 보안 관련 오류), 인증 버그, 상태 코드를 헷갈리는 문제가 생기기 쉽다고 설명합니다.

같은 글에서 자주 언급하는 또 다른 혼동이 인증(authentication)과 인가(authorization)입니다. 인증은 이 사용자가 누구인지 확인하는 과정이고, 인가는 이 사용자가 무엇을 할 수 있는지를 정하는 과정입니다. 쇼핑몰로 치면 로그인을 성공시키는 게 인증이고, 로그인한 사용자가 자기 주문 내역만 볼 수 있고 남의 주문은 못 보게 막는 게 인가입니다. 둘이 비슷해 보이지만 실제 서비스에서는 둘 다 따로 구현해야 한다고 이 글은 설명합니다.

어느 쪽이 결과물이 먼저 눈에 보이는가

Research.com과 Flatiron School 같은 교육 자료들은 빠르게 눈에 띄는 결과를 보고 싶은 사람에게는 프론트엔드가 더 나은 입구가 될 수 있다고 설명합니다. HTML, CSS, JavaScript로 뭔가를 만들면 화면에 바로 변화가 나타나기 때문에, 특히 처음 공부하는 사람에게는 이 점이 동기부여로 이어진다는 설명입니다.

다만 어느 쪽이 더 쉬우냐는 질문에는 정해진 답이 없다는 게 Flatiron School과 DEV Community 양쪽의 공통된 설명입니다. 보통은 자기가 더 좋아하는 쪽이 더 쉽게 느껴지고, 두 영역은 어려운 지점 자체가 다릅니다. 프론트엔드는 레이아웃이 깨지거나 디자인 의도를 코드로 옮기는 과정에서 오는 어려움이 있고, 백엔드는 로직을 짜고 데이터 흐름을 설계하는 데서 오는 어려움이 있다고 정리합니다. 눈에 보이는 결과물이 빨리 나오길 원하는지, 데이터와 로직을 다루는 쪽에 더 흥미가 가는지를 기준으로 삼아볼 수 있습니다.