프론트엔드 vs 백엔드, 대체 뭐가 다른 거야?
기획자가 알아야 할 IT의 앞면과 뒷면
기획자가 되면 꼭 듣게 되는 말이 있습니다.
“이건 프론트에서 처리해 주시고요.”
“백엔드에서 먼저 구현돼야 해요.”
하지만 처음엔 이 말이 참 헷갈립니다.
어디가 앞이고, 어디가 뒤라는 거지?
게다가 앞선 편에서 들었던 클라이언트/서버 이야기랑은 또 무슨 차이죠?
프론트엔드? 사용자 눈에 보이는 모든 것
웹사이트, 앱, 버튼, 화면 전환, 색상, 애니메이션…
우리가 클릭하고 스크롤하며 마주치는 화면의 모든 것이 프론트엔드입니다.
사용하는 기술: HTML, CSS, JavaScript 같은 언어를 사용하고, 이 언어들은 React, Vue 같은 프레임워크 위에서 작동합니다. (*프레임워크는 일정한 규칙과 구조를 제공해 주는 ‘개발용 조립 키트’ 같은 것으로, 개발 속도와 효율성을 높여줍니다.)
프론트는 “사용자와 가장 먼저 만나는 기술”입니다.
백엔드? 보이진 않지만 모든 걸 처리하는 뇌
로그인, 데이터 저장, 결제 처리, 서버 통신 등
사용자 눈에는 보이지 않지만, 실제 서비스가 작동하는 ‘속’을 맡는 부분이 백엔드입니다.
사용하는 기술: Java, Python, Node.js 같은 언어가 주로 쓰이며, 각 언어별로 Spring, Django, Express 같은 프레임워크가 활용됩니다.
백엔드는 데이터베이스(DB), 서버, API 등 서비스의 ‘기능과 논리’를 담당하는 영역입니다.
“기능이 작동하는 근육과 뇌”에 해당한다고 보면 됩니다.
그럼 클라이언트/서버랑 뭐가 달라요?
클라이언트/서버는 데이터가 ‘어디에서 처리되느냐’의 관점, 프론트/백엔드는 개발 역할의 관점입니다.
예를 들어, 클라이언트(사용자 디바이스)에서 실행되는 애니메이션은 프론트엔드 개발자가 담당하지만, 클라이언트 영역에서 실행되죠.
반대로 서버에서 로그인 정보를 검증하는 건 백엔드 개발자의 영역이며, 서버에서 처리됩니다.
비유로 이해해 보자
프론트는 카페 매장: 메뉴판, 주문 화면, 인테리어
백엔드는 주방: 커피를 만들고, 재료 관리하고, 정산도 처리
고객이 라떼를 주문하면,
프론트(UI)가 입력받고
백엔드가 처리하고
다시 결과가 프론트(UI)로 전달됩니다.
실무에서는 이렇게 쓰입니다
예: 빌링 시스템
웹 홈페이지: 고객이 본인 결제 내역을 조회 (프론트 1)
챗봇: 납부내역 확인 및 알림 안내 제공 (프론트 2)
내부 수납 화면: 직원이 조회/처리하는 내부용 시스템 (프론트 3)
세 가지는 모두 다른 프론트지만, 하나의 백엔드에 연결되어 있습니다.
즉, “여러 프론트 하나의 백엔드” 구조인 것이죠.
이 구조를 모르면
챗봇에서만 오류가 나는지
백엔드에서 오류가 난 건지
혹은 내부 화면에만 적용이 안 된 건지
문제 원인을 파악하기 어려워집니다.
기획자가 꼭 알아야 할 포인트
1. 프론트/백 구분 = 담당자 구분
프론트 개발자: UI/UX 구현
백엔드 개발자: 기능, DB 처리
누구에게 어떤 요청을 해야 하는지 이해하는 것이 중요
2. 같은 기능이라도 프론트-백 연결이 전제
예: “사용자 정보 보여주세요”
프론트가 화면을 만들고 > 백엔드가 데이터를 넘겨줘야
실제 화면에 정보가 뜹니다
이걸 연결해 주는 게 바로 API
3. 기획자는 전체 흐름을 알아야 한다
사용자가 클릭 > 어떤 요청 > 어떤 응답 > 어떤 화면
이 흐름을 그릴 수 있어야 제대로 된 기획서를 씁니다
기획자가 개발자에게 던지면 좋은 질문
“이건 프론트에서만 구현 가능한가요?”
“이 데이터는 백엔드에서 가져오는 거죠?”
“이 요청은 API 연결이 필요한가요?”
“이 기능은 비동기 처리인가요?” (비동기: 사용자 요청과 결과가 동시에 일어나지 않고 기다리는 방식)
마무리하며
프론트와 백엔드는 누가 더 중요하냐의 문제가 아닙니다.
둘 다 있어야 시스템이 움직이고,
기획자는 그 둘을 동시에 이해하고 연결하는 사람입니다.
기획서에 그림만 있으면 안 되고,
기능 구조만 있어도 안 됩니다.
둘 다 그릴 수 있어야 진짜 기획자입니다.
