Post

웹의 역사와 발전

Posted
By 링크드인
12 min read
웹의 역사와 발전

2024-09-24 오전

<!DOCTYPE html>

웹의 역사와 발전

🌐 웹의 역사와 발전

🌐 The History & Evolution of the Web

🚀 Birth of the Web

(1990, Tim Berners-Lee)

      - HTTP (HyperText Transfer Protocol): Defined as a protocol to transfer hypertext documents over the internet. It was designed to allow communication between web servers and clients (browsers), using the underlying TCP/IP protocol suite.
      - HTML (HyperText Markup Language): Created to provide structure and formatting for web pages, enabling the hyperlinking of documents.
      - WorldWideWeb: The first web browser and editor, developed by Berners-Lee, alongside the CERN HTTPd, the first web server.
      - By 1991, the first website was launched, marking the beginning of the public-facing World Wide Web.

🖥️ Evolution of Frontend and Web Browsers

  • The Three Pillars of Frontend Development:
    • HTML (1991): Provides the skeleton and structure for a webpage's Content.
    • CSS (1996, W3C): A style sheet language to define the Presentation, layout, and visual appearance of web pages. It separated content from design, improving maintainability.
    • JavaScript (1995, Netscape 2.0): Introduced as a scripting language to add interactivity and Behavior to web pages, enabling dynamic updates without reloading.
  • The Browser Wars:
    • Netscape Navigator 🦊 vs Internet Explorer 🖥️:
      • In the mid-90s, Netscape Navigator was the dominant web browser, but Internet Explorer (IE) quickly overtook it as Microsoft bundled IE with Windows, giving it a major market advantage.
      • This competition led to rapid development in web technologies, though it also introduced browser compatibility issues, as both browsers deviated from web standards.
  • JavaScript Performance and Client-Side Revolution:
    • Server-Side Rendering (SSR): Early websites relied on server-side processing for rendering content, meaning that each user request required a full page reload from the server, causing slower user experiences.
    • Client-Side Rendering (CSR) and AJAX (Asynchronous JavaScript and XML): In the early 2000s, AJAX was introduced, allowing pages to load data dynamically without full refreshes, improving speed and interactivity.
    • jQuery (2006): This popular JavaScript library simplified tasks like HTML document traversal, event handling, and AJAX interactions, making it easier for developers to create complex, interactive web pages. It became the de facto standard for web development in the mid-2000s.
  • IE vs Google Chrome:
    • Internet Explorer was notorious for its proprietary features like ActiveX, which created security issues and went against web standards.
    • Google Chrome 🚀, launched in 2008, introduced the V8 JavaScript Engine:
      • This Just-In-Time (JIT) compiler dramatically improved JavaScript execution speed, enabling modern web applications.
      • Chrome’s fast and secure browsing experience, coupled with its adherence to web standards, led it to overtake Internet Explorer and Firefox in market share.

🔥 The Rise of the V8 Engine and Modern JavaScript Frameworks

- The V8 engine's capabilities powered modern JavaScript frameworks and libraries that revolutionized web development:
        - Single Page Applications (SPA): Frameworks like Angular (2010), React (2013), and Vue.js (2014) made it possible to build fast, interactive applications that don't require full-page reloads. SPAs enable a seamless user experience with dynamic content updates.
        - Node.js (2009): Built on Chrome's V8 engine, it allowed JavaScript to be run on the server side, enabling the use of a single language for both client and server development. This opened up new possibilities for full-stack JavaScript development.

📱 The Mobile Web & Responsive Design

  • As smartphones became ubiquitous in the late 2000s, the web evolved to cater to mobile users:
    • Responsive Web Design (2010): Ethan Marcotte introduced the concept, enabling web pages to adapt their layout based on screen size using media queries in CSS, ensuring a smooth user experience across devices.
    • Progressive Web Apps (PWA): PWAs combine the best features of web and native apps, offering offline functionality, push notifications, and faster load times, providing an app-like experience on the web.

🤖 The AI Era: Transforming the Web

MS (Bing) vs Google (Search & Chrome)

  • Microsoft's Bold AI Integration:
    • In an effort to compete with Google, Microsoft integrated ChatGPT into its search engine Bing:
      • This integration allows Bing users to engage with AI-powered chat functionality, significantly enhancing the user experience with conversational search and content generation features.
      • As a result, Bing's share of the U.S. search market increased to approximately 18%.
      • Other AI features include auto-completing text, generating responses to user queries, and even writing assistance.
  • Google's Response with AI:
    • Google Lens 📸: Launched as a visual search tool that allows users to search based on images rather than text, using advanced AI for image recognition.
    • Gemini AI 🧠: Google's next-generation AI project, integrated into Chrome and its search engine, allows users to conduct chat-based queries by using the @ symbol in the URL bar, similar to chat with a search engine.
    • Bard AI: Google's experimental conversational AI, positioned to compete with Microsoft’s ChatGPT integration, offering users natural, dialogue-driven search results.

🌐 WEB의 역사 & 발전

🚀 WEB 탄생

(1990, 팀 버너스 리)

        - HTTP (HyperText Transfer Protocol): 하이퍼텍스트 문서를 인터넷 상에서 전송하기 위한 통신 규약으로 정의되었으며, 하위 프로토콜인 TCP/IP 위에서 동작.
        - HTML (HyperText Markup Language): 웹 페이지의 구조와 형식을 제공하는 언어로 개발되어 문서 간 하이퍼링크 기능을 지원.
        - WorldWideWeb: 팀 버너스 리가 개발한 최초의 웹 브라우저 겸 에디터이며, CERN HTTPd는 최초의 웹 서버.
        - 1991년, 최초의 웹사이트가 공개되며 World Wide Web 시대가 열림.

🖥️ 프론트엔드와 WEB 브라우저의 발전

  • 프론트엔드 개발의 3대 축:
    • HTML (1991): 웹 페이지의 콘텐츠를 구조화하는 마크업 언어.
    • CSS (1996, W3C): 웹 요소의 시각적 표현을 정의하는 스타일 시트 언어로, 콘텐츠와 디자인을 분리하여 유지보수성을 향상.
    • JavaScript (1995, Netscape 2.0): 웹 페이지에 동작을 추가하는 스크립트 언어로, 리로드 없이 동적 업데이트 가능.
  • 브라우저 전쟁:
    • Netscape Navigator 🦊 vs Internet Explorer 🖥️:
      • 1990년대 중반 Netscape Navigator가 웹 브라우저 시장을 선도했으나, Internet Explorer (IE)가 윈도우와의 번들 제공으로 빠르게 점유율을 높이며 시장을 장악.
      • 이 경쟁은 웹 기술 발전을 촉진했지만, 두 브라우저 간 웹 표준 호환성 문제를 일으킴.
  • JavaScript 성능과 클라이언트 측 혁신:
    • 서버 사이드 렌더링 (SSR): 초기 웹사이트는 서버 측에서 콘텐츠를 처리하여 렌더링했기 때문에, 사용자 요청 시마다 페이지 전체를 새로고침해야 했고 이는 속도 저하를 초래.
    • 클라이언트 사이드 렌더링 (CSR)과 AJAX (Asynchronous JavaScript and XML): 2000년대 초반 AJAX가 도입되어 전체 페이지 리로드 없이 동적 데이터 로딩이 가능해져 속도와 사용자 경험이 크게 향상됨.
    • jQuery (2006): HTML 문서 탐색, 이벤트 처리, AJAX 상호작용을 간편하게 처리하는 라이브러리로, 복잡한 상호작용을 쉽게 구현하게 해주어 2000년대 중반 웹 개발의 표준이 됨.
  • IE vs Google Chrome:
    • Internet Explorer는 ActiveX와 같은 비표준 기능으로 인해 보안 문제와 웹 표준 위반으로 비판을 받음.
    • Google Chrome 🚀, 2008년에 출시되며 V8 JavaScript 엔진을 도입:
      • Just-In-Time (JIT) 컴파일러가 JavaScript 실행 속도를 크게 향상시켜 현대 웹 애플리케이션 개발을 가능케 함.
      • 빠르고 안전한 브라우징 경험과 웹 표준 준수로 인해 Chrome은 Internet Explorer와 Firefox를 제치고 브라우저 시장에서 우위를 점함.

🔥 V8 엔진과 현대 JavaScript 프레임워크의 부상

- V8 엔진의 성능 향상은 웹 개발을 혁신하는 JavaScript 프레임워크와 라이브러리를 탄생시킴:
          - 단일 페이지 애플리케이션 (SPA): Angular (2010), React (2013), Vue.js (2014)와 같은 프레임워크는 동적이고 빠른 웹 애플리케이션을 구축할 수 있게 해줌. SPA는 전체 페이지 리로드 없이 콘텐츠를 동적으로 업데이트해 원활한 사용자 경험을 제공.
          - Node.js (2009): Chrome의 V8 엔진을 기반으로 만들어진 Node.js는 서버 측에서도 JavaScript 실행을 가능하게 하여 클라이언트와 서버에서 동일한 언어를 사용할 수 있게 함. 이를 통해 풀스택 JavaScript 개발이 가능해짐.

📱 모바일 웹과 반응형 디자인

  • 2000년대 후반 스마트폰이 대중화되면서 웹은 모바일 사용자에게 최적화되기 시작:
    • 반응형 웹 디자인 (2010): Ethan Marcotte가 제안한 개념으로, 미디어 쿼리를 활용하여 화면 크기에 따라 웹 페이지 레이아웃을 유동적으로 변경, 다양한 기기에서 원활한 사용자 경험 제공.
    • 프로그레시브 웹 애플리케이션 (PWA): 웹과 네이티브 앱의 장점을 결합하여 오프라인 기능, 푸시 알림, 빠른 로딩 시간 등을 제공, 앱 같은 사용자 경험을 웹에서 가능하게 함.

🤖 AI 시대: 웹의 변혁

MS (Bing) vs Google (Search & Chrome)

  • 마이크로소프트의 대담한 AI 통합:
    • 구글과의 경쟁에서 우위를 점하기 위해 마이크로소프트는 ChatGPT를 Bing에 통합:
      • 이 통합으로 Bing 사용자는 AI 기반의 대화형 검색 기능을 이용할 수 있게 되었고, 콘텐츠 생성 및 브라우징 기능을 개선함.
      • 이러한 AI 통합 덕분에 Bing은 미국 검색 시장 점유율을 18%까지 끌어올림.
      • 자동 텍스트 완성, 사용자 질문에 대한 응답 생성, 글 작성 보조 등의 AI 기능을 제공.
  • 구글의 AI 대응:
    • Google Lens 📸: 텍스트 기반 검색 대신 이미지를 활용한 시각 검색 도구로, 이미지 인식 기술을 활용해 더욱 직관적인 검색 경험을 제공.
    • Gemini AI 🧠: 구글의 차세대 AI 프로젝트로, Chrome과 검색 엔진에 통합되어 `@` 기호를 사용하여 URL 창에서 대화형 쿼리를 실행 가능.
    • Bard AI: 구글의 실험적인 대화형 AI로, 마이크로소프트의 ChatGPT 통합에 대응하며 자연스러운 대화형 검색 결과 제공을 목표로 함.
CS, WEB
CS WEB WAS 웹 서비스 . . .
This post is licensed under CC BY 4.0 by the author.