웹과 앱은 무엇이 다를까: 프론트엔드와 백엔드까지 한 번에 이해하기

DevRel 준비 3회차 | 기초 기술 개념

---

지난 글에서는 프로그래밍 언어가 무엇인지, C언어와 Java, Python이 각각 어떤 개성을 가지고 있는지 통번역사의 관점에서 살펴봤습니다. 그 언어들로 실제로 무엇이 만들어지는지, 우리가 매일 사용하는 서비스들이 어떤 구조로 돌아가는지 궁금하셨을 텐데요.

오늘은 바로 그 이야기입니다. 웹과 앱의 차이, 그리고 그 안에 숨어 있는 프론트엔드와 백엔드라는 개념을 다뤄보겠습니다.

여러분은 오늘 스마트폰을 몇 번이나 열었나요? 배달 앱으로 점심을 주문하고, 은행 앱으로 이체를 하고, 쇼핑 앱에서 상품을 검색했을 수도 있습니다. 그 사이사이에 브라우저를 열어 뉴스를 읽거나 유튜브를 봤을 수도 있죠. 우리는 이 모든 것을 자연스럽게 사용하지만, "앱"과 "웹"은 사실 서로 다른 방식으로 만들어지고 작동합니다.

채용 공고를 보면 "프론트엔드 개발자", "백엔드 개발자"를 따로 채용하는 것을 알 수 있습니다. 처음에는 이런 구분이 막연했지만, 이제는 이 구조를 이해하는 것이 기술을 설명하는 데 얼마나 중요한지 알게 되었습니다.

---

웹과 앱, 무엇이 다른가: 매장과 출장 서비스의 차이

가장 기초적인 질문부터 시작해보겠습니다. 스마트폰으로 네이버에 접속할 때, 브라우저를 열어서 들어가는 것과 네이버 '앱’을 터치해서 들어가는 것은 어떤 차이가 있을까요?

저는 이 둘의 차이를 ‘매장 방문’과 ‘출장 서비스’로 이해했습니다.

웹(Web): 언제든 방문할 수 있는 열린 매장

웹은 인터넷 브라우저라는 길을 통해 찾아가는 매장과 같습니다. 크롬이나 사파리 같은 브라우저에서 주소를 입력하거나 검색해서 접근하는 모든 서비스가 웹입니다.

웹의 특징:

• 설치 불필요: 내 스마트폰에 무언가를 설치할 필요가 없습니다. 주소(URL)만 알면 언제든 방문해서 서비스를 이용할 수 있습니다
• 호환성: 윈도우 컴퓨터에서도, 맥북에서도, 안드로이드 스마트폰에서도 같은 주소로 접근하면 같은 서비스를 이용할 수 있습니다
• 즉시 업데이트: 매장 주인이 인테리어를 바꾸면, 다음 방문 때 우리는 바뀐 인테리어를 바로 볼 수 있습니다

앱(App): 내 폰에 설치된 전용 도구

앱은 내 스마트폰이라는 공간 안에 아예 전용 도구 상자를 설치해 두는 것과 같습니다. 앱스토어나 플레이스토어에서 다운로드하여 기기에 직접 설치하는 프로그램입니다.

앱의 특징:

• 설치 후 사용: 스마트폰 저장 공간의 일부를 차지하며, 아이콘을 터치해서 실행합니다
• 깊은 기능 활용: 스마트폰의 카메라, GPS, 지문 인식, 푸시 알림 같은 고유 기능을 매끄럽게 사용할 수 있습니다
• 플랫폼 의존성: 안드로이드용과 iOS용을 따로 개발해야 하는 경우가 많습니다

실제 예시로 비교해보면:

• 쿠팡 웹: 브라우저에서 coupang.com 접속
• 쿠팡 앱: 스마트폰에 설치된 쿠팡 아이콘 터치

같은 서비스라도 접근 방식과 사용 경험이 다른 것이죠.

---

서비스의 뼈대: 프론트엔드와 백엔드

웹과 앱의 차이를 이해했다면, 이제 한 걸음 더 들어가볼 차례입니다. 웹이든 앱이든, 하나의 온전한 서비스가 굴러가기 위해서는 크게 두 가지 역할이 필요합니다. 바로 프론트엔드(Frontend)와 백엔드(Backend)입니다.

가장 이해하기 쉬운 식당 비유를 들어보겠습니다.

프론트엔드: 손님을 맞이하는 홀(Hall)

식당에 들어가면 가장 먼저 무엇이 보이나요? 예쁜 조명, 편안한 테이블, 먹음직스러운 메뉴판, 그리고 친절한 직원이 있습니다. 손님의 눈에 직접 보이고, 손님이 직접 경험하는 모든 공간이 프론트엔드입니다.

프론트엔드의 역할:

• 사용자의 화면(UI)을 구성하고 디자인합니다
• 버튼을 눌렀을 때 화면이 넘어가거나 애니메이션이 나오는 등의 상호작용을 담당합니다
• 사용자가 “헷갈리지 않고 편안하게” 서비스를 이용할 수 있도록 만듭니다

사용되는 기술:

• 웹 프론트엔드: HTML(구조), CSS(디자인), JavaScript(동작)
• 앱 프론트엔드: Java, Kotlin(안드로이드), Swift(iOS)

백엔드: 요리가 만들어지는 주방(Kitchen)

손님이 메뉴판에서 '김치찌개’를 고르고 주문 버튼을 누르면, 주문서가 주방으로 넘어갑니다. 주방에는 거대한 냉장고(데이터베이스)가 있고, 요리사(서버)가 레시피에 맞춰 요리를 시작합니다. 손님은 주방 안에서 무슨 일이 일어나는지 볼 수 없지만, 이 과정이 없으면 식당은 돌아가지 않습니다.

백엔드의 역할:

• 눈에 보이지 않는 곳에서 데이터를 저장하고 계산합니다
• 프론트엔드가 요청한 정보를 안전하게 꺼내어 전달합니다
• 회원가입, 결제, 보안, 추천 알고리즘 등을 처리합니다

사용되는 기술:

• 언어: Java, Python, Node.js, Go, C# 등
• 데이터 저장: MySQL, PostgreSQL, MongoDB 등
• 인프라: AWS, GCP, Azure 등 클라우드 서비스

---

매일 쓰는 서비스 해부하기

이제 우리가 매일 사용하는 익숙한 서비스들을 프론트엔드와 백엔드로 나누어 분석해보겠습니다.

🛵 배달 앱: 치킨을 주문하는 그 순간

배달의민족에서 치킨을 주문하는 과정을 단계별로 따라가보겠습니다.

프론트엔드가 하는 일 (보이는 부분):

• 앱을 열면 화면에 나타나는 음식 카테고리와 주변 식당 목록
• 예쁘게 정렬된 메뉴 이미지와 가격 표시
• 스크롤할 때의 부드러운 움직임과 화면 전환
• “장바구니에 담기” 버튼을 눌렀을 때 색이 바뀌고 숫자가 늘어나는 효과
• 라이더의 위치가 지도 위에서 오토바이 아이콘으로 움직이는 모습

백엔드가 하는 일 (안 보이는 부분):

• 내 GPS 위치를 기반으로 “어떤 가게를 보여줄지” 계산
• 이 시간대에 주문 가능한 가게만 필터링
• 수많은 라이더 중 현재 위치에서 가장 빨리 배달할 수 있는 라이더 배차 계산
• 내가 주문한 내역을 해당 식당 사장님의 포스기로 정확하게 전송
• 과거 주문 내역을 저장해두었다가 “이런 메뉴 어때요?” 추천

🛒 쇼핑 앱: 상품을 검색하는 그 순간

쿠팡에서 "흰 운동화"를 검색하는 상황을 생각해보겠습니다.

프론트엔드가 하는 일 (보이는 부분):

• 검색창과 입력한 텍스트 표시
• 화면에 나타나는 상품 카드들의 레이아웃
• 상품 이미지와 가격의 깔끔한 배치
• 장바구니에 담을 때 나타나는 토스트 메시지

백엔드가 하는 일 (안 보이는 부분):

• 수백만 개의 상품 중 "흰 운동화"와 관련된 것을 찾아내기
• 내 구매 이력을 바탕으로 좋아할 만한 상품을 먼저 보여주기
• 현재 창고에 재고가 남아있는지 실시간으로 확인
• 내 신용카드사 서버와 통신해서 안전하게 결제 승인받기

🏦 은행 앱: 이체를 하는 그 순간

토스에서 친구에게 1만 원을 송금하는 과정을 살펴보겠습니다.

프론트엔드가 하는 일 (보이는 부분):

• 내 계좌 잔액을 한눈에 보기 좋게 큰 글씨로 표시
• 송금할 때 금액을 입력하는 깔끔한 숫자 키패드
• 송금 완료 후 나오는 성공 애니메이션

백엔드가 하는 일 (안 보이는 부분):

• 이 사람이 정말 본인이 맞는지 지문이나 비밀번호로 암호화하여 검증
• 내 계좌에서 1만 원을 빼고, 친구 계좌에 1만 원을 더하는 장부 기록을 오차 없이 처리
• 비정상적인 해킹 시도가 없는지 24시간 감시
• 거래 내역을 안전하게 저장하고 나중에 조회할 수 있게 관리

---

Technical Writer와 DevRel 관점에서 본 구조의 중요성

가전제품 매뉴얼을 작성하면서 배운 것 중 하나는, 사용자는 제품의 내부 구조를 몰라도 되지만, 그것을 설명하는 사람은 알아야 한다는 점입니다.

세탁기 사용 설명서를 쓸 때, 사용자에게 모터의 작동 원리를 설명할 필요는 없습니다. 하지만 저는 세탁기가 어떻게 작동하는지 알아야 "탈수 소리가 크게 날 수 있습니다"라는 문장을 올바른 맥락에 넣을 수 있었습니다.

프론트엔드와 백엔드의 관계도 비슷합니다. 일반 사용자는 이 구분을 몰라도 서비스를 잘 쓸 수 있습니다. 하지만 개발자와 함께 일하거나, 기술 문서를 작성하거나, 서비스 경험을 설계하는 역할을 하는 사람이라면 이 구조를 이해하는 것이 매우 중요합니다.

 

DevRel과 기술 문서 관점에서 이 구조가 중요한 이유:

대상 독자 구분이 가능합니다

• 프론트엔드 개발자를 위한 문서: “이 버튼 컴포넌트를 어떻게 배치하고 색상을 바꾸나요?” 같은 시각적이고 직관적인 가이드
• 백엔드 개발자를 위한 문서: “데이터를 요청할 때 어떤 형식으로 보내야 하나요?” 같은 데이터 명세와 성능에 대한 정확한 스펙

문제 해결의 방향성을 잡을 수 있습니다

• “로그인이 안 돼요” → 프론트엔드 UI 문제인지, 백엔드 인증 서버 문제인지 구분 가능
• “화면이 느려요” → 프론트엔드 렌더링 문제인지, 백엔드 데이터 처리 문제인지 판단 가능

비전공자에게 설명할 때 적절한 추상화가 가능합니다

• "이 기능은 프론트엔드에서 이렇게 보이고, 백엔드에서는 이런 데이터 흐름이 있어요"라고 나누어 설명하면 전체 그림을 훨씬 이해하기 쉬워집니다

---

실제 협업에서는 어떻게 소통할까

프론트엔드와 백엔드는 서로 다른 영역이지만, 하나의 서비스를 만들기 위해 끊임없이 대화해야 합니다. 이들 사이의 연결 통로가 바로 API(Application Programming Interface)입니다.

API는 프론트엔드와 백엔드 사이의 주문서 같은 것입니다. 프론트엔드가 "이 사용자의 잔액을 알려줘"라고 요청하면, 백엔드가 "잔액은 32만 원입니다"라고 응답하는 방식으로 소통합니다.

이 부분은 다음 주에 더 자세히 다룰 예정이지만, 오늘의 핵심은 이겁니다:

하나의 서비스는 여러 언어가 각자의 강점을 살려 협력해서 만들어집니다.

---

정리: 보이는 것과 보이지 않는 것의 협력

오늘 다룬 내용을 요약해보겠습니다.

웹과 앱의 차이:

• 웹: 브라우저를 통해 접근하는 매장 같은 서비스 (설치 불필요, 호환성 좋음)
• 앱: 기기에 설치해서 사용하는 전용 도구 (깊은 기능 활용 가능)

프론트엔드와 백엔드:

• 프론트엔드: 사용자에게 보이는 화면과 상호작용을 담당하는 홀
• 백엔드: 보이지 않는 곳에서 데이터와 로직을 처리하는 주방
• 협력: 둘이 끊임없이 대화하며 하나의 완성된 서비스 경험을 만들어냄

실제 서비스에서의 역할:

• 배달 앱: 프론트엔드가 예쁜 화면을 보여주고, 백엔드가 배차와 주문을 처리
• 쇼핑 앱: 프론트엔드가 상품을 표시하고, 백엔드가 검색과 결제를 담당
• 은행 앱: 프론트엔드가 직관적인 UI를 제공하고, 백엔드가 보안과 거래를 책임

이제 앱을 열 때마다 화면 뒤에서 일어나는 일들이 조금은 다르게 보이지 않으신가요? 다음에 배달 앱에서 치킨을 주문하실 때, “지금 내가 보고 있는 건 프론트엔드고, 이 뒤에서는 백엔드가 엄청 바쁘게 움직이고 있겠구나” 하고 떠올려보셔도 좋을 것 같습니다.

---

다음 글에서는 오늘 잠깐 언급한 API에 대해 본격적으로 다뤄보겠습니다. “프론트엔드와 백엔드가 대화하는 방법”, 그리고 "카카오 로그인 버튼 하나에도 숨어 있는 API의 세계"를 함께 탐험해보겠습니다.

읽어주셔서 감사합니다.

---