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

이번 시간에는 프로그래밍 언어를 배우기 전에 웹 어플리케이션(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 등의 언어에 대해서 알아보도록 하겠습니다.

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

감사합니다.

모든 내용은 글쓴이의 짧은 경험과 지식에서 나온 개인적인 의견임을 밝힘니다. 불편한 내용이나 이견이 있는 내용은 연락주시면 수정 재고하겠습니다. 감사합니다. theyellowlionking@gmail.com

글쓴이

• 부모님의 권고로 컴퓨터를 시작하게되어 평생 직업이된 사람입니다.(감사합니다. 아버지, 어머니)
• 대학에서 컴공을 전공했고 경영학과 심리학에도 관심이 많은 사람입니다.
• 오랫동안 IT 분야에 일하면서 설계, 개발, 운영, PM/SM, DA/DE/DS, MLE 등 많은 역할을 해 봤습니다.(감사합니다. 동료 여러분)
• BigData/AI/Machine Learning에 관심이 많으며, 한 기업에서 머신러닝 엔지니어로 일하고 있습니다.(감사합니다. 사장님)
• 더 좋은 사람이 되기위해 노력하는 사람입니다.(더 노력하겠습니다.)
• MBTI는 ISTJ 입니다.

포스팅의 목적

• 취미로 코딩을 배우는 분들을 돕기 위한 포스팅입니다.
• 최대한 쉽고 간단하게 설명 할 예정입니다.
• 최종적으로는 독자가 일상생활에서 간단한 문제를 코딩으로 해결 할 수 있도록 하는 것이 목표 입니다.

향후 주요 내용(예정)

아주 기본적인 개념부터 시작합니다. 코딩과 관련된 전반적인 관계와 구조를 소개하고 프로그래밍 언어를 선택해서 배우면서 하나씩 문제를 풀어볼 예정입니다. 마지막에는 첫번째 프로젝트로 배운 코딩기술을 이용해서 프로그램을 만들어볼 예정입니다.
1. 코딩에 대한 개요
2. 코딩을 위한 언어 배우기
3. 첫 프로젝트 프로그램 만들기


오늘은 그 첫번째 시간으로 코딩에 대한 개요에 대해서 알아 보겠습니다.

1. 코딩에 대한 개요

코딩을 배우면 무엇이 좋은가?

• 코딩을 배우는 이유는 다양할 수 있겠지요. 누군가는 스티브 잡스, 빌 게이츠, 마크 저커버그 처럼 되기 위한 꿈을 이루기 위해 코딩을 배우고 싶어할 수도 있고, 누군가는 다른 사람들이 필요하다고 해서 일 수도 있고, 또 다른 누군가는 그저 재미있을 것 같아서 일 수도 있습니다. 목적은 다를 수 있지만 시작은 모두 같은 내용으로 시작해야 할 것 같습니다. 기본적인 내용을 아는 것이 중요하기 때문이지요. 바로 이런 기본적인 내용을 제공하기 위한 포스팅 입니다.
• 코딩을 배우면 인생을 바꿀 수 있습니다. 과한 표현일 수 있지만 적어도 일상 생활에서 본인의 시간을 조금 더 만들 수 있습니다. 혹시, 일상 생활을 하면서 특히, 컴퓨터나 핸드폰 등을 사용할 때 단순하고 반복적인 일들로 인해서 불편을 느낀 적이 있으신가요? 생활이나 일을 개선하기 위해 떠오르는 아이디어가 있으신가요? 이런 분들이야 말로 불편을 해소하고 아이디어를 실현 시키기 위해 코딩이 필요한 분들 입니다.
• 취미로 배우는 것은 정말 좋은 선택입니다. 하나를 배울 때 마다 마치 SF영화에서 초능력이 하나 더 생긴 것처럼 할 수있는 일이 더 많아집니다. 스스로 발전을 느낄 수 있고 행복감을 느낄 수 있습니다. 시간이 너무 빨리 지나가서 아쉬울 수도 있습니다.

코딩이란 무엇인가?

• 코딩은 컴퓨터 프로그래밍 보다 살짝 좁은 의미이기는 하지만 보통은 같은 의미로 사용됩니다. 아주 쉽게 말씀드리면 컴퓨터에게 일을 시키기 위해 컴퓨터가 해야할 일들을 작성하는 것을 코딩이라고 말합니다. 컴퓨터가 실행해야 할 명령어들을 적는 것이라고 할 수 있겠는 데요, 컴퓨터와 소통하는 방법이 코딩인 것 이지요. 소통을 잘 하기 위해서는 사람도 그렇듯이 언어가 필요합니다. 사람끼리의 소통에서도 미리 정리된 문법과 규칙에 따라 말이나 글을 전달하면 그 내용을 다른 사람이 해석해서 의미를 이해하고 행동하는 것처럼 컴퓨터와의 소통에서도 미리 정의된 문법과 규칙에 따라 작업할 내용을 적어야 컴퓨터가 이해하고 실행 할 수 있습니다.이러한 컴퓨터와 소통하기 위해 사용하는 언어가 바로 프로그래밍 언어 입니다. 들어보셨을 수도 있는 파이썬, 자바, 자바스크립트, C 등이 프로그래밍 언어의 좋은 예 입니다. 이처럼 프로그래밍 언어에서 정의한 문법과 규칙에 따라서 명령어를 작성하는 것을 코딩이라고 합니다. 즉, 코딩이란 "컴퓨터가 해야할 일들을 미리 정의된 문법과 규칙(프로그래밍 언어)에 따라 작성하는 것"을 말합니다. 코딩을 통해 작성된 내용을 프로그램 이라고 합니다.
• 프로그램의 예를 들어보겠습니다. 요즘 식당이나 카페이서도 자주 볼 수 있는 무인주문 단말기(키오스크)가 하는 일은 예전에는 주문 담당 직원이 했던 일입니다. 예전에 새로운 주문 담당 직원이 입사했다고 생각해보시죠. 그러면 기존에 주문을 담당했던 직원이 새로온 직원에게 교육을 해주겠지요. 예를 들면 고객이 주문할 때 물어봐야할 것과 그 대답에 따른 고려 사항을 점검하고 어떻게 반응해야하는 지 같은 것을 알려줄 것입니다. 즉, 고객으로 부터 어떤 입력을 받아서 어떤 작업들을 거친뒤 어떤 반응을 해야하는 지를 알려줄 것입니다. 이러한 입력, 처리, 출력 내용을 정리해 놓은게 프로그램이고 이러한 프로그램을 만드는 것이 코딩입니다.
• 코딩이란 '컴퓨터용 언어로 프로그램을 만드는 것' 이라고 SBS런닝맨 퀴즈에서도 나왔네요. ^^

어떻게 코딩을 해야하나?

• 코딩은 위에서 말한 것 처럼 프로그래밍 언어를 통해 컴퓨터가 해야할 일을 작성하는 것을 말합니다. 따라서 코딩/프로그래밍을 위해서는 프로그래밍 언어를 배워야 합니다. 프로그래밍 언어를 알아보기 전에 먼저 컴퓨터의 구성과 동작에 대해서 간단하게 이해하겠습니다.
• 컴퓨터의 구성은 크게 메모리, 중앙처리장치(CPU)와 주변장치 디스크, 모니터, 키보드로 구성됩니다. 물론 휴대폰의 경우 모니터와 키보드가 하나의 모니터에서 구현되기도 합니다. 메모리는 임시 정보를 저장하는 장치이고 CPU는 계산을 담당하는 장치 입니다. 들어보셨겠지만 컴퓨터는 모든 정보를 바이너리, 즉 이진수 0과 1로 저장합니다. 이해를 돕기위해 간단히 예를 들어보겠습니다. 메모리의 장치번호는 00000001 번 이고 CPU는 00000010 이라고 가정하시죠. CPU에서 메모리의 첫번째에 저장된 데이터를 가져오기 위해서는 전체 주소가 필요한데 예를 들면 장치번호와 메모리 주소번호를 붙여서 가져올 수 있습니다. 즉, 전체 주소가 00000001 00000001 이겠습니다. 이 주소에 저장된 내용을 CPU에서 가져다가 처리한 뒤 다음 처리할 내용이 메모리의 두번째 장소에 있다면 다음 전체 주소는 다음과 같겠습니다. 00000001 00000010. 제가 설명드리고자 했던 것은 컴퓨터의 모든 내용이 실제로는 이진수로 저장되고 관리된다는 것입니다.
• 다시 프로그래임 언어로 돌아가서, 프로그래밍 언어는 크게 2가지 종류로 나눌 수 있습니다. 저수준 언어과 고수준 언어가 그것입니다. 저수준 언어(Low-Level Language)는 간단히 말하면 추상화를 제공하지 않는 언어입니다. 추상화를 제공하지 않는다는 의미는 코딩을 컴퓨터가 이해할 수 있는 방식으로 작성해야 한다는 의미 입니다. 컴퓨터가 이해할 수 있는 방식이란 위에서 말씀드린 대로 이진수로처리/관리하는 것을 말합니다. 그래서 코딩도 2진수로 할 수 있는데 이처럼 2진수를 가지고 프로그래밍 할 수 있도록 만들어진 언어가 바로 '기계어'입니다. 생각만 해도 어렵지 않으신가요? 0과 1로 코딩을 하려면 위에서 처럼 모든 장치의 주소값을 01010001 같은 이진수로 다 알고 있어야 하고, 언어의 명령어도 01로 작성해야하기 때문에 무척이나 어려울 것 같습니다.
• 반대로 고수준의 언어(High-Level Language)는 추상화를 제공합니다. 즉, 2진수가 아니라 사람이 이해하기 쉬운 방법으로 명령어를 작성할 수 있습니다. 앞서 예를 든 메모리에서 데이터를 가져오는 경우를 다시 비교해서 설명해 보겠습니다. 고수준 언어에서는 a를 메모리의 한 영역이다라고 정의만 하면 그 실제 2진수 주소가 무엇이던 간에 특정 메모리 주소를 의미합니다.(프로그래밍할때 주소가 필요하지는 않으니까요) 그래서 특정 주소에 2진수 주소를 이용해서 데이터를 넣고 가져올 필요가 없고 a와 같은 변수로 추상화해서(a가 2진수 주소를 가리키게 해서) 사용할 수 있습니다. 즉, 00000001 00000001 주소에 123을 넣어라 라고 작성할 필요가 없고, 고수준 언어에서는 a 에 123을 넣어라 이렇게만 작성하면 됩니다. 장치 주소를 외울 필요도 없고 메모리 주소도 외울 필요가 없습니다. 그래서 일반적인 범용 프로그램을 개발하는데 많이 사용됩니다. 프로그래밍 언어라도 들어보셨던 대부분의 언어가 이 고수준 언어에 해당됩니다. 이러한 언어로 만들어진 프로그램을 어플리케이션(Application) 이라고 말합니다.

다음 시간에는 코딩을 위한 언어를 배우기 전에 가장 많이 사용되는 어플리케이션 유형인 Web Application에 대한 소개를 하고 이를 통해 어떤 언어들이 있는지를 알아보겠습니다.


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

감사합니다.