02-3 웹과 프로그래밍 언어의 역사
1 / 1
2회 · 셋째 차시第 2 次课 · 第 3 课时

웹과 프로그래밍 언어의 역사Web 与编程语言的历史

익숙한 주소 한 줄을 따라가며 인터넷과 웹을 구분하고, 사람이 컴퓨터에 일을 적는 방법이 천공카드에서 AI까지 어떻게 달라졌는지 살펴봅니다.沿着熟悉的一行网址区分互联网与 Web,并观察人类向计算机表达任务的方式如何从穿孔卡发展到 AI。
이전 차시 · 2-2. 숫자와 변수로 계산하기
다음 차시 · 3-1. 실습 환경 준비와 비교 결과로 판단하기
上一课时 · 2-2. 用数字与变量进行计算
下一课时 · 3-1. 准备实践环境并用比较结果进行判断
1. 주소창에서 시작1. 从地址栏开始02-3

www는 무엇의 줄임말일까?www 是什么的缩写?

●www.google.co.kr
전 세계의 여러 문서가 링크로 서로 연결된 모습
서로 다른 문서가 링크로 이어져 전 세계에 거미줄처럼 펼쳐진 정보 공간不同文档通过链接连接,在全世界形成如蜘蛛网般的信息空间
WWW= World Wide Web
World전 세계全世界
Wide넓게 퍼진广泛分布
Web거미줄처럼 연결된 정보像网一样连接的信息

Web은 본래 ‘거미줄’이라는 뜻입니다. 서로 다른 문서가 링크로 이어진 모습을 거대한 거미줄에 빗대어 World Wide Web이라고 불렀습니다.Web 本来就有“蜘蛛网”的意思。不同文档通过链接相连,像一张覆盖世界的巨网,因此称为 World Wide Web。

주소에서 www가 보이지 않는다면?地址中看不到 www 时呢?

초기에는 웹 서버임을 나타내려고 www를 자주 붙였습니다. 지금은 www가 없어도 웹사이트에 접속할 수 있습니다.早期常用 www 表示 Web 服务器。如今没有 www 也能访问网站。

2. 인터넷과 웹2. 互联网与 Web02-3

인터넷은 연결망이고, 웹은 그 위의 정보 공간이다互联网是连接网络,Web 是其上的信息空间

인터넷互联网서로 다른 컴퓨터와 네트워크가 정보를 주고받는 연결 기반让不同计算机与网络交换信息的连接基础
WWW · Web주소와 링크로 정보를 찾는 공간通过地址与链接查找信息的空间
파일 전송文件传输

웹은 인터넷에서 사용하는 여러 서비스 가운데 하나입니다.Web 是互联网众多服务中的一种。

1969

ARPANET

UCLASRIUCSBUTAH

미국 국방부 산하 ARPA가 지원하고 대학·연구기관을 연결한 연구망由美国国防部下属 ARPA 支持,连接大学与研究机构的研究网络

1989

WWW

1989년 CERN의 WWW 제안서

CERN에서 연구자료 공유를 위해 제안
1990 첫 서버·브라우저
1993 자유 공개
在 CERN 为共享研究资料而提出
1990 首个服务器与浏览器
1993 自由开放

ARPANET ≠ 인터넷ARPANET은 초기 연구망 가운데 하나이고, 오늘날의 인터넷은 수많은 네트워크가 서로 연결된 ‘네트워크의 네트워크’입니다.ARPANET 是早期研究网络之一;今天的互联网则是许多网络互相连接成的“网络之网”。
3. 웹의 발전3. Web 的发展02-3

웹은 문서를 읽는 곳에서 프로그램을 사용하는 곳으로 넓어졌다Web 从阅读文档的空间,扩展为使用程序的空间

처음에는 HTML로 문서의 내용과 구조를 만들었습니다. CSS가 색상과 배치를 더했고, JavaScript가 클릭과 입력에 화면이 반응하도록 만들었습니다. 여기에 서버·데이터베이스·API가 연결되면서 오늘날의 웹은 설치형 프로그램처럼 다양한 일을 하는 웹 애플리케이션으로 넓어졌습니다.最初用 HTML 构成文档内容与结构;CSS 加入颜色和版面;JavaScript 让页面能对点击与输入作出反应。再连接服务器、数据库与 API 后,今天的 Web 扩展成了像安装式程序一样完成各种工作的 Web 应用程序。

HTML 문서 구조, CSS 디자인, JavaScript 상호작용, 서버와 데이터베이스가 연결된 웹 애플리케이션으로 이어지는 네 단계
HTML·CSS·JavaScript에 서버와 데이터가 연결되며 웹에서 할 수 있는 일이 넓어졌다HTML、CSS、JavaScript 再连接服务器与数据,扩展了 Web 能完成的工作
HTML글·링크·이미지의 구조와 내용文字、链接与图片的结构和内容
CSS색상·크기·간격·배치와 디자인颜色、大小、间距、版面与设计
JavaScript클릭·입력에 반응하고 화면을 변화시킴响应点击与输入,并改变画面
웹 애플리케이션Web 应用程序서버·데이터베이스·API가 연결된 서비스连接服务器、数据库与 API 的服务
참고 · 네 단계는 기술의 역할을 나누어 본 것이다参考 · 四个阶段是为了区分技术的作用

HTML·CSS·JavaScript가 차례로 완전히 교체된 것은 아닙니다. 오늘날의 웹 애플리케이션도 세 기술을 함께 사용하며, 여기에 서버·데이터베이스·API 같은 기능을 연결합니다.HTML、CSS 与 JavaScript 并不是依次被完全替代。今天的 Web 应用程序仍会一起使用这三种技术,并连接服务器、数据库与 API 等功能。

4. 주소 앞의 통신 약속4. 地址前的通信约定02-3

https://는 주소에 있지만 브라우저가 감춰 보여 주기도 한다https:// 本来在地址中,但浏览器有时会隐藏显示

실제 전체 주소完整地址https://www.google.co.kr
주소창에 보일 수 있는 모습地址栏中可能看到的样子www.google.co.kr

주소창에서 https://가 안 보이더라도 없어진 것은 아닙니다. 주소창을 누르거나 주소를 복사하면 전체 주소를 확인할 수 있습니다.地址栏中看不到 https://,并不表示它不存在。点击地址栏或复制地址时,可以确认完整地址。

HTTP

브라우저의 요청과 서버의 응답을 어떤 방식으로 주고받을지 정한 약속规定浏览器的请求与服务器的响应如何交换的约定

HTTPS

HTTP 통신을 암호화해 보호하는 방식对 HTTP 通信进行加密保护的方式

4. 주소 앞의 통신 약속4. 地址前的通信约定02-3

https://는 주소에 있지만 브라우저가 감춰 보여 주기도 한다https:// 本来在地址中,但浏览器有时会隐藏显示(이어서)(续)

HTTPS의 S는 주고받는 정보를 지킨다는 뜻입니다. HTTP와 HTTPS의 차이를 그림으로 보면 분명합니다.HTTPS 的 S 表示保护收发的信息。用图来看 HTTP 和 HTTPS 的区别,就很清楚了。

브라우저와 서버 사이의 정보를 HTTPS가 보호하는 모습
HTTPS는 브라우저와 서버가 주고받는 정보를 암호화해 보호합니다.HTTPS 对浏览器与服务器之间交换的信息进行加密保护。

브라우저는 주소를 보기 쉽게 일부 감춰 보여 줄 수 있습니다. 표시를 감춘 것과 주소에서 없어진 것은 다릅니다.浏览器可能为了易读而隐藏地址的一部分。隐藏显示与从地址中消失并不是一回事。

5. 요청과 응답5. 请求与响应02-3

요청 하나에는 응답 하나가 돌아온다一次请求会得到一次响应

브라우저는 우리가 서버와 대화하는 창구이고, 서버는 요청받은 문서나 데이터를 찾아 응답하는 컴퓨터 또는 프로그램입니다.浏览器是我们与服务器交流的窗口,服务器则是查找并返回所需文档或数据的计算机或程序。

브라우저浏览器주소·검색어를 보낸다发送地址或搜索词
① HTTPS 요청请求 →← ② HTTPS 응답响应
서버服务器자료를 찾아 돌려준다查找资料并返回
1요청을 보낸다发送请求
→
1응답이 돌아온다返回响应
→
끝그 한 번의 주고받기가 끝난다这一轮交换结束

웹페이지 하나를 열 때 그림·글꼴·데이터 때문에 요청과 응답이 여러 쌍 생길 수 있습니다. 그래도 각 쌍은 요청 한 번과 응답 한 번으로 생각하면 됩니다.打开一个网页时,图片、字体和数据可能产生多组请求与响应。但每一组仍可看作一次请求和一次响应。

참고 · 실시간 서비스는?参考 · 实时服务呢?

보통은 한 번의 요청에 한 번 응답하지만, 채팅처럼 연결을 유지하며 계속 주고받는 WebSocket 같은 방식도 있습니다.通常一次请求会得到一次响应,但聊天等服务也会使用 WebSocket,保持连接并持续交换数据。

6. 사람이 명령을 적어 온 방법6. 人类记录指令的方式02-3

천공카드의 구멍에서 사람이 읽는 코드까지从穿孔卡的孔洞到人能阅读的代码

천공카드를 기계에 넣는 모습
명령과 데이터를 구멍의 위치로 기록했던 천공카드 · IBM用孔的位置记录指令与数据的穿孔卡 · IBM

천공카드는 프로그래밍 언어가 아닙니다. 명령과 데이터를 구멍의 위치로 기록해 컴퓨터에 넣던 물리적인 입력 매체입니다.穿孔卡不是编程语言。它是把指令与数据记录在孔洞位置后送入计算机的物理输入介质。

카드를 잘못 뚫거나 순서를 섞으면 프로그램도 잘못되었습니다.卡片打孔错误或顺序混乱,程序也会出错。

천공카드→기계어→어셈블리어→고급 언어→AI에 자연어 요청

사람이 컴퓨터에 가까운 표현을 많이 적던 방식에서, 도구가 사람의 표현을 컴퓨터가 실행할 코드로 바꾸는 방식으로 이동했습니다.从人必须写大量接近计算机的表达,逐渐走向由工具把人的表达转换为可执行代码。

7. 필요한 일과 언어7. 需求与语言02-3

언어는 유행보다 해결하려는 일에서 시작됐다语言从要解决的问题出发,而不只是流行

∑
1957 · FORTRAN

과학·수학·공학 계산科学、数学与工程计算

◇
1958 · ALGOL

알고리즘을 구조적으로 표현结构化表达算法

▤
1959 · COBOL

기업 업무·대량 자료·금융 시스템企业业务、大量数据与金融系统

▦
1972 · C

운영체제와 시스템 프로그램操作系统与系统程序

+
1985 · C++

첫 상용 공개. 이후 고성능 프로그램·게임 엔진에 널리 사용首次商业发布,后来广泛用于高性能程序与游戏引擎

Py
1991 · Python

읽기 쉬운 범용 언어·자동화·데이터·AI易读的通用语言、自动化、数据与 AI

J
1995 · Java

여러 환경에서 실행되는 서버·기업용 프로그램可在多种环境运行的服务器与企业程序

JS
1995 · JavaScript

브라우저와 웹페이지의 움직임·상호작용浏览器与网页的动态和交互

#
2000 · C#

응용 프로그램·Unity 게임应用程序与 Unity 游戏

Aa
현재 · AI现在 · AI

자연어 요청을 기존 언어의 코드 작성·수정으로 연결把自然语言请求连接到现有语言的代码编写与修改

연도와 쓰임을 구분한다区分出现年份与后来用途

1985년은 C++의 첫 상용 공개 시점입니다. 그때부터 게임에 쓰였다는 뜻은 아닙니다. 또한 Java와 JavaScript는 이름이 비슷하지만 서로 다른 언어입니다.1985 年是 C++ 首次商业发布的时间,并不表示它从那一年起就用于游戏。Java 与 JavaScript 名字相似,但属于不同语言。

8. 같은 계산, 다른 표현8. 同一计算,不同表达02-3

2와 3을 더하는 방법도 사람에게 가까워졌다连“2 加 3”的表达也越来越接近人

기계어 개념机器语言概念10110000 00000010 00000100 00000011 …
어셈블리어汇编语言mov eax, 2
add eax, 3
FORTRANPRINT *, 2 + 3
Pythonprint(2 + 3)
자연어 요청自然语言请求2와 3을 더한 결과를 보여 주는 Python 프로그램을 만들어 줘.
저수준 언어低级语言

하드웨어가 처리하는 방식에 가깝다. 세밀하게 다룰 수 있지만 사람이 읽기 어렵다.更接近硬件处理方式,控制细致,但人较难阅读。

고수준 언어高级语言

사람의 식과 문장에 가까워 읽고 쓰기 쉽다. 실행 가능한 형태로 바꾸는 과정이 필요하다.更接近人的公式与句子,易读易写,但需要转换为可执行形式。

위의 0과 1은 특정 컴퓨터에서 그대로 실행할 실제 프로그램이 아니라, 기계어가 사람에게 얼마나 읽기 어려운지 보여 주는 개념 예시입니다.上面的 0 和 1 不是可直接执行的具体程序,而是用来展示机器语言对人有多难读的概念示例。

9. 자연어와 AI9. 自然语言与 AI02-3

AI는 새 프로그래밍 언어가 아니라 연결 도구다AI 不是新编程语言,而是连接工具

과거에는 사람이 컴퓨터가 이해할 표현을 직접 많이 적어야 했습니다. 지금은 자연어로 원하는 일을 설명하면 AI가 Python 같은 프로그래밍 언어의 코드를 작성할 수 있습니다.过去,人必须亲自写下大量计算机能理解的表达。现在,用自然语言说明想做的事,AI 就能编写 Python 等编程语言的代码。

사람의 요청人的请求

“점수의 평균을 계산해 줘.”

→
AI

요청을 코드로 연결把请求连接到代码

→
Pythonprint((82+91+76)/3)
→
컴퓨터 실행计算机执行83.0
그래서 설명하는 힘이 중요해졌다因此,说明清楚变得更重要

무엇을 만들지, 어떤 결과가 필요한지, 무엇을 확인해야 하는지 분명하게 말할수록 AI와 더 정확하게 일할 수 있습니다.越能清楚说明要做什么、需要什么结果、应检查什么,就越能准确地与 AI 协作。

AI가 코드를 작성해도 실제로 실행되는 것은 프로그래밍 언어의 코드입니다. AI는 자연어와 코드 사이를 이어 주는 새로운 입구입니다.即使代码由 AI 编写,真正执行的仍是编程语言代码。AI 是连接自然语言与代码的新入口。

10. 정리10. 小结02-3

주소 한 줄에서 AI까지 세 문장으로 정리한다用三句话串起网址与 AI

이번 차시에서 남길 것本课时要记住的
  1. 인터넷은 컴퓨터와 네트워크를 연결하는 기반이고, WWW는 그 연결을 이용해 정보를 주소와 링크로 보는 방식이다.互联网是连接计算机与网络的基础,WWW 是利用这种连接通过地址和链接查看信息的方式。
  2. 브라우저가 HTTP·HTTPS로 요청하면 서버가 응답한다.浏览器通过 HTTP·HTTPS 发出请求,服务器作出响应。
  3. 프로그래밍은 천공카드와 기계어에서 고급 언어로 발전했고, 지금은 AI에게 자연어로 코드 작성을 요청할 수 있다.编程从穿孔卡与机器语言发展到高级语言,如今还可以用自然语言请求 AI 编写代码。
확인하기确认一下
  1. www는 무엇의 줄임말인가?www 是什么的缩写?
  2. ARPANET과 WWW는 각각 무엇을 연결하거나 공유하려 했는가?ARPANET 与 WWW 分别想连接或共享什么?
  3. 같은 계산을 어셈블리어, Python, 자연어로 표현하면 무엇이 달라지는가?同一计算用汇编、Python 与自然语言表达时,什么发生了变化?
다음 차시下一课时

다음에는 두 값을 비교한 결과가 참인지 거짓인지 확인하고, 그 결과로 프로그램이 판단하는 방법을 살펴봅니다.下一课将比较两个值,确认结果是真还是假,并观察程序如何据此判断。