취미코딩 - 웹 어플리케이션 - HTML, CSS, JavaScript, Python

지난 시간의 내용을 요약하면 웹 어플리케이션은 웹브라우저, 인터넷, 웹서버 등으로 구성되어 클라이언트(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 언어의 역할에 대해서 알아 보았습니다.
다음 시간에는 각 언어별로 좀더 자세하게 알아보도록 하겠습니다.

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

감사합니다.