웹화면은 아래 요소들로 이루어졌다고 볼 수 있다.
- HTML 태그와 컨텐츠(리소스, 즉 사진, 음향, 동영상 등등)
- HTML 태그와 컨텐츠를 화면에 제대로 표현하기 위한 CSS,
- UX 를 담당하는 자바스크립트. (물론, 플래시 등의 요소가 존재하기는 하지만, 가벼운 웹사이트를 지향하자)
각종 컨텐츠는..
웹서버에서 사용자 화면으로 내려지기도 하고,
사용자 화면에서 웹서버로 올려지기도 한다.
어쨌든, 사용자가 웹화면을 볼 때에는..
웹서버에서 위에서 설명한 요소들이 사용자 웹브라우저에 모두 다운로드 되어야 한다.
물론, 내려지는 시차와 순서가 정해져 있거나 그렇지 않을 수 있다.
이제, 구현하는 입장에서 나열하는 순서를 생각해 보자.
요즘엔 HTML5 로 수렴하는 분위기 이다 보니,
<!doctype html> 과 <html lang="ko"> 등이 맨 처음에 온다.
문자셋을 결정하는 등등의 meta 태그가 다음에 온다.
여러 웹브라우저에서 되도록 동등하게 보여지려면,
CSS 를 초기화 하는 코드가 필요하다.
화면에서 공통적으로 사용되는 CSS 도 외부 파일로 기술한다.
특정 화면의 특정 요소에만 임시로 사용되는 코드라면,
head 위치에 style 태그로 기술하거나 해당 요소에 인라인 스타일을 사용한다.
자바스크립트는 head 태그 안에 기술되기도 하고 body 태그의 끝에 기술되기도 하겠지만,
전체 화면에서 공통적으로 사용되는 라이브러리 성격이라면 head 태그에 외부 파일로 기술한다.
해당 화면에서만 사용된다면 body 태그 위에 기술하는 것이 편리할 수 있다.
다음으로 오는 부분이 기본 HTML 구조다.
요즘엔, HTML 구조에서 화면의 전체적인 프레임을 완성하고
데이타는 나중에 채워주는 방식이 선호되기도 한다.
이 때 사용되는 기술이 Ajax 기술이다.
전체 웹페이지가 SSL 로 호출되는 것이 아니라면,
보안성이 필요한 경우 데이타를 채울 때,
jsonp 데이타를 SSL 에 태워서 웹서버로부터 내려받은 다음
필요한 화면에 채워주는 방식도 채용할 수 있다.
이 때 jsonp 에 담기는 내용에 HTML 이 기술되어도 상관은 없다.
마지막으로 </body> 와 </html> 을 기술한다.
다음은, 웹개발에 대한 단상..
웹 화면들 끼리 파라미터를 주고 받고, DB 에 넣고 빼고.. 이게 다라고 할 수 있다.
너무 간략하게 적은 느낌이 들지만, 이 보다 더 단순화 하기는 어렵다.
물론, 데이타를 전달하는 일련의 과정이다.
정보를 주고 받고 하는 큰 그림이 기본이다.
예전에는 하나의 서버측 파일에서 데이타를 가공하고,
필요한 내용을 조회한 다음 데이타를 HTML 에 넣어 주었다.
이게 최초의 구현방식이었다.
그런데, 점점 복잡해지는 UI 와 UX 때문에..
Model View Controller 로 분리하여 각각의 파일로 나누어 담았다.
컨트롤러가 Model 에서 DB 에 넣고 빼고 한 다음,
View 에다가 데이타를 던져주어 화면을 처리하게 한 것이다.
MVC 유형도 1에서 2로 발전해 가면서 Controller 부분이 점점 복잡해진 느낌이 든다.
그러나, 요즘에 화면 프레임을 먼저 사용자에게 보여주고,
필요한 데이타들을 후처리 하는 개념이 생겼으며,
복잡해진 Controller 를 간소화 하는 움직임도 나타나게 된다.
모바일 환경이 열리다 보니,
모든 것을 웹서버가 제공하던 것에서
필요한 컨텐츠만 담아서 전달하는 서비스로 전이되는 경향이 생겼다.
'Local & Server' 카테고리의 다른 글
| jpg 파일 압축비와 품질 (0) | 2020.05.14 |
|---|---|
| 주민등록번호 CI (0) | 2019.08.16 |
| user-agent 속이기..? (0) | 2017.01.05 |
| 리눅스, 한 달 이전에 생성된 파일 삭제 (0) | 2016.10.05 |
| crontab 특정 사용자 id 권한으로 실행 (0) | 2015.10.01 |