티스토리 뷰
하나의 웹사이트를 통해서 단순한 홈페이지를 서비스하거나, 커뮤니티를 구성하거나, 업무를 수행하는 워크프로우를 제공하거나, 포털을 서비스 할 수도 있지만 어떠한 웹사이트를 만드는 과정에도 본격적인 개발에 앞서 요구사항 수집 및 분석, 기획, 설계등의 과정을 거치게 됩니다. 성공적인 개발은 개발에 앞서 이루어지는 이러한 과정들을 꼼꼼하게 수행해야만 가능한 것입니다. 산출물로는 요구사항 목록, 기획서, 스토리보드 등이 있을 것입니다. 경우에 따라서는 벤치마킹 보고서나 파일럿 보고서등도 포함될 것입니다.
그렇다면, 개발 단계에 이르러 주요 기술로 ASP.NET을 선택했다면 ASP.NET과 연관성을 가진 기술들은 무엇이 있을까요? 네이버나 다음과 같이 웹 기술을 다루는 대형 조직에서는 기획, UI(User Interface) 디자인, UX(User Experience, 사용자 경험) 설계, 개발, QA(Quality assurance), 운용 과정이 체계화되어 있지만 ASP.NET을 통한 "개발"을 학습하고 익숙하게 하고자 하는 개인 입장에서는 일정한 경계를 넘어서는 기술에 대해서도 일부분 지식을 습득한 필요가 있습니다. 그래야 효과적인 개발 및 학습이 가능할 뿐만아니라 원활한 상호 의사 소통에도 큰 도움이 될 수 있습니다. 이러한 시각에서 ASP.NET에 익숙해지기 위한 연관 기술들을 정리해 봅니다.
■ HTML
웹 브라우저에서 HTTP/HTTPS 프로토콜 기반으로 웹서버에 접근하여 웹 페이지 정보를 받아오는 첫번째 정보는 바로 HTML(HyperText Markup Language)입니다. 페이지의 전체적인 구조와 동작을 정의하는 HTML은 내부에 CSS 및 자바스크립트를 포함시켜서 페이지의 디자인을 입히고 기능성을 더하는 기반 역할을 합니다. 최근 많이 회자되고 있는 HTML5이전의 마지막 버전은 HTML 4.01로 상세한 내용은 아래의 링트에서 한국어로 확인할 수 있습니다.
http://trio.co.kr/webrefer/html/cover.html
HTML은 위의 그림과 같이 웹브라우저에서 마우스 우측 버튼으로 "컨텍스트 메뉴>페이지 소스보기" 로 현재 보고 있는 페이지의 HTML 소스 코드를 간편하게 확인할 수 있습니다. 노란색으로 표시한 것들은 주요 HTML 태그들의 일부 로 <head> </head> 처럼 <>로 태그 이름을 감싸는 것으로 시작하고 </>로 영역을 닫는 방식입니다. 자주 사용하는 태그의 종류가 그렇게 많지 않으므로 어떤 종류들의 태그들이 있는지 봐둘 필요가 있습니다. 파란색 바탕으로 표시한 것과 같이 HTML에는 웹브라우저가 HTML를 해석하는데 필요한 정보 뿐만아니라 검색엔진의 로봇들에게 필요한 검색 엔진 최적화(SEO) 정보도 기술합니다. 웹 클라이언트에서 HTML과 함께 페이지의 디자인에 적용한 CSS는 어떤것을 사용할지를 링크로 지정하고(녹색 배경) 기능을 부여할 자바스크립트를 포함시키는 코드(분홍색 배경) 또한 HTML에서 정확히 기술되어야 정상적인 웹 페이지의 동작이 가능해 집니다.
1993년 HTML 1.0으로 시작한 HTML의 업그레이드는 HTML 4.01을 마지막으로 보아야 합니다. HTML5는 기존의 HTML 규격과는 접근 방법이 다릅니다. 특히 ASP.NET 개발을 위하여 HTML 기반을 다지는 입장이라면 HTML의 기본 태그와 속성만 익혀두어도 충분하지 않을까 싶습니다. 실상 웹브라우저 사이에서도 HTML5 지원 수준에 차이가 있는 현실이고 낮은 버전에서는 인식조차 못하는 상황입니다.
■ CSS
CSS(Cascading Style Sheets)는 HTML, XHTML, XML등의 마크업 언어를 보조해서 풍성한 디자인을 구현하는 역할을 합니다. 최근의 반응형 웹을 위한 동작 또한 많은 경우 CSS를 통해서 이루어 집니다. 앞선 HTML 소스 코드 예제에서 확인할 수 있듯이 사이트 전체 또는 특정 페이지 그룹에 적용할 CSS를 파일로 저장해서 연결할 수도 있고 소규모 설정은 HTML에 직접 기술하기도 합니다.
최근 버전은 CSS3이지만 CSS3도 HTML5처럼 도입 초기 이므로 일반적인 CSS 버전은 CSS 2.1을 참고하면 됩니다. CSS2에 대한 한국어 상세 스펙은 아래의 링크를 참조할 수 있습니다.
http://trio.co.kr/webrefer/css2/cover.html
위의 그림은 웹브라우저의 개발자도구(F12)를 통해서 페이지의 특정 요소의 스타일을 확인한 것으로 CSS가 계층적으로 적용됨을 확인할 수 있습니다. 데이터가 아닌 화면의 모양, 색상, 크기, 동적인 보이기/숨기기등은 대부분 CSS를 통해서 적용되므로 이런 문제의 경우 서버의 ASP.NET 코드를 확인하기 이전에 어떤 CSS가 적용되는지를 단계적으로 살펴볼 필요가 있습니다.
■ JavaScript
자바스크립트는 최근에 가장 많은 호응을 받은 스크립트 언어중의 하나 임에 틀림없습니다. HTML, CSS와 함께의 웹의 핵심기술로서 웹 브라우저를 넘어서서 PDF나 위젯 제작, 플래시 등에도 사용되고 있으며, Node.js 처럼 서버측에서 자바스크립트를 사용하는 시도도 있습니다. 자바스크립트는 Java VM에 의해 수행되는 Java와 혼동해서는 안됩니다. Java의 경우 컴파일 과정을 통해 생성된 클래스를 VM에 실행시키는 형태이지만 자바스크립트는 소스 코드를 웹 브라우저가 해석해서 직접 실행한다는 특징이 있습니다.
자바스크립트와 관련한 개발은 현실적으로 이미 만들어진 라이브러리를 사용하거나 프레임워크 수행에 필요한 설정을 하는 것이 대부분이라해도 과언이 아닙니다. 그렇지만, ASP.NET Web API 방식을 사용하고 클라이언트에서는 AJAX(Asynchronous JavaScript and XML)를 상당 부분 적용하는 것과 같은 경우라면 자바스크립트를 일정 수준 구사할 수 있어야 무리없는 개발을 수행할 수 있을 것입니다. 자바스크립트에 대한 상세한 내용은 아래의 위키북 링크를 참조하세요.
https://en.wikibooks.org/wiki/JavaScript
위의 그림은 웹브라우저에서 자바스크립트 소스 코드의 특정 라인에 "Breakpoint"를 걸고 디버깅하는 모습입니다. IE나 크롬 모두 이러한 디버깅 기능을 지원하므로 마치 C언어를 개발하는 느낌으로 자바스크립트를 손쉽게 디버깅 할 수 있다는 매력도 있습니다. 개발을 진행하다 보면 어떤 자바스크립트를 적용하도록 했는지, 라이브러리의 적용 버전은 무엇인지를 확인하는 것이 코딩 실력보다 중요하다는 것을 느낄 때가 많습니다.
■ 클라이언트 웹 프레임워크
웹 개발을 진행하다보면 개발자를 괴롭히는 것이 바로 웹 브라우저간 호환성 문제입니다. 동일한 종류의 브라우저라 하더라도 버전간의 동작 차이가 있고 개발 환경에서는 문제 없이 되었는데 실제로 동작 시켜보니 의도했던 결과가 나오지 않아 당황하는 경우가 종종 있습니다. 국내의 많은 사이트들이 화면 하단에 "이 사이트는 OO 브라우저의 OO 버전에 최적화되어 있습니다"와 같은 문구를 적어 놓는 이유일 것입니다.
이러한 개발자들의 고민을 해소해 주면서 보다 효과적으로 개발을 진행 할 수 있도록 돕는 웹 프레임워크들이 다양하게 소개되고 있습니다. 그래서 웹 프로젝트 초기에 어떤 프레임워크를 사이트에 적용할지를 신중하게 결정하는 것은 매우 중요합니다. 라이브러리 중복 적용 과정의 혼란, 용도에 맞지 않는 프레임워크 적용등은 오히려 비효율을 초래할 수 있으니 주의할 필요가 있습니다. 자바 스크립트만으로 구성된 라이브러리도 있고 부트스트랩 처럼 자바스크립트와 CSS를 동시에 배포하는 경우도 있으므로 사이트 구축 목적과 용도에 따라 면밀한 검토가 필요합니다. 최근의 반응형 웹 추세에 발을 맞추고 싶다면 jQuery와 Bootstrap에 관심을 가질 필요가 있습니다.
■ 서버 웹 스택
인터넷의 급격한 확장에 기여한 것을 손꼽으라면 그중에 하나가 소위 LAMP로 말하는 Linux 운영체제, Apache 웹서버, MySQL DBMS, PHP 언어 조합입니다. 모든 요소가 오픈소스로 누구나 큰 비용을 들이지 않고 웹사이트를 손쉽게 구축할 수 있었습니다. 이에 대항하는 마이크로소프트의 서버 웹 스택이 소위 WISA로 말하는 Windows 운영체제, IIS 웹서버, SQL Server DBMS, ASP.NET 언어 조합입니다.
ASP.NET의 개발 방법론은 논외로 하고 ASP.NET의 구동 환경인 WISA 조합의 웹서버 IIS와 DBMS인 SQL Server의 가동과 중단, 기본적인 설정 방법과 주요 정보 조회 요령은 원활한 개발을 위하여 확보할 필요가 있는 기술이라 할 수 있습니다. DBMS의 경우에는 SQL Server를 가동/중단 할 수 있어야 하고 DBMS가 정상 가동 중인지 저장 공간은 어느 정도나 사용하고 있는지 확인할 수 있다면 독자 개발 및 테스트에 도움이 될 수 있습니다. 무엇보다 SQL Server에 접속해서 데이터베이스와 테이블 생성 등 기본적인 관리 명령 실행과 SQL 질의를 할 수 있도록 도구 활용에 대한 준비가 있다면 DB 연관 응용의 원활한 개발의 밑 바탕이 될 것입니다.
IIS 웹서버의 경우에도 서비스의 가동/중단 요령 뿐만아니라 웹문서 위치, 포트 번호등 중요한 사이트 속성의 설정 요령과 확인 방법등도 알아둘 필요가 있습니다. 그리고 개발 과정에서 유용한 정보는 웹서버의 로그 자료로 클라이언트의 요청과 응답 과정의 오류나 예외 상황을 추적할 수 있는 좋은 정보이므로 로깅 관련 설정과 조회 방법등을 알아둘 필요가 있습니다.
지금까지 ASP.NET에 익숙해지기 위해 필요한 여러가지 연관 기술을 살펴 보았는데 각 기술 요소를 전체적으로 구석구석 살펴볼 필요는 없다고 봅니다. 주요 핵심 요소를 익힌 다음에 실제 사이트를 구축해 가면서 필요한 자료를 매뉴얼 들추어 보듯이 참조하는 것이 적절하지 않을까 싶습니다.
'프로그래밍' 카테고리의 다른 글
| ASP.NET 레이저(Razor) 시작하기 (0) | 2016.06.02 |
|---|---|
| VB.Net 설치 프로젝트에서 언인스톨 스크립트 추가하기 (0) | 2016.05.31 |
| ASP.NET 시작하기 (0) | 2016.05.17 |
| VLCJ로 자바 환경에서 동영상 출력하기 (0) | 2016.05.12 |
| 자바 환경에서 동영상 출력하기 - VLCJ 준비 (3) | 2016.05.12 |