https://www.youtube.com/watch?v=3Cd6sKe7g5U

description: |

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

[? 질문] 코딩/개발 입문에서 “코드부터 치는 것”보다 먼저 가져야 할 가장 중요한 1가지는 무엇인가[^1]
[= 답] IT 서비스(웹/앱)가 사용자에게 제공되기까지의 전체 구조(큰 그림)를 한 장으로 꿰뚫어 보는 눈이다. 이 구조를 먼저 이해한 뒤, 각 포지션(개발/기획/디자인/대표/PM 등)이 자신의 위치에서 필요한 기술을 채워야 효율이 올라가고 “진짜 로드맵”이 생긴다.[^1]

[? 질문] 웹/앱 서비스는 사용자가 클릭했을 때 내부에서 어떤 순서로 동작하는가(프론트엔드·백엔드·DB·API·JSON·파싱의 연결 구조는 무엇인가)[^2]
[= 답] 사용자가 도메인으로 접속 → DNS가 서버 IP를 찾아줌 → 서버에서 프론트엔드/백엔드/DB가 역할 분담 → 프론트가 백엔드에 API 호출 → 백엔드가 SQL 쿼리(SELECT 등) 로 DB 조회 → 결과를 JSON 포맷으로 만들어 프론트에 전달 → 프론트가 JSON을 파싱해 화면에 렌더링한다.[^2]

[? 질문] 왜 프론트엔드와 백엔드를 굳이 나누고, 화면(뷰)을 먼저 보여준 다음 데이터는 나중에 받아오는(비동기) 방식을 쓰는가[^3]
[= 답] 속도(체감 속도)와 이탈률, UX, 트래픽/서버비용 때문이다. DB 조회·서버 처리에는 시간이 걸리므로, 뷰/레이아웃을 먼저 띄워 사용자가 “덜 느리게” 느끼게 하고(흰 화면 로딩 방지) 데이터 영역만 로딩한다. 이는 이탈률을 낮추고 검색 노출/사이트 성과에도 영향을 준다.[^3]

2. 큰 그림[^4]

이 콘텐츠는 코딩 입문자뿐 아니라 IT 서비스를 만들려는 모든 구성원(개발자·디자이너·기획자·PM·퍼블리셔·대표) 이 반드시 이해해야 할 “서비스가 동작하는 전체 구조”를 한 장의 그림으로 설명한다.[^4] 단순히 기술 목록을 나열하는 로드맵이 아니라, 실제 서비스 흐름을 기준으로 “내가 무엇을 배워야 하는지”를 자가 진단하도록 돕는 것이 목적이다.[^4]

• 전체를 보는 눈이 진짜 실력의 출발점: 코드 한 줄을 더 아는 것보다, 웹/앱이 돌아가는 큰 구조를 이해하는 힘이 더 중요하며 AI 시대에는 더더욱 중요해진다.[^5]
• 프론트–백–DB–데이터 포맷(JSON)–파싱이 핵심 연결고리: 사용자의 클릭 1번 뒤에서 어떤 요소들이 어떻게 연결되는지 설명하면서, 그 자체가 “진짜 로드맵”이라고 주장한다.[^2]
• 분리(프론트/백)와 비동기 처리의 이유는 속도·UX·비용: 먼저 레이아웃을 띄우고 데이터만 나중에 채우는 구조가 체감 속도를 개선하고 이탈률·검색평가·서버비용에 영향을 준다는 논리를 제시한다.[^3]

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

3.1 왜 실무에서 문제가 생기는가: “전체 구조를 모르기 때문”[^6]

화자는 시작부터 “이야기를 모르기 때문에 실무에서 많은 문제들이 발생한다”고 말한다.[^6] 여기서 말하는 ‘이야기’는 특정 언어나 문법이 아니라, IT 서비스가 만들어지고 운영되는 전체 구조(큰 그림)다.[^6]

이 내용은 개발자만이 아니라, IT 서비스를 만들고자 하는 구성원(기획자, 디자이너, 회사 대표 등)이라면 모두 반드시 알아야 하는데도, 기술 중심으로 들리기 때문에 많은 사람이 놓치거나 애초에 알려고 하지 않는다고 지적한다.[^6]

특히 프로젝트를 시작할 때 각 직무가 흔히 보이는 출발 방식이 잘못된 방향으로 흐른다고 예시를 든다.[^7]

• 디자이너: 포토샵/ XD/ 피그마부터 시작[^7]
• 기획자: 파워포인트/파워목업부터 시작[^7]
• 스타트업 대표: 시장성 검증, 재무제표, 회계처리부터 시작[^7]
• 개발자: 무작정 코딩부터 시작[^7]

하지만 화자는 “IT 서비스를 만들겠다면 한 발 떨어져서 전체를 보는 눈을 우선 가져야 한다”고 강조한다.[^8] 그러지 않으면 각자가 스스로를 ‘부품’처럼 만들게 되고(부품화를 자처), 전체 효율이 떨어진다는 문제의식을 깔고 있다.[^8]

이어서 효율의 조건을 “서비스 전체 운영을 보는 눈”과 연결한다.[^9]

• 먼저 전체 운영 구조를 이해한 뒤[^9]
• 각자의 위치에서 기술을 습득하거나 발휘해야[^9]
• 결과적으로 효율이 올라간다[^9]

또한 이 큰 그림을 모른 채로 개발을 배우면, 한참 뒤에 스킬을 익히고 나서야 뒤늦게 전체 그림이 보이는데, 처음부터 이걸 알고 출발하면 출발선이 달라진다고 말한다.[^10] 최소한의 호기심이 있다면 이 내용을 듣고 시작하라고 권한다.[^10]

[!IMPORTANT] “기술 로드맵”의 재정의[^11] 화자는 억지로 광범위하게 늘어놓은 로드맵이 아니라, 실제 서비스 구조를 펼쳐 놓고 그 구조에서 필요한 것을 배워 나가는 것이 “진짜 로드맵”이라고 정의한다.[^11]

3.2 이 영상의 위치: 코딩 기초 상식 시리즈의 “최종편/압축판”[^12]

화자는 이 영상이 “지난 코딩 기초 상식 시리즈 최종편”이며, 시리즈에서 말한 내용을 토대로 “마지막으로 더 쉽고 더 간략하게” 만들었다고 설명한다.[^12]

대상도 다시 명확히 한다.[^13]

• 코딩을 하려는 사람: “무조건 보셔야” 함[^13]
• IT 서비스 구성원: 디자이너/기획자/PM/퍼블리셔/스타트업 대표(준비 포함)도 “반드시” 봐야 함[^13]

특히 “코딩을 하고 싶은 분들 중 이 영상이 이해가 안 되면 될 때까지 몇 번 돌려보라”고 말하는데, 이유는 이 구조를 이해하면 웹/웹서비스 구동 원리가 투명하게 보이고, 어떤 로드맵보다 “기술적으로 해야 할 일이 명확해진다”는 주장 때문이다.[^14]

또한 “코드 한 줄 더 아는 것보다 전체를 파악하는 힘이 매우 중요”하며, 책과 GPT 같은 AI 시대에서는 전체를 보는 눈이 더 중요해질 수밖에 없다고 덧붙인다.[^15]

3.3 한 장으로 보는 서비스 구동 구조: 사용자 → 프론트엔드 → 백엔드/DB[^16]

본론에서 화자는 “IT 서비스(웹 또는 앱)가 구동될 때까지 전체 구조를 한 장에 정리”했다고 말한다.[^16] 이 화면(이미지/PDF)은 영상 하단 더보기에서 다운로드할 수 있도록 링크를 제공한다고 안내한다.[^16]

구조 설명은 사용자 시점으로 시작한다.[^17]

• 사용자가 모니터 앞에 앉아 있음[^17]
• 모니터에 보여지는 화면이 프론트엔드[^17]
• 사용자와 프론트엔드는 UI/UX(사용자 인터페이스/사용자 경험) 기반으로 상호작용[^17]

3.4 도메인 접속과 DNS: “이름을 주면 전화번호(IP)를 찾아준다”[^18]

유튜브를 예로 들어 사용자가 “유튜브 도메인을 치거나 링크로 접속”한다고 가정한다.[^18] 그 다음 과정으로 DNS를 설명한다.[^18]

DNS 설명의 핵심 비유는 ‘전화번호부’다.[^19]

• 사람이 전화번호부에서 “이름으로 검색하면 전화번호를 내놓듯”[^19]
• 알파벳 도메인을 던지면 “어느 서버 PC로 가야 하는지” 서버 IP를 알려준다[^19]
• 이 DNS 서버는 굉장히 빠르다고 말한다[^19]

즉, “유튜브닷컴을 쳤으니까 DNS에서 유튜브 서버 IP가 조회되고 그쪽으로 접속”이 일어난다고 정리한다.[^20]

3.5 서버 안의 영역 구분: 프론트엔드·백엔드·DB[^21]

접속된 서버 PC에는 프론트엔드 영역과 백엔드 영역이 존재하고, 데이터베이스(DB)는 백엔드에 속한다고 말한다.[^21] 여기서부터는 “사용자 액션(클릭)”을 트리거로 프론트→백→DB의 왕복을 설명한다.[^21]

3.6 홈 버튼 클릭 1번 뒤에서 벌어지는 일: API 호출 → SQL 조회 → JSON → 화면 표시[^22]

예시로 “유저가 유튜브 메인으로 가는 홈 버튼을 클릭”하는 상황을 든다.[^22]

1. 프론트엔드가 백엔드에게 API 호출[^22]
   홈 버튼 클릭 이후, 프론트엔드가 백엔드에 “API 호출을 한다”고 설명한다.[^22]

2. 백엔드가 DB를 SQL 쿼리로 조회(SELECT)[^23]
   유튜브 메인에 노출되는 영상은 흔히 “알고리즘 신에게 선택된 영상”이라 농담처럼 말하곤 하는데, 화자는 이를 DB 조회 관점으로 풀어낸다.[^23]

• 백엔드가 SQL 쿼리를 날려 DB를 조회[^23]
• 이때 데이터를 조회하는 쿼리가 “SELECT”이며, 이 “SELECT로 선별된 데이터”가 일종의 “알고리즘 신”에 해당한다고 표현한다.[^23]
• 쿼리는 뒤에서 다시 설명하겠다고 예고한다.[^23]

3. 백엔드가 데이터를 JSON 형태로 만든다[^24]
   백엔드는 SELECT로 가져온 데이터를 받아 JSON 형태로 만들어 프론트로 준다고 말한다.[^24]

• JSON은 “자바스크립트 오브젝트 노테이션”의 약자라고 소개하지만[^24]
• 약자 자체는 기억할 필요 없고 “JSON만 기억하면 된다”고 말한다.[^24]
• exe가 실행 파일 포맷인 것처럼, JSON은 데이터 포맷이며 개발에서 범용적으로 많이 쓰인다고 강조한다.[^25]
• “왜 JSON이 필요하냐”에 대해: 백엔드의 데이터를 프론트엔드에 전달하기 위해서라고 답한다.[^25]

4. 프론트엔드가 JSON을 배열화하여 화면에 뿌린다[^26]
   프론트는 JSON으로 받은 것을 다시 “배열화해서 화면에 뿌려준다”고 설명한다.[^26]

• 유튜브 메인에는 영상이 여러 개 노출되므로 “리스트가 곧 배열”이라는 감각을 심어준다.[^26]
• 배열의 영어는 array라고 말한다.[^26]

3.7 “배열(array)”을 말뜻으로 이해시키기: push 메소드까지 연결[^27]

화자는 배열을 단순 문법이 아니라 “개념→연상→기본 메소드”로 이어서 이해시키려 한다.[^27]

• 배열은 “여러 개 열의 뭉치”라는 식으로 설명한다.[^27]
• 자바스크립트에서 배열을 추가할 때 “add”가 아니라 push 메소드를 쓴다고 언급한다.[^27]
• 개념(밀어 넣는다=push)을 알면 기본 메소드 하나를 자동으로 암기하는 셈이라며 소개한다.[^27]

+++ 상세 예시: 화자가 배열을 데이터 묶음으로 ‘그림’처럼 설명하는 방식 유튜브 메인에 노출될 영상들이 “여러 개”이므로, 이 여러 개 아이템의 묶음이 배열이고, 그 배열을 구성하는 “아이템 1개”를 떼어 보면 그 안에 표시해야 할 정보(썸네일/제목/시간/채널명 등)가 들어있다는 식으로 구조를 단계적으로 쪼개서 설명한다.[^28] +++

3.8 “열/행”과 “로우(row)”: 유튜브 메인 카드 1개에 들어있는 정보들[^28]

배열 설명을 확장해, 화자는 “열과 행” 관점으로 데이터 구조를 풀어낸다.[^28]

• 메인에 표시되는 아이템들의 “배열”이 있고[^28]
• “아이템 하나가 열 하나”라고 말하며[^28]
• 그 열 하나를 뜯어보면 “행(로우)이 포함”되어 있다고 설명한다.[^28]

여기서 로우(row)를 “아이템 1개”로 대응시키며, 그 아이템(로우) 안에 포함된 값들이 결국 화면에 표시될 정보들이라고 정리한다.[^29]

• 영상 썸네일[^29]
• 영상 제목[^29]
• 영상 시간[^29]
• 채널명[^29]
• 채널 이미지[^29]
• 조회수[^29]
• 업로드 일자 등[^29]

그리고 “로우들의 뭉탱이가 배열(array)”이라고 재확인한다.[^30]

3.9 DB는 “엑셀 판박이”: 테이블(열/행)로 저장된다[^31]

화자는 열과 행을 떠올리면 보통 엑셀이 먼저 생각난다며, 그렇다면 이런 데이터는 어떻게 저장되는지를 묻는다.[^31]
답은 “엑셀 판박이로 저장되어 있다”이고, 그것을 데이터베이스(DB) 라고 부른다고 설명한다.[^31]

• DB는 열과 행으로 이루어져 있고 “거의 엑셀”이라는 표현을 쓴다.[^31]

3.10 SQL “쿼리”란 무엇인가: SELECT/INSERT/UPDATE/DELETE, 그리고 튜닝[^32]

DB에서 데이터를 다룰 때 쓰는 명령들을 예로 든다.[^32]

• 조회: SELECT[^32]
• 입력: (발음상 “insult”로 들리지만 맥락상) INSERT[^32]
• 수정: UPDATE[^32]
• 삭제: DELETE[^32]

중요한 포인트는 용어다.[^33]

• 이런 DB 명령을 “명령어”라고도, “코드”라고도 부르지 않고[^33]
• 쿼리 또는 쿼리문이라고 부른다고 말한다.[^33]
• 즉, DB에서 데이터를 조작하는 명령문이 “쿼리”다.[^33]

그리고 “SELECT 쿼리문을 잘 짜면 좋은 데이터를 선별할 수 있다”는 관점을 제시한다.[^34] 유튜브 메인 노출 영상이 “알고리즘 신”처럼 느껴지지만, 결국엔 어떤 조건으로 SELECT를 하느냐의 문제라는 식의 연결이다.[^23]

또한 쿼리 작성에 따라 조회 속도가 많이 달라진다고 말한다.[^35] 이 지점에서 DB 전문가의 역할을 소개한다.[^35]

• DB 튜닝: 데이터가 쌓여 느려진 DB 구조를 변경하거나[^35]
• 쿼리문을 더 좋은 쪽으로 수정하는 작업[^35]

마지막으로 이미지 저장 방식에 대한 실무적 참고를 덧붙인다.[^36]

• DB에 이미지 “파일 자체”가 들어있는 것이 아니라[^36]
• 서버 어딘가에 이미지가 저장되고[^36]
• DB에는 그 이미지 경로를 저장하는 것이라고 설명한다.[^36]

[!NOTE] “알고리즘”을 DB 관점으로 재해석[^23] 화자는 유튜브 메인 노출을 “알고리즘 신”으로 부르는 통념을 가져와, 실제로는 백엔드가 DB에서 SELECT로 데이터를 선별해 가져오는 흐름이라고 연결한다.[^23]

3.11 프론트엔드의 “파싱(parsing)”: JSON을 화면에 뿌리는 작업[^37]

프론트엔드가 배열을 기반으로 화면을 뿌리고[^37], JSON을 화면에 뿌려주는 작업을 파싱이라고 부른다고 말한다.[^37]
파싱이 완료되면 사용자가 눈으로 확인할 수 있게 되고, 클릭 한 번에 지금까지 설명한 전체 과정이 “빠르게 실행”된다고 정리한다.[^38]

화자는 이를 “이게 다예요”, “정말 간단하죠”, “허무할 정도로 간단”이라고 표현하며, 큰 그림의 단순함을 강조한다.[^39]

3.12 “진짜 로드맵”의 의미: 구조를 펼쳐놓고 필요한 걸 배운다[^11]

화자는 지금까지의 구조(사용자→프론트→백→DB→JSON→파싱)가 곧 “진짜 로드맵”이라고 말한다.[^11]
여기서 로드맵에 대한 비판도 이어진다.[^40]

• 억지로 공부할 것들을 만들어 놓은 로드맵이 아니라[^11]
• 실제 사용되는 구조를 펼쳐놓고[^11]
• 그 구조에서 필요한 역량을 배워나가는 방식이 진짜다[^11]
• “겁만 주는” 광범위한 로드맵을 보지 말고, 나에게 필요한 기술 역량을 파악하는 게 중요하다고 말한다.[^40]

결론적으로 “생각보다 복잡할 것 없다, 만드는 거 어렵지 않다”는 메시지를 주며, 큰 지도를 펼쳐 “나만의 스타일 로드맵”을 완성하라고 권한다.[^41]

3.13 구조를 조금 더 확장: 프론트엔드/백엔드에 속하는 기술 스택[^42]

이제 화자는 앞선 큰 틀 위에 “기술 스택 예시”를 올려준다.[^42]

• 프론트엔드에 포함: HTML, CSS, JavaScript, React[^42]
• 프론트엔드는 디자이너/개발자/퍼블리셔 등 여러 포지션이 걸쳐 있는 영역이라고 설명한다.[^42]
• 백엔드에 사용되는 언어 예시: Java, Python, Node.js, PHP, Ruby, ASP 등[^43]

또한 프론트가 “사용자 PC에 표시”된다는 점을 다시 확인한다.[^44]

• 앱이라면 프론트엔드가 사용자 디바이스에 앱으로 설치되어 있음[^44]
• 웹이라면 URL을 치거나 링크를 누를 때 URL의 뷰 화면을 서버에서 받아와 내 PC에 표시해주는 방식이라고 말한다.[^45]

그리고 웹에서의 흐름을 다시 한 번 순서로 강조한다.[^46]

• 유저가 먼저 클릭[^46]
• 뷰 화면부터 받아와 표시[^46]
• 그 다음 데이터 조회를 위해 프론트가 백엔드를 호출[^46]
• 백엔드는 처리 후 DB 접속/조회[^47]
• 처리 결과를 JSON화해 프론트에 전달[^47]
• 프론트는 JSON을 파싱해 사용자에게 표시[^47]

3.14 [? 왜 프론트/백을 나누고, 뷰를 먼저 띄우고, 데이터는 나중에 가져오나] → 속도 때문이다[^3]

화자는 여기서 직접적으로 “왜 이렇게 할까요”를 던진다.[^48]

[? 질문] 왜 프론트랑 백엔드를 나눠놨는가[^48]
[= 답] 속도 때문이다.[^49]

이어서 질문을 여러 형태로 반복해, “번거로움”을 일부러 강조한다.[^48]

• 웹은 왜 뷰를 먼저 표시하고 다시 백엔드를 호출해 데이터를 가져와 또 보여주나[^48]
• 화면 호출 한 번에 몇 번씩 서버에 왔다 갔다 하는 방식 아닌가[^48]
• 어차피 데이터는 서버에서 가져올 텐데 앱은 왜 프론트를 설치하게 해두었나[^48]
• 왜 이런 번거로운 짓을 하나[^48]

답은 일관되게 “속도”이며, 그 이유를 DB/서버 처리 비용으로 구체화한다.[^49]

• DB 조회에는 시간이 제법 걸림[^49]
• 백엔드가 많은 데이터를 처리하면 로딩이 필요함[^49]
• 사이트 규모가 커질수록 DB 신속성이 떨어지고 쾌적함이 줄어듦[^50]

그래서 체감 속도를 최소화하기 위해 프론트/백을 나눴다고 말한다.[^51]

• 시각적으로 큰 레이아웃을 먼저 띄움[^51]
• 데이터 요소가 조금 늦어도 체감상 덜 느리게 느껴짐[^51]
• 반대로 전체를 한 번에 로드하면 데이터가 준비될 때까지 흰 화면 + 로딩이 걸린다고 설명한다.[^52]

3.15 흰 화면 로딩이 만드는 감정/사업적 결과: 이탈률 → 체류시간↓ → 검색평가↓[^53]

화자는 “때때로 이런 사이트를 본 경험이 있을 것”이라며 흰 화면 로딩의 사용자 경험을 묘사한다.[^53]

• 사용자는 짧은 순간에 “내 사이트가 느린 건지, 서버가 느린 건지, 사이트가 망했는지” 혼란을 느낌[^53]
• “난 누군지 여긴 또 어딘지”라는 과장된 표현으로 막막함/답답함을 강조[^53]
• 특히 “한국인들이 아주 싫어하는 속도”가 된다고 말한다.[^54]

그리고 이것이 지표로 이어진다고 연결한다.[^55]

• 결국 이탈률이 올라감[^55]
• 이탈률 상승은 체류 시간이 짧아짐을 의미[^55]
• 이는 검색 사이트 평가에 좋지 않은 영향 → 노출 감소[^55]
• 전체적으로 사이트가 “멸망하는 길”로 간다고까지 표현하며 심각성을 강조[^55]

또한 과거 웹의 역사적 맥락도 든다.[^56]

• 과거에는 모든 사이트가 흰 화면 빙글빙글 로딩이었음[^56]
• 그 이유는 프론트엔드/백엔드를 나누지 않았기 때문[^56]
• 아예 그런 개념이 없었고, 사용자가 접속하면 서버가 프론트/백 처리를 모두 해서 “일체형”으로 만들어 화면에 띄웠다는 설명이다.[^57]

일체형 방식의 문제는 명확하다.[^58]

• DB 조회 시간이 곧 유저 대기 시간[^58]
• 페이지 이동마다 매번 로딩을 기다려야 함[^58]
• 사이트 응답 시간이 0.몇 초 차이 날수록 이탈률이 몇 배로 늘어난다고 말하며, 속도의 민감도를 강조한다.[^58]

3.16 모던 웹의 해결책: API/AJAX 비동기화, MVC, 프레임워크[^59]

화자는 “모던 웹”에서의 변화로 API, AJAX, 비동기화 개념을 언급한다.[^59] 목적은 이탈률을 줄이려는 노력이라고 설명한다.[^59]

이어서 구조적 패턴으로 MVC를 소개한다.[^60]

• M(Model): 데이터베이스 담당[^60]
• V(View): 프론트엔드 담당[^60]
• C(Controller): 모델과 전반적인 프로그램을 컨트롤하는 영역[^60]

이것이 모던 웹의 기본 형태라고 말하고, 이 형태를 “즉시 사용하도록 만들어 놓은 것”이 프레임워크라고 정의한다.[^61] 다양한 프레임워크가 있으며 언어별 프레임워크 종류는 지난 영상 참고라고 안내한다.[^61]

[!TIP] “프레임워크”를 이해하는 화자의 관점[^61] MVC처럼 모던 웹의 기본 형태를 바로 쓰게 해주는 ‘틀’이 프레임워크라는 식으로, 프레임워크를 단순 라이브러리 목록이 아니라 구조를 즉시 채택하게 해주는 도구로 설명한다.[^61]

3.17 유튜브 연타 예시: 레이아웃은 유지, 콘텐츠 영역만 로딩 → 체감 속도 향상[^62]

화자는 다시 유튜브로 돌아와 “유저가 누르면 프론트엔드는 즉시 보여준다”고 말한다.[^62]

• 화면의 틀(레이아웃)이 먼저 보임[^62]
• 유튜브에서 홈을 연속으로 다다다닥 누르면, 콘텐츠가 나와야 하는 부분이 비어 보이는 현상이 생김[^63]
• 이것은 데이터 가져오기/JSON 파싱/화면 뿌리기 부분에만 로딩이 걸린 것이라고 설명한다.[^63]

중요한 결론은 레이아웃이 계속 유지되기 때문에 사용자가 느끼는 체감 속도가 굉장히 빨라진다는 점이다.[^64]

• 뷰가 먼저 떠서 화면 구성을 잠깐 살펴보는 동안[^65]
• 데이터 처리가 진행되고 짧은 시간 안에 실제 콘텐츠가 뜸[^65]

3.18 앱도 동일한 원리: 설치된 레이아웃 + 통신으로 바뀌는 부분만 서버에서 수신[^66]

화자는 “앱도 마찬가지”라고 말한다.[^66]

• 앱을 실행하면 보통 레이아웃 화면은 설치한 앱에 존재[^66]
• 통신에 따라 바뀌는 부분만 서버에서 받아와 보여주는 구조라고 설명한다.[^66]

이 방식의 효과로 비용/성능을 함께 언급한다.[^67]

• 이렇게 만들면 트래픽이 절약됨[^67]
• 서버 비용도 절약됨[^67]
• 속도도 빨라짐[^67]
• 결과적으로 사용자에게 좋은 경험 제공[^67]

3.19 큰 틀을 알면 각 포지션의 판단이 달라진다: 기술 이해도·응용력·비용 감각[^68]

화자는 “여기까지”라며 설명을 마무리하고, 큰 틀을 알면 코딩 이해도가 올라가고 응용력이 풍부해진다고 말한다.[^68]

그리고 포지션별로 무엇이 달라지는지 예시로 제시한다.[^69]

• 사업가: 어디서 트래픽/서버 비용을 절감해야 할지 떠오름[^69]
• 디자이너/기획자: 어디에 포커스를 맞춰야 할지 떠오름[^69]

마지막으로 이해가 안 되는 사람에 대한 태도를 안내한다.[^70]

• 지금 이해가 안 된다고 좌절/포기할 이유 없음[^70]
• 안 해봤던 것이니 이해가 안 되는 게 당연[^70]
• 심각하게 생각하지 말고, 이해가 안 되면 그냥 넘어가도 됨[^70]
• 다음에 시간이 지나 다시 보면 경험치에 따라 오늘 내용이 전혀 다르게 느껴질 수 있다고 말한다.[^71]

끝으로 이 기본 상식을 토대로 더 다양한 시도와 수익화를 해보겠다고 하고, 구독/좋아요/알림 설정 및 감사 인사를 전한다.[^72]

4. 핵심 통찰[^73]

1. [c 코딩 입문에서 가장 큰 레버리지는 “기술 목록”이 아니라 “서비스 전체 구조를 한 장으로 보는 능력”이다.] [^1]
2. [h 사용자의 클릭 1번은 프론트–백–DB–JSON–파싱의 왕복으로 설명할 수 있고, 이 흐름이 이해되면 공부 우선순위가 스스로 정렬된다.] [^22]
3. [h DNS는 “도메인 이름 → 서버 IP” 변환을 해주는 초고속 전화번호부라는 비유로 이해하면 된다.] [^19]
4. [h DB는 엑셀처럼 열/행으로 저장되며, DB 조작 문장은 ‘쿼리(SELECT/INSERT/UPDATE/DELETE)’라고 부른다.] [^31]
5. [h 유튜브 ‘알고리즘’ 같은 것도 관점에 따라선 “SELECT 쿼리로 선별된 결과”로 설명할 수 있으며, 쿼리 품질은 속도와 결과에 영향을 준다.] [^23]
6. [c 프론트/백 분리와 비동기 로딩의 본질적 이유는 “체감 속도”이며, 이는 UX뿐 아니라 이탈률·체류시간·검색평가·비용으로 연결된다.] [^55]
7. [m MVC는 모던 웹의 기본 형태(모델=DB, 뷰=프론트, 컨트롤러=제어)로 제시되며, 프레임워크는 이를 즉시 쓰게 해주는 도구로 설명된다.] [^60]

실행 관점으로 옮기면, 화자의 메시지는 다음 행동으로 수렴한다.[^40]

• “광범위한 로드맵”을 먼저 외우기보다, 사용자→프론트→백→DB→JSON→파싱 흐름을 먼저 그려본다.[^22]
• 본인의 포지션에서 이 흐름 중 내 책임 구간과 협업 접점(API/데이터 포맷/로딩 체감) 을 표시해본다.[^69]
• 속도/이탈률/비용을 좌우하는 지점을 의식하며(예: DB 조회, JSON 전달, 파싱/렌더링), 무엇을 더 공부할지 결정한다.[^49]

5. 헷갈리는 용어 정리[^74]

• 프론트엔드(Front-end): 사용자 화면에 표시되고 UI/UX 상호작용이 일어나는 영역. 웹에서는 뷰를 받아와 PC에 표시되고, 앱에서는 디바이스에 설치된 앱이 프론트 역할을 한다.[^44]
• 백엔드(Back-end): 서버에서 동작하며 비즈니스 로직 처리와 DB 접속/조회 등을 수행하는 영역.[^47]
• DB(데이터베이스): 열/행 구조로 데이터를 저장하는 저장소로, 화자는 “엑셀 판박이”로 비유한다.[^31]
• DNS: 도메인(알파벳 주소)을 주면 접속해야 할 서버의 IP를 알려주는 시스템. 전화번호부 비유로 설명된다.[^19]
• IP: DNS가 찾아주는 “어느 서버 PC로 가야 하는지”를 나타내는 주소로 설명된다.[^19]
• API 호출: 프론트엔드가 백엔드에게 데이터를 요청하는 호출.[^22]
• SQL 쿼리/쿼리문(Query): DB에서 데이터를 조회/입력/수정/삭제하는 명령문을 가리키는 용어. SELECT/INSERT/UPDATE/DELETE가 예시로 등장한다.[^33]
• JSON: 백엔드의 데이터를 프론트엔드에 전달하기 위해 범용적으로 쓰이는 데이터 포맷. 약자 뜻은 외울 필요 없고 “JSON” 자체를 기억하면 된다고 말한다.[^24]
• 파싱(Parsing): (화자 표현 기준) JSON을 화면에 뿌려 사용자에게 보이도록 만드는 작업.[^37]
• AJAX/비동기화: 모던 웹에서 뷰와 데이터를 분리해 로딩 체감을 개선하고 이탈률을 줄이기 위해 사용하는 개념으로 언급된다.[^59]
• MVC: Model(DB) / View(프론트) / Controller(제어)로 역할이 나뉜 모던 앱 구조로 소개된다.[^60]
• 프레임워크(Framework): MVC 같은 모던 웹 기본 형태를 “즉시 사용하도록 만들어 놓은 것”으로 설명된다.[^61]

---

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

• 제목: 코딩 입문, 1가지만 기억하세요. 진짜 로드맵으로 개발을 보는 눈이 완전히 달라집니다. 코딩기초 총정리[^75]
• 채널: 코딩 수익화 : 투더제이 TTJ[^75]
• 길이: 15분 28초[^75]
• 링크: https://www.youtube.com/watch?v=3Cd6sKe7g5U[^75]
• 키워드(제공): 코딩, 개발, 코딩 입문, 코딩 잘하는 법, 디자인, IT서비스, 웹프로젝트, 앱개발[^75]

[^1]: @[00:00] "이야기를 모르기 때문에 실무에서 많은 문제들이 발생합니다" ~ @[01:03] "이 내용들을 알고 출발한다면 포지션을 막론하고 출발선이 달라질 거예요" [^2]: @[02:17] "it 서비스 즉 웹 또는 앱이 구동될 때까지 전체 구조" ~ @[08:04] "클 한 번에 지금까지 말씀드렸던이 전체 과정" [^3]: @[09:50] "왜 이렇게 할까요" ~ @[12:39] "비동 교화라는 개념을 쓰게 되고" [^4]: @[00:05] "구성원이라면 반드시 알아야 하는 이야기" ~ @[01:45] "해야 할 일이 명확해진다" [^5]: @[02:06] "코드 한 줄 더 아는 것보다" ~ @[02:10] "AI 세상에서는 전체를 보는 눈" [^6]: @[00:00] "실무에서 많은 문제" ~ @[00:21] "많은 구성원들이 놓치게 됩니다" [^7]: @[00:28] "디자이너는... 기획자는... 대표는... 개발자는..." [^8]: @[00:37] "한발 떨어져서 전체를 보는 눈" ~ @[00:46] "부품화를 자처" [^9]: @[00:50] "서비스의 전체 운영을 보는 눈" ~ @[00:57] "효율이 올라간다" [^10]: @[01:03] "오랜 뒤에 스킬을 익히고" ~ @[01:10] "반드시... 들어보고 시작" [^11]: @[08:17] "이게 진짜 로드맵" ~ @[08:30] "진짜로 나에게 필요한 기술 역량" [^12]: @[01:16] "지난 코딩 기초 상식 시리즈 최종편" ~ @[01:24] "더 쉽고 더 간략하게" [^13]: @[01:34] "무조건 보셔야" ~ @[01:34] "반드시 보셔야겠습니다" [^14]: @[01:45] "이해가 안 되신다면... 투명하게 보이실 것이고" [^15]: @[02:06] "전체를 파악하는 힘" ~ @[02:10] "AI 세상" [^16]: @[02:17] "한 장에 정리" ~ @[02:25] "다운로드 링크" [^17]: @[02:30] "사용자가 모니터 앞" ~ @[02:42] "UI UX" [^18]: @[02:52] "유튜브 도메인" ~ @[02:59] "도메인 접속" [^19]: @[03:07] "전화번호부" ~ @[03:16] "DNS 서버는 굉장히 빠릅니다" [^20]: @[03:16] "유튜브 서버 ip가 조회" ~ @[03:18] "그쪽으로 접속" [^21]: @[03:24] "프론트엔드 영역과 백엔드 영역" ~ @[03:29] "db 부분도 백엔드" [^22]: @[03:32] "홈 버튼" ~ @[03:41] "API 호출" [^23]: @[03:47] "SQL 쿼리를 날려서" ~ @[03:58] "이 부분이 알고리즘 신" [^24]: @[04:01] "제이슨이라는 형태" ~ @[04:20] "제이슨만 기억" [^25]: @[04:20] "json이라는 데이터의 포맷" ~ @[04:25] "왜 제이슨이 필요" [^26]: @[04:33] "배열화해서 화면" ~ @[04:47] "리스트가 곧 배열" [^27]: @[05:02] "푸쉬라는 메소드" ~ @[05:09] "메소드 하나를 자동으로 암기" [^28]: @[05:18] "여러 개 열의 뭉치" ~ @[06:13] "로우라고 합니다" [^29]: @[05:59] "썸네일... 조회수... 업로드 일자" [^30]: @[06:13] "로우 하나" ~ @[06:16] "로우들의 뭉탱이가 배열" [^31]: @[06:20] "열과 행" ~ @[06:42] "데이터베이스... 거의 엑셀이죠" [^32]: @[06:49] "셀렉트... 업데이트... 딜리트" [^33]: @[06:57] "명령어라고 하지 않고" ~ @[07:03] "쿼리 또는 쿼리 문" [^34]: @[07:08] "셀렉트 쿼리문을 잘 짜면" [^35]: @[07:13] "조회 속도" ~ @[07:19] "DB 튜닝" [^36]: @[07:30] "이미지가 파일로 db" ~ @[07:35] "이미지의 경로" [^37]: @[07:51] "파싱이라고 합니다" [^38]: @[07:59] "클 한 번에... 전체 과정" [^39]: @[08:04] "이게 다예요" ~ @[08:17] "허무할 정도로 간단" [^40]: @[08:26] "공부할 것들을 억지로" ~ @[08:30] "필요한 기술 역량" [^41]: @[08:36] "복잡할 것이 없다" ~ @[08:42] "나만의 스타일로드맵" [^42]: @[08:49] "확장" ~ @[09:06] "모든 포지션" [^43]: @[09:06] "백엔드는 자바 파이썬" ~ @[09:13] "ASP" [^44]: @[09:13] "사용자의 pc" ~ @[09:23] "앱으로서 설치" [^45]: @[09:23] "웹이라면 url" ~ @[09:30] "표시해 주는 것입니다" [^46]: @[09:30] "유저가 먼저 클릭" ~ @[09:40] "프론트가 백엔드를 호출" [^47]: @[09:40] "백엔드... db 접속" ~ @[09:49] "파싱해서 사용자" [^48]: @[09:50] "왜 이렇게 할까요" ~ @[10:17] "왜 이런 번거로운" [^49]: @[10:21] "이유는 속도" ~ @[10:30] "db를 조회... 시간이" [^50]: @[10:37] "규모가 커질수록" ~ @[10:44] "쾌적함이 줄어" [^51]: @[10:44] "체감 속도를 최소화" ~ @[10:52] "레이아웃들을 먼저" [^52]: @[11:03] "전체를 한 번에 로드" ~ @[11:12] "흰 화면" [^53]: @[11:20] "막막함과 답답함" [^54]: @[11:30] "한국인들이 아주 싫어하는 속도" [^55]: @[11:34] "이탈률" ~ @[11:52] "사이트가 멸망" [^56]: @[11:52] "과거에는" ~ @[12:03] "나누어 놓지" [^57]: @[12:09] "서버에서... 일체형" ~ @[12:14] "모니터에 띄워" [^58]: @[12:19] "db조회 시간이" ~ @[12:25] "이탈률이 몇 배" [^59]: @[12:25] "모던" ~ @[12:39] "API 아작스... 비동 교화" [^60]: @[12:39] "mvc" ~ @[12:54] "컨트롤러" [^61]: @[13:05] "모던 웹의 기본 형태" ~ @[13:12] "프레임워크" [^62]: @[13:22] "유저가 누르면" ~ @[13:32] "레이아웃" [^63]: @[13:32] "다다다닥" ~ @[13:42] "제이슨을 파싱" [^64]: @[13:42] "체감 속도" ~ @[13:49] "굉장히 빠르게" [^65]: @[13:49] "잠깐 살펴볼 동안" ~ @[13:55] "실제 컨텐츠" [^66]: @[13:55] "앱도 마찬가지" ~ @[14:07] "바뀌는 부분들만" [^67]: @[14:07] "트래픽이 절약" ~ @[14:15] "사용자에게 좋은 경험" [^68]: @[14:22] "큰 틀을 알고" ~ @[14:30] "응용력" [^69]: @[14:30] "사업가라면" ~ @[14:39] "포커스를" [^70]: @[14:39] "좌절하거나" ~ @[14:55] "그냥 넘어가" [^71]: @[15:01] "경험치에 따라서" [^72]: @[15:01] "수익화" ~ @[15:17] "감사합니다" [^73]: @[08:17] "진짜 로드맵" ~ @[14:39] "바로 떠오르게" [^74]: @[02:35] "프론트엔드" ~ @[13:12] "프레임워크" [^75]: 사용자 제공 메타데이터(제목/채널/길이/링크/키워드) 및 영상 식별 정보