웹 응용 프로그램 이해

마지막 업데이트 날짜 2021년 12월 20일

Dreamweaver의 현재 버전 이후로 사용자 인터페이스가 간소화되었습니다. 따라서 이 문서에 설명된 옵션 중에 Dreamweaver의 현재 버전에 없는 옵션이 있을 수 있습니다. 자세한 내용은 이 문서를 참조하십시오.

웹 응용 프로그램 정보

웹 애플리케이션은 부분적으로 또는 전체적으로 정해지지 않은 콘텐츠가 있는 페이지를 포함하는 웹사이트입니다.페이지의 최종 콘텐츠는 방문자가 웹 서버에서 페이지를 요청할 때만 결정됩니다. 페이지의 최종 콘텐츠가 방문자의 작업에 따라 요청마다 달라지므로 이러한 종류의 페이지를 동적 페이지라고 합니다.

웹 애플리케이션은 다양한 과제와 문제를 해결하기 위해 구축됩니다. 이 섹션에서는 웹 애플리케이션의 일반적인 용도를 설명하고 간단한 예를 제공합니다.

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

웹 애플리케이션은 사이트 방문자와 개발자 모두에게 다음과 같이 여러 용도로 활용됩니다:

  • 방문자가 콘텐츠가 풍부한 웹 사이트에서 정보를 빠르고 쉽게 찾을 수 있게 합니다.

    이러한 종류의 웹 애플리케이션은 방문자가 원하는 대로 콘텐츠를 검색, 구성, 탐색할 수 있는 기능을 제공합니다. 예시로는 기업 인트라넷, Microsoft MSDN (www.msdn.microsoft.com), 그리고 Amazon.com (www.amazon.com)가 있습니다.

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

    과거에는 HTML 양식에 입력된 데이터가 처리를 위해 직원에게 이메일 메시지로 전송되거나 CGI 애플리케이션으로 전송되었습니다. 웹 애플리케이션은 양식 데이터를 데이터베이스에 직접 저장할 수 있고 데이터를 추출하여 분석을 위한 웹 기반 보고서를 만들 수도 있습니다. 예시로는 온라인 뱅킹 페이지, 웹 스토어 체크아웃 페이지, 설문 조사, 사용자 피드백 양식이 있습니다.

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

    웹 애플리케이션은 웹 디자이너가 사이트의 HTML을 지속적으로 업데이트하는 일에서 해방시켜 줍니다. 뉴스 편집자와 같은 콘텐츠 제공자가 웹 애플리케이션에 콘텐츠를 제공하면 웹 애플리케이션이 사이트를 자동으로 업데이트합니다. 예시로는 Economist (www.economist.com) 그리고 CNN (www.cnn.com)이 있습니다.

웹 응용 프로그램 예제

Janet은 전문 웹 디자이너이자 오랜 Dreamweaver 사용자로서 1000명 직원의 중간 규모 기업의 인트라넷과 인터넷 사이트를 유지 관리하는 업무를 담당하고 있습니다. 어느 날 인사팀의 Chris가 그녀에게 문제를 가지고 옵니다. 인사팀에서는 직원들이 걷기, 자전거 타기, 달리기를 한 마일마다 점수를 주는 직원 피트니스 프로그램을 관리하고 있습니다. 각 직원은 월별 마일 합계를 Chris에게 이메일로 보고해야 합니다. 월말에 Chris는 모든 이메일 메시지를 수집하고 점수 합계에 따라 직원들에게 소액의 상금을 수여합니다.

여기서 Chris의 문제는 건강 관리 프로그램이 너무 성공적이라는 점입니다. 이제 매우 많은 직원이 참여하여 Chris는 매월 말에 이메일이 폭주합니다.Chris는 Janet에게 웹 기반 솔루션이 있는지 묻습니다.

Janet은 다음 작업을 수행하는 인트라넷 기반 웹 애플리케이션을 제안합니다:

  • 직원들이 간단한 HTML 양식을 사용하여 웹 페이지에서 마일리지를 입력할 수 있게 합니다

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

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

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

  • Chris가 매월 말 포인트 총합을 한 번의 클릭으로 바로 확인할 수 있게 합니다

    Janet은 Dreamweaver를 사용하여 점심시간 전에 애플리케이션을 가동시켰습니다. Dreamweaver에는 이런 종류의 애플리케이션을 빠르고 쉽게 작성하는 데 필요한 도구가 있습니다.

웹 응용 프로그램 작동 방식

웹 애플리케이션은 정적 및 동적 웹 페이지의 모음입니다.정적 웹 페이지는 사이트 방문자가 요청할 때 변경되지 않는 페이지입니다. 웹 서버는 페이지를 수정하지 않고 요청한 브라우저로 전송합니다.반면 동적 웹 페이지는 요청한 브라우저로 전송되기 전에 서버에서 수정됩니다.페이지의 변화하는 특성 때문에 동적이라고 합니다.

예를 들어, 피트니스 결과를 표시하는 페이지를 디자인하면서 특정 정보(예: 직원 이름 및 결과)는 특정 직원이 페이지를 요청할 때 결정되도록 남겨둘 수 있습니다.

다음 섹션에서는 웹 애플리케이션이 작동하는 방식을 자세히 설명합니다.

정적 웹 페이지 처리

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

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

정적 웹 페이지의 최종 콘텐츠는 페이지 디자이너가 결정하며 페이지가 요청될 때 변경되지 않습니다.다음은 예시입니다:

<html> 

<head>

<title>Trio Motors Information Page</title>

</head>

<body>

<h1>About Trio Motors</h1>

<p>Trio Motors is a leading automobile manufacturer.</p>

</body>

</html>

페이지의 HTML 코드의 모든 줄은 페이지가 서버에 배치되기 전에 디자이너가 작성합니다.HTML이 서버에 있으면 변경되지 않으므로 이런 종류의 페이지를 정적 페이지라고 합니다.

정확히 말하자면 하나의 "정적" 페이지의 모든 항목이 다 정적인 것은 아닙니다. 예를 들어 롤오버 이미지나 Flash 내용(SWF 파일)은 정적 페이지를 움직이도록 할 수 있습니다. 하지만 이 문서에서는 수정 없이 브라우저에 보내지는 페이지를 정적 페이지라고 합니다.

웹 서버가 정적 페이지에 대한 요청을 받으면 서버는 요청을 읽고 페이지를 찾아 다음 예시와 같이 요청한 브라우저로 전송합니다:

정적 웹 페이지 처리

A. 웹 브라우저: 정적 페이지 요청 B. 웹 서버: 페이지 검색 C. 웹 서버: 요청한 브라우저에 페이지 전송 

웹 애플리케이션의 경우 방문자가 페이지를 요청할 때 코드의 특정 줄이 결정되지 않습니다.이러한 줄은 페이지가 브라우저로 전송되기 전에 어떤 메커니즘에 의해 결정되어야 합니다.메커니즘은 다음 섹션에서 설명합니다.

동적 페이지 처리

웹 서버가 정적 웹 페이지에 대한 요청을 받으면 서버는 요청한 브라우저로 페이지를 직접 전송합니다.하지만 웹 서버가 동적 페이지에 대한 요청을 받으면 다르게 반응합니다. 페이지를 완성할 책임이 있는 특별한 소프트웨어에 페이지를 전달합니다.이러한 특수 소프트웨어를 응용 프로그램 서버라고 합니다.

애플리케이션 서버는 페이지의 코드를 읽고 코드의 지시에 따라 페이지를 완성한 다음 페이지에서 코드를 제거합니다.그 결과 애플리케이션 서버가 웹 서버로 다시 전달하는 정적 페이지가 생성되고, 웹 서버는 요청한 브라우저로 페이지를 전송합니다.페이지가 도착했을 때 브라우저가 받는 것은 순수한 HTML뿐입니다.다음은 프로세스입니다.

동적 페이지 처리

A. 웹 브라우저: 동적 페이지 요청 B. 웹 서버: 페이지를 검색하여 응용 프로그램 서버에 전달 C. 응용 프로그램 서버: 페이지에서 지침을 검색한 다음 페이지 마무리 D. 응용 프로그램 서버: 마무리된 페이지를 웹 서버에 다시 전달 E. 웹 서버: 마무리된 페이지를 요청한 브라우저에 전송 

데이터베이스에 액세스

애플리케이션 서버를 사용하면 데이터베이스와 같은 서버측 리소스로 작업할 수 있습니다.예를 들어, 동적 페이지는 애플리케이션 서버에 데이터베이스에서 데이터를 추출하여 페이지의 HTML에 삽입하도록 지시할 수 있습니다.자세한 내용은 www.adobe.com/go/learn_dw_dbguide_kr 사이트를 참조하십시오.

데이터베이스를 사용하여 콘텐츠를 저장하면 웹 사이트의 디자인과 사이트 사용자에게 표시하려는 콘텐츠를 분리할 수 있습니다.모든 페이지에 대해 개별 HTML 파일을 작성하는 대신 표시하려는 다양한 종류의 정보에 대한 페이지 또는 템플릿 하나만 작성하면 됩니다.그런 다음 데이터베이스에 콘텐츠를 업로드하고 사용자 요청에 응답하여 웹 사이트가 해당 콘텐츠를 검색하도록 할 수 있습니다.또한 단일 소스에서 정보를 업데이트한 다음 각 페이지를 수동으로 편집하지 않고도 웹 사이트 전체에 해당 변경 사항을 적용할 수 있습니다.Adobe Dreamweaver를 사용하여 데이터베이스에서 데이터를 삽입, 업데이트 또는 삭제하는 웹 폼을 디자인하세요.

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

애플리케이션 서버는 데이터베이스와 직접 통신할 수 없습니다. 데이터베이스의 독점 형식으로 인해 메모장이나 BBEdit에서 연 Microsoft Word 문서를 해독할 수 없는 것과 같은 방식으로 데이터를 해독할 수 없기 때문입니다.애플리케이션 서버는 데이터베이스 드라이버를 통해서만 데이터베이스와 통신할 수 있습니다. 데이터베이스 드라이버는 애플리케이션 서버와 데이터베이스 간의 통역사 역할을 하는 소프트웨어입니다.

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

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

SELECT lastname, firstname, fitpoints

FROM employees

이 문은 3개 열의 레코드세트를 생성하고 데이터베이스에 있는 모든 직원의 성, 이름, 피트니스 포인트가 포함된 행으로 채웁니다.자세한 내용은 www.adobe.com/go/learn_dw_sqlprimer_kr 사이트를 참조하십시오.

다음 예제는 데이터베이스를 쿼리하고 브라우저에 데이터를 반환하는 프로세스를 보여줍니다.

데이터베이스에 액세스

A. 웹 브라우저: 동적 페이지 요청 B. 웹 서버: 페이지를 검색하여 응용 프로그램 서버에 전달 C. 응용 프로그램 서버: 페이지에서 명령 검색 D. 응용 프로그램 서버: 데이터베이스 드라이버에 쿼리 전송 E. 드라이버: 데이터베이스에 대해 쿼리 실행 F. 레코드세트가 드라이버에 반환됨 G. 드라이버: 레코드세트를 응용 프로그램 서버에 전달 H. 응용 프로그램 서버: 데이터를 페이지에 삽입한 다음, 페이지를 웹 서버에 전달 I. 웹 서버: 마무리된 페이지를 요청한 브라우저에 전송 

웹 애플리케이션에는 적절한 데이터베이스 드라이버가 서버에 설치되어 있다면 거의 모든 데이터베이스를 사용할 수 있습니다.

소규모 저비용 애플리케이션을 작성할 계획이라면 Microsoft Access에서 만든 것과 같은 파일 기반 데이터베이스를 사용할 수 있습니다. 강력하고 비즈니스에 중요한 애플리케이션을 작성할 계획이라면 Microsoft SQL Server, Oracle 9i, MySQL에서 만든 것과 같은 서버 기반 데이터베이스를 사용할 수 있습니다.

데이터베이스가 웹 서버가 아닌 다른 시스템에 있는 경우, 웹 애플리케이션이 빠르고 효율적으로 작동할 수 있도록 두 시스템 간에 빠른 연결이 있는지 확인하십시오.

동적 페이지 작성

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

메모: CFML 지원은 Dreamweaver 이후 버전에서 제거되었습니다.

<html> 

<head>

<title>Trio Motors 정보 페이지</title>

</head>

<body>

<h1>Trio Motors 소개</h1>

<p>Trio Motors는 선도적인 자동차 제조업체입니다.</p>

<!--- 임베드된 지침이 여기서 시작됩니다 --->

<cfset department="Sales">

<cfoutput>

<p>저희 #department# 페이지를 방문해 보세요.</p>

</cfoutput>

<!--- 임베디드 명령어가 여기서 끝남 --->

</body>

</html>

이 페이지의 임베디드 명령어는 다음과 같은 작업을 수행합니다:

department라는 변수를 만들고 "Sales" 문자열을 할당합니다.

변수의 값인 &quot;Sales&quot;를 HTML 코드에 삽입하세요.

애플리케이션 서버가 다음 페이지를 웹 서버에 반환합니다:

<html> 

<head>

<title>Trio Motors 정보 페이지</title>

</head>

<body>

<h1>Trio Motors 소개</h1>

<p>Trio Motors는 선도적인 자동차 제조업체입니다.</p>

<p>판매 페이지를 꼭 방문해 보세요.</p>

</body>

</html>

웹 서버는 요청하는 브라우저에 페이지를 전송하고, 브라우저는 다음과 같이 페이지를 표시합니다:

Trio Motors 소개

Trio Motors는 선도적인 자동차 제조업체입니다.

판매 페이지를 꼭 방문해 보세요.

서버에서 사용할 수 있는 서버 기술에 따라 사용할 스크립팅 또는 태그 기반 언어를 선택합니다. 다음은 Dreamweaver에서 지원하는 서버 기술에 대한 추천 언어입니다:

서버 기술

언어

ColdFusion

CFML(ColdFusion Markup Language)

ASP(Active Server Page)

VBScript

JavaScript

PHP

PHP

Dreamweaver는 페이지가 작동하는 데 필요한 서버측 스크립트나 태그를 만들 수 있으며, Dreamweaver 코딩 환경에서 직접 작성할 수도 있습니다.

웹 응용 프로그램 용어

이 섹션에서는 웹 애플리케이션과 관련하여 자주 사용되는 용어를 정의합니다.

응용 프로그램 서버

서버측 스크립트나 태그가 포함된 웹 페이지를 웹 서버가 처리할 수 있도록 도와주는 소프트웨어입니다. 이러한 페이지가 서버에 요청되면 웹 서버는 페이지를 브라우저로 보내기 전에 애플리케이션 서버에 페이지를 넘겨 처리하도록 합니다. 자세한 내용은 웹 애플리케이션 작동 방식을 참조하십시오.

일반적인 애플리케이션 서버에는 ColdFusion과 PHP가 있습니다.

데이터베이스

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

데이터베이스

데이터베이스 드라이버

웹 애플리케이션과 데이터베이스 간의 인터프리터 역할을 하는 소프트웨어입니다. 데이터베이스의 데이터는 독점 형식으로 저장됩니다. 데이터베이스 드라이버를 사용하면 웹 애플리케이션이 해독할 수 없는 데이터를 읽고 조작할 수 있습니다.

데이터베이스 관리 시스템

(DBMS 또는 데이터베이스 시스템) 데이터베이스를 만들고 조작하는 데 사용되는 소프트웨어입니다. Microsoft Access, Oracle 9i, MySQL과 같은 일반적인 데이터베이스 시스템이 있습니다.

데이터베이스 쿼리

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

동적 페이지

애플리케이션 서버가 페이지를 브라우저로 보내기 전에 맞춤 설정한 웹 페이지입니다.

레코드세트

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

레코드세트

관계형 데이터베이스

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

관계형 데이터베이스

서버 기술

애플리케이션 서버가 런타임에 동적 페이지를 수정할 때 사용하는 기술입니다.

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

  • Adobe® ColdFusion®

  • Microsoft Active Server Page(ASP)

  • PHP: Hypertext Preprocessor(PHP)

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

정적 페이지

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

웹 응용 프로그램

부분적으로 또는 완전히 미확정된 콘텐츠가 포함된 페이지가 있는 웹 사이트입니다. 이러한 페이지의 최종 콘텐츠는 방문자가 웹 서버에서 페이지를 요청할 때만 결정됩니다. 페이지의 최종 콘텐츠가 방문자의 작업에 따라 요청마다 달라지기 때문에 이런 유형의 페이지를 동적 페이지라고 합니다.

웹 서버

웹 브라우저의 요청에 응답하여 웹 페이지를 전송하는 소프트웨어입니다. 페이지 요청은 방문자가 브라우저의 웹 페이지에서 링크를 클릭하거나, 브라우저에서 책갈피를 선택하거나, 브라우저의 주소 텍스트 상자에 URL을 입력할 때 생성됩니다.

널리 사용되는 웹 서버로는 Microsoft Internet Information Server (IIS)와 Apache HTTP Server가 있습니다.