웹과 모바일 앱에 대한 나름대로의 고찰
웹이란 무엇인가
웹은 사용자들이 웹 주소로 요청했을 때 제공되는 웹문서(프론트엔드) 와 이 문서들을 제공하는 웹 서버(백엔드) 모두를 합한 '웹 서비스'라고 말한다.
사용자가 이용하는 어플리케이션과 같은 부분을 프론트엔트라 하고, 서버와 같은 부분을 백엔드라고 한다.
웹 서비스를 동작하게 하기 위한 과정
1. 웹 페이지를 개발하고 그 웹 페이지가 서브시할 서버를 구성
2. 웹 서비스 프로젝트를 서버에 배포한다.
3. 웹 서버에 가동시킨다.
1번 작업은 서비스 운영시 한 번만 수행되고 2,3번 작업은 지속적으로 수행된다.
웹의 구성요소
통일된 웹 자원의 위치 지정 방법 : URL || URI
웹 자원에 접근하는 프로토콜 : HTTP
웹 자원들을 표시하는 언어 : HTML
위의 그림처럼 서버로부터 받은 HTML 언어로 되어 있는 텍스트 문서만 받아도 웹 브라우저의 해석을 통해 웹 서핑을 할 때 여러 홈페이지를 링크를 통해 쉽세 이동해 다닐 수 있다.
종합해보면,
1. URL이라는 주소를 통해 원하는 곳을 찾아가서
2. HTTP라는 통신방식을 통해 서로 데이터를 주고 받으며
3. HTML이라는 언어로 구성되어 있는 문서를 받아서
4. 웹 브라우저가 해석해 화면에 보여준다.
웹을 위한 필수적인 기술들 -JavaScript & CSS
사용자가 HTML로만 이루어진 문서를 받았을 때는 단순히 그 문서에 포함된 정보를 확인하거나 다른 페이지로 이동하는 것 밖에 할 수 없다는 말이다.
예를 들어보자. 만약 내가 사진첩 웹 서비스를 만든다고 해보자.
이 웹 서비스에는 한 페이지에 사진 50장씩 작게 표시 되고 마우스 커서를 한 사진 위에 갖다 놓으면 그 사진만 확대되는 기능도 있다.
이러한 기능을 구현하기 위해서는 JavaScript 와 CSS가 필요하다.
마우스를 사진 위에 가져다 놓는 행동을 찾아내야하고 해당 이미지를 확대하도록 컨트롤해야한다. HTML은 불가능하겠지만 JavaScript는 가능하다.
또한 이미지들의 실제 사이즈는 제 각각이겠지만 CSS를 통해 모두 일정한 사이즈로 페이지에 담아놓을 수 있고 깔끔하게 정돈해 만들 수 있다.
웹을 위한 더 확장된 기술들 - ASP,JSP,PHP
위 세 가지는 서버언어로서 웹서버가 항상 클라이언트의 요청에 대기중인 상태로 있게 되는데 클라이언트가 URL로 서버에 요청을 하게 되면 해당 URL의 맞는 정보를 서버언어가 데이터베이스와 연계하여 처리된 정보들을 뱉어 낸다. 이걸 받아 클라이언트의 브라우저에서 해석해서 출력물들을 보여주게 된다.
WAS(Web Application Server)
웹 브라우저가 바로 해석할 수 있는 정적인 HTML 페이지는 웹 서버가 직접 처리하고, 페이지가 요청될 때마다 서버와 통신을 하거나 다양한 처리를 하여 그때 그때 동적인 동작을 필요로 하는 부분들은 WAS라는 추가적인 프로그램에서 처리하도록 하는 개념이다. ASP,PHP,JSP에서 필요로 하는 추가적인 서버에서의 처리는 이 WAS를 통해 이루어진다.
AJAX (Asynchronous Java Script and XML)
에이잭스를 쉽게 표현하자면 , 페이지의 이동 없이 사용자의 액션에 대해 반응 할 수 있는 기술이다. 이 기술을 통해 사용자의 요청에 좀 더 자연스럽고, 빠른 응답을 할 수 있다.
자바 스크립트만으로 구현이 가능한 어렵지 않은 기술이다.
HTML5 & CSS3
HTML4에 비해 5버젼은 비약적 발전을 이루어냈다. 추가된 기능을 간략히 설명하면
1. 오디오,비디오 같은 멀티미디어를 바로 재생 가능
2. 2D,3D 그래픽 표현 가능
3. 데이터 베이스와 데이터 저장 공간 제공
4. GPS,카메라 등의 센서 기능 사용 가능
물론 이외에도 많은 기능을 제공한다.
위와 같은 게임을 HTML5로 만든 것이다. 유니티 같은 것으로만 게임을 만들 줄 알았는데 웹 언어로도 저런 걸 만들 수 있다니 놀랍다. 또한 순수 웹 기술만으로도 스마트폰 어플리케이션을 개발할 수 있게 되었다.
반응형 웹
반응형 웹이란, 사용자의 화면 크기와 해상도에 따라 다른 화면을 보여주는 웹을 말한다.
여기서 주의해야 할 점은 모든 것을 자동으로 꾸며주는 것은 아니다. 해상도에 맞는 폰트, 이미지 사이즈,메뉴 위치 등 세세한 것들은 따로 설정해주어야 한다.
파편화 크로스 브라우징
웹 브라우져가 많아지면서 문제점이 생겼다. 너무 많은 종류의 웹 브라우져가 생기면서 브라우져들간의 호한성이 문제가 된 것이다. 문제점이 생기는 이유는 통일된 규격의 데이터를 주고 받도록 구성되어 있지만, 동작 방식의 차이가 있기 때문이다.
파편화 문제를 해결해서 웹사이트가 다양한 브라우져를 지원한다고 하는 것을 크로스 브라우징을 지원한다고 한다.
도메인
우리는 서비스의 이름을 지어, 웹 서버에 '도메인'을 부여하고 등록해야한다.
도메인을 IP로 변환해서 연결시켜주는 서비스가 필요하며, 그런 서비스를 DNS(Domain Name Service)라 한다.
웹 개발 전문가
웹 서비스 개발자는 프론트엔드와 백엔드로 나뉘어지는데, 프론트엔드쪽은 화면에 보여지는 부분을 관리하고 백엔드쪽은 서버와 데이터를 관리한다.
프론트엔드 개발자는 기본적으로 HTML + Javascript + CSS 를 기본으로 다룰 줄 알아야 한다고 한다. 또한 jQuery 와 Bootstrap 같은 라이브러리들은 더 훌륭한 웹 개발을 하게 해줄것이다.
백엔드는 크게 웹 서버 환경을 담당하는 서버 관리쪽의 분야와 백엔드 서버 프로그래밍을 담당하는 분야로 나눌 수 있다. 기본적으로 전에 말한 JSP , ASP, PHP와 같은 서버에서 동작하는 기능들을 사용하는 기술들은 당연히 백엔드 프로그래밍이 중요하며, 보안,인증,분산 처리 등의 기능들을 잘 알고 있어야한다.
모바일 앱
보통 앱이라고 하면 네이티브 앱을 의미한다. 네이티브로 작성된 아이폰용 앱은 아이폰에서만 실행되고 네이티브 안드로이드 앱은 안드로이드에서만 실행되는 것이다.
안드로이드의 경우 API 가 Java로 작성되어 있고 , 아이폰의 경우 API 가 Objective - C 로 작성되어있다.
API (Application Programming Interface)
애플리케이션 프로그램을 작성 할 때 필요한 약속이라고 할 수 있다. 일종의 설명서이며 함수의 집합인 라이브러리의 개념에서 더 확장되어 필요한 기능을 설명하는 문서까지 함께 제공된다는 점에서 차이가 있다.
프레임워크
프로그램 개발을 쉽게 하기 위해 미리 공통적인 부분을 만들어 놓고 필요한 부분만을 구현해 사용할 수 있도록 제동하는 코드의 묶음이다.
모바일 웹
모바일 앱의 여러 가지 형태 중에 가장 먼저 등장한 것이 모바일 웹이다. 모바일 기기가 등장하면서 기존의 웹 페이지를 스마트 폰의 작은 화면에서도 잘 보이도록 한 것이다.
하이브리드 앱
네이티브 앱의 특징과 모바일 웹의 특성을 모두 가지고 있는 현태가 바로 하이브리드 앱이다. 대표적으로 네이버 앱을 생각하면 된다.
Reference
책 - 개발자가 되고싶으세요?
http://dkdlel072.tistory.com/105
http://www.zdnet.co.kr/news/news_view.asp?artice_id=20140902135239
https://opentutorials.org/course/62/5117 (서버 언어에 대한 이해가 부족할 때 다시보기)
웹은 사용자들이 웹 주소로 요청했을 때 제공되는 웹문서(프론트엔드) 와 이 문서들을 제공하는 웹 서버(백엔드) 모두를 합한 '웹 서비스'라고 말한다.
사용자가 이용하는 어플리케이션과 같은 부분을 프론트엔트라 하고, 서버와 같은 부분을 백엔드라고 한다.
웹 서비스를 동작하게 하기 위한 과정
1. 웹 페이지를 개발하고 그 웹 페이지가 서브시할 서버를 구성
2. 웹 서비스 프로젝트를 서버에 배포한다.
3. 웹 서버에 가동시킨다.
1번 작업은 서비스 운영시 한 번만 수행되고 2,3번 작업은 지속적으로 수행된다.
웹의 구성요소
통일된 웹 자원의 위치 지정 방법 : URL || URI
웹 자원에 접근하는 프로토콜 : HTTP
웹 자원들을 표시하는 언어 : HTML
(reference : http://namsieon.com/190)
위의 그림처럼 서버로부터 받은 HTML 언어로 되어 있는 텍스트 문서만 받아도 웹 브라우저의 해석을 통해 웹 서핑을 할 때 여러 홈페이지를 링크를 통해 쉽세 이동해 다닐 수 있다.
종합해보면,
1. URL이라는 주소를 통해 원하는 곳을 찾아가서
2. HTTP라는 통신방식을 통해 서로 데이터를 주고 받으며
3. HTML이라는 언어로 구성되어 있는 문서를 받아서
4. 웹 브라우저가 해석해 화면에 보여준다.
웹을 위한 필수적인 기술들 -JavaScript & CSS
사용자가 HTML로만 이루어진 문서를 받았을 때는 단순히 그 문서에 포함된 정보를 확인하거나 다른 페이지로 이동하는 것 밖에 할 수 없다는 말이다.
예를 들어보자. 만약 내가 사진첩 웹 서비스를 만든다고 해보자.
이 웹 서비스에는 한 페이지에 사진 50장씩 작게 표시 되고 마우스 커서를 한 사진 위에 갖다 놓으면 그 사진만 확대되는 기능도 있다.
이러한 기능을 구현하기 위해서는 JavaScript 와 CSS가 필요하다.
마우스를 사진 위에 가져다 놓는 행동을 찾아내야하고 해당 이미지를 확대하도록 컨트롤해야한다. HTML은 불가능하겠지만 JavaScript는 가능하다.
또한 이미지들의 실제 사이즈는 제 각각이겠지만 CSS를 통해 모두 일정한 사이즈로 페이지에 담아놓을 수 있고 깔끔하게 정돈해 만들 수 있다.
웹을 위한 더 확장된 기술들 - ASP,JSP,PHP
위 세 가지는 서버언어로서 웹서버가 항상 클라이언트의 요청에 대기중인 상태로 있게 되는데 클라이언트가 URL로 서버에 요청을 하게 되면 해당 URL의 맞는 정보를 서버언어가 데이터베이스와 연계하여 처리된 정보들을 뱉어 낸다. 이걸 받아 클라이언트의 브라우저에서 해석해서 출력물들을 보여주게 된다.
WAS(Web Application Server)
웹 브라우저가 바로 해석할 수 있는 정적인 HTML 페이지는 웹 서버가 직접 처리하고, 페이지가 요청될 때마다 서버와 통신을 하거나 다양한 처리를 하여 그때 그때 동적인 동작을 필요로 하는 부분들은 WAS라는 추가적인 프로그램에서 처리하도록 하는 개념이다. ASP,PHP,JSP에서 필요로 하는 추가적인 서버에서의 처리는 이 WAS를 통해 이루어진다.
AJAX (Asynchronous Java Script and XML)
에이잭스를 쉽게 표현하자면 , 페이지의 이동 없이 사용자의 액션에 대해 반응 할 수 있는 기술이다. 이 기술을 통해 사용자의 요청에 좀 더 자연스럽고, 빠른 응답을 할 수 있다.
자바 스크립트만으로 구현이 가능한 어렵지 않은 기술이다.
HTML5 & CSS3
HTML4에 비해 5버젼은 비약적 발전을 이루어냈다. 추가된 기능을 간략히 설명하면
1. 오디오,비디오 같은 멀티미디어를 바로 재생 가능
2. 2D,3D 그래픽 표현 가능
3. 데이터 베이스와 데이터 저장 공간 제공
4. GPS,카메라 등의 센서 기능 사용 가능
물론 이외에도 많은 기능을 제공한다.
(https://developer.mozilla.org/en-US/demos/detail/bananabread)
위와 같은 게임을 HTML5로 만든 것이다. 유니티 같은 것으로만 게임을 만들 줄 알았는데 웹 언어로도 저런 걸 만들 수 있다니 놀랍다. 또한 순수 웹 기술만으로도 스마트폰 어플리케이션을 개발할 수 있게 되었다.
반응형 웹
반응형 웹이란, 사용자의 화면 크기와 해상도에 따라 다른 화면을 보여주는 웹을 말한다.
여기서 주의해야 할 점은 모든 것을 자동으로 꾸며주는 것은 아니다. 해상도에 맞는 폰트, 이미지 사이즈,메뉴 위치 등 세세한 것들은 따로 설정해주어야 한다.
파편화 크로스 브라우징
웹 브라우져가 많아지면서 문제점이 생겼다. 너무 많은 종류의 웹 브라우져가 생기면서 브라우져들간의 호한성이 문제가 된 것이다. 문제점이 생기는 이유는 통일된 규격의 데이터를 주고 받도록 구성되어 있지만, 동작 방식의 차이가 있기 때문이다.
파편화 문제를 해결해서 웹사이트가 다양한 브라우져를 지원한다고 하는 것을 크로스 브라우징을 지원한다고 한다.
도메인
우리는 서비스의 이름을 지어, 웹 서버에 '도메인'을 부여하고 등록해야한다.
도메인을 IP로 변환해서 연결시켜주는 서비스가 필요하며, 그런 서비스를 DNS(Domain Name Service)라 한다.
웹 개발 전문가
웹 서비스 개발자는 프론트엔드와 백엔드로 나뉘어지는데, 프론트엔드쪽은 화면에 보여지는 부분을 관리하고 백엔드쪽은 서버와 데이터를 관리한다.
프론트엔드 개발자는 기본적으로 HTML + Javascript + CSS 를 기본으로 다룰 줄 알아야 한다고 한다. 또한 jQuery 와 Bootstrap 같은 라이브러리들은 더 훌륭한 웹 개발을 하게 해줄것이다.
백엔드는 크게 웹 서버 환경을 담당하는 서버 관리쪽의 분야와 백엔드 서버 프로그래밍을 담당하는 분야로 나눌 수 있다. 기본적으로 전에 말한 JSP , ASP, PHP와 같은 서버에서 동작하는 기능들을 사용하는 기술들은 당연히 백엔드 프로그래밍이 중요하며, 보안,인증,분산 처리 등의 기능들을 잘 알고 있어야한다.
모바일 앱
보통 앱이라고 하면 네이티브 앱을 의미한다. 네이티브로 작성된 아이폰용 앱은 아이폰에서만 실행되고 네이티브 안드로이드 앱은 안드로이드에서만 실행되는 것이다.
안드로이드의 경우 API 가 Java로 작성되어 있고 , 아이폰의 경우 API 가 Objective - C 로 작성되어있다.
API (Application Programming Interface)
애플리케이션 프로그램을 작성 할 때 필요한 약속이라고 할 수 있다. 일종의 설명서이며 함수의 집합인 라이브러리의 개념에서 더 확장되어 필요한 기능을 설명하는 문서까지 함께 제공된다는 점에서 차이가 있다.
프레임워크
프로그램 개발을 쉽게 하기 위해 미리 공통적인 부분을 만들어 놓고 필요한 부분만을 구현해 사용할 수 있도록 제동하는 코드의 묶음이다.
모바일 웹
모바일 앱의 여러 가지 형태 중에 가장 먼저 등장한 것이 모바일 웹이다. 모바일 기기가 등장하면서 기존의 웹 페이지를 스마트 폰의 작은 화면에서도 잘 보이도록 한 것이다.
하이브리드 앱
(http://mobileandlife.tistory.com/135)
네이티브 앱의 특징과 모바일 웹의 특성을 모두 가지고 있는 현태가 바로 하이브리드 앱이다. 대표적으로 네이버 앱을 생각하면 된다.
Reference
책 - 개발자가 되고싶으세요?
http://dkdlel072.tistory.com/105
http://www.zdnet.co.kr/news/news_view.asp?artice_id=20140902135239
https://opentutorials.org/course/62/5117 (서버 언어에 대한 이해가 부족할 때 다시보기)
댓글
댓글 쓰기