Web Programming 이론

안녕하세요 진자이입니다. 이번 포스팅에서는 XHTML 실습에 앞서 Front End, Back End 개념과 Web Programming 이론에 대해 기록하고자 합니다.

 

Front End

사용자에게 보여지는 부분을 만든다. 디자인이라고 오해할 수도 있지만, 디자인 및 사용자 인터페이스 디자인 및 사용자 경험과 관련된 총체적인 디자인이라고 생각하면 된다. HTML, CSS, JavaScript 언어를 이용해서 브라우저를 통해 보여지도록 구현할 수 있는데, 최근에는 라이브러리 형태로 제공되는 jQuery, Angular, react, vue, bootstrap 등을 사용해서 구현하는 경우가 많다. Python이나 Java, Go 등의 프로그래밍 언어를 사용해서 만들 수도 있다. Dart(Flutter용)와 같은 언어를 이용해서 Smart Device에서 동작하는 애플리케이션 역시 개발 가능하다.

 

Back End

애플리케이션을 동적이고 대화형으로 만들기 위한 부분이자 클라이언트의 요청을 처리하기 위한 부분이다. Python, Java, C#, JavaScript, PHP 등과 같은 프로그래밍 언어와 Oracle, MySQL과 같은DB 기술 및 Django, Node, Spring 등과 같은 프레임워크를 이용하여 구현한다.

 

Design

비즈니스 인사이트(Business Insight)를 얻기 위해 시작되었으며, Front End 디자인의 영역은 다음과 같다.

• Interaction Design : 사이트를 가능한 쉽고 효과적이게 즐겁게 디자인
• UI(User Interface Design) : 페이지의 기능적 구조와 사용자가 콘텐츠를 탐색하거나 작업을 수행하기 위해 사용하는 도구들 사이에 연결에 관련된 디자인
• UX(User Experience Design) : 사용자가 웹 사이트에서 갖는 전체적인 경험이 호의적일 수 있도록 하는 디자인
• 외 Wireframe Diagram, Site Diagram, StoryBoard, Site Diagram, Visual Graphic Design, 코딩/마크업, 스타일링 등

 

웹 표준 관련 기술

• 구조 - (x)HTML
• 표현 - CSS
• 동작 - SCRIPT

 

프레임워크 (FrameWork)

개발 방향이 변화함에 따라 나타났다. → 높은 생산성, 쉬운 유지보수, 기능 확장이 용이한 개발 기술이 필요!

목적에 맞게 잘 설계된 구조와 미리 구현된 라이브러리가 포함된 소프트웨어 형태이다. 프레임워크는 정해진 규격에 따라 프로그램 구조를 만들어야 하는데, 개발자가 신경쓰거나 처리해야 할 많은 일과 이벤트 관리는 프레임워크를 통해 처리한다. 이에 비교적 적은 노력으로도 고품질의 소프트웨어 개발이 가능해진다.

 

웹 표준 기술

• HTML(Hyper Text Markup Language) 웹 문서의 구조를 정의할 때 사용하는 웹 페이지 기술 언어로, 웹 브라우저가 해석해서 렌더링한다.
• XML (eXtensible Makeup Language) 웹에서 구조화된 문서를 전송할 수 있도록 설계된 표준화된 텍스트 형식으로, 순수 데이터 포맷이다.
  • HTML의 한계를 극복하고 SGML의 복잡함을 해결하는 방안으로 HTML에 담겨져 있는 형식적 요소를 완전히 배제
• XHTML (eXtensible Hyper Text Markup Language) W3C에서 XML응용으로서 HTML4를 다시 공식화한 것
• HTML5 HTML4를 업그레이드 한 것으로, 특정 플러그인에 의존하지 않고 콘텐츠를 제공하는 것이 목표
  • FireFox, Safari, Chrome 등 최신 웹 브라우저에서 기본적으로 HTML5를 지원하고 있으며 MS 최신 브라우저도 HTML5 지원
• CSS(Cascading Style Sheet) 화면에 표시되는 방법을 지정해 구조를 꾸며주는 시각적인 표현을 담당하는 기술로, HTML 3.2부터 지원하며, 그룹화 디자인이 가능하여 문서의 일관성을 유지하기 편하고 작업 시간도 단축시킬 수 있음.
• 이 외 DOM & Script 등

 

기타 내용

**W3C** The World Wide Web Consortium은 웹 기술 개발을 관장하는 조직으로 기술과 프로토콜 개발

Web App의 동작원리 최초 요청(Request), 최초 응답(Response), 추가 요청, 추가 응답의 과정을 거침

웹 접근성 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것!

반응형 웹 뷰 포트의 종류에 따라 화면 크기에 맞게 요소들을 재배치하고 각 요소의 표시 방법만 다르게 해서 웹 화면 구현

외양과 느낌만을 조정하는 것 뿐만 아니라 최적화가 필요하기 때문에 완전한 해결책은 아님!

Flat Design 웹 요소에서 입체감을 주는 효과를 제거하고 단순하게 표현하는 기법으로 웹 사이트 뿐만 아니라 모바일 앱이나 프로그램 UI에서도 사용하고 있음

PWA (Progressive Web Applications) 웹 애플리케이션과 네이티브 애플리케이션의 장점을 모두 제공하는 보다 발전된 형태의 웹 애플리케이션을 어떻게 개발할 수 있는가에 대한 논의이자 개발 철학

SPA (Single Page Applications) 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통한느 웹 애플리케이션이나 웹사이트

단점으로 초기 구동 속도가 느리고, 검색엔진을 최적화한다는 점이 있음

웹 3.0 2010년 등장하였으며, 속도/플랫폼의 변화, 데이터와 인공지능, 애플리케이션의 진화 등의 핵심이며 컴퓨터가 정보자원의 뜻을 이용하고 논리적 추론까지 가능한 시멘틱 웹 개념의 등장을 의미한다.

WOA (Web Oriented Architecture) 웹을 중심으로 전체 시스템 아키텍처를 설계해 나가는 기술

고급 프로그래밍 언어 : 컴퓨터에게 일을 시키기 위해서 인간이 알아볼 수 있는 명령어의 집합

 

컴파일러/인터프리터

고급 프로그래밍 언어로 작성된 내용을 플랫폼(운영체제, 가상머신)이나 디바이스가 이해할 수 있는 코드로 변역해주는 시스템

• 컴파일러 → 전체를 번역을 다 해놓고 실행시키는 것
• 인터프리터 → 줄 단위로 번역해서 실행시키는 것
• HTML, CSS, JavaScript → 웹 브라우저가 번역해서 실행
• IDE(통합개발환경) : 프로그래밍 언어로 소스코드를 작성하고, 번역 및 빌드(실행할 수 있는 코드를 만드는 작업) 등을 편리하게 해주는 소프트웨어