The Yellow Lion King 데이터와 함께 살아가기

지난 시간의 내용을 요약하면 웹 어플리케이션은 웹브라우저, 인터넷, 웹서버 등으로 구성되어 클라이언트(PC)에서 브라우저를 통해 사용할 수 있는 시스템을 웹 어플리케이션 시스템이라고 정의 했습니다. 클라이언트는 브라우저를 통해서 데이터의 전송과 수신을 담당하는데 이때 주소창에 입력하는 내용이 전송 내용이고 수신 내용으로는 HTML, CSS, JavaScript 등의 데이터가 수신된다고 하였습니다.
이처럼 HTML, CSS, JavaScript, 그리고 서버에서 동작하는 프로그램 언어인 자바(JAVA)나 파이썬(Python) 같은 언어들이 웹 어플리케이션(Web Application) 시스템에 사용되는 언어 입니다.
이번 시간에는 이러한 언어들에 대한 개요를 설명해 드리겠습니다.

자 시작해 보겠습니다.

목표 및 범위

• 목표

• Web Application 의 전반적인 구조를 이해하고,
• 필요한 기술요소를 알 수 있으며,
• 이에 필요한 언어들의 특징을 이해하고 설명할 수 있다. (이번 포스팅)

• 범위

• 전반적인 구조와 기술요소, 언어 특징에 대한 이해를 목표로하며,
• 각 언어에 대한 실제적인 코딩 실력을 키우는 것은 이후 포스팅에서 진행합니다.

한식당 - 웹앱

여러분이 자주 가는 하나의 한식당 가게를 생각해 보시지요. 가게는 크게 홀과 주방으로 나누어 집니다. 직원은 4 명이 있고 각자 맏은 역할이 아래와 같다고 가정해 보겠습니다.

• 하태민님 : 홀 담당 매니저 - 홀 전체의 구성을 관리하고 연계함
• 추신스 : 홀 셋팅 직원 - 손님에 따라 다른 색, 크기, 모양의 테이블 등 환경 셋팅 담당
• 자비스 : 홀 서빙 직원 - 물/반찬 추가 요청 직접 수행, 식사 배달
• 파이썬 : 주방장 - 재료를 이용해서 주문받은 음식을 요리해서 전달

등장인물 직원 소개

하태민님

식당 문을 열고 들어가면 식당 전체가 보이는 계산대에서 하태민님이 서 있습니다. 손님이 보는 관점에서 식당 전체를 관리하는 사람이 하태민님 입니다.
하태민님은 홀이 손님에게 깔끔하고 잘 보여질 수 있게 하기위해 식당 협회에서 정한 기준을 잘 알고 이를 준수하는 직원으로 식당 매니저 5년차의 정규 직원입니다.
매니저로서 손님에게 보여지는 식당 내 전체적인 구성과 배치, 설정을 관장 합니다.즉, 매장 내 테이블이나 의자, 메뉴판 등의 필요 여부를 정하고 위치와 크기, 모양, 색상 등을 정할 수 있습니다.
제일 오래된 직원으로 추신스와 자비스를 품을 수 있는 오랜 베테랑 입니다.

추신스

사실 추신스 직원은 하태민님의 소개로 식당에 취직하게 되었습니다.
하태민님 혼자서 손님의 기호에 맞추어 깔끔한 매장을 유지하기 위해 매장 내 테이블과 의자 등의 배치와 크기, 색상을 자주 바꾸는데 너무 힘 들었기 때문입니다. 그래서 추신스 직원은 이러한 배치, 크기, 색상 등 손님에게 보여지는 것 들을 전담으로 관리합니다.

자비스

자비스 직원이 하는 일은 크게 2가지 입니다. 첫째는 홀에서 손님이 요청한 간단한 서비스를 제공하는 것입니다. 예를 들면 음료수라든가 물 부족한 반찬 등을 요청하면 자비스가 홀에 비치된 냉장고 같은 장치에서 꺼네서 제공합니다. 커피머신이나 빙수기 등 홀에 있는 장비를 이용하여 홀 안에서 고객응대를 잘 합니다. 복잡한 일도 잘 처리하고 미리 준비해 놓지 않아도 고객의 요청이 있으면 그때 그때 홀 장비를 이용해서 잘 처리 합니다.
둘째는 주방에 (때로는 다른 가게에 가서까지) 손님이 원하는 요리를 요청하고 완성된 요리를 손님에게 전달 합니다. 가끔은 추신스 직원이 완성된 요리에 장식을 하기도 합니다.

파이썬

파이썬은 주방장입니다. 파이썬은 네덜란드 출신입니다. 이 주방장은 항상 오픈된 주방에서만 일을 하기 때문에 주방장이 요리하는 순서나 내용을 다른 사람들이 쉽게 알 수 있습니다.
이 주방장은 어느 오픈 주방에서든지 요리를 잘합니다. 가끔 미리 준비된 재료(데이터)를 사용해서 주문이 들어오면 그때 그때 조리를 하기도 합니다.
또 급할때는 밀키트 처럼 미리 만들어 놓은 재료(오브젝트)를 기반으로 추가/변경하여 요리하기도 합니다.
이 주방장은 요리 중간에 들어간 재료를 확인하지 않아서 가끔 주요 재료가 빠진 식사가 잘 못나올 수 있기 때문에 조리 전에 주문에 맞게 재료가 맞게 들어가 있는지 확인해 줘야 합니다.

이상으로 등장인물의 소개를 마치겠습니다.

혹시 눈치 채셨나요?

네, 그렇습니다. 바로 웹 어플리케이션에서 쓰이는 언어의 구성을 식당으로 재구성한 내용입니다. 하태민님은 HTML, 추신스 직원은 CSS, 자비스 직원은 JavaScript, 파이썬 주방장은 Python 입니다. 홀은 클라이언트(PC/노트북)이고 주방은 웹/어플리케이션 서버를 말합니다.
이런 등장인물들이 서로 도와서 손님이 주문한 음식과 요리를 만들고 제공하며, 손님이 편하게 즐길 수 있도록 환경을 제공합니다. 웹 어플리케이션도 마찬가지로 서로 자기의 역할을 하면서 서비스를 제공합니다. 이처럼 모든 등장인물은 특성과 담당 특기가 있습니다. 여러분은 어떤 일이 마음에 드시는 지요? 여러분의 마음에 따라 사용하는 언어가 달라 질 수 있기 때문에 중요하다고 할 수 있겠습니다. 아직 개별 언에 대해 알아보진 않았지만 크게는 2가지로 나눌 수 있을 것 같습니다. 클라이언트에서 사용되는 언어와(HTML, CSS, JavaScript) 서버에서 사용되는 언어(Python 또는 JAVA)이 있습니다. 이 두 종류의 개발을 다른 말로 프론트엔드(Frontend) 개발과 백엔드(Backend) 개발이라고 나눕니다.

이번 시간에는 HTML, CSS, JavaScript, Python 언어의 역할에 대해서 알아 보았습니다.
다음 시간에는 각 언어별로 좀더 자세하게 알아보도록 하겠습니다.

질문 댓글은 언제나 환영이며 구독, 좋아요를 눌러 주시면 다음 글을 더 편하게 보실 수 있습니다.

감사합니다.

이번 시간에는 프로그래밍 언어를 배우기 전에 웹 어플리케이션(Web Application)에 대한 내용을 먼저 설명해 드리겠습니다.

웹 어플리케이션에 대한 이해가 중요한 이유는 우리가 사용하는 대부분의 많은 프로그램이 웹 어플리케이션으로 개발되기 때문입니다. PC, 노트북, 그리고 휴대폰에 있는 웹 브라우저를 통해서 누구나 쉽게 사용할 수 있게 만든 시스템이 바로 웹 어플리케이션 시스템입니다.

자 시작해 보겠습니다.

목표 및 범위

• 목표

• Web Application 의 전반적인 구조를 이해하고,
• 필요한 기술요소를 알 수 있으며, 
• 이에 필요한 언어들의 특징을 이해하고 설명할 수 있다. (다음 포스팅)

• 범위

• 전반적인 구조와 기술요소, 언어 특징에 대한 이해를 목표로하며,
• 각 언어에 대한 실제적인 코딩 실력을 키우는 것은 이후 포스팅에서 진행합니다.

컴퓨터의 구조

컴퓨터는 사람을 참고해서 만든 장치 입니다. 사람이 시각,청각, 촉각 등을 통해 외부의 자극을 받아들이고 이를 뇌에서 인지하고 판단한 뒤 말과 행동으로 반응하게 됩니다. 이와 같은 원리로 컴퓨터도 동작합니다. 컴퓨터에도 키보드, 마우스와 같은 입력 장치들이 있고, 우리의 뇌와 같은 역할을 하는 중앙처리장치(CPU)와 메모리가 있습니다. 그리고 출력 장치로 모니터, 프린터, 스피커 등이 있습니다.

웹 어플리케이션 이란?

1970년대의 컴퓨터는 이처럼 홀로 동작했습니다.(참고로 애플2 PC가 1977년에 출시됬습니다. 역사는 따로 정리해야겠네요 ^^) 요즘 같은 WiFi 를 통해 인터넷을 연결하지 못했습니다. 그냥 말그대로 데탑(데스크탑) PC 였지요. 프로그램 팩에 저장된 것을 연결해서 사용하다가 나중에는 PC에 연결된 드라이버를 통해 플로피 디스크나 하드 디스크에 데이터를 저장 관리했습니다. 1980년대 중반에는 직장이나 가정에서 사용이 많았기 때문에 문서 작성프로그램, 데이터 처리 프로그램, 프린터 출력 프로그램 등이 많이 개발되었습니다. 마이크로소프트의 워드, 파워포인트, 엑셀 같은 프로그램과 한글과 컴퓨터의 한글, 그리고 여러 종류의 스프레드 시트 같은 프로그램들이 그 예가 되겠습니다. 이러한 프로그램을 이용해서 각 데스크탑 PC에서 문서를 작성하고 데이터를 처리하고 프린터로 출력을 했습니다. 점점 네트워크 기술도 발달했는데 처음에는 유선 전화선을 이용한 PC통신에서, ADSL, 광랜, 기가 네트워크 등으로 발전해왔습니다. 그리고 결정적으로 인터넷, 즉, WWW(World Wide Web)이 만들어 지면서 데이터와 네트워크의 사용이 폭발적으로 증가했습니다. 그러면서 홈페이지와 블로그와 같은 데이터가 폭발적으로 증가했으며 전자상거래라는 (당시에는) 새로운 형태의 기업 형태가 나타났습니다. (휴~! 간단하게 역사를 이야기했네요.)

이러한 과정을 거쳐 오늘날에는 (특히 한국에서는) 언제 어디서나 인터넷에 접속할 수 있는 환경에 놓여있습니다. 그래서 많은 프로그램들이 인터넷(Web)을 통해 서비스를 제공할 수 있도록 개발되고 있습니다. 이와 같은 프로그램이 바로 웹 어플리케이션 프로그램 입니다.

위키피디아에서는 아래와 같이 정의하고 있습니다.

웹 애플리케이션(web application) 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다.
A web application (or web app) is application software that runs on a web server, unlike computer-based software programs that are run locally on the operating system (OS) of the device. Web applications are accessed by the user through a web browser with an active network connection. These applications are programmed using a client–server modeled structure—the user ("client") is provided services through an off-site server that is hosted by a third-party. Examples of commonly-used web applications include: web-mail, online retail sales, online banking, and online auctions.

웹 어플리케이션의 구조 및 동작

그럼 웹 어플리케이션은 어떤 구조로 되어있고 어떻게 동작할까요? 그림으로 설명해보면 아래와 같습니다.

위에서 정의한 바와 같이 웹 어플리케이션을 위한 하드웨어 구성은 클라이언트, 인터넷, 서버 컴퓨터로 구성됩니다. 클라이언트 하드웨어 위에서는 Chrome 또는 인터넷 익스플로어 등의 브라우저 프로그램이 동작합니다. 이런 브라우저를 클라이언트라고 부르기도 합니다. 웹 브라우저는 사용자의 요청사항을 웹서버에 전달하고 웹서버의 반환 내용을 수신하고 브라우저 화면에 표시 합니다. 인터넷에 있는 다양한 네트워크 장비들은 다양한 통신규약인 프로토콜과 연결 설정에 따라서 클라이언트와 서버 사이에 데이터를 전송해 줍니다. 서버 컴퓨터에서는 인터넷을 통해 들어오는 요청에 응답하기 위한 프로그램 즉, 웹서버, WAS 서버, 어플리케이션 서버 등이 동작합니다. 요청이 들어오면 요청내용을 확인하고 정해진 작업을 수행후 결과를 회신 합니다.

그럼 이때 클라이언트의 웹브라우저에서는 구체적으로 무엇을 주고 받을 까요?

웹 브라우저가 전송하는 내용은 바로~~~

인터넷의 주소와 요청 내용이 들어있는 URL을 웹 서버 쪽에 전달합니다. 그리고 웹서버로 부터 회신 받는 내용은 바로~~~

HTML, CSS, JavaScript, Image 등의 파일(리소스)을 브라우저가 받게 됩니다. 

실제로 아래는 naver.com을 웹 브라우저 주소창에 입력후 받은 html 파일의 내용입니다. 스트립트 소스와 이미지 소스를 표시한 것이 보입니다.

이번 시간에는 웹 어플리케이션의 정의, 그리고 구조와 동작 내용에 대해서 알아보았습니다. 웹 브라우저를 통해 서비스를 제공하는 시스템이 웹 어플리케이션 시스템이고, 클라이언트, 네트워크, 서버로 구성되며, 웹 브라우저에서 URL 인터넷 주소를 가지고 요청하면 네트워크를 거쳐 해당 서버에 접속하며, 서버에서는 관련된 자료를 웹 브라우저에 회신해 주는데 그 내용은 주로 HTML, CSS, JavaScript 등의 파일 및 리소스 입니다.

다음 시간에는 웹서버로 부터 회신 받은 HTML, CSS, JavaScript 등의 언어에 대해서 알아보도록 하겠습니다.

질문 댓글은 언제나 환영이며 구독, 좋아요를 눌러 주시면 다음 글을 더 편하게 보실 수 있습니다.

감사합니다.