그리기 개요

Microsoft Expression Blend는 다른 모든 벡터 그래픽 프로그램과 마찬가지로 도형, 패스 및 마스크를 그릴 수 있는 표준 벡터 그리기 기능을 제공합니다. 고급 그리기 및 아트워크를 보려면 Microsoft Expression Design 2 같은 다른 벡터 그래픽 프로그램을 사용해 보십시오. Expression Design 2에서는 Expression Blend에서 사용할 수 있도록 XAML로 그리기를 내보내는 기능도 제공합니다.

벡터 그래픽이란?

벡터 그래픽은 비트맵에서처럼 픽셀을 사용하는 대신 점, 선, 곡선 및 표면을 사용하여 기하학적으로 정의됩니다. 컴퓨터 모니터가 고해상도 디스플레이로 통합되면서, 높은 해상도에서 볼 때 많은 픽셀을 표시하는 비트맵 방식을 벗어나야 할 필요가 대두되었습니다. 비트맵의 크기를 조정하면 모양이 이상해질 뿐만 아니라 대개의 경우 그래픽 품질이 저하될 수 있습니다. 벡터 그래픽은 높은 해상도에서 볼 때 부드럽게 유지되며 크기를 늘려도 선명하게 유지됩니다. 또한 UI(사용자 인터페이스)에 다양한 크기로 나타나는 아이콘 파일처럼 서로 다른 크기의 이미지를 여러 개 만들 필요가 없으므로 벡터 그래픽에서는 콘텐츠를 더욱 쉽게 사용자 지정할 수 있습니다. 벡터 그래픽을 통해 얻을 수 있는 그 밖의 장점은 다음과 같습니다.

• 효과적인 콘텐츠 크기 조정 유연한 레이아웃을 갖추고 있는 벡터 그래픽은 콘텐츠를 기준으로 크기를 효과적으로 조정할 수 있습니다. 예를 들어 단추에 텍스트를 추가하면 그래픽 품질을 손상시키지 않으면서 텍스트에 맞게 단추의 크기가 조정됩니다.

• 해상도 독립적   디스플레이 해상도는 지속적으로 향상되어 왔으며 앞으로도 꾸준히 향상될 것입니다. 응용 프로그램의 UI 크기를 조정하는 기능이 없으면 해상도가 향상될 때 UI는 더 작아져서 대개 콘텐츠가 너무 작게 나타나 읽을 수 없을 정도가 되어 버릴 수 있습니다. 이러한 API를 사용하여 크기 조정이나 회전 변형을 적용하면 그리기에만 영향을 주고 창에 있는 컨트롤의 크기와 위치에는 영향을 주지 않습니다. 그리기의 크기는 조정할 수 있지만 컨트롤에서 창의 공간을 분할하는 방식은 쉽게 조정할 수 없습니다. WPF(Windows Presentation Foundation)에서는 각 컨트롤을 고유한 영역으로 분리하지 않고 창의 모든 컨트롤을 단일 그리기로 구성하므로 UI 전체에 비율 크기 조정이나 회전 변형을 적용하기가 쉽습니다. 즉, 모든 WPF UI를 크거나 작게 조정할 수 있으므로 실제로 WPF 응용 프로그램은 해상도의 영향을 받지 않습니다. 따라서 비트맵의 크기를 조정하면 이미지가 흐려지는 대신 더 선명하고 뚜렷하게 유지됩니다.

[!참고]

Expression Blend로 만든 응용 프로그램처럼 WPF 응용 프로그램에서 크기 관련 속성을 설정할 때 픽셀은 화면 해상도가 96dpi로 설정된 모니터의 픽셀 크기와 동일한 장치 독립적 픽셀이나 장치 독립적 단위를 나타냅니다. 모니터 크기나 화면 해상도에 관계없이 각 단위는 약 1/96인치입니다.

Expression Blend에서 벡터 개체는 선이나 도형처럼 단순하거나 패스나 컨트롤처럼 복잡할 수 있습니다. 개체에 표시되는 핸들을 사용하여 개체의 크기를 조정하고 이동하고 회전하고 대칭 이동하고 기울이거나, 속성 패널에서 정확한 크기, 위치 및 회전 값을 직접 입력하는 등 다양한 방식으로 개체를 수정할 수 있습니다. 기본적으로 아트보드에 그리는 모든 개체는 벡터 형식입니다. 단, 이미지와 3D 질감처럼 프로젝트에 추가했지만 원래 벡터 형식이 아닌 항목은 제외됩니다. 다음은 Expression Blend에서 제공되는 몇 가지 벡터 개체입니다.

• 타원, 사각형 등의 그리기 개체

• 선, 곡선 등의 패스 개체

• 텍스트

• 3D 개체

• 컨트롤

맨 위로 이동

그리기 도구

도구 상자에는 도형 및 패스 요소를 만들고 개체를 조작하는 일반적인 벡터 도구가 있습니다. 이러한 도구를 사용하는 예는 도형 그리기, 직선 그리기, 곡선 그리기, 자유형 패스 그리기, 곡선의 모양 변경 및 패스의 점에 대한 컨트롤 핸들 다시 정의를 참조하십시오.

도구		기능
	사각형	직사각형과 정사각형을 그리고 모퉁이를 둥글게 수정할 수도 있습니다.
	타원	타원과 원을 그립니다.
	선	두 점을 연결하는 직선을 그립니다.
	펜	각 노드를 정의하는 패스를 그리고 수정합니다. 펜 도구를 사용하여 패스 내에서 노드를 추가, 제거 및 수정할 수 있습니다.
	연필	자유형 패스를 그립니다.
	선택	수정할 도형, 패스 및 개체를 아트보드에서 선택합니다. 선택 도구를 사용하는 방법에 대한 자세한 내용은 개체 선택 또는 선택 취소를 참조하십시오.
	직접 선택	노드를 그린 후에 패스에서 개별 노드를 선택합니다. 직접 선택 도구를 사용하면 레이아웃 패널과 같은 부모 개체 내에 중첩된 자식 개체를 아트보드에서 직접 선택할 수도 있습니다. 직접 선택 도구를 사용하는 방법에 대한 자세한 내용은 개체 선택 또는 선택 취소를 참조하십시오.

맨 위로 이동

도형 또는 패스

사각형이나 타원과 같은 도형은 벡터 개체입니다. 사각형 또는 타원 도구를 사용하여 도형을 그립니다.

패스도 벡터 개체입니다. 패스는 Expression Blend에서 가장 유연한 벡터 개체입니다. 패스는 일련의 연결된 선과 곡선입니다. 아트보드에 패스를 그린 후 패스의 모양을 변경하거나 결합하고 다른 방식으로 수정하여 모든 벡터 도형을 만들 수 있습니다. 연결된 직선으로 구성된 닫히지 않은 패스인 폴리라인뿐만 아니라 연결된 직선으로 구성된 닫힌 도형인 다각형도 그릴 수 있습니다. 펜 , 연필  및 선  도구를 사용하여 패스를 그립니다. 그런 다음 선택  및 직접 선택  도구를 사용하여 패스를 수정합니다. 패스를 수정하는 방법에 대한 자세한 내용은 패스의 일부 삭제, 패스에서 점 추가 또는 제거, 곡선의 모양 변경, 패스의 점에 대한 컨트롤 핸들 다시 정의 및 펜 및 직접 선택 사용를 참조하십시오.

맨 위로 이동

도형을 패스로 변환

패스로 변환 명령(개체 메뉴에서 패스를 선택한 다음 패스로 변환 선택)을 사용하여 도형 요소를 패스 요소로 변환하지 않으면 패스 요소와 같은 방법으로 도형을 편집할 수 없습니다. 도형을 패스로 변환에서 예를 참조하십시오.

[!참고]

도형을 패스로 변환한 후에는 사각형의 모퉁이 반경과 같은 도형 관련 속성을 변경할 수 없습니다. 또한 변환 전에 도형에 스타일을 적용한 경우 변환된 패스의 속성이 패스의 기본값(채우기 브러시 없음 및 검정 스트로크)으로 다시 설정됩니다.

맨 위로 이동

모퉁이 반경 변경

사각형을 선택하고 왼쪽 위 모퉁이에 있는 모퉁이 반경 핸들을 끌어 사각형의 모퉁이 반경을 수정할 수 있습니다. 사각형의 왼쪽 위 모퉁이에서 튀어나온 점선의 양쪽 끝 위로 마우스 포인터를 이동하면 모퉁이 반경 핸들이 나타납니다.

Shift 키를 누른 상태에서 양쪽 모퉁이 반경 핸들을 끌면 X와 Y 모퉁이 반경을 각각 수정할 수 있습니다.

사각형의 모퉁이 둥글리기에서 예를 참조하십시오.

맨 위로 이동

패스 결합

패스 또는 도형을 결합하면 다음과 같은 결과가 나타날 수 있습니다.

둘 이상의 개체(패스 또는 도형)를 하나의 패스 개체로 결합할 수 있습니다. 결과 패스 개체가 결합하기 전에 마지막으로 선택한 개체를 대체하여 해당 개체의 속성을 적용합니다. 결과가 복합형 패스인 경우도 있습니다. 도형 또는 패스 결합에서 예를 참조하십시오. 패스를 수정하는 방법에 대한 자세한 내용은 펜 및 직접 선택 사용를 참조하십시오.

[!참고]

결합 후에는 사각형의 모퉁이 반경과 같은 도형 관련 속성을 변경할 수 없습니다. 또한 변환 전에 마지막으로 선택한 개체에 스타일을 적용한 경우 결합된 패스의 속성이 패스의 기본값(채우기 브러시 없음 및 검정 스트로크)으로 다시 설정됩니다.

맨 위로 이동

복합형 패스

복합형 패스를 만들면 패스에서 교차되는 부분은 결과에서 제외되고 결과 패스에서는 최하위 패스의 가시적 속성을 사용합니다.

복합형 패스로 변환된 두 패스

도형을 복합형 패스에 포함하려면 먼저 패스로 변환해야 합니다(개체 메뉴의 패스에서 패스로 변환 선택). 둘 이상의 패스를 하나의 복합형 패스로 만들 수 있습니다. 결과 패스가 복합형으로 변환하기 전에 선택한 Z 순서의 맨 아래 패스를 대체하여 해당 패스의 속성을 적용합니다. 복합형 패스를 만든 후 언제든지 분리할 수 있지만 원래 속성은 복원되지 않습니다. 복합형 패스 만들기 또는 해제에서 예를 참조하십시오.

맨 위로 이동

클리핑 패스

클리핑 패스는 다른 개체에 적용되는 패스나 도형이며, 마스크된 개체에서 클리핑 패스를 벗어나는 부분을 숨깁니다.

클리핑 패스가 적용된 Image 개체

Expression Blend 2에서는 클리핑 패스를 만든 후 아트보드에서 수정할 수 있으며 원본 패스 개체의 손실 없이 클리핑 패스를 해제할 수 있게 되었습니다. 클리핑 패스 적용, 수정 또는 제거에서 예를 참조하십시오. 클리핑 패스의 개별 꼭지점에 애니메이션 효과를 적용(예: 마스크된 개체를 점진적으로 노출)할 수도 있습니다. 패스 또는 클리핑 패스의 점에 애니메이션 효과 적용에서 예를 참조하십시오.

맨 위로 이동

불투명 마스크

불투명 마스크는 다른 개체에 적용되는 패스나 도형일 수 있습니다. 패스의 투명한 부분은 마스크된 개체의 숨겨지는 영역을 나타내고 마스크의 불투명한 부분은 마스크된 개체의 표시되는 영역을 나타냅니다. 모든 개체의 불투명 마스크는 속성 패널의 모양 섹션을 통해 정의할 수 있습니다.

불투명 마스크는 투명성에 따라 개체의 일부를 표시하거나 숨기는 단순한 그라데이션 브러시일 수 있습니다. 아래 예에서 왼쪽은 불투명 마스크가 적용되지 않은 이미지이며, 오른쪽은 다음과 같은 두 방법 중 하나로 생성할 수 있는 이미지입니다.

• Image 개체의 OpacityMask 속성을 방사형 그라데이션 브러시(오른쪽 그라데이션 중지점의 알파 값이 0으로 설정)로 설정할 수 있습니다.

• Rectangle 개체를 Image 개체 앞에 만들 수 있으며 Rectangle의 OpacityMask 속성을 방사형 그라데이션 브러시(왼쪽 그라데이션 중지점의 알파 값이 0으로 설정)로 설정할 수 있습니다.

마스크가 없는 이미지(왼쪽)와 불투명 마스크가 적용된 이미지(오른쪽)

불투명 마스크 만들기에서 예를 참조하십시오.

맨 위로 이동