ASP.NET기반으로 웹 사이트를 구축하는 4가지 방법

ASP.NET은 이전에 사용했던 ASP(Active Server Pages)의 단순한 업그레이드 판이 아닙니다. 마이크로소프트사에서 "통합 웹 개발 모델"로 소개하는 것과 같이 웹페이지를 표현하는 HTML 코드에 ASP 스크립트를 단순하게 섞어서 서버 작업을 수행하는 서버 스크립트 정도에 그치는 것이 아니라 .NET 프레임워크의 일부로 제공되어 ASP.NET에서 .NET에 간편하게 접근할 수 있을 뿐만아니라 C#, VB.NET 등의 다양한 언어를 사용하여 웹 응용을 개발할 수 있습니다. ASP.NET을 이용한 웹 개발은 클라이언트에 HTML을 제공하는 시각에서는 ASP.NET Web pages, ASP.NET Web Forms, ASP.NET MVC가 있고 이 방법론들과 결합하여 또는 독립적으로 동작할 수 있는 ASP.NET Web API 개발 방법이 있습니다.

■ ASP.NET Web pages

전통적인 웹 스크립트를 사용하는 PHP나 ASP, JSP와 유사한 개발 방법으로 HTML 코드와 서버 스크립트를 함께 작성하여 동적 웹 페이지를 작성합니다. 

ASP.NET에서는 레이저(Razor) 마크업을 통해서("ASP.NET 레이저(Razor) 시작하기" 참조) HTML 소스 코드에 C#이나 VB.NET 언어를 사용하여 서버 코드를 작성할 수 있도록 지원합니다. 기존에 PHP나 ASP에 익숙해 있는 개발자가 C#이나 VB.NET 언어를 사용하여 빠르고 간단하게 페이지를 개발하고자 한다면 적당한 개발 방법입니다. 

별도의 개발 도구가 없어도 되지만 웹매트릭스("무료 웹 개발도구 웹매트릭스 설치하기 - WebMatrix3" 참조)정도만 설치해도 위의 그림과 같이 자동완성 등의 지원 기능을 통해서 편리한 개발을 할 수 있습니다.

■ ASP.NET Web Forms

ASP.NET Web Forms 개발 방법은 이름 처럼 C#이나 VB.NET으로 윈도우 폼(Forms) 응용 개발을 했던 개발자라면 어렵지 않게 적응할 수 있는 개발 방법입니다. 윈도우 폼 디자이너 처럼 끌어다 놓기(Drag & Drop) 방식으로 화면을 제작하고 이벤트 처리 코드를 작성하는 것으로 동적 웹 페이지를 제작할 수 있습니다. 

위의 그림은 비주얼스튜디오 2015로 ASP.NET Web Forms 응용의 기본 화면을 디자이너로 편집하는 화면으로 도구 상자를 보면 화면 구성을 위한 기본적인 레이블이나 텍스트 박스 뿐만아니라 다양한 컨트롤도 확인할 수 있습니다. 끌어다 놓기 방식으로 화면을 구성하면 HTML, 자바 스크립트, CSS, 서버 컨트롤, 서버 코드등을 적절하게 조합해서 응용을 자동으로 만들어 줍니다. 개발자가 굳이 HTML 코딩을 할 필요가 없다는 이야기 입니다. 

using System;
using System.Collections.Generic;
using System.Security.Claims;
using System.Security.Principal;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using Microsoft.AspNet.Identity;

namespace WebApplication2
{
    public partial class SiteMaster : MasterPage
    {
        private const string AntiXsrfTokenKey = "__AntiXsrfToken";
        private const string AntiXsrfUserNameKey = "__AntiXsrfUserName";
        private string _antiXsrfTokenValue;

        protected void Page_Init(object sender, EventArgs e)
        {
            // 아래 코드는 XSRF 공격으로부터 보호받는 데 도움이 됩니다.
            var requestCookie = Request.Cookies[AntiXsrfTokenKey];
            Guid requestCookieGuidValue;
            if (requestCookie != null && Guid.TryParse(requestCookie.Value, out requestCookieGuidValue))
            {
                // 쿠키의 Anti-XSRF 토큰 사용
                _antiXsrfTokenValue = requestCookie.Value;
                Page.ViewStateUserKey = _antiXsrfTokenValue;
            }
            else
            {
                // 새 Anti-XSRF 토큰을 생성하여 쿠키에 저장
                _antiXsrfTokenValue = Guid.NewGuid().ToString("N");
                Page.ViewStateUserKey = _antiXsrfTokenValue;

                var responseCookie = new HttpCookie(AntiXsrfTokenKey)
                {
                    HttpOnly = true,
                    Value = _antiXsrfTokenValue
                };
                if (FormsAuthentication.RequireSSL && Request.IsSecureConnection)
                {
                    responseCookie.Secure = true;
                }
                Response.Cookies.Set(responseCookie);
            }

            Page.PreLoad += master_Page_PreLoad;
        }

        protected void master_Page_PreLoad(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // Anti-XSRF 토큰 설정
                ViewState[AntiXsrfTokenKey] = Page.ViewStateUserKey;
                ViewState[AntiXsrfUserNameKey] = Context.User.Identity.Name ?? String.Empty;
            }
            else
            {
                // Anti-XSRF 토큰 유효성 검사
                if ((string)ViewState[AntiXsrfTokenKey] != _antiXsrfTokenValue
                    || (string)ViewState[AntiXsrfUserNameKey] != (Context.User.Identity.Name ?? String.Empty))
                {
                    throw new InvalidOperationException("Anti-XSRF 토큰의 유효성을 검사하지 못했습니다.");
                }
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Unnamed_LoggingOut(object sender, LoginCancelEventArgs e)
        {
            Context.GetOwinContext().Authentication.SignOut(DefaultAuthenticationTypes.ApplicationCookie);
        }
    }

}

위의 코드는 Web Forms 페이지에 기본적으로 생성된 C# 코드로 페이지 로딩 시점에 대한 코드등을 C#이나 VB.NET코드로 작성할 수 있습니다.

위의 그림은 비주얼스튜디오에서 자동 생성한 코드로 ASP 스크립트와 HTML 및 기타 자원들을 도구에서 자동 설정해 준것을 확인할 수 있습니다. ASP.NET Web Forms로 응용을 만들면 비주얼스튜디오에서 회원가입, 로그인등의 기본 코드를 자동으로 생성해 줄 뿐만아니라 다국어 버전을 간편하게 만들수 있는 방법을 제공하는 등 빠른 웹 개발에 적절한 개발 방법입니다.

■ ASP.NET MVC

MVC(Model - View - Control) 아키텍처는 사용자 인터페이스(View)와 데이터 및 비즈니스 로직을 분리(Model, Control)하여 상호간에 독자적으로 개발 및 수정, 테스트가 가능하도록 한것으로 많이 사용하는 대표적인 프레임워크로  Ruby on Rails, Django등에 채용되어 있으며 ASP.NET MVC 또한 이런 관점에서 제공되는 웹 개발 프레임워크입니다.

위의 그림은 비주얼스튜디오 2015에서 ASP.NET MVC 응용 개발 프로젝트를 생성한 화면으로 웹 페이지 코드는 Web Forms 보다는 레이저(Razor)를 사용한 ASP.NET Web Pages와 유사합니다. 우측의 솔루션 탐색기를 보면 뷰(Views)에는 로그인, 홈, 회원 가입등을 처리하는 기본 웹페이지가 자동 생성 되었으며, 모델과 컨트롤(Models, Controllers)에는 데이터 정의와 처리 로직을 기술한 C# 기본 코드가 생성되어 있습니다. 

ASP.NET MVC를 활용한 프로젝트는 체계적인 개발과 테스트 품질을 확보하고 적절한 분업과 팀웍을 최적화하기 위한 프로젝트에 적절합니다. 비주얼스튜디오에서 ASP.NET MVC 응용 프로젝트를 생성하면 MVC각 요소별 기본 코드를 생성해 줄 뿐만아니라 최근의 반응형 웹 사이트 제작에 많이 사용하는 부트스트랩(Bootstrap) 프레임워크등의 요소도 자동으로 배치하기 때문에 처음 ASP.NET MVC를 사용하는 개발자라도 어렵지 않게 프로젝트를 진행할 수 있는 장점이 있습니다. 

■ ASP.NET Web API

ASP.NET Web API는 엄밀히 말하면 기본적으로 HTML 기반의 웹 페이지를 생성하는 개발 방법론은 아닙니다. 다양한 OpenAPI 서비스가 웹 브라우저를 넘어서 스마트폰이나 태브릿, 데스크탑에서 활용되고 있는 것처럼 ASP.NET Web API는 클라이언트가 AJAX 프레임워크나 기타 방법을 통해서 요청한 정보를 JSON이나 XML 등의 형태로 내려보내고 개별 클라이언트에서 응답 받은 정보를 적절하게 가공해서 출력하는 형태로 동작합니다.

웹페이지 없이 오로지 Web API 서비스 만을 제공할 수도 있고, ASP.NET Web Pages, Web Forms, MVC등과 조합해서 사용할 수도 있습니다. 특히 AJAX 기반으로 웹브라우저에서 대부분의 사용자 인터페이스를 구성하는 SPA(Single Page Application) 응용의 경우에는 Web API는 필수 요소라 할 수 있습니다. 

위의 그림은 비주얼스튜디오 2015에서 ASP.NET Web API 프로젝트를 생성한 다음 "사용자 정보 조회 API"를 실행한 화면으로 로그인하지 않아서 권한이 없다는 오류 메시지가 JSON 형태로 수신된 것을 확인할 수 있습니다. 비주얼스튜디오 2015에서 ASP.NET Web API 프로젝트를 생성하면 Web API 코드와 함께 기본적으로 MVC 모듈을 생성해 줍니다.

지금까지 ASP.NET을 통해 여러가지 웹 사이트 구축 방법을 알아보았는데 프로젝트의 성격, 개발 기간, 참여 인원, 사용자 요구 사항등 여러가지를 감안하여 개발 방법을 선택해야 할 것입니다.