문서를 영문으로 보려면 영문 확인란을 선택하세요. 마우스 포인터를 텍스트 위로 이동시켜 팝업 창에서 영문 텍스트를 표시할 수도 있습니다.
번역
영문

Blend에서 작업 영역의 구성

Blend를 처음 사용하는 경우 잠시 시간을 내어 Blend 작업 영역에 대해 알아보세요. 이 항목에 이러한 작업 영역이 간단히 설명되어 있습니다.

항목 내용:

Blend에는 디자인 작업 영역과 애니메이션 작업 영역의 두 가지 기본 작업 영역이 있습니다. CTRL-F11 키를 눌러 두 작업 영역 간에 전환할 수 있습니다.

디자인 작업 영역에서는 일반적인 제작을 수행합니다. 애니메이션 작업 영역에서는 개체 및 타임라인 패널을 아트보드 아래로 이동하여 타임라인을 표시할 공간을 늘립니다.



디자인 작업 영역(왼쪽) 및 애니메이션 작업 영역(오른쪽)

eea17aa0-ebae-42b5-a03a-165bf4d54fda
B1_1

메뉴

B1_4

아트보드

B1_2

도구 패널

B1_5

프로젝트 패널 , 속성 패널 및 리소스 패널

B1_3

개체 및 타임라인 패널

B1_6

결과 패널(애니메이션 작업 영역에 있을 경우 개체 및 타임라인 패널에 배치됨)

Blend for Visual Studio의 작업 영역은 모든 시각적 인터페이스 요소로 구성되며, 이러한 요소로는 아트보드, 패널, 작업 영역 구성, 제작 뷰, 메뉴 등이 있습니다.

Workspaces

B1_1

문서 탭 창, 페이지, 리소스 사전 및 사용자 컨트롤을 포함하여 현재 열려 있는 모든 프로젝트 문서가 표시됩니다.

B1_2

활성 파일 아트보드에 현재 열려 있는 문서를 보여 주고 문서 탭에 현재 열려 있는 모든 파일도 보여 줍니다.

B1_3

다음과 같은 세 가지 실시간 제작 환경 중 하나를 사용합니다.

  • 디자인 뷰   아트보드에서 시각적 표현을 사용하여 문서를 작성하려면 디자인 보기를 사용합니다.

  • 코드 뷰   XAML 코드를 작성하거나 편집하려면 코드 뷰를 사용합니다.

    참고 참고

    도구 패널, 개체 및 타임라인 패널 및 속성코드 뷰에서 작동하지 않습니다. 또한 이 뷰에서는 대부분의 메뉴 항목을 사용할 수 없습니다.

  • 분할 뷰   코드 뷰와 디자인 뷰를 모두 표시합니다. 메뉴의 분할 뷰 방향을 사용하여 창의 방향을 변경할 수도 있습니다.

Blend 작업 영역은 사용자 지정이 가능하며 매우 효율적으로 크기를 조정할 수 있습니다. 패널 방향 변경, 패널 고정 또는 고정 해제, 가장자리를 끌어 패널 크기 조정, 아트보드 확대/축소, 아트보드에서 개체의 맞춤 전환 등을 수행할 수 있습니다. 또한 옵션 대화 상자(도구 메뉴)에서 테마 속성을 사용하여 작업 영역 색 구성표를 변경할 수 있습니다.

아트보드는 작업 화면입니다. 개체를 그리고 수정하여 문서를 시각적으로 디자인할 수 있습니다.

78ec5d4d-3af1-46bd-ab63-bc4fc542806f

B1_1

시각적 디자인 화면   옵션 대화 상자에서 배경색 변경과 같은 아트보드 옵션을 설정합니다.

B1_2

XAML 편집기   XAML 편집기에서 XAML 코드를 편집합니다.

B1_3

아트보드 컨트롤   이 컨트롤을 사용하여 아트보드를 확대/축소하고, 효과 렌더링을 설정하고, 맞춤 옵션을 설정하고, 파일 주석을 설정합니다.

B1_4

문서 탭   아트보드에서 열린 문서가 두 개 이상인 경우 해당 탭을 클릭하여 문서 간에 전환합니다.

B1_5

뷰 단추   이 단추를 사용하여 디자인, XAML분할 뷰 간에 전환합니다.

B1_6

개체 핸들   개체 핸들을 사용하여 마우스로 개체를 수정합니다.

짧은 비디오 보기: Configure Installed Features 아트보드

Blend for Visual Studio에서 도구 패널을 사용하여 응용 프로그램의 개체를 만들고 수정할 수 있습니다. 도구를 선택한 다음 마우스로 아트보드에 그려 개체를 만들 수 있습니다.

Tools panel

B1_1

선택 도구   개체 및 패스를 선택합니다.

직접 선택 도구는 중첩된 개체 및 패스 세그먼트를 선택하는 데 사용합니다.

Callout A

그라데이션 및 브러시 도구

B1_2

뷰 도구   이동, 확대/축소 등 아트보드의 뷰를 조정합니다.

Callout B

패스 도구

B1_3

브러시 도구   브러시 변형, 개체 칠하기, 한 개체의 특성을 선택하여 다른 개체에 적용하는 등 개체의 시각적 특성에 대한 작업에 사용됩니다.

Callout C

도형 도구

B1_4

개체 도구   아트보드에서 패스, 도형, 레이아웃 패널, 텍스트, 컨트롤 등 가장 일반적으로 사용되는 개체를 그리는 데 사용합니다.

Callout D

레이아웃 패널

B1_5

자산 도구   자산 패널에 액세스하고 라이브러리에서 가장 최근에 사용된 자산을 표시하는 데 사용합니다.

Callout E

텍스트 컨트롤 

Callout F

공용 컨트롤 

짧은 비디오 보기: Configure Installed Features 도구 모음

도구 패널에는 가장 일반적으로 사용되는 컨트롤이 표시되지만 자산 패널에는 모든 컨트롤이 나열됩니다. 아트보드에 추가할 수 있는 모든 컨트롤, 스타일, 미디어, 동작 및 효과가 나열됩니다.

Assets panel

B1_1

검색 상자   검색 상자에 입력하여 자산 목록을 필터링합니다.

B1_2

모눈 모드 및 목록 모드   자산의 모눈 모드 보기 및 목록 모드 보기 간에 전환합니다.

B1_3

자산 범주   해당 범주의 자산 목록을 보려면 범주 또는 하위 범주를 클릭합니다.

B1_4

스타일   리소스 사전에 포함된 모든 스타일을 표시합니다.

B1_5

설명   선택한 자산 범주 또는 하위 범주에 대한 설명을 표시합니다.

이 패널에서는 아트보드에서 개체를 구성하고 원하는 경우 개체에 애니메이션 효과를 적용할 수 있습니다.

Object and Timeline panel in animation mode

B1_1

개체 뷰 문서의 시각적 트리를 표시합니다. 다양한 세부 수준으로 드릴다운할 수 있습니다. 레이어를 추가하여 아트보드의 개체를 자세히 구성하고 하나의 그룹으로 잠그거나 숨길 수 있습니다.

B1_2

기록 모드 표시기   타임라인에 속성 변경을 기록하고 있는지 여부를 나타냅니다.

B1_3

스토리보드 선택 사용자가 만든 스토리보드의 목록이 표시됩니다.

B1_4

스토리보드 닫기 현재 스토리 보드를 닫습니다.

B1_5

스토리보드 옵션 스토리보드의 만들기, 복제, 반전, 삭제, 이름 바꾸기 또는 닫기 작업을 수행합니다.

B1_6

재생 컨트롤 타임라인을 탐색합니다. 플레이헤드를 끌어 타임라인을 전체 탐색(스크럽)할 수도 있습니다.

B1_7

범위를 다음으로 되돌립니다. 이전 루트 개체 또는 이전 범위로 개체 뷰를 되돌립니다. 이 작업은 스타일이나 템플릿을 수정할 때만 가능합니다.

B1_8

키 프레임 기록 현재 시점에서 선택한 개체의 속성에 대한 스냅숏을 기록합니다.

B1_9

맞추기 옵션 타임라인 맞추기 및 맞춤 해상도를 설정하고 타임라인 맞추기를 해제합니다.

97fa60b9-0caf-4387-9225-b57510d32209

표시/숨기기, 잠금/잠금해제 개체 뷰의 표시/숨기기 및 잠금 옵션을 표시하거나 숨깁니다.

B1_11

타임라인의 플레이헤드 위치 현재 시간을 밀리초 단위로 표시합니다. 이 필드에 직접 시간 값을 입력하여 특정 시점으로 이동할 수도 있습니다. 맞추기 옵션에서 설정한 맞춤 해상도에 따라 정밀도가 달라집니다.

B1_12

플레이헤드 애니메이션이 있는 시점을 나타냅니다. 타임라인에서 플레이헤드를 끌어 애니메이션을 미리 볼 수 있습니다.

B1_13

타임라인의 키 프레임 설정 특정 시점에서의 속성 값을 변경합니다.

d839d12c-07a1-4127-a830-4a8e7069f4fe

개체의 순서 변경 개체의 표시 순서를 설정합니다. 이 단추를 클릭하여 구조 뷰에서 Z 순서(앞에서 뒤로) 또는 태그 순서(XAML 뷰에 나타나는 순서)로 개체를 정렬할 수 있습니다.

B1_15

타임라인 확대/축소 타임라인의 확대/축소 해상도를 설정합니다. 확대하면 애니메이션을 좀 더 자세하게 편집할 수 있고 축소하면 더 긴 시간 동안 발생하는 동작이 좀 더 간략하게 표시됩니다. 확대했지만 원하는 시점에 키 프레임을 설정할 수 없다면 맞춤 해상도가 충분히 높게 설정되어 있는지 확인합니다.

Callout 16

타임라인 합성 영역 타임라인이 표시됩니다. 키 프레임을 직접 끌거나 바로 가기 메뉴를 사용하여 이동할 수 있습니다.

이 패널에서는 개체의 속성을 보고 수정할 수 있으며, 아트보드에서 직접 수정하도록 설정할 수도 있습니다. 이렇게 하면 속성 변경 내용이 속성 패널에 반영됩니다.

Properties panel

범주   속성의 범주를 확장 및 축소합니다. 범주 세부 정보를 표시하거나 숨기려면 확장 6375953d-074c-421a-bbb3-6f5055b67b64축소 를 클릭합니다.

B1_1

이름 및 형식   선택한 개체의 아이콘, 이름 및 형식을 표시합니다.

B1_2

정렬 기준   속성을 이름, 소스 또는 범주를 기준으로 사전순으로 정렬합니다.

B1_3

브러시 속성   Fill 브러시, Stroke 브러시 및 Foreground 브러시와 같은 브러시의 시각적 속성을 설정합니다.

B1_4

색 편집기   단색 및 그라데이션 브러시에 사용합니다.

B1_5

색 선택 색을 선택합니다.

B1_6

색 칩   첫 색, 현재 색 및 끝 색을 표시합니다.

B1_7

스포이트 화면에 모든 요소의 색을 사용합니다. 색 스포이트단색 브러시가 선택되어 있을 때 사용할 수 있습니다. 그라데이션 스포이트그라데이션 브러시가 선택되어 있을 때 사용할 수 있습니다.

B1_8

속성 및 이벤트 선택한 요소에 대해 이벤트를 선택하거나 속성을 설정합니다.

B1_9

검색 상자 속성을 검색합니다. 검색 상자에 텍스트를 입력하여 표시되는 속성을 필터링합니다.

97fa60b9-0caf-4387-9225-b57510d32209

브러시 편집기 탭   브러시 편집기를 선택하는 데 사용합니다. 브러시 없음, 단색 브러시, 그라데이션 브러시, 타일 브러시 또는 브러시 리소스 중에서 선택할 수 있습니다.

B1_11

색 리소스 서로 다른 속성에 동일한 색을 적용합니다. 색 리소스에는 로컬 리소스시스템 리소스가 포함됩니다.

B1_12

RGB 색 공간 R, G 또는 B(빨강, 초록, 파랑) 숫자 편집기에 대한 값을 조정하여 색을 수정합니다.

B1_13

알파 채널   A 옆의 숫자 편집기를 사용하여 알파 값을 수정합니다.

d839d12c-07a1-4127-a830-4a8e7069f4fe

색을 리소스로 변환 선택한 색을 색 리소스로 변환합니다. 색 리소스는 색 리소스 탭을 클릭하면 사용할 수 있습니다.

B1_15

16진수 값   표시된 색의 16진수 값을 표시합니다.

Callout 16

그라데이션 슬라이더 그라데이션 브러시를 선택한 경우에만 나타납니다.

d50027a1-6824-4ad8-8b4e-558b0756dcf8

고급 속성 표시   자주 사용되지 않는 속성의 범주를 표시합니다.

짧은 비디오 보기: Configure Installed Features 속성 패널

프로젝트 패널을 사용하여 프로젝트의 파일을 관리할 수 있습니다.

604be326-7297-454f-9e70-ac79cc4dd9f1

B1_1

검색 상자   검색 상자에 텍스트를 입력하여 프로젝트 파일 목록을 필터링합니다.

B1_2

솔루션   응용 프로그램 프로젝트 및 해당 파일을 포함합니다.

B1_3

참조   DLL 파일 등의 프로젝트 참조를 포함합니다.

B1_4

연결된 항목   연결된 항목 아이콘 위에 화살표가 겹쳐 나타나며 해당 항목이 프로젝트 폴더에 없음을 의미합니다.

B1_5

SampleData   생성된 예제 데이터 파일을 포함합니다.

B1_6

MainWindow.xaml   주 문서의 코드 숨김 파일입니다.

B1_7

ResourceDictionary   프로젝트 전체에서 공유할 수 있는 리소스 집합입니다.

짧은 비디오 보기: Configure Installed Features 프로젝트 패널

이 패널을 사용하여 앱 실행 시 앱의 여러 뷰를 시뮬레이션할 수 있습니다.

Device panel

B1_1

디스플레이   응용 프로그램의 다른 디스플레이 크기 및 해상도를 미리 봅니다.

B1_2

방향   응용 프로그램의 다른 방향을 가로 또는 세로로 미리 봅니다.

B1_3

가장자리   응용 프로그램의 다른 가장자리 맞춤을 양쪽, 왼쪽, 오른쪽 또는 없음으로 미리 봅니다.

B1_4

고대비   선택한 대비 설정에 따라 응용 프로그램을 미리 봅니다. 이 설정은 기본값 이외의 값으로 설정된 경우 App.xaml에 설정된 RequestedTheme 속성을 재정의합니다.

B1_5

배율 재정의   증가된 표시 배율에 따라 응용 프로그램을 미리 봅니다. 표시 배율이 100%인 경우 배율 재정의를 선택하면 140%의 표시 배율을 시뮬레이트합니다. 표시 배율이 140%인 경우 시뮬레이션된 배율은 180%입니다.

B1_6

테마   선택한 테마에 따라 응용 프로그램을 미리 봅니다.

B1_7

최소 너비   최소 너비 설정에 따라 응용 프로그램을 미리 봅니다. 최소 너비는 App.xaml 파일에서 변경할 수 있습니다.

B1_8

크롬 표시   크롬 표시 확인란을 선택하거나 선택 취소하여 디자인 뷰에 있는 응용 프로그램 주위의 시뮬레이션된 테블릿 프레임을 설정하거나 해제합니다.

B1_9

표시에 맞춰 잘라 내기   표시에 맞춰 잘라 내기확인란을 선택하거나 선택 취소하여 전체 문서를 잘라내거나 문서 표시를 표시합니다.

97fa60b9-0caf-4387-9225-b57510d32209

대상 배포   응용 프로그램이 빌드되었을 때 배포되는 대상 장치를 선택합니다.

Blend 작업 영역을 익히는 데 도움이 되는 비디오나 문서를 발견 한 경우 우리와 공유해 주세요. 콘텐츠를 검토한 후 다른 사람들도 검색할 수 있도록 링크를 추가할 수 있습니다.

새 비디오를 제안하고 싶으면 언제든지 제안해 주세요. 다른 사용자로부터도 비슷한 요청이 들어오면 시간과 여건이 될 때 새 비디오를 제작하겠습니다.

자신의 작업에 대해 자신보다 더 잘 아는 사람은 없습니다. Blend 작업 영역을 익히는 데 있어 어떤 리소스가 도움이 되는지, 우리나 커뮤니티 회원이 제공한 설명 중 어떠한 영역의 설명이 부족했는지 알려주세요. 콘텐츠 향상에 많은 도움이 될 것입니다.

여기로 의견을 보내주세요.

표시: