Visual Web Developer 시각적 안내

이 항목에서는 Visual Web Developer에 포함되어 있는 많은 기능과 도구에 대해 간략히 설명합니다. Visual Web Developer는 Visual Studio 2010 또는 Visual Web Developer 2010 Express에서 웹 프로젝트를 만드는 데 사용되는 기능 집합입니다.

이 항목에는 다음과 같은 단원이 포함되어 있습니다.

Visual Studio를 시작할 때 기본적으로 열리는 첫 번째 페이지는 시작 페이지입니다. 시작 페이지에서는 손쉽게 프로젝트에 액세스하거나 프로젝트를 만들 수 있으며, 공개될 제품 릴리스와 전문가 이벤트를 알아보고, 최신 개발 뉴스를 읽어볼 수 있습니다. 시작 페이지를 표시하려면 보기 메뉴에서 시작 페이지를 클릭합니다.

시작 페이지에서는 프로젝트를 만드는 데 유용한 지침과 리소스도 제공됩니다. 여기에는 응용 프로그램 계획 및 추적, 코드 디자인, 코드 개발 및 테스트, 응용 프로그램 관리 등의 작업이 포함됩니다.

다음 그림에서는 Visual Studio 시작 페이지를 보여 줍니다.

Visual Studio 시작 페이지

일반 개발 설정이 적용된 IDE

솔루션과 솔루션의 프로젝트에는 응용 프로그램에 포함된 페이지, 코드 파일, 폴더, 참조 및 데이터 연결을 나타내는 항목이 들어 있습니다. 솔루션은 여러 프로젝트를 포함할 수 있는 컨테이너입니다. 프로젝트에는 일반적으로 여러 개의 파일, 폴더 및 기타 리소스가 포함됩니다. 자세한 내용은 컨테이너로서의 솔루션컨테이너로서의 프로젝트를 참조하십시오.

웹 프로젝트

Visual Web Developer를 사용할 경우 일반적으로 ASP.NET 웹 응용 프로그램 프로젝트나 ASP.NET 웹 사이트 프로젝트를 만듭니다. 두 프로젝트 형식 모두 웹 응용 프로그램을 만드는 데 사용할 수 있습니다.

웹 응용 프로그램 프로젝트와 웹 사이트 프로젝트 간에 선택할 때 고려할 기본 요소는 프로젝트를 배포할 방법과 프로젝트를 배포 후 유지 관리할 방법입니다. 프로젝트를 만들기 전에 적절한 프로젝트 형식을 선택하는 것이 중요합니다. 자세한 내용은 웹 응용 프로그램 프로젝트와 웹 사이트 프로젝트 비교를 참조하십시오.

새 웹 사이트 대화 상자에서는 로컬 컴퓨터 또는 원격 컴퓨터에서 새 웹 사이트를 만들거나, FTP를 사용하는 웹 사이트 위치에 연결하여 파일을 읽고 쓸 수 있습니다. 다음 그림에서는 새 웹 사이트 대화 상자를 보여 줍니다.

새 웹 사이트 대화 상자

새 웹 사이트 대화 상자

새 프로젝트 대화 상자에서는 새 웹 응용 프로그램을 만들 수 있습니다. 자세한 내용은 방법: 솔루션 및 프로젝트 만들기를 참조하십시오. 다음 그림에서는 새 프로젝트 대화 상자를 보여 줍니다.

새 프로젝트 대화 상자

새 웹 사이트 대화 상자

웹 프로젝트에 대한 자세한 내용은 Visual Studio의 웹 사이트 프로젝트 형식을 참조하십시오.

웹 프로젝트 항목

웹 프로젝트를 만든 후에는 새 항목 추가 대화 상자를 사용하여 프로젝트에 페이지와 기타 항목을 추가합니다. 설치된 템플릿 목록에서 항목을 선택하면 해당 항목이 프로젝트에 추가됩니다. 목록에 표시되는 항목은 선택한 프로그래밍 언어, 프로젝트 형식 및 대상 .NET Framework 버전에 따라 달라집니다. 다음 그림에서는 새 항목 추가 대화 상자를 보여 줍니다.

새 항목 추가 대화 상자

새 항목 추가 대화 상자

Visual Studio 제품군은 도구 모음, 도킹하거나 자동으로 숨길 수 있는 도구 창, 편집기 창 등의 요소로 구성된 단일 IDE(통합 개발 환경)를 공유합니다. 웹 응용 프로그램을 개발할 때는 웹 프로젝트와 관련된 도구, 메뉴 및 도구 모음을 사용합니다.

참고참고

Visual Studio를 처음 시작할 때 웹 개발 설정 컬렉션을 선택한 경우 웹 프로젝트와 관련된 도구, 메뉴 및 도구 모음이 Visual Studio에 표시됩니다. 자세한 내용은 방법: 웹 개발 환경 설정 선택을 참조하십시오.

다음 그림에서는 Visual Web Developer에서 사용할 수 있는 창과 도구를 보여 줍니다.

참고참고

이 그림에서는 기본 창과 창 위치를 보여 줍니다. 보기 메뉴를 사용하여 추가 창을 표시할 수도 있습니다. 또한 필요에 맞게 창을 다시 정렬하고 크기를 조정할 수 있습니다. 개발 환경을 변경한 경우에는 IDE에 표시되는 항목이 이 그림과 다릅니다.

Visual Web Developer 환경

IDE 창 및 도구의 구성도

Visual Web Developer에서 사용하는 많은 도구 창은 도킹할 수 있습니다. 도구 창이 항상 표시되거나(고정) 사용하지 않을 때는 화면에서 사라지도록(자동 숨기기) 구성할 수 있습니다.

메뉴 및 도구 모음 사용자 지정

Visual Web Developer의 메뉴와 도구 모음을 사용자 지정할 수 있습니다. 메뉴 명령과 도구 모음을 사용자 지정하려면 도구 메뉴에서 사용자 지정을 클릭합니다. 사용자 지정 대화 상자가 표시됩니다. 다음 그림에서는 사용자 지정 대화 상자를 보여 줍니다.

사용자 지정 대화 상자

사용자 지정 대화 상자

사용자 지정 대화 상자에서는 표시할 도구 모음을 선택하고, 사용자 지정 도구 모음 및 메뉴를 만들고, 도구 모음과 메뉴의 항목을 추가 및 제거하고, 도구 모음 및 메뉴 항목의 모양을 변경할 수 있습니다.

솔루션 탐색기

솔루션 탐색기 창에는 솔루션, 프로젝트 및 프로젝트 내의 항목이 표시됩니다. 솔루션 탐색기에서는 프로젝트와 해당 파일에 대한 구조화된 보기가 제공될 뿐만 아니라 프로젝트 및 해당 파일과 관련된 명령에 쉽게 액세스할 수 있습니다.

솔루션 탐색기에서 편집하기 위해 파일을 열고, 새 파일을 프로젝트에 추가하고, 솔루션, 프로젝트 및 항목 속성을 설정할 수 있습니다. 이 창과 연결된 도구 모음에는 창에서 선택한 항목을 관리하는 데 사용되는 일반적인 명령이 표시됩니다. 솔루션 탐색기에 액세스하려면 보기 메뉴에서 솔루션 탐색기를 클릭합니다. 다음 그림에서는 솔루션 탐색기 창을 보여 줍니다.

솔루션 탐색기 창

Web.config 변환 파일이 있는 솔루션 탐색기
참고참고

이 그림에는 팀 탐색기 탭이 포함되어 있습니다. 이 탭은 Visual Studio Team System Edition을 사용할 경우에 사용할 수 있습니다.

자세한 내용은 솔루션 탐색기 사용방법: 솔루션 및 프로젝트 만들기를 참조하십시오.

속성 창

속성 창에서는 편집기와 페이지 디자이너에서 작업 중인 개체의 속성과 이벤트를 보고 설정할 수 있습니다. 또한 속성 창을 사용하여 파일, 프로젝트 및 솔루션 속성을 편집하고 볼 수도 있습니다. 속성 창을 표시하려면 보기 메뉴에서 속성 창을 클릭합니다.

속성 창에서는 선택한 속성에 따라 여러 가지 방법으로 속성 값에 대한 작업을 수행할 수 있습니다. 속성에 따라 텍스트 상자에 값을 입력하는 경우도 있고, 드롭다운 목록을 사용하거나 단추를 클릭하여 사용자 지정 편집기 대화 상자를 표시하는 경우도 있습니다. 회색으로 표시된 속성은 읽기 전용입니다. 다음 그림에서는 속성 창을 보여 줍니다.

속성 창

속성 창

서버 탐색기

서버 탐색기 창을 사용하여 데이터 연결을 열고, 서버에 로그온하고, 서버 기반 데이터베이스와 시스템 서비스를 탐색할 수 있습니다.

참고참고

Visual Web Developer Express에서는 데이터베이스 연결에 대한 액세스만 제공하고 다른 서버 기반 서비스에 대한 액세스는 제공하지 않으므로 서버 탐색기 창의 이름이 데이터베이스 탐색기로 표시됩니다.

Visual Studio의 디자이너 창에서 작업할 때는 일반적으로 서버 탐색기의 항목을 끌어와 디자인 화면에 놓습니다. 그러면 선택한 항목을 참조하도록 구성된 새 구성 요소가 만들어집니다.

자세한 내용은 서버 탐색기를 사용하여 서버 리소스에 액세스를 참조하십시오. 다음 그림에서는 서버 탐색기 창을 보여 줍니다.

서버 탐색기 창

서버 탐색기

편집기와 디자이너 창을 사용하여 페이지를 만들고 코드를 작성할 수 있습니다. 사용하는 편집기와 디자이너의 기능은 작업 중인 파일이나 문서의 형식에 따라 달라집니다.

웹 페이지 편집기와 디자이너에는 그래픽 디자인 뷰와 소스 코드 뷰라는 두 개의 뷰가 있습니다. 웹 페이지 작업 중 디자인 뷰에서는 컨트롤 및 기타 항목을 WYSIWYG와 유사한 방식으로 볼 수 있습니다. 다음 그림에서는 Visual Web Developer의 디자인 뷰를 보여 줍니다.

웹 페이지 디자이너, 디자인 뷰

웹 페이지 디자이너, 디자인 뷰

소스 뷰에는 파일의 소스 코드가 표시됩니다. 이 뷰에서는 IntelliSense, 축소할 수 있는 코드 섹션, 리팩터링, 코드 조각 등 코딩에 유용한 기능을 지원합니다. 소스 뷰에서는 자동 줄 바꿈, 책갈피 및 줄 번호 같은 편집 기능도 지원합니다. 자세한 내용은 편리한 편집기 사용을 위한 명령 및 기능을 참조하십시오. 다음 그림에서는 Visual Web Developer의 소스 뷰를 보여 줍니다.

웹 페이지 디자이너, 소스 뷰

웹 페이지 디자이너, 소스 뷰
참고참고

디자인 뷰나 소스 뷰에서 도구 상자의 컨트롤을 페이지로 끌어올 수 있습니다.

일부 편집기에서는 디자인 뷰와 소스 뷰를 동시에 표시할 수 있는 뷰도 제공됩니다. 이 뷰를 분할 뷰라고 합니다. 다음 그림에서는 Visual Web Developer의 분할 뷰를 보여 줍니다.

웹 페이지 디자이너, 분할 뷰

HTML 디자이너의 분할 탭 보기

디자이너에서 웹 페이지 편집

ASP.NET 웹 페이지는 시각적 요소와 프로그래밍 논리로 구성됩니다. 페이지의 시각적 요소에는 태그, 서버 컨트롤 및 정적 텍스트가 포함됩니다. 페이지의 프로그래밍 논리에는 이벤트 처리기와 기타 코드가 포함됩니다. ASP.NET 웹 페이지를 만들 때는 디자이너에서 태그 작업을 수행하고 코드 편집기에서 코드 작업을 수행할 수 있습니다.

도구 상자에는 Visual Web Developer 프로젝트에 추가할 수 있는 컨트롤이 표시됩니다. 도구 상자를 표시하려면 보기 메뉴에서 도구 상자를 클릭합니다.

다음 그림에서는 도구 상자를 보여 줍니다.

도구 상자

도구 상자

CSS 속성 창은 ASP.NET 웹 페이지를 편집할 때 사용됩니다. 이 창에서는 웹 페이지의 현재 선택 항목에서 사용하는 스타일을 보여 줍니다. 또한 스타일에 대한 우선 순위를 보여 주고 모든 CSS 속성의 전체 목록을 제공합니다. 따라서 기존 스타일에 속성을 추가하고 이미 설정한 속성을 수정하며 새 인라인 스타일을 만들 수 있습니다. 자세한 내용은 방법: CSS 속성 창 사용을 참조하십시오. 다음 그림에서는 CSS 속성 창을 보여 줍니다.

CSS 속성 창

CSS 속성 표

CSS 속성 창 외에도 스타일 관리 창을 사용하여 CSS 스타일을 관리하고 스타일 적용 창을 사용하여 CSS 스타일을 적용할 수 있습니다. 자세한 내용은 방법: 스타일 적용 및 스타일 관리 창 사용을 참조하십시오.

웹 응용 프로그램을 표시하려면 먼저 웹 응용 프로그램을 컴파일하거나 빌드해야 합니다. Visual Web Developer에서는 강력한 빌드(컴파일) 및 디버깅 옵션 집합을 제공합니다. 빌드 구성을 사용하면 빌드할 구성 요소를 선택하고, 완성된 응용 프로그램에 포함하지 않을 구성 요소를 제외하고, 프로젝트를 빌드할 방법에 대한 세부 정보를 지정할 수 있습니다. 솔루션과 프로젝트에 대해 빌드 구성을 만들 수 있습니다. 자세한 내용은 방법: 구성 만들기 및 편집응용 프로그램 개발 시의 빌드를 참조하십시오.

빌드할 때 디버그 프로세스가 시작됩니다. 응용 프로그램을 빌드하면 컴파일 타임 오류를 검색하는 데 도움이 됩니다. 이러한 오류에는 잘못된 구문, 맞춤법 오류가 있는 키워드 및 일치하지 않는 형식 등이 있습니다. 출력 창에는 이러한 오류 유형이 표시됩니다. 다음 그림에서는 출력 창을 보여 줍니다.

빌드 정보를 보여 주는 출력 창

빌드 정보가 있는 출력 창

응용 프로그램을 빌드한 후에는 디버거를 사용하여 논리 오류 같은 런타임 문제를 검색하고 수정할 수 있습니다. 실행 중에 코드를 중지(중단)할 수 있습니다. 중단 모드에서는 변수간략한 조사식 대화 상자 및 메모리 창 같은 도구를 사용하여 로컬 변수와 기타 데이터를 검사할 수 있습니다. 자세한 내용은 변수 창메모리 창을 참조하십시오. 다음 그림에서는 디버깅 도구 창을 보여 줍니다.

디버깅 창

디버깅용 도구

오류 목록 창에는 디버깅과 관련된 오류, 경고 및 기타 메시지가 표시됩니다. 자세한 내용은 디버거 로드맵을 참조하십시오.

Visual Studio, ASP.NET 및 IIS에서는 웹 응용 프로그램이나 웹 사이트를 배포하는 데 유용한 도구를 제공합니다. 웹 응용 프로그램 프로젝트에만 작동하는 Visual Studio 도구도 있고 웹 사이트 프로젝트에만 작동하는 도구도 있습니다.

웹 응용 프로그램 프로젝트와 웹 사이트 프로젝트 간의 차이점에 대한 자세한 내용은 웹 응용 프로그램 프로젝트와 웹 사이트 프로젝트 비교를 참조하십시오.

웹 응용 프로그램 프로젝트 배포

다음은 웹 응용 프로그램 프로젝트의 일반적인 웹 배포 시나리오입니다.

  • Visual Studio에서 원격 서버에 웹 응용 프로그램 배포

  • Visual Studio를 사용하여 배포에 필요한 정보를 포함하며 대상 웹 서버에 설치할 수 있는 패키지(.zip 파일)를 만들어 웹 응용 프로그램 배포

  • MSBuild 같은 특수 도구를 사용하여 일괄 처리로 웹 응용 프로그램 배포

이러한 배포 시나리오와 웹 응용 프로그램 프로젝트의 다른 배포 옵션에 대한 자세한 내용은 ASP.NET 배포 콘텐츠 맵을 참조하십시오.

웹 사이트 프로젝트 배포

다음은 웹 사이트 프로젝트의 일반적인 웹 배포 시나리오입니다.

  • 사용 중인 컴퓨터와 대상 컴퓨터 또는 위치 간에 파일을 복사하고 동기화할 수 있는 웹 사이트 복사 도구를 사용하여 웹 사이트 배포

  • Windows XCopy 명령을 사용하여 웹 사이트 배포

  • 미리 빌드(미리 컴파일)된 웹 사이트 배포

이러한 배포 시나리오와 웹 사이트 프로젝트의 다른 배포 옵션에 대한 자세한 내용은 ASP.NET 배포 콘텐츠 맵을 참조하십시오.

IDE에서 F1 키를 누르거나 도움말 메뉴의 도움말 보기를 클릭하여 도움말에 액세스할 수 있습니다. 설명서는 웹 브라우저에 나타납니다. 로컬로 설치된 도움말을 사용하거나 MSDN 웹 사이트의 설명서를 읽어볼 수 있습니다. 다음 그림에서는 브라우저 창에 표시된 상황에 맞는 도움말을 보여 줍니다.

브라우저 창에 표시된 도움말

도움말의 검색 페이지
표시: