프로젝트에서 보기 →

프론트엔드와 백엔드의 차이, 이걸로 끝내자 | 웹개발 기초

태그
기타
시작일
종료일
수정일

https://www.youtube.com/watch?v=7q-Jehr4-f8

description: |-

1. 이건 꼭 알아야 한다[^1][^2]

이 콘텐츠는 “웹사이트가 어떻게 동작하는가”라는 가장 기초적인 구조를 서버-클라이언트 요청/응답 모델로 설명한 뒤, 사람들이 가장 많이 묻는 “프론트엔드 vs 백엔드”의 차이를 고급 레스토랑 비유로 직관적으로 정리합니다.[^3][^14][^24]

  • [? 질문] 웹사이트(인터넷)의 가장 기본적인 동작 방식은 무엇인가[^12][^13]
    [= 답] **클라이언트(사용자/브라우저)**가 **서버(원격 컴퓨터)**에 요청(Request)을 보내면, 서버가 그에 맞는 응답(Response)으로 파일/데이터를 보내고, 브라우저가 그것을 사람이 볼 수 있게 렌더링하면서 웹사이트가 보인다.[^6][^7][^8][^9][^10][^11]

  • [? 질문] 서버와 클라이언트는 각각 무엇을 의미하는가[^10][^11]
    [= 답] “판교에 있는 네이버 컴퓨터”처럼 파일을 보관하고 요청을 처리해 응답하는 쪽을 서버라 하고, “자취방에서 크롬으로 접속하는 나”처럼 요청을 보내고 응답을 받아 보는 쪽을 클라이언트라고 부른다.[^4][^5][^10]

  • [? 질문] 프론트엔드와 백엔드는 무엇이 다르고, 각각 무엇에 신경 쓰는가[^16][^24][^25]
    [= 답] 프론트엔드는 손님이 직접 보는 레스토랑 “앞쪽(홀)”처럼 **사용자가 마주하는 화면/경험(배치, 디자인, 흐름)**을 다루고, 백엔드는 “뒤쪽(주방)”처럼 **요청을 빠르고 안전하게 처리하고 데이터/비즈니스를 돌아가게 하는 엔진(데이터베이스, 보안, 성능)**을 다룬다.[^18][^19][^20][^21][^22][^23][^24][^25]

2. 큰 그림[^3][^14]

이 영상은 웹 개발을 시작하기 전에 반드시 알아야 할 최소한의 웹 기본 개념(서버/클라이언트, 요청/응답)을 먼저 잡아 준 다음, 초보자가 가장 헷갈려 하는 프론트엔드와 백엔드의 역할 차이를 비유로 풀어 설명합니다.[^3][^12][^16] 또한 DNS, IP 같은 추가 개념이 있음을 언급하지만, 처음에는 과도한 이론보다 “일단 이 정도만 알고 시작”하라고 안내합니다.[^15]

  • 웹사이트의 본질은 요청과 응답의 왕복이다: 클라이언트가 요청하고 서버가 응답하면, 브라우저가 파일을 받아 렌더링해 화면이 만들어진다.[^6][^8][^9][^12][^13]
  • **프론트엔드는 사용자가 보는 영역(홀)**에 집중한다: 인테리어·플레이팅처럼 화면 구성과 사용성이 핵심이며, 서버에서 받은 데이터를 “예쁘고 편하게” 보여주도록 설계한다.[^19][^20][^21][^22]
  • **백엔드는 보이지 않는 엔진(주방)**에 집중한다: 재료 수급·조리·레시피 보호처럼 데이터 처리, 성능, 보안 등 “서비스가 굴러가게 하는” 요소를 책임진다.[^21][^22][^23][^25]

3. 하나씩 살펴보기[^1][^14]

3.1 시작: 웹 개발 전에 알아야 할 “기본 지식”을 왜 먼저 말하는가[^3][^14]

📸 0:07

화자는 웹 개발을 시작하기 전에 “웹사이트가 정확히 무엇인지”에 대한 기본 지식이 필요하다고 말합니다.[^3] 특히 사람들이 많이 궁금해하는 주제인 “프론트엔드-백엔드 차이가 뭐지?”를 개발 시작 전에 짧게 짚고 넘어가겠다고 예고합니다.[^3][^14]

  • 웹 개발 초보가 막히는 지점이 단순히 코딩 문법이 아니라, “웹이 어떻게 동작하는지”의 큰 구조를 모르는 데서 오기 때문에, 최소한의 개념을 먼저 잡아 준다는 흐름입니다.[^3][^12]
  • 즉, 이 영상의 목적은 용어 정의를 외우게 하는 것이 아니라, 웹을 보는 “기본 프레임(서버-클라이언트)”을 머릿속에 만드는 것입니다.[^12][^13]

[!IMPORTANT] “시작 전에 딱 이만큼은” 화자는 처음부터 깊은 네트워크 이론(DNS, IP 등)까지 다 외우기보다, 일단 서버-클라이언트 요청/응답 구조를 먼저 이해하고 출발하라고 강조합니다.[^12][^15]

3.2 웹사이트 동작을 한 장면으로 만들기: “판교의 컴퓨터”와 “자취방의 나” 비유[^4][^5][^6][^7][^8][^9][^10][^11]

📸 0:17

화자는 웹사이트를 설명하기 위해 매우 구체적인 상황을 설정합니다.[^4]

  1. 판교에 컴퓨터 한 대가 있다고 가정합니다.[^4]
  2. 그 컴퓨터는 “네이버 거”라고 생각해 보자고 합니다.[^4]
  3. 그 컴퓨터 안에는 파일들이 저장되어 있다고 말합니다.[^5]

다음으로 사용자 측 상황을 둡니다.

  • 화자 자신은 자취방에 있고, **크롬(브라우저)**으로 컴퓨터를 하고 있다고 설정합니다.[^6]
  • 그러면 자취방에 있는 “나(사용자)”는 당연히 네이버에 들어가고 싶어질 것이라고 이어 갑니다.[^7]

여기서 웹의 핵심 동작이 등장합니다.

  • 자취방의 “나(클라이언트)”가 판교의 “네이버 컴퓨터(서버)”에게 요청을 보낸다고 말합니다.[^8]
  • “나 사이트(페이지) 줘”라는 식으로 요청을 보내면, 판교의 네이버 컴퓨터가 요청을 확인하고 “오케이” 하면서 **파일을 던져 준다(전송한다)**고 설명합니다.[^8][^9]
  • 그러면 크롬이 그 파일을 받아서 우리가 보기 편한 방식으로 렌더링(rendering) 해 준다고 말합니다.[^9]
  • 그 결과로 우리는 사이트를 “볼 수 있게 된다”고 결론 내립니다.[^10]

이어서 용어를 딱 붙입니다.

  • 판교에 있는 컴퓨터를 서버(server) 라고 하고, 자취방에 있는 나(브라우저/사용자)를 클라이언트(client) 라고 부른다고 정의합니다.[^10]
  • 서버와 클라이언트 사이에서 요청이 왔다 갔다 하는 것이 웹사이트/인터넷의 기본이라고 정리합니다.[^11][^13]

[!NOTE] 렌더링이 왜 여기서 중요하게 나오나 화자는 “서버가 파일을 보내준다”에서 끝내지 않고, 브라우저가 그 파일을 사람이 보게 렌더링한다는 단계까지 포함해 “우리가 화면을 보게 되는 전체 흐름”을 완성합니다.[^9][^10]

3.3 “생각보다 별거 없다”: 웹의 최소 공식(요청 → 응답)으로 정리[^12][^13][^14]

📸 1:12

화자는 방금 설명한 흐름을 “생각보다 별거 없죠”라고 표현하면서, 초보자가 겁먹지 않게 난이도를 낮춥니다.[^12]

그리고 웹의 최소 동작을 한 문장으로 다시 씁니다.

  • 클라이언트가 요청하면 서버가 그 요청에 맞는 리스폰스(response) 를 보내준다, “이게 끝”이라고 말합니다.[^12]

다만 학습 범위를 조절해 줍니다.

  • 처음 시작할 때는 이만큼 “아시면 된다”고 말하며, 서버-클라이언트의 요청/응답이 오가서 웹사이트를 볼 수 있다고만 생각해도 된다고 합니다.[^12][^14]
  • 하지만 더 쉽게/더 깊게 들어가려면 알아야 할 게 더 많다고도 덧붙입니다.[^14]

[!TIP] 초보자 학습 전략(영상의 권장 흐름)

  1. 일단 “클라이언트 요청 → 서버 응답 → 브라우저 렌더링”만 잡고 시작[^12][^13]
  2. 나중에 필요해질 때 DNS, IP 같은 디테일을 확장[^15]

3.4 “DNS, IP도 알아야 하나요?”에 대한 화자의 태도: 지금은 넘기고 나중에 깊게[^15]

📸 1:29

화자는 서버/클라이언트 모델보다 더 많은 네트워크 개념이 있다는 것을 구체적으로 언급합니다.[^15]

  • “DNS 서버는 뭐고 IP는 뭐고” 같은 것들을 사실 알 필요가 있다고 말합니다.[^15]
  • 하지만 “지금 당장은” 그 수준까지 안 하고 시작하라고 하며, 나중에 본인이 더 깊이 다루겠다고 예고합니다.[^15]

여기서 중요한 뉘앙스는:

  • 필요 없다는 말이 아니라, 학습 순서의 문제라는 점입니다.[^15]
  • 즉, 웹 개발 입문에서 당장 중요한 것은 “전체 동작의 큰 줄기”이고, DNS/IP는 그 다음 단계라는 안내입니다.[^15]

3.5 두 번째 큰 질문: “프론트엔드와 백엔드 차이”는 왜 체감이 먼저인가[^16][^17][^18]

📸 1:32

화자는 “두 번째”로 사람들이 굉장히 많이 하는 질문이 바로 프론트엔드와 백엔드의 차이라고 말합니다.[^16]

  • 자신도 처음에는 프론트/백이 뭔지 같은 질문을 많이 했다고 공감합니다.[^17]

그리고 흥미로운 방식으로 답변의 성격을 규정합니다.

  • 이 질문에 대한 “굉장히 간단한 답”은 ‘장 맛을 봐야 한다’ 라고 표현합니다.[^18]
  • 즉, 한 입 먹어 봐야 프론트가 뭐고 백이 뭐고, 정확히 어떻게 통신을 주고받고 요청을 보내고 응답을 받아오는지 알 수 있다고 말합니다.[^18]

여기에는 메시지가 두 겹으로 들어 있습니다.

  1. 개념 설명만으로는 한계가 있다: 실제로 요청/응답을 주고받는 코드를 만져 봐야 진짜 이해가 온다.[^18]
  2. 그럼에도 초보자가 “쉽게” 이해하도록, 지금은 직관적인 비유로 설명하겠다는 전환입니다.[^18][^19]

3.6 고급 레스토랑 비유로 역할 분리하기: 앞쪽(홀) vs 뒤쪽(주방)[^19][^20][^21][^22][^23]

📸 1:56

화자는 초보자 이해를 위해 “고급 레스토랑” 상황을 상정합니다.[^19]

  • 레스토랑에는 앞쪽이 있고, 그곳은 손님이 밥을 먹는 곳(홀)이라고 말합니다.[^19][^20]
  • 그리고 뒤쪽에는 요리하는 곳(주방)이 있다고 말합니다.[^20]
  • 이 두 공간만 떠올려도 “대충 무슨 말인지 아시겠죠”라고 하며 직관적 대비를 유도합니다.[^20]

이어서 “앞쪽(홀)”에서 신경 써야 하는 것들을 구체 항목으로 나열합니다.

  • 고객의 눈에 직접 보이는 것들:
    • 인테리어[^21]
    • 음식 플레이팅을 어떻게 할지[^21]
    • 음악은 무엇을 틀지[^21]
    • 조명을 어떻게 구성할지[^21]
  • 요지는 “손님이 직접 경험하는 품질”에 신경을 많이 써야 한다는 것입니다.[^21]

반면 “뒤쪽(주방)”은 성격이 다릅니다.[^22]

  • 재료를 어디서 어떻게 수급해 오는지[^22]
  • 요청에 맞는 요리를 최대한 빠른 속도로 만드는 것[^22]
  • “다른 업체(경쟁사)”가 레시피를 못 보게 비밀을 유지하는 것(보안/기밀)[^22]
  • 고객 눈에는 직접 보이지 않지만 비즈니스를 돌아가게 만드는 엔진이 있다고 표현합니다.[^22]

즉, 홀과 주방의 대비는 곧 “보이는 경험” vs “보이지 않는 처리/엔진”의 대비로 설계되어 있습니다.[^21][^22]

3.7 “웹사이트랑 별로 다를 바 없다”: 프론트엔드를 홀에 매핑하기[^23][^24]

📸 2:56

화자는 “이런 고급 레스토랑이랑 웹사이트랑 별로 다를 바 없다”고 선언하며 비유를 웹으로 연결합니다.[^23]

먼저 앞쪽(손님이 밥 먹는 곳)을 프론트엔드로 연결해 설명합니다.[^24]

  • 홀에서 플레이팅/조명 등을 신경 쓴다는 말은, 웹에서 말하면:
    • 서버에서 받아온 요청(정확히는 응답으로 받은 데이터/파일)을 토대로[^24]
    • 데이터를 어떻게 이쁘게 뽑아 만들어서 보여줄 것이냐에 해당한다고 설명합니다.[^24]

여기서 프론트엔드의 구체적인 고민 예시가 이어집니다.

  • 검색창을 어디에 배치할 것인가: 위쪽/왼쪽/가운데 등 위치 결정[^24]
  • 사용자가 회원가입을 최대한 편하게 진행하도록 만드는 것[^24]
  • 회원가입하다 중간에 “튕기는(끊기는)” 등 불편이 생기는 문제를 줄이는 맥락의 언급[^24]
  • “토스 같은 거 보면” 프론트엔드가 굉장히 깔끔하고 예쁘게 되어 있다는 예시를 듭니다.[^24]

이런 예시들을 통해 프론트엔드는 “사용자가 직접 맞닥뜨리는 영역”에서

  • 어떻게 가장 깔끔하고
  • 어떻게 가장 이쁘게
  • 어떤 형태로 서비스를 제공할 것인지
    를 다루는 역할이라고 정리합니다.[^24]

그리고 이를 한 문장으로 라벨링합니다.

  • “이런식으로 클라이언트에 대해서 신경을 쓰는 게 뭐다”라고 말한 뒤, 그것이 프론트엔드라고 결론 내립니다.[^24]

[!IMPORTANT] 프론트엔드의 초점(영상이 주는 정의) 프론트엔드는 “서버에서 받은 것을 기반으로” 사용자가 마주하는 화면/흐름을 보기 좋고 쓰기 좋게 구성하는 일로 설명됩니다.[^24]

3.8 백엔드를 주방에 매핑하기: 데이터베이스, 보안, 빠른 처리[^25]

📸 4:04

화자는 “반대로” 뒤쪽(서버, 판교의 컴퓨터)은 주방과 닮아 있다고 말합니다.[^25]

여기서 백엔드에서 다루는 성격의 일을 예시로 듭니다.

  • 데이터베이스에서 어떻게 쿼리(query)를 보낼 것인가 같은 문제[^25]
  • 경쟁사가 레시피를 못 보게 하는 것에 대응되는 안전(보안) 유지[^25]
  • “서버랑 직결되는 문제”라고 표현하며, 시스템의 근간에 해당하는 일로 위치시킵니다.[^25]
  • 그리고 “요청에 맞는 요리를 빠르게 전달”하는 것처럼, 사용자가 유튜브 같은 서비스에 영상 요청을 보내면 영상을 최대한 빠르게 전달하는 측면을 예로 듭니다.[^25]

결국 백엔드는:

  • 뒤쪽에서
  • 요청을
  • 최대한 빠르게
  • 최대한 안전하게 처리하는 이야기를 많이 하는 곳이라고 정리합니다.[^25]

[!TIP] 비유를 기술 용어로 바꿔 읽는 법

  • “재료 수급/조리/전달 속도” → 데이터 처리 파이프라인, 성능 최적화, 응답 시간[^22][^25]
  • “레시피 비밀 유지” → 인증/인가, 데이터 보호, 보안 설계[^22][^25]

3.9 정리와 권유: 결국은 “해보면 안다”, 코딩하면서 더 좋은 개발자가 된다[^18][^26]

📸 4:46

화자는 다시 “장 맛을 봐야 한다”는 표현으로 돌아와, 프론트엔드와 백엔드의 구성이 이렇게 나뉘지만 결국은 직접 해보면 바로 안다고 말합니다.[^26]

  • 지금 단계에서는 “아 프론트가 이거구나, 백이 이거구나” 정도로만 이해하라고 안내합니다.[^26]
  • 그리고 나중에 직접 코딩을 하면서:
    • 프론트엔드-백엔드 차이가 무엇인지 더 선명해지고[^26]
    • 프론트엔드를 잘 만들려면 어떻게 해야 하는지[^26]
    • 백엔드를 잘 만들려면 어떻게 해야 하는지[^26] 를 스스로 고민해 보게 될 것이며, 그 과정이 더 좋은 개발자가 되는 길이라고 말합니다.[^26]
  • 마지막에는 “직접 코딩을 한번 해보도록 하겠습니다”라는 다음 단계로 연결하며 마무리합니다.[^26]

4. 핵심 통찰[^12][^13][^24][^25]

  1. 웹의 출발점은 거대한 기술 스택이 아니라 요청(Request)과 응답(Response)의 왕복이라는 단순한 모델이다.[^12][^13]

    • 이 프레임을 잡으면 “브라우저가 왜 필요한지(렌더링)”와 “서버가 하는 일(요청 처리)”이 한 장면으로 연결된다.[^9][^10]

  2. 프론트엔드/백엔드 구분은 기술 이름 목록이 아니라 사용자에게 보이는가 vs 보이지 않는가, 경험 설계 vs 엔진/처리의 관점으로 이해하면 빠르다.[^21][^22][^24][^25]

  3. 프론트엔드는 “예쁘게”라는 표현으로 대표되지만, 실제로는 배치·흐름·사용 편의성 같은 구체적 결정의 집합으로 설명된다(검색창 위치, 회원가입 진행 경험 등).[^24]

  4. 백엔드는 “주방”처럼 사용자 눈에는 잘 안 보이지만, 속도(성능) 와 안전(보안) 이 서비스 품질을 좌우하는 핵심 축으로 제시된다.[^22][^25]

  5. 완전한 이해는 설명이 아니라 체험(직접 코딩) 에서 온다는 학습관이 깔려 있다.[^18][^26]

    • 실행 가능한 시사점:
      • 프론트/백을 공부할 때 “정의 암기”보다, 간단한 프로젝트로 요청 보내고 응답 받아 화면에 그려보는 경험을 먼저 만든다.[^18][^26]
      • 이후 DNS/IP 같은 네트워크 디테일을 확장 학습한다.[^15]

5. 헷갈리는 용어 정리 (해당 시에만)[^9][^12][^15]

  • 서버(Server): 원격에 있는 컴퓨터(예: 판교의 네이버 컴퓨터)로, 파일/데이터를 가지고 있다가 클라이언트의 요청을 받고 응답을 보내는 주체.[^4][^5][^10][^12]
  • 클라이언트(Client): 사용자가 있는 쪽(예: 자취방에서 크롬으로 접속하는 사용자)으로, 서버에 요청을 보내고 응답을 받아 웹사이트를 본다.[^6][^7][^10][^12]
  • 요청(Request): 클라이언트가 서버에 “사이트/데이터를 달라”고 보내는 메시지.[^8][^12]
  • 응답(Response / 리스폰스): 서버가 요청을 확인하고 그에 맞게 파일/데이터를 보내주는 것.[^8][^9][^12]
  • 렌더링(Rendering): 크롬 같은 브라우저가 서버에서 받은 파일을 사람이 보기 편한 형태로 화면에 그려 주는 과정.[^9]
  • DNS: 화자가 “나중에 더 깊게 다룰 것”이라며 언급한 개념(초기에는 필수로 파고들지 않아도 된다고 안내).[^^15]
  • IP: DNS와 함께 언급된 네트워크 기본 개념으로, 지금은 넘어가고 추후 학습 대상으로 제시됨.[^15]

참고(콘텐츠 정보)[^1][^2]

  • 제목: 프론트엔드와 백엔드의 차이, 이걸로 끝내자 | 웹개발 기초[^1]
  • 채널: 마크 젠 | marc zen[^1]
  • 길이: 5분 18초[^1]
  • 링크: https://www.youtube.com/watch?v=7q-Jehr4-f8[^1]

[^1]: 제공된 콘텐츠 메타데이터(제목/채널/길이/링크). [^2]: @[00:00] "안녕하세요" [^3]: @[00:07] "웹 개발을 시작하기 앞서서... 기본 적인 지식들이 있습니다" [^4]: @[00:17] "일단 판교에 어느 컴퓨터가 있습니다" [^5]: @[00:22] "컴퓨터에 파일들이 저장되어 있습니다" [^6]: @[00:27] "자취방에서 제가 크롬으로..." [^7]: @[00:31] "자 그럼... 네이버에 들어가고 싶겠죠" [^8]: @[00:36] "그런 판교에 있는 컴퓨터 한테 요청을 보냅니다" [^9]: @[00:45] "크롬이 파일을 받아서... 렌더링 해 줍니다" [^10]: @[00:51] "그렇게 우리는 사이트를 볼 수가 있습니다" / @[00:53] "서버... 클라이언트..." [^11]: @[00:57] "서버 와 클라이언트 의 요청이 왔다갔다" [^12]: @[01:12] "클라이언트가 요청 하면 서버가... 리스폰스를 보내준다" [^13]: @[01:03] "이게 웹사이트 그리고 인터넷에 기본" [^14]: @[00:14] "짧게 짚고 개발을 시작" [^15]: @[01:29] "dns 서버는 뭐고 ip는 뭐고... 나중에... 깊이 있게 다룰 테니까" [^16]: @[01:32] "프런트 엔드 와 백엔드 의 차이" [^17]: @[01:43] "저도 처음 했을 텐데... 이런 질문" [^18]: @[01:47] "굉장히 간단한 답은... 장 맛을 봐야" [^19]: @[01:56] "고급 레스토랑 한번 같다고 생각해 봅시다" [^20]: @[02:14] "앞쪽... 손님이 밥을 먹는 곳" / @[02:16] "뒷쪽에 요리 하는 곳" [^21]: @[02:21] "인테리어... 플레이팅... 음악... 조명..." [^22]: @[02:41] "재료를... 수급... 빠른 속도로... 비밀을 유지... 엔진" [^23]: @[02:56] "고급 레스토랑 이랑 웹사이트 랑 별로 다를 바 없습니다" [^24]: @[03:12] "서버에서 받아온 요청을 토대로... 어떻게 이쁘게..." / @[03:22] "검색... 회원가입..." / @[03:35] "토스..." [^25]: @[04:04] "데이터베이스... 쿼링... 안전... 빠르게 전달" [^26]: @[04:46] "장맛... 해보면... 직접 코딩..."

← 프로젝트에서 보기