웹 응용 프로그램 이해

웹 응용 프로그램은 내용이 부분적으로 정의되거나 또는 전혀 정의되지 않은 페이지를 모아 놓은 웹 사이트입니다. 페이지의 최종 내용은 방문자의 요청에 따라 결정됩니다. 방문자의 작업에 따라 페이지의 최종 내용이 달라지므로 이러한 유형의 페이지를 동적 페이지라고 합니다.

웹 응용 프로그램은 다양한 요구와 문제를 처리하기 위한 것입니다. 이 섹션에서는 웹 응용 프로그램의 일반적인 용도를 설명하고 간단한 예제를 제공합니다.

웹 응용 프로그램의 일반적 용도

웹 응용 프로그램은 사이트 방문자와 개발자 모두에게 다음과 같은 용도로 사용됩니다.

• 많은 내용이 포함되어 있는 웹 사이트에서 방문자가 정보를 쉽고 빠르게 찾을 수 있습니다.

  이러한 유형의 웹 응용 프로그램을 사용하면 내용을 보이는 그대로 검색, 구성 및 탐색할 수 있습니다. 사내 인트라넷, Microsoft MSDN(www.msdn.microsoft.com) 및 Amazon.com(www.amazon.com)을 예로 들 수 있습니다.

• 사이트 방문자가 제공하는 데이터를 수집, 저장 및 분석합니다.

  전에는 HTML 양식에서 입력된 데이터를 이메일을 사용하여 사원에게 보내거나 CGI 응용 프로그램에 보내 처리했습니다. 웹 응용 프로그램을 사용하면 양식 데이터를 바로 데이터베이스에 저장하거나 데이터를 추출하여 웹 기반 보고서를 작성하여 분석할 수 있습니다. 온라인 뱅킹 페이지, 체크 아웃 페이지, 설문 조사, 사용자 피드백 양식 등을 예로 들 수 있습니다.

• 지속적으로 내용이 바뀌는 웹 사이트의 업데이트

  웹 응용 프로그램을 사용하면 웹 디자이너가 지속적으로 사이트의 HTML을 업데이트할 필요가 없습니다. 뉴스 편집자와 같은 내용 공급자가 웹 응용 프로그램에 내용을 공급하면 웹 응용 프로그램에서 자동으로 해당 사이트를 업데이트합니다. Economist(www.economist.com) 및 CNN(www.cnn.com)을 예로 들 수 있습니다.

웹 응용 프로그램 예제

Janet은 사원이 1000명 정도 되는 중소기업에서 인트라넷과 인터넷 사이트 관리를 담당하는 전문 웹 디자이너로 Dreamweaver를 오랜 기간 사용해 온 사용자입니다. 하루는 인사과의 Chris가 문제를 들고 그녀를 찾아 왔습니다. 인사과에서는 걷기, 자전거 타기 또는 달리기 등의 운동한 마일마다 사원에게 점수를 주는 건강 관리 프로그램을 운영하고 있습니다. 사원들은 자신의 월별 마일 합계를 이메일로 Chris에게 보고해야 합니다. 월말에 Chris는 모든 이메일 메시지를 모아 총점에 따라 사원에게 상을 줍니다.

여기서 Chris의 문제는 건강 관리 프로그램이 너무 성공적이라는 점입니다. 너무 많은 사원이 참여하기 때문에 월말이 되면 Chris에게 이메일이 쇄도하게 되었습니다. 그러한 문제를 해결하기 위하여 Chris는 Janet에게 웹 기반 솔루션이 있는지 물었습니다.

Janet은 다음 작업을 수행하는 인트라넷 기반 웹 응용 프로그램을 제안했습니다.

• 사원들이 간단한 HTML 양식을 사용하여 웹 페이지에 자신의 마일리지를 입력하도록 합니다.

• 사원의 마일리지를 데이터베이스에 저장합니다.

• 마일리지 데이터를 기반으로 건강 관리 점수를 계산합니다.

• 사원들이 자신의 월별 진척 상황을 확인할 수 있도록 합니다.

• 월말에 Chris가 간단하게 총점을 계산할 수 있도록 합니다.

  Janet은 이러한 유형의 응용 프로그램을 쉽고 빠르게 만드는 데 필요한 도구를 갖추고 있는 Dreamweaver를 사용하여 점심 시간이 되기 전에 응용 프로그램을 완성했습니다.

웹 응용 프로그램 작동 방식

웹 응용 프로그램은 정적 및 동적 웹 페이지의 모음입니다. 정적 웹 페이지는 사이트 방문자가 요청할 때 변경되지 않는 페이지입니다. 즉, 웹 서버에서 요청 웹 브라우저에 페이지를 수정하지 않은 상태로 보냅니다. 반면에 동적 웹 페이지는 요청하는 브라우저에 보내기 전에 서버에 의해 수정됩니다. 이러한 특성 때문에 동적 웹 페이지라고 합니다.

예를 들어 건강 관리 결과를 표시하면서 일부 정보(예:사원 이름 및 결과)는 특정 사원이 요청할 때 결정되는 페이지를 디자인할 수 있습니다.

다음 단원에서는 웹 응용 프로그램 작업 방법을 자세히 설명합니다.

정적 웹 페이지 처리

정적 웹 사이트는 웹 서버를 실행하는 컴퓨터에서 호스팅하는 일련의 관련 HTML 페이지 및 파일로 구성됩니다.

웹 서버는 웹 브라우저의 요청에 응답하여 웹 페이지를 제공하는 소프트웨어입니다. 방문자가 웹 페이지에서 링크를 클릭하거나, 브라우저에서 북마크를 선택하거나 또는 브라우저의 주소 텍스트 상자에 URL을 입력하면 페이지 요청이 생성됩니다.

정적 웹 페이지의 최종 내용은 페이지 디자이너에 의해 결정되며 페이지가 요청된 경우에는 변경되지 않습니다. 다음 예제를 살펴보십시오.

이 HTML 코드 페이지의 모든 행은 페이지를 서버에 업로드하기 전에 디자이너에 의해 작성됩니다. 일단 서버에 업로드하면 HTML이 변경되지 않기 때문에 이러한 유형의 페이지를 정적 페이지라고 합니다.

웹 서버가 정적 페이지에 대한 요청을 받을 경우, 서버는 다음 예제와 같이 요청을 읽고, 페이지를 찾은 후, 요청한 브라우저에 페이지를 보냅니다.

웹 응용 프로그램을 사용한 경우, 방문자가 페이지를 요청할 때 일부 코드는 정의되지 않은 상태입니다. 특정 메커니즘을 통해 이러한 코드들을 정의한 다음 이 페이지를 브라우저에 보낼 수 있습니다. 해당 메커니즘은 다음 섹션에서 설명합니다.

동적 페이지 처리

웹 서버가 정적 웹 페이지에 대한 요청을 받은 경우 서버는 요청한 브라우저에 페이지를 바로 보냅니다. 웹 서버가 동적 페이지에 대한 요청을 받으면 이와 다르게 반응합니다. 웹 서버는 관련된 특수 소프트웨어로 페이지를 전달하여 페이지에 대한 요청을 처리합니다. 이러한 특수 소프트웨어를 응용 프로그램 서버라고 합니다.

응용 프로그램 서버는 페이지의 코드를 읽고 코드의 지침에 따라 페이지를 마무리한 다음 페이지에서 코드를 제거합니다. 이 결과로 만들어진 정적 페이지를 응용 프로그램 서버가 웹 서버에 다시 전달하고, 웹 서버는 이 페이지를 요청한 브라우저에 보냅니다. 페이지가 도착했을 때 브라우저가 받는 내용은 순수한 HTML입니다. 다음은 프로세스입니다.

데이터베이스에 액세스

응용 프로그램 서버는 데이터베이스와 같은 서버 측 리소스를 사용할 수 있도록 합니다. 예를 들어 동적 페이지에서 응용 프로그램 서버에 명령하여 데이터베이스에서 데이터를 추출한 다음 해당 페이지의 HTML에 삽입하도록 할 수 있습니다. 자세한 내용은 www.adobe.com/go/learn_dw_dbguide_kr 사이트를 참조하십시오.

데이터베이스를 사용하여 내용을 저장하면 웹 사이트의 디자인을 사이트 사용자에게 표시할 내용과 구분할 수 있습니다. 페이지마다 개별 HTML 파일을 작성하는 대신 표시할 정보의 종류별로 페이지나 템플릿을 작성하기만 하면 됩니다. 그런 다음 데이터베이스로 내용을 업로드한 후 웹 사이트에서 사용자의 요청에 따라 내용을 검색할 수 있습니다. 또한 단일 소스의 정보를 업데이트한 다음 각 페이지를 직접 편집하지 않고도 웹 사이트 전체에 변경 내용을 적용할 수 있습니다. Adobe Dreamweaver를 사용하여 데이터베이스의 데이터를 삽입, 업데이트 또는 삭제하는 웹 양식을 디자인할 수 있습니다.

데이터베이스에서 데이터를 추출하기 위한 명령을 데이터베이스 쿼리라고 합니다. 쿼리는 SQL(구조화된 쿼리 언어)이라는 데이터베이스 언어로 표현된 검색 조건으로 구성됩니다. SQL 쿼리는 페이지의 서버 측 스크립트 또는 태그에 작성됩니다.

Microsoft Word 문서를 메모장이나 BBEdit에서 열면 읽을 수 없는 것과 마찬가지로, 데이터베이스의 경우 데이터를 데이터베이스 전용 형식으로 만들기 때문에 응용 프로그램 서버는 데이터베이스와 직접 통신할 수 없습니다. 응용 프로그램 서버는 데이터베이스 드라이버를 통해서만 데이터베이스와 통신할 수 있습니다. 이 드라이버는 응용 프로그램 서버와 데이터베이스 사이에서 통역 역할을 합니다.

드라이버에서 통신을 설정한 다음 데이터베이스에 대해 쿼리가 실행되고 레코드세트가 생성됩니다. 레코드세트는 데이터베이스에 있는 하나 이상의 테이블에서 추출된 데이터의 집합입니다. 레코드세트가 응용 프로그램 서버에게 반환되면, 서버가 이 데이터를 이용하여 페이지를 완성합니다.

다음은 SQL로 작성된 간단한 데이터베이스 쿼리입니다.

이 명령문은 데이터베이스에 세 개 열로 구성된 레코드세트를 작성한 다음 이 레코드세트에 사원의 성, 이름 및 건강 관리 점수를 포함하는 행으로 채웁니다. 자세한 내용은 www.adobe.com/go/learn_dw_sqlprimer_kr 사이트를 참조하십시오.

다음은 데이터베이스에 대해 쿼리를 실행하고 브라우저에 해당 데이터를 반환하는 과정에 대한 예제입니다.

서버에 적절한 데이터베이스 드라이버가 설치되어 있으면 웹 응용 프로그램에서 거의 모든 데이터베이스를 사용할 수 있습니다.

비용이 적게 드는 소규모의 응용 프로그램을 구축하려는 경우 Microsoft Access에서 작성한 데이터베이스와 같은 파일 기반 데이터베이스를 사용하면 됩니다. 견고하고 업무상 중요한 응용 프로그램을 구축하려는 경우에는 Microsoft SQL Server, Oracle 9i 또는 MySQL 등에서 작성한 데이터베이스와 같은 서버 기반 데이터베이스를 사용하면 됩니다.

데이터베이스가 웹 서버와 다른 시스템에 있는 경우 두 시스템의 연결 속도가 빨라야 웹 응용 프로그램의 속도 및 효율성이 높아집니다.

동적 페이지 작성

동적 페이지를 작성하려면 먼저 HTML을 작성하고 서버 측 스크립트 또는 태그를 HTML에 추가하여 페이지를 동적으로 만듭니다. 이 결과로 만들어진 코드는 해당 언어가 페이지의 HTML에 포함되어 나타납니다. 따라서 이러한 언어를 HTML 포함 프로그래밍 언어라고 합니다. 다음 예제에서는 CFML(ColdFusion Markup Language)을 사용합니다.

참고: CFML은 Dreamweaver CC부터 지원되지 않습니다.

이 페이지의 포함 명령은 다음 작업을 수행합니다.

응용 프로그램 서버는 다음 페이지를 웹 서버에 반환합니다.

웹 서버는 이 페이지를 요청한 브라우저에 보내고 브라우저는 이를 다음과 같이 표시합니다.

About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our Sales page.

서버에서 사용할 수 있는 서버 기술에 따라 사용할 스크립팅 또는 태그 기반 언어를 선택합니다. 다음은 Dreamweaver에서 지원하는 서버 기술에 대해 가장 많이 사용되는 언어입니다.

페이지 작동에 필요한 서버측 스크립트 또는 태그를 Dreamweaver에서 자동으로 만들 수 있을 뿐만 아니라 사용자가 Dreamweaver 코딩 환경에서 직접 작성할 수도 있습니다.

웹 응용 프로그램 용어

이 단원에서는 웹 응용 프로그램과 관련하여 자주 사용되는 용어를 정의합니다.

웹 서버가 서버 측 스크립트 또는 태그를 포함하는 웹 페이지를 처리할 수 있는 소프트웨어입니다. 이러한 페이지에 대한 요청이 서버에 들어 오면, 웹 서버는 해당 페이지를 브라우저에 보내기 전에 응용 프로그램 서버에 전달하여 처리하도록 합니다. 자세한 내용은 웹 응용 프로그램 작동 방식을 참조하십시오.

일반적인 응용 프로그램 서버로는 ColdFusion, PHP 등이 있습니다.

테이블에 저장된 데이터의 모음입니다. 다음의 예에서와 같이 테이블의 각 행은 하나의 레코드를 구성하며 각 열은 레코드의 필드를 구성합니다.

웹 응용 프로그램과 데이터베이스 사이에서 인터프리터의 역할을 수행하는 소프트웨어입니다. 데이터베이스의 데이터는 전용 형식으로 저장됩니다. 데이터베이스 드라이버는 다른 방법으로는 판독할 수 없는 데이터를 웹 응용 프로그램이 읽고 처리할 수 있도록 합니다.

(DBMS 또는 데이터베이스 시스템) 데이터베이스를 만들고 작업을 수행하는 데 사용되는 소프트웨어입니다. 일반적인 데이터베이스 시스템에는 Microsoft Access, Oracle 9i 및 MySQL이 포함됩니다.

데이터베이스에서 레코드세트를 추출하는 작업입니다. 쿼리는 SQL이라는 데이터베이스 언어로 표현된 검색 조건으로 구성됩니다. 예를 들어 쿼리는 특정 열 또는 특정 레코드만 레코드세트에 포함되도록 지정할 수 있습니다.

페이지를 브라우저에 보내기 전에 응용 프로그램 서버에서 사용자 정의하는 웹 페이지입니다.

다음 예제와 같이 데이터베이스에 있는 하나 이상의 테이블에서 추출된 데이터 세트입니다.

둘 이상의 테이블을 포함하며, 각 테이블이 데이터를 공유하는 데이터베이스입니다. 다음 데이터베이스는 두 테이블이 DepartmentID 열을 공유하므로 관계형 데이터베이스입니다.

응용 프로그램 서버가 런타임에 동적 페이지를 수정하는 데 사용하는 기술입니다.

Dreamweaver 개발 환경에서는 다음 서버 기술을 지원합니다.

• Adobe® ColdFusion®

• Microsoft Active Server Page(ASP)

• PHP: Hypertext Preprocessor(PHP)

  Dreamweaver의 코딩 환경을 사용하면 위에 나열되지 않은 다른 서버 기술을 사용하여 페이지를 개발할 수도 있습니다.

페이지를 브라우저에 보내기 전에 응용 프로그램 서버에서 수정하지 않는 웹 페이지입니다. 자세한 내용은 정적 웹 페이지 처리를 참조하십시오.

내용이 부분적으로 정의되거나 전혀 정의되지 않은 페이지를 모아 놓은 웹 사이트입니다. 페이지의 최종 내용은 방문자가 웹 서버에서 페이지를 요청할 때 결정됩니다. 방문자의 작업에 따라 페이지의 최종 내용이 달라지므로 이러한 유형의 페이지를 동적 페이지라고 합니다.

웹 브라우저의 요청에 응답하여 웹 페이지를 제공하는 소프트웨어입니다. 방문자가 브라우저에서 웹 페이지의 링크를 클릭하거나, 브라우저에서 북마크를 선택하거나, 브라우저의 주소 텍스트 상자에 URL을 입력하면 페이지 요청이 생성됩니다.

많이 사용되는 웹 서버로는 Microsoft IIS(Internet Information Server), Apache HTTP Server 등이 있습니다.