[web] WEB 애플리케이션 구조와 개발언어 간단하게 메모

WEB 애플리케이션의 구조나 만드는 방법의 개요, 필요한 프로그램 언어는 무엇인가에 대해서 작성.

 

WEB 애플리케이션이란?

WEB 애플리케이션을 만들 때, 우선 WEB 애플리케이션이 어떤 것인가에 대해서 알아야 한다.

WEB 애플리케이션이란 이름 그대로 인터넷(WEB) 등의 네트워크에서 이용하는 애플리케이션 소프트웨어이다.

WEB 애플리케이션은 WEB 서버 상에서 동작하며 chrome:fireFox 등 평소 홈페이지를 보는 데 사용하고 있는 WEB 브라우저에서 조작한다.

 

잘 알려진 WEB 애플리케이션의 대표적인 예로

동영상 공유 서비스 「YouTube」나 웹 메일 서비스 「Gmail」, 인터넷 전화 서비스 「Skype」등이 있다.

WEB 애플리케이션이라는 말이 생소할 수는 있으나 우리는 실생활에서 다양한 WEB 애플리케이션을 사용하고 있다.

 

●네이티브 앱과의 차이점

WEB 애플리케이션과 대비되는 앱 종류로는 「네이티브 앱」이 있다.

WEB 애플리케이션의 개발을 할 때는 이 2개의 차이를 파악해야 한다.

 

네이티브 앱이란 가까운 단말기(스마트폰, PC 등)에 설치해서 이용하는 애플리케이션 소프트웨어를 말한다.

네트워크 경유로 이용하는 WEB 애플리케이션과 달리, 이용에 있어서 인터넷에 액세스를 할 필요가 없으나

단말기에 설치(인스톨)가 필요하다.

 

WEB 애플리케이션에서는 프로그램 본체가 네트워크 상의 WEB 서버 내에 있는데 

네이티브 애플리케이션의 프로그램 본체가 저장되는 것은 단말기 안에 있다.

 

WEB 애플리케이션의 작동 방식 및 개발 언어

WEB 애플리케이션의 엔지니어는 우리가 흔히 말하는

「프런트 엔지니어」와 「백엔드 엔지니어」의 두 종류로 분류된다.

각각 개발에 필요한 개발 언어도 다르다.

 

●프런트엔드 = 클라이언트 사이드

WEB 애플리케이션에 있어서 프런트엔드(= 클라이언트 사이드)란

유저가 WEB 애플리케이션에 액세스를 했을 때 유저 스스로 보이는 부분이나 직접 조작할 수 있는 부분을 말한다.

예로 YouTube 사이트 자체의 디자인/외형, 동영상의 검색이나 재생/정지/댓글 추가라고 하는 부분이 프런트엔드이며

프런트 엔지니어란 이 부분의 프로그램을 개발하는 엔지니어다.

 

프런트엔드와 백엔드에서 이용하는 프로그램 언어는 다르며

프런트엔드 프로그램을 구축할 때 사용하는 프로그램은 아래와 같다.

 

◆HTML

HTML은 WEB 페이지의 구조나 내용 등을 결정할 때 사용되는 프로그램 언어이다.

"여기에 표제를 설정하고, 그 후에 분장을 배치한다",

"여기에 이미지를 게재한다",

"링크나 버튼을 배치한다",

"폰트를 굵은 글자로 한다" 

등등 이런 것을 결정하는 것이 HTML의 역할이다.

 

◆CSS

CSS 또한 HTML과 마찬가지로 웹 페이지를 만드는 데 사용되는 프로그램 언어로 HTML과 조합해서 이용한다.

CSS는 "웹 페이지의 디자인(스타일)"에 관한 정보를 결정할 때 사용된다.

HTML만 가지고도 WEB 페이지를 구성할 수 있는데 CSS를 조합하는 것이 일반적이다.

만약 HTML로만 구성된 웹 페이지가 100개 정도 있을 때 이러한 디자인을 바꿔야 하는 경우,

CSS를 사용하지 않으면 각각의 웹페이지를 노가다로 편집해야 한다.

이러면 시간을 너무 많이 사용하고 비효율적인데 CSS를 사용하면 하나의 CSS를 편집하는 것으로

공통적인 디자인을 쉽게 수정하고 관리할 수 있다.

CSS를 사용함으로써 HTML에서 복잡한 디자인에 대한 기술을 구축할 필요가 없어서 HTML의 구조를 쉽게 알 수 있다.

 

◆JavaScript

JavaScript는 웹 페이지에 "움직임(동작)"을 붙이기 위한 프로그램 언어이다.

예를 들어 웹 페이지상에서 자동으로 움직이는 이미지의 슬라이드 쇼를 게재하거나

목록에 메뉴라는 카테고리에 마우스 포인터를 맞추면 보다 상세한 메뉴가 나타나거나 하는 동적인 움직임을 주는 것을 JavaScript로 구현한다.

그 외로 웹 페이지 상에 게재한 표를 지정한 항목으로 정렬을 하거나

폼에 입력한 내용을 체크해 부족한 내용이 있으면 에러를 반환하는(ex. 성명란은 필수항목입니다) 등의 체크도

JavaScript로 만들 수 있다.

 

●데이터베이스

데이터베이스란 간단하게 말하자면

대량의 데이터를 관리 및 재사용하기 쉽도록 정리한 구조,

또는 데이터를 정리한 집합체 자체

를 가리키는 말이다.

웹 애플리케이션은 사용자의 요구에 따라 데이터베이스에 정보를 기록하거나 반대로 꺼내어 ㅍ시한다.

 

예를 들어 YouTube와 같은 동영상 시청/공유를 목적으로 한 애플리케이션에서는

대량의 동영상 데이터를 관리하는 것이 데이터베이스이다.

데이터베이스는 유저가 카테고리나 키워드 등에서 검색한 내용에 따라 적절한 동영상의 데이터를 검색 결과를 제공한다. 데이터베이스에는 여러 종류가 있는데 그중에서도 오픈 소스로 공개되어 무료로 이용이 가능한 MySQL, 

기업에서 주로 사용하는 Oracle 등이 있다.

 

그리고 데이터베이스를 관리하거나 작업을 할 때 현재 많이 쓰는 데이터베이스 언어가 SQL이다.

SQL은 ISO(국제표준화기구) 등에 의해 표준규격화가 되어 있으며, 앞에서 말한 MySQL을 비롯해

Microsoft SQL, PostgreSQL, Oracle의 Oracle Database와 같은 대표적인 데이터베이스에서 이용이 가능하다.

 

WEB 애플리케이션 만드는 법

웹 애플리케이션 개발 흐름

WEB 애플리케이션의 구조나, 어떤 언어가 필요한지에 대해서 알아보았으니

이제 WEB 애플리케이션을 어떻게 해서 만드는지에 대한 대략적인 흐름에 대해 알아보자~!

 

● 1. 웹 애플리케이션 구조 파악

전제조건으로 WEB 애플리케이션의 구조를 이해할 필요가 있다.

WEB 애플리케이션이 무엇인지, 구조와 개발언어의 내용을 이해하고 넘어가야 함..!

 

● 2. 프로그래밍 언어 선택

WEB 애플리케이션을 만들기 시작하면 먼저 어떤 프로그램 언어를 사용할지 선택을 해야 한다.

위에서 이야기했던 프런트엔드를 개발하는지 백엔드를 개발하는지에 따라 선택해야 할 프로그램 언어가 달라진다.

또 프로그램 언어에 따라 난이도, 역할, 특징이 다 다르기 때문에 이 부분을 기반으로

어떤 프로그램 언어를 사용할지 검토해야 한다.

 

● 3. 프레임워크, 웹 애플리케이션 개발 툴 선택

프로그램에서의 프레임워크란, 자주 사용되는 범용적인 기능을 정리해 제공한 것이다.

프레임워크에 있는 기능을 이용해서 프로그램이 간단해진다.

프레임워크에도 WEB 애플리케이션을 개발할 때는 WEB 프레임워크가 사용된다.

이것도 선택한 프로그램 언어에 따라 어느 WEB 프레임워크를 사용할지는 달라진다.

 

대표적인 WEB 프레임워크는 아래와 같다.

- Ruby on Rails : Ruby용 WEB 프레임워크

- Django : python용 WEB 프레임워크

- Angular JS : JavaScript용 WEB 프레임워크

 

또한 WEB 애플리케이션 개발에서는 다양한 툴이 사용되고 있다.

이러한 툴을 잘 다루면 효율적으로 프로그램 개발이 가능하다.

대표적인 개발 툴은 아래와 같다.

-Source Tree : 프로그램 변경이력을 관리하는 Git이라고 하는 시스템을 GUI에서 쉽게 사용할 수 있도록 하는 도구

- GitHub : Git을 WEB 상에서 다른 멤버와 공유해 사용할 수 있도록 한 툴. 

- Cacoo : WEB 애플리케이션을 설계할 때는 처음에 어떤 사양으로 할 것인 지나 어떤 화면으로 이동할 것인지 정해둘 필요가 있다. 이 툴은 설명서나 화면 이동 흐름도를 만들 때 편리한 툴이다.

 

마지막으로 가장 간단하게 토이 프로젝트로 해볼 만한 거는 게시판 앱이나 뉴스앱 ㅊㅊ..

- 게시판앱 : WEB에 액세스하고 내용 등록, 열람할 수 있는 정도?

- 뉴스앱 : 스포츠 등 흥미 있는 뉴스를 인터넷으로 수집해서 목록으로 표시하거나 앱 내에서 검색할 수 있는 정도?