쉬운·기술사전비유로 이해하는 AI·개발 용어
기초

프론트엔드와 백엔드

Frontend & Backend

눈에 보이는 것, 그리고 실제로 일하는 것이에요.

프론트엔드와 백엔드 개념 다이어그램

모든 앱에는 홀과 주방이 있어요. 식당과 똑같아요.

프론트엔드는 눈에 보이고 손으로 다룰 수 있는 모든 것이에요. Amazon이나 평소 자주 쓰는 사이트를 열어보세요. 메뉴 바, 버튼, 검색창, 클릭하면 초록색으로 바뀌는 '장바구니 담기'. 이 모든 것은 사용자가 요청할 수 있는 항목의 목록일 뿐이에요. 식당으로 치면 홀이에요. 메뉴판, 안내 데스크, 앉아 있는 테이블.

그런데 여기서 많은 사람이 헷갈려요. 메뉴에 적힌 것들은 테이블에서 실제로 만들어지지 않거든요.

'지금 구매' 버튼을 누르는 건, 웨이터에게 주문을 건네는 것과 같아요. 웨이터는 테이블 앞에서 요리하지 않아요. 주문을 들고 안으로 들어가고, 주방이 실제 일을 처리하고, 결과물을 들고 나와요.

그 주방이 바로 백엔드예요. 데이터베이스, 비즈니스 로직, 서버. 사용자 눈에는 절대 보이지 않는 것들이에요.

무거운 작업은 모두 뒤에서 조용히 처리돼요.

프론트엔드가 담당하는 건 테이블에서 처리할 수 있는 것뿐이에요. 버튼 모양, 페이지 색상, 마우스를 올렸을 때 나타나는 작은 애니메이션. 그게 경험이라면, 백엔드는 실제 작업이에요.

미슐랭 레스토랑을 떠올려보세요. 스테이크를 테이블 앞에서 토치로 굽는 퍼포먼스는 잘 하지 않아요. 워크인 냉장고, 그릴, 준비 작업대, 뒤에서 땀 흘리는 수셰프가 필요하죠. 소프트웨어도 정확히 같아요. 진짜 일은 풀 주방이 필요하고, 그 과정은 보이지 않아야 해요.

어디서 문제가 생겼는지 빠르게 파악하는 법이 있어요.

프론트엔드 문제는 익숙한 형태예요. 클릭이 안 되는 버튼, 이미지 위에 겹쳐진 텍스트, 노트북에서는 멀쩡한데 휴대폰에서 완전히 깨지는 페이지. 홀이 어수선한 것이고, 주방은 여전히 돌아가고 있어요. 불편하지만 보통 빠르게 고쳐져요.

백엔드 문제는 규모가 달라요. Cloudflare나 AWS 같은 서비스가 다운되면서 인터넷 절반이 함께 끊길 때가 그 경우예요. 공유 주방에 불이 난 것이고, 그 주방에 조용히 의존하고 있던 모든 식당이 동시에 문을 닫아요. 한꺼번에 여러 앱이 망가지는데 정작 그 앱들은 잘못이 없는 거예요.

다음에 무언가 이상하다 싶으면 스스로 물어보세요. 홀이 어수선한 건지, 주방에 불이 난 건지. 대부분 어느 쪽인지 바로 알 수 있어요.

프론트엔드는 사용자가 경험하는 것이고, 백엔드는 실제로 일어나는 것이에요.