도형 및 패스 그리 기 | Microsoft Docs 
 도형 및 패스 그리 기 
 Microsoft Expression Blend 는 다른 모든 벡터 그래픽 프로그램 과 마찬가지 로 도형 , 패스 및 마스크 를 그릴 수 있 는 표준 벡터 그리 기 기능 을 제공 합니다 . 고급 그리 기 및 아트워크 를 보 려면 Microsoft Expression Design 와 같 은 다른 벡터 그래픽 프로그램 을 사용 해 보 십시오 . Expression Design 에서 는 Expression Blend 에서 사용 할 수 있 도록 XAML 로 그리 기 를 내보내 는 기능 도 제공 합니다 . 
 자세 한 내용 은 Expression Design 에서 내보낸 XAML 가져오 기 를 참조 하 십시오 . 
 벡터 그래픽 이란 ? 
 벡터 그래픽 은 비트맵 에서 처럼 픽셀 을 사용 하 는 대신 점 , 선 , 곡선 및 표면 을 사용 하 여 기하학 적 으로 정의 됩니다 . 컴퓨터 모니터 가 고해상도 디스플레이 로 통합 되 면서 , 높 은 해상도 에서 볼 때 많 은 픽셀 을 표시 하 는 비트맵 방식 을 벗어나 야 할 필요 가 대두 되 었 습니다 . 비트맵 의 크기 를 조정 하 면 모양 이 이상 해질 뿐 만 아니 라 대개 의 경우 그래픽 품질 이 저하 될 수 있 습니다 . 벡터 그래픽 은 높 은 해상도 에서 볼 때 부드럽 게 유지 되 며 크기 를 늘려도 선명 하 게 유지 됩니다 . 이러 한 이유 로 UI ( 사용자 인터페이스 ) 에 다양 한 크기 로 나타나 는 아이콘 파일 처럼 서로 다른 크기 의 이미지 를 여러 개 만들 필요 가 없 으므로 벡터 그래픽 에서 는 콘텐츠 를 더욱 쉽 게 사용 자 지정 할 수 있 습니다 . 벡터 그래픽 을 통해 얻 을 수 있 는 그 밖 의 장점 은 다음 과 같 습니다 . 
 효과 적 인 콘텐츠 크기 조정 - 유연 한 레이아웃 을 갖추 고 있 는 벡터 그래픽 은 콘텐츠 를 기준 으로 크기 를 효과 적 으로 조정 할 수 있 습니다 . 예 를 들 어 단추 에 텍스트 를 추가 하 면 그래픽 품질 을 손상 시키 지 않 으면서 텍스트 에 맞 게 단추 의 크기 가 조정 됩니다 . 
 해상도 독립 적 - 디스플레이 해상도 는 지속 적 으로 향상 되 어 왔으며 앞 으로 도 꾸준히 향상 될 것 입니다 . 응용 프로그램 의 UI 크기 를 조정 하 는 기능 이 없 으면 해상도 가 향상 될 때 UI 는 더 작아져서 대개 콘텐츠 가 너무 작 게 나타나 읽 을 수 없 을 정도 가 되 어 버릴 수 있 습니다 . 이러 한 API 를 사용 하 여 크기 조정 이나 회전 변형 을 적용 하 면 그리 기 에 만 영향 을 주 고 창 에 있 는 컨트롤 의 크기 와 위치 에 는 영향 을 주 지 않 습니다 . 그리 기 의 크기 는 조정 할 수 있 지만 컨트롤 에서 창 의 공간 을 분할 하 는 방식 은 쉽 게 조정 할 수 없 습니다 . Windows Presentation Foundation ( WPF ) 에서 는 각 컨트롤 을 고유 한 영역 으로 분리 하 지 않 고 창 의 모든 컨트롤 을 단일 그리 기 로 구성 하 므로 UI 전체 에 비율 크기 조정 이나 회전 변형 을 적용 하 기 가 쉽 습니다 . 즉 , 모든 WPF UI 를 크 거나 작 게 조정 할 수 있 으므로 실제로 WPF 응용 프로그램 은 해상도 의 영향 을 받 지 않 습니다 . 따라서 비트맵 의 크기 를 조정 하 면 이미지 가 흐려 지 는 대신 더 선명 하 고 뚜렷 하 게 유지 됩니다 . 
 Expression Blend 로 만든 응용 프로그램 처럼 WPF 응용 프로그램 에서 크기 관련 속성 을 설정 할 때 픽셀 은 화면 해상도 가 96 dpi 로 설정 된 모니터 의 픽셀 크기 와 동일 한 장치 독립 적 픽셀 이나 장치 독립 적 단위 를 나타냅니다 . 모니터 크기 나 화면 해상도 에 관계없이 각 단위 는 약 1 / 96 인치 입니다 . 
 Expression Blend 에서 벡터 개체 는 선 이나 도형 처럼 단순 하 거나 패스 나 컨트롤 처럼 복잡 할 수 있 습니다 . 개체 에 표시 되 는 핸들 을 사용 하 여 개체 의 크기 를 조정 하 고 이동 하 고 회전 하 고 대칭 이동 하 고 기울이 거나 , 속성 패널 에서 정확 한 크기 , 위치 및 회전 값 을 직접 입력 하 는 등 다양 한 방식 으로 개체 를 수정 할 수 있 습니다 . 기본 적 으로 아트 보드 에 그리 는 모든 개체 는 벡터 형식 입니다 . 단 , 이미지 와 3 D 질감 처럼 프로젝트 에 추가 했 지만 원래 벡터 형식 이 아닌 항목 은 제외 됩니다 . 다음 은 Expression Blend 에서 제공 되 는 몇 가지 벡터 개체 입니다 . 
 타원 , 사각형 등 의 그리기 개체 
 선 , 곡선 등 의 패스 개체 
 그리 기 도구 
 도구 패널 에 는 도형 및 패스 요소 를 만들 고 개체 를 조작 하 는 일반 적 인 벡터 도구 가 있 습니다 . 
 이러 한 도구 사용 의 예 는 다음 항목 을 참조 하 십시오 . 
 프로젝트 에서 도형 또는 패스 그리 기 
 자유 형 패스 그리 기 
 곡선 의 모양 변경 
 패스 의 점 에 대한 컨트롤 핸들 다시 정의 . 
 직사각 형 과 정사각형 을 그리고 모퉁이 를 둥글 게 수정 할 수 도 있 습니다 . 
 타원 과 원 을 그립니다 . 
 두 점 을 연결 하 는 직선 을 그립니다 . 
 각 노드 를 정의 하 는 패스 를 그리고 수정 합니다 . 펜 도구 를 사용 하 여 패스 내 에서 노드 를 추가 , 제거 및 수정 할 수 있 습니다 . 
 자유 형 패스 를 그립니다 . 
 수정 할 도형 , 패스 및 개체 를 아트 보드 에서 선택 합니다 . 
 선택 도구 를 사용 하 는 방법 에 대한 자세 한 내용 은 개체 선택 또는 선택 취소 를 참조 하 십시오 . 
 노드 를 그린 후 에 패스 에서 개별 노드 를 선택 합니다 . 직접 선택 도구 를 사용 하 면 레이아웃 패널 과 같 은 부모 개체 내 에 중첩 된 자식 개체 를 아트 보드 에서 직접 선택 할 수 도 있 습니다 . 
 직접 선택 도구 를 사용 하 는 방법 에 대한 자세 한 내용 은 개체 선택 또는 선택 취소 를 참조 하 십시오 . 
 도형 및 패스 
 사각형 및 타원 과 같 은 도형 은 벡터 개체 입니다 . 사각형 도구 또는 타원 도구 를 사용 하 여 도형 을 그립니다 . 
 패스 도 벡터 개체 입니다 . 패스 는 Expression Blend 에서 가장 유연 한 벡터 개체 입니다 . 패스 는 일련 의 연결 된 선 과 곡선 입니다 . 아트 보드 에 패스 를 그린 후 패스 의 모양 을 변경 하 거나 결합 하 고 다른 방식 으로 수정 하 여 모든 벡터 도형 을 만들 수 있 습니다 . 연결 된 직선 으로 구성 된 닫히 지 않 은 패스 인 폴리 라인 뿐 만 아니 라 연결 된 직선 으로 구성 된 닫힌 도형 인 다각형 도 그릴 수 있 습니다 . 펜 도구 , 연필 도구 및 선 도구 를 사용 하 여 패스 를 그립니다 . 그런 다음 선택 도구 및 직접 선택 도구 를 사용 하 여 패스 를 수정 합니다 . 
 패스 를 수정 하 는 방법 에 대한 자세 한 내용 은 다음 항목 을 참조 하 십시오 . 
 패스 의 일부 삭제 
 패스 에서 점 추가 또는 제거 
 패스 의 점 에 대한 컨트롤 핸들 다시 정의 
 직접 선택 도구 보조 키 
 펜 도구 보조 키 
 도형 을 패스 로 변환 
 패스 로 변환 명령 ( 개체 메뉴 에서 패스 , 패스 로 변환 을 차례 로 클릭 ) 을 사용 하 여 도형 개체 를 패스 개체 로 변환 하 지 않 으면 패스 개체 와 같 은 방법 으로 도형 개체 를 편집 할 수 없 습니다 . 
 도형 을 패스 로 변환 에서 예 를 참조 하 십시오 . 
 도형 을 패스 로 변환 한 후 에 는 사각형 의 모퉁이 반경 과 같 은 도형 관련 속성 을 변경 할 수 없 습니다 . 또한 변환 전 에 도형 에 스타일 을 적용 한 경우 변환 된 패스 의 속성 이 패스 의 기본 값 ( 채우기 브러시 없 음 및 검정 스트로크 ) 으로 다시 설정 됩니다 . 
 모퉁이 반경 변경 
 사각형 을 선택 하 고 왼쪽 위 모퉁이 에 있 는 모퉁이 반경 핸들 을 끌 어 사각형 의 모퉁이 반경 을 수정 할 수 있 습니다 . 사각형 의 왼쪽 위 모퉁이 에서 튀어나온 점선 의 양쪽 끝 위 로 포인터 를 이동 하 면 모퉁이 반경 핸들 이 나타납니다 . 
 Shift 키 를 누른 상태 에서 양쪽 모퉁이 반경 핸들 을 끌 면 X 와 Y 모퉁이 반경 을 각각 수정 할 수 있 습니다 . 
 사각형 의 모퉁이 둥글리 기 에서 예 를 참조 하 십시오 . 
 패스 결합 
 패스 또는 도형 을 결합 하 면 다음 과 같 은 결과 가 나타날 수 있 습니다 . 
 결합 하 기 전 의 두 도형 
 겹침 제외 
 둘 이상 의 개체 ( 패스 또는 도형 ) 를 하나 의 패스 개체 로 결합 할 수 있 습니다 . 결과 패스 개체 가 결합 하 기 전 에 마지막 으로 선택 한 개체 를 대체 하 여 해당 개체 의 속성 을 적용 합니다 . 결과 가 복합 형 패스 인 경우 도 있 습니다 . 
 도형 또는 패스 결합 에서 예 를 참조 하 십시오 . 
 패스 를 수정 하 는 방법 에 대한 자세 한 내용 은 직접 선택 도구 보조 키 및 펜 도구 보조 키 를 참조 하 십시오 . 
 다른 개체 와 해당 도형 을 결합 합 후 에 는 사각형 의 모퉁이 반경 과 같 은 도형 관련 속성 을 변경 할 수 없 습니다 . 또한 변환 전 에 마지막 으로 선택 한 개체 에 스타일 을 적용 한 경우 결합 된 패스 의 속성 이 패스 의 기본 값 ( 채우기 브러시 없 음 및 검정 스트로크 ) 으로 다시 설정 됩니다 . 
 복합 형 패스 
 복합 형 패스 를 만들 면 패스 에서 교차 되 는 부분 은 결과 에서 제외 되 고 결과 패스 에서 는 최 하위 패스 의 가시 적 속성 을 사용 합니다 . 
 복합 형 패스 로 변환 된 두 패스 
 도형 을 복합 형 패스 에 포함 하 려면 먼저 패스 로 변환 해야 합니다 ( 개체 메뉴 의 패스 에서 패스 로 변환 선택 ) . 둘 이상 의 패스 를 하나 의 복합 형 패스 로 만들 수 있 습니다 . 결과 패스 가 복합 형 으로 변환 하 기 전 에 선택 한 Z 순서 의 맨 아래 패스 를 대체 하 여 해당 패스 의 속성 을 적용 합니다 . 복합 형 패스 를 만든 후 언제든지 분리 할 수 있 지만 원래 속성 은 복원 되 지 않 습니다 . 
 복합 형 패스 만들 기 또는 해제 에서 예 를 참조 하 십시오 . 
 클 리핑 패스 
 클 리핑 패스 는 다른 개체 에 적용 되 는 패스 나 도형 이 며 , 마스크 된 개체 에서 클 리핑 패스 를 벗어나 는 부분 을 숨 깁니다 . 
 클 리핑 패스 가 적용 된 Image 개체 
 Expression Blend 에서 는 클 리핑 패스 를 만든 후 아트 보드 에서 수정 할 수 있 으며 원본 패스 개체 의 손실 없이 클 리핑 패스 를 해제 할 수 있 게 되 었 습니다 . 클 리핑 패스 적용 , 수정 또는 제거 에서 예 를 참조 하 십시오 . 
 클 리핑 패스 의 개별 꼭지점 에 애니메이션 효과 를 적용 ( 예 : 마스크 된 개체 를 점진 적 으로 노출 ) 할 수 도 있 습니다 . 패스 또는 클 리핑 패스 의 점 에 애니메이션 효과 적용 에서 예 를 참조 하 십시오 . 
 불 투명 마스크 
 불 투명 마스크 는 다른 개체 에 적용 되 는 패스 나 도형 일 수 있 습니다 . 패스 의 투명 한 부분 은 마스크 된 개체 의 숨겨 지 는 영역 을 나타내 고 마스크 의 불 투명 한 부분 은 마스크 된 개체 의 표시 되 는 영역 을 나타냅니다 . 모든 개체 의 불 투명 마스크 는 속성 패널 의 모양 섹션 을 통해 정의 할 수 있 습니다 . 
 불 투명 마스크 는 투명 성 에 따라 개체 의 일부 를 표시 하 거나 숨기 는 단순 한 그 라데 이 션 브러시 일 수 있 습니다 . 아래 예 에서 왼쪽 은 불 투명 마스크 가 적용 되 지 않 은 이미지 이 며 , 오른쪽 은 다음 과 같 은 두 방법 중 하나 로 생성 할 수 있 는 이미지 입니다 . 
 Image 개체 의 OpacityMask 속성 을 방사형 그 라데 이 션 브러시 ( 오른쪽 그라 데 이 션 중 지점 의 알파 값 이 0 으로 설정 ) 로 설정 할 수 있 습니다 . 
 Rectangle 개체 를 Image 개체 앞 에 만들 수 있 으며 Rectangle 의 OpacityMask 속성 을 방사형 그 라데 이 션 브러시 ( 왼쪽 그라 데 이 션 중 지점 의 알파 값 이 0 으로 설정 ) 로 설정 할 수 있 습니다 . 
 마스크 가 없 는 이미지 ( 왼쪽 ) 와 불 투명 마스크 가 적용 된 이미지 ( 오른쪽 ) 
 불 투명 마스크 만들 기 에서 예 를 참조 하 십시오 .