https://www.youtube.com/watch?v=Iflbyx3bH5s

description: |-

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

[? 질문] 웹개발자는 정확히 무엇을 개발하는 사람인가(“홈페이지 만드는 사람”과 무엇이 다른가)[^2]
[= 답] 웹개발자는 월드 와이드 웹(WWW) 환경에서, 브라우저가 요청(Request) 하고 서버가 응답(Response) 하는 구조 위에서 동작하는 “페이지/프로그램”을 만든다.[^6]

[? 질문] 인터넷과 웹(WWW) 은 같은 말인가[^3]
[= 답] 인터넷은 네트워크 통신이 가능한 환경 자체이고, 우리가 흔히 “인터넷에서 찾아봐”라고 말할 때 실제로 사용하는 것은 대개 웹브라우저로 접근하는 월드 와이드 웹(WWW) 이다.[^4]

[? 질문] 왜 웹은 프론트엔드/백엔드로 나뉘어 발전했는가[^18]
[= 답] 웹브라우저에서 동작하는 코드는 페이지 소스 보기로 누구나 볼 수 있어(노출됨), DB 접속 정보 같은 민감한 로직을 브라우저에 두면 보안상 위험하다.[^20] 그래서 사용자에게 보이는 영역(프론트) 과 서버에서 처리해야 하는 영역(백) 이 분리되어야 한다.[^21]

2. 큰 그림[^7]

이 콘텐츠는 “웹개발자”라는 직무를 이해하기 위해, 인터넷 vs 웹(WWW) 의 차이부터 시작해, 웹이 동작하는 전체 구조(사용자 PC–서버 PC–DB–웹서버–브라우저 엔진)를 따라가며 프론트엔드/백엔드가 맡는 역할을 단계적으로 설명한다.[^8] 또한 프론트엔드의 핵심 기술(HTML, JavaScript, CSS)과 서버 측 구성요소(웹서버, 데이터베이스, HTTP, DNS)가 실제로 어떻게 맞물려 작동하는지를 예시(회원가입/로그인)로 풀어낸다.[^34]

• 인터넷 ≠ 웹(WWW): 인터넷은 통신 인프라이고, 웹은 그 위에서 브라우저로 문서를 주고받는 서비스/환경이다.[^4]
• 프론트엔드 vs 백엔드 분리의 이유: 브라우저 코드는 노출되므로 민감 로직/DB 처리 등은 서버에 두어야 한다.[^20]
• 웹 페이지 로딩의 내부 과정: 브라우저는 요청한 “한 페이지”만 받는 듯 보이지만 실제로는 다수의 파일을 받고, 브라우저 엔진이 파싱/렌더링을 수행하며, 자바스크립트 엔진이 동작을 준비한다.[^63]

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

3.1 영상의 출발점: “웹개발”을 이해하려면 먼저 개념부터[^2]

발표자는 이번 영상의 주제를 “웹개발자란 무엇인가”, 그리고 “웹개발을 독학하기 전에 2가지(또는 2일부터) 해보자”라는 취지로 제시한다.[^2] 다만 곧바로 코딩이나 기술 스택을 나열하기보다, “일단 개념부터” 잡고 가야 한다고 말하며 인터넷과 웹을 구분하는 것을 첫 단추로 둔다.[^3]

• 발표자가 강조하는 접근 방식은 다음과 같다.[^3]
  • 많은 초보/일반인은 ‘인터넷’이라는 말을 “웹에서 검색하기/웹페이지 열기”와 같은 의미로 섞어 쓴다.[^3]
  • 하지만 웹개발자는 이 차이를 알고 있어야 이후 프론트/백, 서버, 브라우저 동작 같은 설명이 자연스럽게 연결된다.[^6]

3.2 인터넷 vs 웹(WWW): 사람들이 “인터넷”이라 부르는 것의 정체[^3]

발표자는 “인터넷과 웹은 동일하지 않다”고 선명하게 말한다.[^3] 어린 시절이나 일반인 대화에서도 “인터넷에 어디 쳐봐”, “인터넷에 찾아봐” 같은 표현을 흔히 쓰지만, 그 행위는 엄밀히 말해 월드 와이드 웹(WWW) 을 이용하는 것이라고 설명한다.[^3]

• 월드 와이드 웹(WWW)
  우리가 흔히 말하는 “www”는 “월드 와이드 웹”을 뜻하며, 이것이 “웹”이다.[^3]
• 인터넷(Internet)
  인터넷은 “네트워크 통신이 되는 환경 자체”라고 정의한다.[^4] 즉, 통신 인프라/연결망에 가깝다.[^4]
• 그러나 우리가 일상에서 “인터넷 한다”라고 말할 때는 대개 다음을 의미한다.[^5]
  • 웹브라우저를 통해 요청하고 응답받는 행위[^5]
  • 홈페이지를 여는 행위(브라우저로 페이지를 여는 것)[^5]

[!IMPORTANT] 용어 혼용이 왜 문제인가[^6] 웹개발을 배우는 사람에게 “인터넷=웹”으로 뭉뚱그린 이해는 이후 HTTP, 웹서버, DNS, 프론트/백을 배울 때 계속 혼란을 만든다.[^6]

3.3 “웹개발자”의 범위와 시장 전망에 대한 언급[^11]

발표자는 초보가 웹개발자를 떠올릴 때 “그냥 홈페이지나 만들지” 정도로 생각할 수 있지만, 실제로는 “어떤 느낌인지, 어떻게 먹고 사는지, 전망은 어떤지”를 궁금해한다고 짚는다.[^10]

이어서 본인이 아는 선에서 웹개발 시장을 다음처럼 설명한다.

• 전 세계 개발자 중 70%가 웹개발자라는 언급을 한다.[^11]
• 웹브라우저의 발전과 함께 웹개발자의 향후 전망은 “여전히 괜찮을 것”이라고 본다.[^11]
• 국내에서도 “가장 많은 개발자를 보유하고, 가장 큰 플랫폼”이라는 맥락으로 웹의 규모를 말한다.[^12]
• 전망은 “무난”하다고 정리하지만, 동시에 수요도 많고 공급도 많은 분야이기 때문에 “내가 잘한다”를 증명/차별화하기가 애매할 수 있다는 뉘앙스를 덧붙인다.[^13]
• 결론적으로 “나쁘지 않다”, “무난하다”라고 톤을 잡는다.[^14]

+++ 상세 맥락: “무난”의 의미 발표자의 표현에서 “무난”은 “비관적이지 않다”에 가깝다.[^14] 다만 경쟁이 큰 시장(공급/수요 모두 큼)이라 실력 차별화가 중요해진다는 현실을 함께 말한다.[^13] +++

3.4 웹이란 무엇인가: “문서를 주고받는” WWW 환경과 ‘페이지’ 개념[^15]

발표자는 웹개발자를 정의하기 위해 웹 자체를 다시 풀어 설명한다.[^15] 웹은 “월드 와이드 웹 환경에서 문서를 주고받는 네트워크 통신 환경”이며, 그 문서의 대표가 HTML 등 여러 문서라고 말한다.[^15]

• 웹은 보통 “페이지”라는 단위로 표현된다.[^16]
• 페이지는 “주소(URL)가 있고”, 그 주소로 문서를 주고받는 구조 위에서 동작한다.[^16]
• 이 환경에서 동작하는 “프로그램을 짠다”가 웹개발이라는 설명이다.[^17]

3.5 프론트엔드 vs 백엔드: 어디에서 실행되는가(브라우저 vs 서버)[^18]

발표자는 프론트엔드/백엔드를 “실행 위치” 기준으로 정리한다.[^22]

• 프론트엔드(Frontend): 웹브라우저(예: 크롬)에서 사용자에게 보여지는 페이지 영역을 담당한다.[^19]
• 백엔드(Backend): 사용자에게 직접 보이지 않지만 서버에서 로그인 처리, 회원가입 데이터 저장/검증 같은 로직을 수행한다.[^19]

발표자는 회원가입/로그인 예시로 “서버가 존재한다”는 점을 직관적으로 상기시킨다.[^19] 사용자가 회원가입 정보를 입력하면 서버에 저장되고, 나중에 로그인할 때 서버가 그 내역을 확인해 로그인 처리가 된다고 설명한다.[^19]

3.6 왜 굳이 나누는가: “페이지 소스 보기”로 프론트 코드는 노출된다[^20]

발표자는 초보가 가질 수 있는 반응을 대신 말한다:
“[? 왜 굳이 이렇게 피곤하게 프론트/백으로 나누냐]”[^18]

그리고 크롬 개발자 도구를 열어 “페이지 소스 보기”를 하면 HTML 소스 등이 그대로 보인다는 것을 보여준다.[^20] 여기서 핵심 논리를 전개한다.

• 웹브라우저에서 동작하는 환경(프론트)은 소스가 도출(노출) 된다.[^20]
• 만약 그 소스 안에 “데이터베이스 접속”이나 “아이디/비밀번호 회수(?)” 등 민감한 정보/로직이 들어가 있으면 큰 문제가 된다.[^20]
• 누구나 볼 수 있기 때문이다.[^20]
• 그래서 웹은 다른 플랫폼과 비교해 프론트엔드/백엔드 개념이 더 많이 발전한 것 같다고 말한다.[^21]

또한 게임 등 다른 네트워크 기반 시스템도 프론트/백 개념이 있지만, “네트워크 관련 프로그래밍을 한다면 반드시 이해해야 한다”고 덧붙인다.[^22] 이 개념이 없으면 “왜 나눴지?”가 계속 모호해져서 스스로 위축될 수 있다고 경고한다.[^23]

[!WARNING] 개념 없이 코딩하면 생기는 문제(발표자의 경고)[^23] 프론트/백 분리를 이해하지 못한 채 개발을 시작하면, 구조가 모호한 상태에서 “내가 혹시 실수하지 않을까” 불안해지고 위축되기 쉽다고 말한다.[^23]

3.7 프론트엔드 3요소: HTML(구조) / JavaScript(동적) / CSS(디자인)[^24]

발표자는 프론트엔드를 구성하는 핵심 기술을 “총 3가지”로 잡는다.[^33]

3.7.1 HTML: 하이퍼텍스트 마크업 언어, ‘구조’를 잡는다[^24]

HTML을 “HyperText Markup Language”라고 풀고, 역할을 “구조를 잡아준다”고 설명한다.[^24]
개발자 도구로 보이는 소스(꺾쇠 태그, 열고 닫는 구조)를 예로 들며, head, title 등으로 구성되는 문서 구조를 보여준다.[^25]

• 태그 기반(열고 닫는 형태)의 마크업으로 문서의 뼈대를 만든다.[^25]

3.7.2 JavaScript: ‘동적인’ 상호작용을 담당한다[^26]

자바스크립트는 “동적인 부분”을 관장한다고 말하며, 먼저 “동적 vs 정적” 대비로 이해를 돕는다.[^26]

• 정적(Static): 멈춰 있는 상태. 페이지를 요청했을 때 문서처럼 고정되어 보이는 상태를 떠올리게 한다.[^27]
• 초기 HTML 시대에는 텍스트/이미지 전송처럼 단순했다.[^28]
• 하지만 사용자가 많아지고 요구사항이 늘면서 “더 예쁘고, 더 동작하는” 웹페이지가 필요해졌고, 그 과정에서 자바스크립트와 스타일시트가 맞물려 사용되기 시작했다고 설명한다.[^29]

발표자는 실제 화면 예시를 든다.

• 새로고침 시 “조명이 켜지듯” 보이는 효과 같은 것[^29]
• 마우스를 올리면 색이 바뀌는 hover 계열 변화[^30]
• 알림/경고창을 띄우는 동작[^31]
• 쇼핑몰에서 장바구니에 담을 때 페이지 새로고침 없이 “장바구니에 담겼습니다”가 뜨는 것[^32]

이 모든 것이 자바스크립트(및 CSS와의 협업)로 구현되는 동적 기능이라고 정리한다.[^30]

3.7.3 CSS(스타일시트): ‘어떻게 예쁘게 그릴지’를 정의한다[^33]

스타일시트 파일(css)을 불러오는 구조를 보여주며, 그 파일 안에 “웹페이지를 어떻게 그릴지”, “예쁘게 하기 위한 속성”들이 들어 있다고 설명한다.[^33]

• 프론트엔드는 결국 HTML + JavaScript + CSS 3요소가 필수라고 결론낸다.[^34]

[!TIP] 프론트엔드 입문 난이도에 대한 조언[^36] 겉보기엔 쉬워 보일 수 있지만 “깊게 들어가서 정말 잘하려면” 어렵다고 말한다.[^35] 입문은 재미있게 할 수 있으나, 고급 레벨은 어렵다는 식으로 난이도 곡선을 설명한다.[^36]

3.8 프론트엔드가 어려워지는 지점: 브라우저 종류/규격/속도 최적화[^37]

발표자는 프론트엔드 개발자의 어려움을 다음처럼 구체화한다.[^37]

• 웹브라우저와의 “시너지”를 매우 잘 알아야 한다.[^37]
• 웹브라우저 종류가 많고, 그중 필수 지원해야 하는 것들이 있어 규격에 맞춰 동작하게 해야 한다.[^37]
• 동시에 속도를 더 빠르게 하는 최적화까지 고려해야 하므로 난이도가 생긴다.[^37]

이는 “세 가지(HTML/JS/CSS)만 하면 끝”처럼 보이지만 실제로는 브라우저 생태계와 성능 요구 때문에 깊이가 커진다는 메시지다.[^37]

3.9 데이터베이스(DB): 단순 저장소를 넘어 성능/보안/서버 역할까지[^38]

발표자는 백엔드 이해를 위해 데이터베이스 개념을 소개한다.[^38]

• 데이터베이스는 기본적으로 “데이터를 저장하는 공간”이라고 간단히 정의한다.[^38]
• 그러나 단순 저장소만이 아니라:
  • 서버 역할도 하고[^39]
  • 성능 최적화가 잘 되어 있으며[^39]
  • 보안적인 것도 포함되어 있다고 말한다.[^39]

또한 “파일로 저장하면 되지 않냐”는 자연스러운 의문을 전제하고, 텍스트 파일 등으로 저장하는 방식보다 DB가 훨씬 효율적이어서 오래 쓰였다고 말한다.[^40]

대표 DB 예시로는 다음을 언급한다.

• RDBMS 계열: 오라클, MySQL[^41]
• 최근: MongoDB, Redis 등[^41]
• “NoSQL”이라는 새로운 패러다임이 도입되는 추세[^42]

따라서 “데이터베이스는 하나”라고 외우면 안 되고 여러 종류가 될 수 있다고 강조한다.[^42]

회원가입 예시로 다시 연결한다.

• 회원가입 데이터를 “어딘가 저장”해야 하며[^43]
• 파일로 붙이는 것보다 DB가 효율적이라 DB를 쓴다.[^43]

3.10 웹서버(Web Server): HTTP 통신을 지원하고 페이지를 전송하는 존재[^44]

발표자는 “웹서버”를 WWW 페이지 전송을 담당하는 프로그램으로 소개한다.[^44] 더 정확히는 HTTP 통신을 지원하는 서버라고 정리한다.[^44]

• 웹서버 종류가 매우 많아 “수백 개가 넘는다”, “500개 가까이”일 수 있다고 말하며 폭이 넓음을 강조한다.[^45]
• 그렇더라도 대표적으로 많이 쓰는 것들이 있다고 예를 든다.[^46]
  • PHP 쪽에서: 아파치(Apache), 엔진엑스(Nginx) 등[^46]
  • 자바 쪽에서도 아파치 등을 보편적으로 쓴다는 뉘앙스를 준다.[^46]
• 결론: 개념을 알고 대표적인 것부터 잡는 것이 무난하다고 말한다.[^46]

3.11 웹개발의 전체 구조: 사용자 PC ↔ 서버 PC, 그리고 DNS의 역할[^47]

발표자는 “웹개발은 상호 연결성을 가진다”고 말하며 전체 구조도를 설명한다.[^47] 기본 전제는 다음과 같다.

• 한쪽은 사용자 PC[^47]
• 다른 한쪽은 서버 PC[^47]

사용자가 웹서핑을 하려면 사용자 PC에서 웹브라우저를 실행한다.[^48] 브라우저 측은 앞서 말한 것처럼 HTML/JS/CSS로 구성되는 프론트 영역을 수행한다.[^48]

사용자가 예를 들어 “youtube.com” 같은 주소로 페이지 요청을 하면, DNS(Domain Naming Service) 가 도메인 이름에 해당하는 서버를 찾아주는 역할을 한다.[^49] DNS를 통해 서버 PC로 요청이 들어온다고 설명한다.[^49]

• 서버 PC 안에는(설명 단순화를 위해 같은 곳에 있다고 가정):
  • 웹서버[^50]
  • 데이터베이스[^50]
• 다만 발표자는 DB가 “다른 서버에 있을 수도 있다”는 전제를 언급하며, 여기서는 설명을 위해 같이 있다고 놓고 설명하겠다고 말한다.[^50]

3.12 HTTP 통신을 ‘언어’ 비유로 설명: 약속된 규격이 있어야 소통된다[^52]

웹브라우저가 서버에 요청하면, 서버의 웹서버 프로그램이 그 요청을 “중재/해석”한다고 말한다.[^51] 이때 브라우저와 서버는 HTTP 통신 규격에 맞춰 통신해야 한다.[^52]

발표자는 이를 “언어”에 비유한다.[^52]

• 내가 한국어로 말했는데 상대가 영어로 답하면 소통이 막힌다.[^52]
• HTTP도 그와 같은 “약속된 통신 규격”으로 이해하면 된다고 설명한다.[^52]

즉 브라우저는 “나는 HTTP로, 이런 버전으로, 요구사항은 이렇다”라는 방식으로 페이지 요청을 보내고, 웹서버는 이를 해석해서 처리한다.[^53]

3.13 회원가입 예시로 보는 백엔드 처리 흐름: 웹서버 ↔ DB ↔ 응답 페이지 생성[^54]

발표자는 회원가입을 예로 들어 “서버 쪽에서 실제로 무슨 일이 일어나는지”를 순서로 설명한다.[^54]

1. 사용자가 회원가입 정보를 서버로 전송한다.[^54]
2. 웹서버는 요청된 페이지/기능을 처리한다.[^55]
3. 처리 과정에 “사용자 정보를 DB에 넣어라”는 구문/로직이 포함되어 있으면, 웹서버가 DB에 저장 요청을 한다.[^55]
4. DB가 “잘 들어갔다”는 신호를 준다.[^56]
5. 웹서버는 “회원가입이 완료되었습니다” 같은 응답 페이지를 만들어 사용자에게 돌려준다.[^56]

이 과정에서 사용되는 언어를 다음처럼 언급한다.[^57]

• 예시: PHP, SQL[^57]
• SQL은 주로 RDBMS에서 쓰이며[^58]
• NoSQL(예: Cassandra) 계열은 “CQL” 같은 자체 쿼리 언어가 있을 수 있다고 말한다.[^58]
• 백엔드 언어는 PHP 외에도 Java, .NET, Ruby, Python 등 다양하다고 나열한다.[^59]

결론적으로:

• 서버 측(웹서버/DB 연동/회원가입 처리 등)을 담당하는 사람이 백엔드 개발자[^60]
• 사용자에게 보이는 브라우저 측을 담당하는 사람이 프론트엔드 개발자[^60] 라는 구도를 다시 확인한다.

3.14 서버가 보내는 것은 “한 파일”이 아니라 다수의 리소스 묶음: 네트워크 탭 관찰[^61]

발표자는 웹서버가 페이지를 만들고 나면, 웹브라우저에서 동작할 소스/파일을 전송한다고 말한다.[^61] 그리고 크롬 개발자 도구의 Network(네트워크) 탭을 보여주며 새로고침 시 “여러 가지 파일을 받아오는” 장면을 보여준다.[^62]

네트워크 탭에서 확인 가능한 정보로 다음을 언급한다.

• 각각의 파일을 받을 때 “얼마나 걸렸는지” 시간[^62]
• “어느 정도 크기”를 받아왔는지[^62]
• 요청/응답으로 다양한 파일들이 순서대로 로드되는 모습[^62]

발표자는 “홈페이지 한 페이지만 요청한 것 같은데 사실은 이만큼 많은 동작”이 일어난다고 강조한다.[^68]

3.15 웹브라우저 엔진: 받은 파일을 파싱하고 DOM을 만들며 렌더링한다[^64]

발표자는 브라우저가 단순한 프로그램이 아니라 내부 구조가 복잡하며, 핵심 요소 중 하나가 웹브라우저 엔진이라고 설명한다.[^64]

• 크롬, 파이어폭스 등 브라우저마다 엔진이 조금 다르지만 “핵심은 비슷”하다고 말한다.[^64]
• 서버에서 전송된 소스 파일(HTML/JS/CSS 등)을 브라우저가 사용하려면 해석해야 한다.[^65]
• 이 해석 결과로 DOM 같은 “객체 지향적인/구조적인” 형태를 만든다고 말한다.[^65]
• 여기서 “파싱(Parsing)”이라는 개념을 소개한다.[^66]

3.15.1 파싱(Parsing)을 ‘번역’ 비유로 설명[^66]

파싱이란 “사용하기 위해 의미를 가져와서 사용할 수 있는 형태로 바꿔주는 것”이라고 풀어 말한다.[^66]
영어로 온 파일을 기계가 알아듣게 한 번 더 해석해 “한글화”하는 것과 비슷하다고 비유한다.[^66]
즉 브라우저가 실행 가능한 형태로 의미 분석을 수행한다.[^67]

3.15.2 렌더링(Rendering): 분석한 의미를 화면에 ‘그려서 보여주는’ 단계[^67]

발표자는 “렌더 파싱(렌더링 과정)”을 “화면에 보여주는 것”으로 쉽게 설명한다.[^67]
의미를 분석한 다음 화면을 보여주기 시작하는 과정을 렌더링으로 이해하라고 안내한다.[^67]

3.16 추가 리소스 요청 → 렌더링 완료: 캐시를 지우면 더 잘 보인다[^69]

발표자는 “관련 파일을 요청”하는 과정을 다시 네트워크 탭으로 확인시킨다.[^69] 정확한 사이즈와 시간을 보려면 캐시를 지우고 새로고침해야 한다고 말한다.[^69]

흐름은 다음처럼 설명된다.

• 초기 요청 후 여러 파일이 빠르게 로드된다.[^70]
• DOM 파싱을 하면서, 의미 분석 결과 “추가로 필요한 파일(CSS/이미지/JS 등)”을 서버에 다시 요청한다.[^71]
• 이렇게 가져온 데이터를 기반으로 최종 렌더링을 수행해 화면이 출력된다.[^72]

즉 “한 번 요청 → 한 번 받음”이 아니라 “요청 → 일부 수신 → 파싱 → 추가 요청 → 수신 → 렌더링” 같은 다단계 동작이 브라우저에서 매우 빠르게 진행된다는 메시지다.[^71]

3.17 마지막 단계: 화면이 떠도 끝이 아니다 — 자바스크립트 엔진의 ‘대기’[^73]

발표자는 화면에 출력되면 끝이냐고 묻고(암묵적으로) “아직 한 과정이 남았다”고 말한다.[^73] 그 과정이 바로 “자바스크립트를 동작하게 만들기”다.[^73]

• 화면만 보여주고 끝나면 정적인 상태라서[^74]
  • 클릭해도 색이 바뀌지 않는다든지
  • 버튼을 눌러도 동작이 없다든지
  • 경고창 같은 상호작용이 없다든지
    이런 문제가 생긴다고 말한다.[^74]
• 따라서 자바스크립트 엔진은 화면이 출력된 뒤에도, 실행될 부분이 있다면 계속 “기다리고” 있다고 설명한다.[^75]
• 자바스크립트 엔진의 예로 “V8 엔진” 등 여러 엔진이 있다고 언급한다.[^76]

발표자는 해당 페이지(팀노바 홈페이지 예시)에서는 자바스크립트가 아주 복잡한 일을 하는 것 같지는 않지만, 이미지 변경/효과/창 크기 변화(반응형처럼 보이는 변화) 등에 일부 연결되어 있다고 관찰한다.[^77] 이런 “실시간 변화”를 위해 자바스크립트 엔진이 대기하며 이벤트에 반응한다고 정리한다.[^78]

또한 모든 버튼 동작이 자바스크립트로만 처리되는 것은 아니고, HTML 자체 동작도 있지만, 마우스 오버 시 변화, 애니메이션 실행 등 “더 예쁘게” 만드는 많은 부분이 자바스크립트와 CSS로 제어된다고 마무리한다.[^79]

3.18 마무리: 온라인 영상의 한계와 댓글 소통 요청[^80]

발표자는 짧은 시간에 이해를 돕기 위해 설명했지만 부족한 부분이 있을 수 있다고 말한다.[^80] 오프라인 수업이라면 학생 반응을 보며 즉석에서 쉽게 풀어줄 수 있는데, 온라인이라 그 점이 답답하다고 한다.[^81] 그래서 온라인 강의에 아주 긍정적이지 않았다는 개인적 소회도 덧붙인다.[^81]

끝으로 이 영상은 “수업”이라기보다 “이해를 돕는” 목적이며, 잘 모르면 댓글을 달면 아는 선에서 답변하겠다고 안내하고 영상을 마친다.[^82]

4. 핵심 통찰[^83]

1. 웹개발 이해의 시작은 “인터넷=웹”이라는 일상적 혼용을 끊고, 인터넷(인프라) 과 웹(WWW 서비스) 을 분리해 개념화하는 것이다.[^3]
2. 프론트엔드/백엔드는 기술 스택의 차이가 아니라, 본질적으로 실행 위치(브라우저 vs 서버) 와 노출/보안 요구에서 강제된 아키텍처적 분리다.[^20]
   • 실행 시사점:
     • “민감정보/비즈니스 로직/DB 접근”은 서버에 둔다.[^20]
     • 브라우저에는 “표현/상호작용” 중심을 둔다.[^26]
3. 프론트엔드는 HTML/JS/CSS “세 개면 끝”처럼 보이지만, 실제 난이도는 브라우저 다양성(호환성) 과 규격 준수, 성능 최적화에서 급격히 상승한다.[^37]
4. 데이터베이스는 단순 저장소가 아니라, 성능/보안/서버 역할을 포함한 “서비스”이며, 현실에서는 RDBMS와 NoSQL 등 다양한 선택지를 전제로 해야 한다.[^39]
5. 웹페이지는 “한 번 요청해 한 번 받는” 것이 아니라, 브라우저가 다수 리소스를 병렬적으로 요청/수신하고, 엔진이 파싱→렌더링→JS 이벤트 대기까지 수행하는 복합 파이프라인이다.[^71]

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

• 제목: 웹개발자의 이해 (프론트앤드 개발자 , 백엔드 개발자)[^84]
• 채널: 팀노바[^84]
• 길이: 24분 12초[^84]
• 링크: https://www.youtube.com/watch?v=Iflbyx3bH5s[^84]

---

[^1]: @[00:01] “이번시간에는 웹개발자 란 무엇인가… 영상을 찍어 보도록 하겠습니다” [^2]: @[00:01] “웹개발자 란 무엇인가 와 웹개발 독학하기 전에…” [^3]: @[00:15] “인터넷과 웹 은 동일하지 않다…” [^4]: @[00:42] “인터넷엔 통신이 되는 환경 자체를…” [^5]: @[00:54] “우리가 이제 인터넷이라고 말하는 것은 주로 웹브라우저를 통해서… 월드 와이드 웹을 뜻해요” [^6]: @[01:06] “인터넷과 이제는 웹의 차이에 대해서는 좀 알고 시작…” [^7]: @[01:13] “일반적으로 요청한 것은 월드와이드웹…” [^8]: @[12:34] “웹 개발은 상호 연결성을 가지는데… 구조를 먼저 설명…” [^9]: @[02:22] “웹 개발자가 뭐야…” [^10]: @[01:18] “초보… 홈페이지나 만들지… 전망은 또 어떻고…” [^11]: @[01:37] “전 세계에 개발자의 70% 는 웹개발자… 전망… 괜찮을 것” [^12]: @[01:49] “국내에서 가장 많은 개발자를 보유… 가장 큰 플랫폼…” [^13]: @[02:04] “수요도 많고 공급도 많은… 실력차이… 애매” [^14]: @[02:20] “무난한거 같아요” [^15]: @[02:26] “월드 와이드 웹 환경에서 문서를 주고 받네 html…” [^16]: @[02:46] “웹을… 하나의 페이지… 주소가 있고…” [^17]: @[02:53] “이 환경에서 동작하는 프로그램을 짠다” [^18]: @[04:22] “왜 굳이 이렇게 피곤하게 하냐…” [^19]: @[03:21] “사용자에게 보여지는… 프론트엔드… 서버에서 로그인…” [^20]: @[04:30] “페이지 소스 보기… 소스가 도출… 데이터베이스 접속… 누구나 볼 수…” [^21]: @[04:53] “그렇기 때문에 웹은… 프론트엔드 빽엔드 개념이…” [^22]: @[05:02] “게임… 프론트 빽엔드… 네트워크… 반드시 이해…” [^23]: @[05:23] “이 개념이 없으면… 모호… 위축…” [^24]: @[05:48] “html 은 무엇인가… 구조를 잡아줘요” [^25]: @[06:09] “열고 닫고… 타이틀… 이런 구조… html” [^26]: @[06:25] “자바스크립트를 동적인 부분을 관장” [^27]: @[06:29] “동적… 반대말 정적… 멈춰 있는 상태…” [^28]: @[06:58] “초기에는… 텍스트만… 이미지만…” [^29]: @[07:08] “요구 사항… 예뻐… 동작… 새로고침… 조명이…” [^30]: @[07:45] “올렸을 때… 색깔 바뀌죠…” [^31]: @[08:04] “자바스크립트… 경보창…” [^32]: @[08:19] “장바구니… 새로고침도 안돼… 담겼습니다…” [^33]: @[08:38] “스타일시트… css… 어떻게 그릴지… 속성…” [^34]: @[09:05] “총 3가지… html 과 자바스크립트… 스타일시트…” [^35]: @[09:22] “깊게 들어가… 굉장히 힘들어요” [^36]: @[09:58] “초반… 재미… 나중에 고급 레벨이 어렵다” [^37]: @[09:31] “웹브라우저… 종류… 규격… 속도…” [^38]: @[10:05] “데이터베이스… 알아야…” [^39]: @[10:21] “단순히 저장… 서버의 역할… 성능 최적화… 보안…” [^40]: @[10:36] “파일… 텍스트 파일… 보다 훨씬 효율적…” [^41]: @[10:51] “오라클… 마이 sql… 몽고 db… 올해 기스(레디스)…” [^42]: @[11:08] “노예 스케일… 새로운 패러다임…” [^43]: @[11:12] “회원가입한 데이터를 저장… 파일보다…” [^44]: @[11:32] “웹서버… http 통신을 지원…” [^45]: @[11:43] “종류… 수백개… 500개 가까이…” [^46]: @[12:02] “아파치… 엔진엑스… 무난…” [^47]: @[12:38] “사용자 pc… 서버 pc…” [^48]: @[12:55] “웹브라우저… 자바스크립트… html… 스타일시트…” [^49]: @[13:11] “dns… 도메인… 서버를 찾아…” [^50]: @[13:34] “웹서버가 있고 데이터베이스가 있어요… 다른 서버일 수도…” [^51]: @[13:58] “웹서버… 중재…” [^52]: @[14:00] “http 통신… 통신규격… 한국어/영어…” [^53]: @[14:41] “요구사항… 페이지뷰 요청… 웹서버 해석…” [^54]: @[14:56] “회원가입… 정보를… 보내요” [^55]: @[15:06] “처리를 하고… 데이터베이스 안에 넣어 줘…” [^56]: @[15:22] “회원가입이 완료… 페이지를… 만들어…” [^57]: @[15:33] “이 과정에서 사용된 언어들이 php 나 sql…” [^58]: @[15:42] “rdbms… 카산드라… cq 일(cql)…” [^59]: @[16:07] “php… 자바… 닷넷… 루비… 파이썬…” [^60]: @[16:20] “이쪽을 담당… 백엔드… 프론트엔드…” [^61]: @[16:35] “웹브라우저… 소스 파일을 전송” [^62]: @[17:02] “여러가지 파일을 받아 와요… 얼마나 걸렸습니다…” [^63]: @[20:39] “한 페이지만 요청한 것 같은… 사실 이 만큼 많은 동작…” [^64]: @[17:40] “웹브라우저 엔진… 핵심…” [^65]: @[18:09] “파일 구문… 해석… dom… 구조…” [^66]: @[18:48] “파싱… 사용할 수 있는 형태로 바꿔… 한글화…” [^67]: @[19:15] “렌더 파싱… 화면에 보여주는…” [^68]: @[20:41] “순식간에 이것저것을 많이 하는구나…” [^69]: @[19:57] “캐시를 지워야… 사이즈랑 시간을 볼 수…” [^70]: @[20:16] “빨리빨리 실행…” [^71]: @[20:22] “의미 분석… 필요한 페이지를 서버에서 요청…” [^72]: @[20:47] “갖고 온 데이터를 기반으로 렌더링… 화면 출력” [^73]: @[21:02] “화면에 그리기 및 자바스크립트 동작… 아직 한 과정…” [^74]: @[21:16] “정적… 눌러도… 없어요” [^75]: @[21:27] “자바스크립트 엔진… 기다리고 있어요” [^76]: @[21:39] “v8 엔진…” [^77]: @[22:09] “이미지 바꿔주고… 효과… 창 크기 변화…” [^78]: @[22:34] “실시간으로 변화… 자바스크립트 엔진이 대기…” [^79]: @[23:13] “모든 버튼… 자바스크립트… 아니에요… 예뻐지고… 애니메이션…” [^80]: @[23:33] “짧은 시간… 설명… 부족…” [^81]: @[23:40] “온라인… 힘들어… 답답… 온라인 강의… 긍정적이지…” [^82]: @[24:02] “댓글… 최대한 답변…” [^83]: @[05:39] “프론트엔드… 서버에서 동작… 백엔드…” [^84]: 사용자 제공 메타데이터(제목/채널/길이/링크)