https://www.youtube.com/watch?v=4mRae9N2pU4

description: |-

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

[? 질문] HTML/CSS를 처음 배우는 사람이 “웹사이트를 빠르게 만드는” 가장 현실적인 방법은 무엇인가^2
[= 답] 바닥부터 전부 코딩하기보다, 이미 공개된 **무료 HTML 템플릿(오픈소스/프리 템플릿)**을 “쇼핑하듯” 골라서 가져온 뒤, 기본 구조(특히 index.html)만 이해하고 필요한 텍스트/요소를 검색해서 바꿔 끼우는 방식이 가장 빠르고 현실적이라고 말한다.^3

[? 질문] 내 컴퓨터에서만 보이는 웹페이지를 전 세계 누구나 접속 가능한 웹사이트로 만드는 과정(배포/디플로이)은 무엇인가^4
[= 답] 내 PC에 있는 HTML 파일을 24시간 켜져 있는 **외부 서버(클라우드/호스팅 서비스)**에 올려두고, 다른 사람들이 그 서버에서 HTML을 내려받아 브라우저로 보게 만드는 것이 디플로이라고 설명한다.^5

[? 질문] 배포된 사이트를 수정하면 왜 바로 반영되지 않고, 어떻게 반영해야 하는가[^6]
[= 답] 배포 후에는 파일이 내 PC가 아니라 호스팅 서버에 올라가 있는 상태이므로, 로컬에서 수정해도 서버의 파일이 바뀌지 않는다.[^7] 수정사항을 반영하려면 수정된 폴더(정적 파일)를 다시 업로드/재배포해야 한다고 답한다.[^8]

2. 큰 그림[^9]

이 콘텐츠는 “웹개발이 생각보다 쉽다”는 메시지로, 무료 HTML 템플릿을 가져와서 빠르게 웹사이트를 만들고, 그것을 **실제로 인터넷에 배포(Deploy)**하여 전 세계에서 접속 가능하게 만드는 전 과정을 12분대에 시연한다.[^10]
특히 “직접 모든 걸 처음부터 짜는 것”보다 “이미 있는 것을 잘 가져와 수정하는 것”이 실무적으로 더 흔하다는 관점을, 템플릿 선택(라이선스 확인) → 편집(VS Code) → 배포(Netlify 드래그앤드롭) → 재배포(수정 반영) 흐름으로 보여준다.[^11]

• 템플릿 기반 개발: 누군가 만들어 둔 HTML 템플릿을 골라 가져오고, 필요한 부분만 바꿔서 빠르게 완성한다는 접근을 강조한다.[^12]
• 디플로이(Deploy)의 원리: “서버가 HTML을 보관하고, 사용자는 그 HTML을 받아 본다”는 웹의 기본 원리를 그림/비유로 풀어 설명한다.[^13]
• 정적 사이트 배포 실습: Netlify(영상에서는 ‘트리파이’로 발음)에서 폴더를 끌어다 놓는 방식으로 배포하고, 사이트 이름(URL) 변경과 재업로드로 업데이트하는 방법을 실전처럼 시연한다.[^14]

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

3.1 “웹사이트를 만드는 현실적인 방법” — 템플릿을 ‘마트에서 장보듯’ 고른다[^16]

영상은 “전 세계에 공개 가능한 웹페이지를 만들었다”는 선언으로 시작하면서, 곧바로 “템플릿을 설명하겠다”고 한다.^1 그리고 “열변을 토하면서 ‘이렇게 하면 된다’고 말해놓고, 정작 모든 걸 일일이 HTML로 바닥부터 코딩하라고 하면 말이 안 맞는다”는 식으로 문제를 제기한다.^2

여기서 화자는 웹사이트 제작을 마트에서 장보는 행위에 비유한다.^3

• 요지는 “내가 필요한 것을 구글에서 가져오면 된다”는 것.^4
• 즉, 매번 모든 요소를 직접 만드는 게 아니라, 이미 만들어진 것(템플릿/오픈소스)을 찾아 쓰는 방식이 자연스럽고 빠르다는 관점이다.^4

이어서 초보자가 흔히 가질 법한 생각을 질문 형태로 꺼낸다.^5

• ? “홈페이지를 만들고 싶은데, 누가 이미 템플릿 HTML을 다 작성해두고 이름만 바꾸면 완성되는 페이지가 있지 않을까?”
• [= “그게 맞다. 이미 너무 많은 사람들이 템플릿을 올려놨다.”][^6]

그래서 화자는 ‘html template / free template / 무료 템플릿’ 같은 키워드로 검색하면 수많은 사이트에서 템플릿을 받을 수 있다고 말한다.[^7] 결론은 간단하다:

• 우리는 “쇼핑카트를 끌고 무엇을 골라 담을지만 알면 된다”고 정리한다.[^8]

[!TIP] 템플릿 활용을 ‘편법’이 아니라 ‘현실적인 개발 방식’으로 이해하기
화자는 “직접 바닥부터 짠다는 건 거의 없고, 가져와서 적절하게 꾸미는 게 코딩”이라고 말하며, 템플릿 기반 작업을 실무적인 관점으로 정당화한다.[^26]

3.2 템플릿 사이트에서 고르기 + 라이선스(저작권) 확인하기[^17]

화자는 검색 결과 중 “첫 번째” 템플릿 페이지에 들어가, 템플릿이 매우 많이 있음을 보여주며 “아무거나 고르면 된다”는 톤으로 진행한다.[^9]
다만, 이때 반드시 봐야 하는 것으로 **라이선스(저작권 관련 정보)**를 짚는다.[^10]

여기서 ‘주의’ 포인트를 마트 비유로 다시 설명한다.[^11]

• “마트에서 유료인데 결제 안 하고 그냥 가져가면 안 되는 것처럼” 템플릿도 유료/저작권 조건이 있는 것을 무료처럼 가져오면 문제가 된다는 취지다.[^11]
• 그래서 “꽁짜인 것만 봐야 된다”고 말한다.[^12]

이어서 예시로 MIT License를 언급한다.[^13]

• “MIT 라이선스가 붙어있는 것”을 예로 들며, 들어가 보면 라이선스 전문이 나오는데, 보통 “큰 저작권 문제는 없다”는 의미로 이해해도 된다고 말한다.[^14]
• 다만 “링크를 남겨달라” 같은 조건이 있을 수 있으니 “잘 읽어보라”고 덧붙인다.[^15]
• 전체 톤은 “보통 큰 문제는 없고 그대로 가면 된다”는 식으로, 초보자가 너무 겁먹지 않게 안내한다.[^16]

3.3 다운로드 → 폴더 구조 확인 → index.html 실행해 보기[^18]

라이선스를 확인한 뒤, 화자는 Download 버튼을 눌러 템플릿을 내려받는다.[^17]
그리고 이를 자신의 “웹 폴더”에 압축을 풀어 템플릿 폴더가 생긴 것을 보여준다.[^18]

템플릿 예시로 “John Doe(존도)” 같은 이름의 템플릿을 언급하며, 내부에 public_html 폴더가 있고 템플릿마다 구조는 다를 수 있다고 말한다.[^19]
public_html로 들어가면 초보자에게 익숙한 파일이 보인다고 하는데, 바로 **index.html**이다.[^20]

• 화자는 index.html이 보이면 “아, 이걸 실행하면 되겠다는 생각이 들죠”라고 말하며, 실제로 실행해 “깔끔한 소개 웹사이트”가 뜨는 것을 확인한다.[^21]

3.4 VS Code로 열어서 ‘검색해서 바꾸기’로 커스터마이징하기[^19]

다음 단계는 편집이다. 화자는 VS Code를 사용해 “Open Folder(폴더 열기)”로 템플릿 폴더(정확히는 index.html이 있는 경로)를 연다.[^22]
VS Code에서 파일이 열리면 index.html뿐 아니라 다른 파일들도 있고, 코드가 “엄청 길다”고 말한다.[^23]

다만 화자는 “HTML을 이해했다면 그렇게 어렵진 않을 것”이라는 전제를 깔고, 아주 구체적으로 “어떤 걸 고치면 어디가 바뀌는지”를 시연한다.[^24]

(1) <title> 바꾸기 → 브라우저 탭/페이지 제목 변화

• head 안의 title을 바꿔서 “조코딩의 홈페이지” 같은 텍스트로 수정한다.[^24]
• 저장한 뒤 라이브 서버(로컬 실행)로 확인하면 “홈페이지로 바뀌었다”고 말한다.[^25]

(2) 본문 텍스트 바꾸기: “Hello, I'm John Doe” → “조코딩”

화자는 “헬로 아이엠 존도”를 “조코딩”으로 바꾸고 싶다고 말하면서, 초보자가 코드에서 해당 위치를 어떻게 찾는지를 보여준다.[^26]

• 먼저 “존 도우가 어딨을까?”라고 한 뒤, 텍스트를 복사한다.[^27]
• 코드에서 찾기는 Ctrl+F를 누르면 검색창이 뜬다고 설명한다.[^28]
• “John Doe”를 검색하면 h1 태그 안에 해당 문자열이 있음을 보여준다.[^29]
• 그 부분을 지우고 “조코딩”으로 작성한 다음, 저장(Ctrl+S)하고 새로고침하면 화면에 “조코딩”으로 바뀐 것을 확인한다.[^30]

이 부분에서 화자는 “오픈소스를 가져온다는 게 어떤 의미인지 알겠죠”라고 하며, 템플릿을 가져와 필요한 텍스트를 찾아 바꾸는 것이 핵심임을 재강조한다.[^31]
또한 “템플릿이라 조금 다르긴 한데”라며, 비유를 이어 “쇼핑카트 끌고 한 선에서 모인(이미 만들어진) 것을 주워 담은 다음, HTML 정말 기본만 이해하면 찾아서 바꾸면 된다”고 정리한다.[^32]

• 그리고 결론적으로 “직접 바닥부터 짜는 경우는 거의 없고, 이런 식으로 가져와서 적절하게 꾸미면 그게 코딩”이라고 못 박는다.[^33]

3.5 디플로이(Deploy)란 무엇인가: 내 컴퓨터 vs 서버, 클라이언트-서버 관계[^20]

화자는 이제 “디플로이를 배워보겠다”며, 하고 싶은 목표를 “호스팅하고 도메인 설정까지 해보고 싶다”로 제시한다.[^34]
그리고 이것을 전문용어로 **Deploy(디플로이)**라고 부른다고 말한다.[^35]

여기서 화자는 현 상태를 정의한다.[^36]

• “지금은 내 컴퓨터가 있고, 내 컴퓨터 폴더에 HTML 파일이 있다.”[^36]
• 그런데 웹사이트는 “다른 사람들이 들어와야 의미가 있다.”[^37]

그래서 “내 폴더에만 있으면 친구에게 자랑하려면 USB로 주거나, 노트북 들고 다니며 보여줘야 한다”는 식으로 로컬 상태의 한계를 예시로 든다.[^38]
즉, “내 컴퓨터에만 있으면 의미가 없다”는 결론을 내리고, 공개하는 방법은 두 가지라고 한다.[^39]

방법 1) 내 컴퓨터 자체를 서버로 만들기

• 내 컴퓨터를 서버로 만들어, 누구나 와서 index.html을 받아갈 수 있게 하면 “내 컴퓨터가 서버가 되어 웹페이지를 호스팅할 수 있다”고 설명한다.[^40]
• 하지만 이 방법의 단점은 “내 컴퓨터를 항상 켜야 한다”는 것.[^41]
• 사람들이 접속할 때마다 HTML 파일을 가져가 페이지를 보게 되며, 이때 각 사용자는 클라이언트, 내 컴퓨터는 서버가 된다고 정리한다.[^42]
• 항상 인터넷/전원을 켜놔야 하니 비효율적이고 “컴퓨터 뜨거워지고 난리 난다”고 표현한다.[^43]

방법 2) 외부 서버를 빌리기(더 편한 방식)

화자는 두 번째 방법이 더 편하다고 하며, “전문적인 컴퓨터(서버)”를 쓰는 비유를 든다.[^44]
영화(미션 임파서블류)에서 “해커가 전문 장비를 연결해 해킹한다”는 장면을 떠올리게 하면서, 일반 노트북이 그런 부하를 받으면 힘들 것이라고 말한다.[^45]

그래서 “전문적인 서버를 운영하는 곳에서 공간을 빌려” 그곳에 사이트의 HTML을 넣으면, 사람들이 들어와 HTML을 가져가고, 그 서버는 잘 관리되니 편하다고 한다.[^46]

화자는 다시 그림으로 요약한다.[^47]

• 내 컴퓨터에서 HTML을 만든 뒤
• 24시간 돌아가는 잘 관리된 서버에 얹어두면
• 사람들이 그 HTML을 가져가 브라우저에서 볼 수 있다
• 이 과정을 디플로이라고 부른다[^47]

3.6 클라우드/호스팅 서비스 소개 → 오늘은 Netlify로 무료 배포 시연[^21]

화자는 “서버를 운영하는 데가 뭐 있냐”고 하며, 이런 업체를 클라우드 서버라고 부른다고 설명한다.[^48]
예시로 AWS, Microsoft, Google Cloud 같은 대표 서비스를 언급한다.[^49]

다만 오늘 영상에서는 “유료 서비스”보다 더 가벼운 “무료 서비스”가 있어 그것을 쓰겠다고 하고, Netlify를 사용해 디플로이해보겠다고 말한다.[^50]
또한 “여기 있는 것(어떤 서비스든) 다 클라우드 서버 운영 업체라 아무 데나 해도 된다”는 뉘앙스를 준다.[^51]

3.7 Netlify 배포 실습(드래그앤드롭) — public_html 폴더를 올려 URL 만들기[^22]

화자는 Netlify 주소로 접속해 회원가입(Sign up) 후 로그인하면 대시보드가 나온다고 설명한다.[^52]
그다음 메뉴 중 Sites로 들어가면, (본인은 여러 개를 배포해서 많이 보이지만) 보통은 비어 있거나 간단히 보일 거라고 말한다.[^53]

그리고 해야 할 일이 “굉장히 간단하다”고 하면서, 업로드해야 할 폴더를 정확히 지정한다.[^54]

• HTML 파일이 있는 폴더 구조를 다시 짚는다: 템플릿 폴더 안에 public_html이 있고 그 안에 index.html이 있다는 구조.[^55]
• 업로드 대상은 상위 폴더가 아니라 public_html 폴더라고 말하며, 그 폴더를 마우스로 끌어 Netlify의 업로드 박스에 떨어뜨리라고 안내한다.[^56]

업로드가 끝나고 새로고침하면 사이트 주소(URL)가 생성되고, 그 주소로 들어가면 방금 만든 페이지가 뜬다고 시연한다.[^57]
화자는 이 URL을 복사해 직접 열어보고, 채팅창에 공유하면 누구나 같은 화면을 볼 수 있다고 말한다.[^58]

그리고 다시 한 번 선언한다:

• “이제 전 세계에 공개 가능한 웹페이지를 만들었다.”[^59]
• “지구 반대편 아르헨티나 친구에게 링크를 보내도 똑같이 볼 수 있다.”[^60]

[c 로컬 파일을 ‘인터넷에서 접속 가능한 주소’로 바꾸는 핵심은 “서버에 올려 URL을 만든다”는 점이라고, Netlify 업로드 시연으로 직관적으로 보여준다.] [^57]

3.8 URL이 지저분할 때: 사이트 이름 변경(Change site name)[^23]

화자는 “URL이 좀 이상하죠, 지저분하죠”라고 하며, 이 주소를 바꾸려면 Site settings에서 바꿀 수 있다고 안내한다.[^61]
설정에서 Change site name을 찾아 이름을 바꾸고 Save하면 주소가 더 직관적으로 바뀐다고 시연한다.[^62]

• 예: “조코딩 페이지” 같은 이름으로 바꿔 저장하면, 바뀐 주소가 생성되는 흐름을 보여준다.[^63]

3.9 “VS Code로 수정하면 실시간 업데이트?” → 아니다, 다시 올려야 한다(재배포)[^24]

여기서 실제로 많이 나오는 질문을 다룬다.[^64]

• [? “VS Code로 수정해도 실시간 업데이트가 되나요?”][^64]
• [= “아닙니다.”][^65]

이유 설명은 “지금 우리가 올려놓은 것”은 내 컴퓨터가 아니라 “바깥(외부 서버)”에 있다는 점이다.[^66]
따라서 수정하면 “다시 올려줘야 된다”고 말한다.[^67]

이어서 실제로 수정 시연을 한다.[^68]

• 로컬 폴더의 index.html을 수정한다.[^68]
• 좀 편하게 여는 방법으로, 파일을 우클릭해서 “연결 프로그램”에서 VS Code로 열 수 있다고 말한다.[^69]
• 예시 문구로 “저는 개발자 유튜버입니다” 같은 텍스트를 추가/수정하고 저장한다.[^70]

그러면 내 컴퓨터에서 볼 때(로컬 라이브 서버 등) 화면은 바뀌지만, 이미 배포된 주소(서버에 있는 주소)는 당연히 그대로라고 확인시킨다.[^71]
이를 반영하려면 Netlify에서 해당 사이트의 Deploy 탭으로 가서, 다시 업로드 박스에 수정한 폴더를 끌어다 놓아 업로딩해야 한다고 설명한다.[^72]
업로드 후 시간이 지나 새로고침하면 “퍼블리시(배포) 성공” 상태가 되고, 주소에서도 수정 내용이 반영되어 보인다고 시연한다.[^73]

[!IMPORTANT] “배포된 웹페이지”는 내 PC 파일이 아니라 “서버의 파일”을 본다
그래서 로컬에서 바꾸는 것은 내 PC에만 적용되고, 전 세계 사용자에게 보이게 하려면 서버에 있는 파일을 바꿔야 한다(=재업로드/재배포)고 설명한다.[^66]

3.10 웹의 원리(HTML을 ‘가져와서 본다’) + ‘기사 조작’ 비유로 로컬 변경과 서버 변경의 차이 설명[^25]

화자는 “원리를 생각하면 편하다”며, 각 사용자가 Netlify 같은 서버에 들어와 HTML 파일을 받아가는 구조라고 다시 한번 정리한다.[^74]

이때 한 시청자 질문(또는 가정)을 받아, “검사 페이지 설정에서 바꿔도 마찬가지냐”는 맥락으로 이야기가 확장된다.[^75]
화자는 이를 네이버 같은 중앙 서버 예시로 연결한다.[^76]

핵심은 다음 논리다.[^77]

• 네이버에도 서버가 있고 그 서버에 HTML이 있을 것이다.[^76]
• 누군가가 개발자도구(검사)로 페이지를 조작해서 “조코딩이 부자” 같은 내용으로 바꿔도, 그건 자기 컴퓨터에서만 바뀐 것이라 다른 사람은 못 본다.[^77]
• 왜냐하면 다른 사람은 여전히 “중앙 서버에 있는 HTML”을 받아오기 때문이다.[^78]
• 진짜 해킹은 “네이버 진짜 서버를 털어서” 중앙 서버의 내용을 조작해야 가능한 것이라고 말한다.[^79]

이를 통해 화자는 “결국 HTML을 받아보는 게 웹”이라고 정리한다.[^80]

[h “로컬에서 보이는 것”과 “서버에서 제공되는 것”을 구분하는 감각이 웹개발/보안 이해의 출발점이라는 메시지를, 개발자도구 조작 vs 서버 해킹의 차이로 설명한다.] [^77]

3.11 자주 나오는 질문: “내 컴퓨터 이미지 파일을 올리면 안 떠요” — 브라우저가 로컬 파일에 접근 못하는 이유와 해결책[^26]

화자는 “자주 나온 질문”으로 이미지 문제를 다룬다.[^81]

• [? “이미지 내 컴퓨터에 있는 거 올리면 안돼요?”][^81]
• [= 안 되는 이유는, 배포된 페이지가 참조하는 것은 ‘내 컴퓨터 경로’가 아니라 ‘서버에서 접근 가능한 이미지 주소(URL)’여야 하기 때문이다.] [^82]

화자는 “브라우저에서 내 컴퓨터에 있는 이미지에 접근 안 된다”고 말하며, 그 이유를 보안 관점에서 짚는다.[^83]

• 브라우저가 내 컴퓨터 파일을 “무작정 읽을 수 있게 되면 위험”하다는 것이다.[^84]

그래서 해결 방법은 이미지를 “어딘가에 올려야 된다”고 설명한다.[^85]
예시로 블로그/카페(티스토리 등)에 이미지를 업로드하면 이미지 주소가 생기고, 그 서버에 올라간 이미지를 “이미지 주소 복사”로 가져와 HTML에 넣으면 이미지가 뜬다고 시연/설명한다.[^86]

또한 “동영상 gif 짤도 올릴 수” 있다고 말하면서,

• GIF는 이미지처럼 주소로 넣을 수 있을 것이고
• 동영상은 video라는 태그가 따로 있다고 언급한다.[^87]

마지막으로 “HTML을 조금만 더 공부하면 이런 식으로 시마적으로(실전처럼) 조작해 볼 수 있겠다”고 말하며 학습을 독려한다.[^88]

3.12 이번 주차 커리큘럼 정리 + 다음 주 예고(도메인/SEO/CSS/JS/API/백엔드)[^27]

영상 말미에서 화자는 커리큘럼을 보여주며 “다음주에 할 것”을 예고한다.[^89]

오늘(1주차)에 한 것을 정리하면 다음과 같다고 말한다.[^90]

• 기본 개념: 코딩이 뭐고 전체적으로 어떻게 되어 있는지[^90]
• 환경 세팅[^90]
• HTML 개념과 학습 방법[^90]
• 디플로이(배포)까지[^90]

그리고 이후 계획을 주차별로 제시한다.[^91]

• 2주차: 도메인 등록, SEO(검색되도록), 남의 CSS도 배워서 더 꾸미기[^91]
• 3주차: 자바스크립트, API 사용[^92]
• 4주차: 백엔드[^92]
• 5주차: (?) 독백엔드/백엔드 심화로 보이는 단계를 구현하겠다고 말하며 마무리한다.[^92]
  +++ 용어 해석 보충(원문 발화가 불명확한 부분) 마지막의 “독백 엔드”는 자동자막/전사 오류로 보이며, 맥락상 “백엔드 심화” 또는 “풀스택 구현” 단계로 확장하겠다는 의미로 들린다.[^92] +++

4. 핵심 통찰[^28]

1. [h 웹개발의 출발점은 ‘빈 파일에서 시작’이 아니라 ‘있는 것을 가져와 수정’하는 능력이라는 관점을 강하게 제시한다.] [^33]

   • 템플릿/오픈소스 활용은 편법이 아니라 생산성의 기본으로 설명된다.[^31]

2. [h 초보자에게 중요한 건 HTML을 전부 외우는 게 아니라, index.html 중심으로 “검색(Ctrl+F) → 수정 → 저장 → 확인” 루프를 돌리는 작업 흐름이다.] [^28]

   • 실행 가능한 행동:
     • 로컬에서 바꿀 텍스트를 화면에서 찾고, 그 문자열을 그대로 검색해 위치를 찾는다.[^27]
     • 작은 변경(타이틀, H1)부터 바꿔 결과를 즉시 확인한다.[^24]

3. [c 디플로이는 ‘파일을 서버에 올려 URL로 접근 가능하게 만드는 것’이며, 웹은 본질적으로 클라이언트가 서버에서 HTML을 받아보는 구조라는 점을 반복 강조한다.] [^47]

   • 실행 가능한 행동:
     • 배포 전: 로컬에서 index.html이 제대로 열리는지 확인한다.[^21]
     • 배포 시: 정적 파일 루트(예: public_html)를 정확히 골라 업로드한다.[^56]

4. [h 배포 후 수정 반영이 안 되는 이유는 “사용자가 보는 것은 내 PC가 아니라 서버의 파일”이기 때문이며, 재업로드가 필요하다는 개념을 확실히 박는다.] [^66]

   • 실행 가능한 행동:
     • 수정 후: Netlify Deploy 화면에서 동일 방식으로 다시 드래그앤드롭 업로드한다.[^72]

5. [h ‘개발자도구로 조작한 화면’은 나만 보는 것이고, 남에게 보이는 것은 서버가 제공하는 HTML이라는 구분이 보안/웹 이해의 핵심이라는 점을 비유로 학습시킨다.] [^77]

6. [h 이미지/미디어는 “내 컴퓨터 경로”가 아니라 “서버에 올라간 URL”이 필요하고, 브라우저의 로컬 접근 제한은 보안 때문이라는 점을 Q&A로 정리한다.] [^83]

   • 실행 가능한 행동:
     • 이미지를 블로그/카페/호스팅에 업로드해 URL을 만든 뒤, HTML에서 그 URL을 사용한다.[^86]

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

템플릿(HTML 템플릿): 누군가 미리 만들어 공개해 둔 웹사이트 골격/디자인 파일 묶음으로, 내려받아 텍스트/이미지/구성을 바꿔 빠르게 웹사이트를 만든다.[^6]
라이선스(MIT License): 템플릿/소스 사용 조건을 정한 규약으로, MIT는 보통 큰 제약이 적다고 소개되지만 세부 조건(예: 저작권 표시 등)은 읽어보라고 안내한다.[^14]
디플로이(Deploy): 내 컴퓨터에 있는 HTML 파일을 외부 서버에 올려, 다른 사람들이 URL로 접속해 HTML을 받아 볼 수 있게 만드는 과정.[^47]
서버/클라이언트: 서버는 HTML을 제공하는 쪽(호스팅 컴퓨터), 클라이언트는 접속해 HTML을 받아 보는 사용자/브라우저 쪽으로 설명한다.[^42]
클라우드 서버: 서버를 운영/제공하는 서비스/업체를 가리키며, AWS·MS·Google Cloud 등이 예로 언급된다.[^48]
Netlify(영상 발화 ‘트리파이’): 정적 사이트를 업로드로 쉽게 배포할 수 있는 서비스로, 오늘 배포 실습에 사용된다.[^50]

---

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

• 제목: 웹개발 이렇게 쉬웠나? 웹사이트 7분만에 개발하고 실전 배포하기[^30]
• 채널: 조코딩 JoCoding[^30]
• 길이: 12분 41초[^30]
• 링크: https://www.youtube.com/watch?v=4mRae9N2pU4[^30]
• 키워드(제공): 웹개발, html, 웹, 웹프로그래밍, 웹사이트, 웹페이지, 개발, 코딩, 프로그래밍, 개발자[^30]

[^6]: @[00:31] "그게 맞습니다" / @[00:37] "…템플릿입니다 올려 놓았구요" [^7]: @[00:41] "html 템플릿… 프리 템플릿… 무료 템플릿… 검색" [^8]: @[00:50] "그래서 우리는 쇼핑 카트 끌고 어떤걸 골라 다 볼 까 만 알면 됩니다" [^9]: @[00:54] "첫번째 있는 요거를 들어가보도록 하겠습니다" [^10]: @[01:02] "…라이센스가 있습니다" [^11]: @[01:14] "…마트에서 유료 인데 그냥… 유료결제 안하고 가면 되잖아요" [^12]: @[01:16] "이거는 꽁짜 인 것만 이렇게 봐야 됩니다" [^13]: @[01:19] "mit 라이센스 이렇게 붙어 있는거 있죠" [^14]: @[01:24] "…보통 mit… 저작권의 큰 문제가 없다" [^15]: @[01:31] "…링크만 남겨 주세요… 잘 읽어보시고" [^16]: @[01:33] "…보통 큰 문젠 없고요" [^17]: @[01:37] "다운로드 버튼을 누르시면 이 템플릿이…" [^18]: @[01:45] "…존도 라는 템플릿… 폴더가 생겼죠" [^19]: @[01:50] "…퍼블릭 html… 템플릿 마다 다를 수 있습니다" [^20]: @[02:01] "인덱스 점… html…" [^21]: @[02:08] "…이렇게 웹사이트가… 나와있죠" [^22]: @[02:13] "vs 코드를 이용해서… 오픈 폴더…" [^23]: @[02:36] "코드가 엄청… 근데 html을… 이해…" [^24]: @[02:42] "…head 안에 title… 조 코딩 의 홈페이지…" [^25]: @[02:51] "…라이브 서버로 실행… 홈페이지로 바뀌었죠" [^26]: @[02:55] "헬로 i'm 존도… 조 코딩으로…" [^27]: @[03:00] "…존도 가 어딨을까… 복사…" [^28]: @[03:06] "…컨트롤 f… 검색창…" [^29]: @[03:06] "…존 도우를 검색… h1 태그…" [^30]: @[03:17] "컨트롤 s… 새로고침… 조 코딩" [^31]: @[03:22] "오픈 소스를 가져 온다는 것… 의미…" [^32]: @[03:29] "…쇼핑 카트… 주어 담은 다음… 기본만 이해… 찾아서 바꾸면…" [^33]: @[03:37] "직접 바닥부터 짠다 는 거의 없고… 가져와서… 꾸미면… 코딩" [^34]: @[03:40] "이제 디플로이…" [^35]: @[03:48] "…전문용어로 디플로이 라고 부릅니다" [^36]: @[03:54] "지금은 어떤 상태야 내 컴퓨터… html 파일…" [^37]: @[04:01] "…다른 사람들이 들어와야 의미…" [^38]: @[04:06] "…usb… 노트북 들고 다니면서…" [^39]: @[04:13] "…내 컴퓨터에만 있으면 의미가 없으니까 두가지 방법…" [^40]: @[04:19] "…내 컴퓨터 자체를 서버로 만들어서… 받아 갈수 있게…" [^41]: @[04:31] "1번 방법은 내컴퓨터 를 항상 켜…" [^42]: @[04:37] "…클라이언트… 내 컴퓨터가 서버… html을 가져 가세요…" [^43]: @[04:50] "…인터넷 항상… 컴퓨터 전원… 뜨거워지고…" [^44]: @[04:25] "…외부 서버를 빌리는 방법…" [^45]: @[04:58] "…영화… 미션 임파… 해커…" [^46]: @[05:14] "…전문적인 서버… 공간 빌려서… 사람들이… html 가져가서…" [^47]: @[05:27] "…내 컴퓨터… 외부 24시간… 서버에 얹어… 사람들이… 볼 수… 디플로" [^48]: @[05:36] "…클라우드 서버 라…" [^49]: @[05:40] "…aws… 마이크로소프트… 구글 클라우드…" [^50]: @[05:54] "…무료서비스… 오늘은… 트리 파이… 디플로이…" [^51]: @[05:57] "…아무데나 해도 됩니다" [^52]: @[06:01] "…주소로 접속… 사인 업… 회원가입…" [^53]: @[06:13] "…사이트… 저는… 많이 디플로…" [^54]: @[06:22] "…해야 될 일은 굉장히 간단합니다" [^55]: @[06:25] "…인덱스… 있는 이 폴더… 퍼블릭 html…" [^56]: @[06:38] "퍼블릭 html… 폴더를… 끌어다가… 떨어뜨려…" [^57]: @[06:42] "…업로딩… 주소가 생겼구요…" [^58]: @[07:01] "…누구나… 접속… 똑같은 화면…" [^59]: @[07:09] "이제 전세계의 공개 가능한 웹 페이지를 만들었습니다" [^60]: @[07:13] "…아르헨티나… 친구에게 보내도…" [^61]: @[07:17] "…url 좀 지저분… 바꾸려면… 사이트 세팅…" [^62]: @[07:25] "…체인지 사이트 레이미… 이름을 바꿀 수…" [^63]: @[07:33] "…세이브… 주소 바뀌게…" [^64]: @[07:48] "…vs 코드로 수정해도 실시간 업데이트가 되나요" [^65]: @[07:51] "는 아닙니다" [^66]: @[07:55] "…올려 놓은 거… 우리 컴퓨터 여기에 없습니다… 바깥에 있습니다" [^67]: @[08:09] "…수정을 하면… 다시 올려 줘야 됩니다" [^68]: @[08:12] "…폴더에 수정을 해 보겠습니다" [^69]: @[08:17] "…우클릭… 연결 프로그램… 비쥬얼 스튜디오 코드…" [^70]: @[08:23] "저는 개발자 유튜버 입니다… 저장…" [^71]: @[08:34] "…내 컴퓨터… 바뀌겠죠… 근데… 서버에 있는 주소는… 그대로…" [^72]: @[08:43] "…프로젝트… 디플로이… 다시… 네모박스… 올리면…" [^73]: @[09:14] "…업로딩… 퍼블리시티… 성공… 수정 된 내용…" [^74]: @[09:33] "…각각… 들어와서 html 파일을 받아 가는…" [^75]: @[09:38] "…검사 페이지 설정에서 바꿔도…" [^76]: @[09:43] "…네이버… 서버… html…" [^77]: @[09:54] "…개인 혼자서만 조작… 이 사람만 볼 수…" [^78]: @[10:04] "…이 사람이… html 받아오기 때문에… 볼 수는 없습니다" [^79]: @[10:34] "…진짜 해킹… 네이버 진짜 서버를 털어서… 조작…" [^80]: @[10:31] "…결국에 html 받아보는게… 웹 입니다" [^81]: @[10:38] "자주 나온 질문… 이미지 내 컴퓨터에 있는거 올리면 안되요" [^82]: @[10:43] "…여기 있는 주소는 따로 이미지 주소가…" [^83]: @[10:47] "…브라우저에서 내 컴퓨터에 있는 이미진 접근 안되요" [^84]: @[11:06] "…브라우저가… 내 컴퓨터에 있는 파일… 읽을 수… 위험…" [^85]: @[11:11] "…이미지를 어딘가에 올려야 됩니다" [^86]: @[11:21] "…티스토리… 카페… 이미지 주소 복사… 넣게 되면…" [^87]: @[11:43] "…동영상 gif… 비디오 라는 태그…" [^88]: @[11:57] "…html 을 조금만 더 공부… 조작…" [^89]: @[12:02] "…커리큘럼… 다음주…" [^90]: @[12:06] "…정리… 기본 개념… 환경 세팅… html… 디플로이… 1주차…" [^91]: @[12:23] "2주차에는 도메인 등록 seo… css…" [^92]: @[12:29] "3주차… 자바스크립트… api… 4주차… 백엔드… 5주차…" [^30]: "사용자 제공 메타데이터: 제목/채널/길이/키워드/링크"