9 Patch 편집기 - 9 patch 이미지를 만들기 위한 온라인 WYSIWYG 도구
9 Patch 편집기는 Android Studio에 포함된 것과 유사한 온라인 WYSIWYG 도구입니다. 이 도구를 사용하면 뷰의 내용과 화면 크기에 맞게 자동으로 크기가 조정되는 비트맵 이미지를 만들 수 있습니다. 이미지 내에 그려진 표시기를 기반으로 이미지의 선택된 부분을 가로 또는 세로로 확장할 수 있습니다.
사용 방법
9 Patch 편집기를 사용하여 NinePatch 그래픽을 만들려면 다음 단계를 따르세요. NinePatch 이미지로 만들고 싶은 이미지가 필요합니다.
- 이미지 선택 버튼을 클릭하거나 NinePatch 이미지로 만들고 싶은 이미지를 편집기로 드래그하세요.
열리는 작업 공간에서 중앙 패널은 확장 가능한 패치와 콘텐츠 영역의 선을 편집할 수 있는 그리기 영역입니다. 오른쪽 패널은 확장된 그래픽을 미리 볼 수 있는 미리보기 영역입니다.
- NinePatch 이미지의 이름을 변경하세요. 이미지는 .9.png 파일 확장자로 저장됩니다.
- 1픽셀 둘레 안에서 클릭하여 확장 가능한 패치와 (선택적) 콘텐츠 영역을 정의하는 선을 그립니다.
- 완료되면 이미지 저장 버튼을 클릭하여 변경 사항을 저장하세요.
그림 1. NinePatch 이미지를 표시하는 9 Patch 편집기.
NinePatch 그래픽이 제대로 축소되도록 하려면 확장 가능한 영역의 크기가 최소 2x2 픽셀인지 확인하세요. 그렇지 않으면 축소 시 해당 영역이 사라질 수 있습니다. 확장 시 경계선의 색상이 변경될 수 있는 보간을 피하려면 확장 가능한 영역 전후에 1픽셀의 추가 안전 공간을 제공하세요.
참고: 일반 PNG 파일(*.png)은 이미지 주위에 빈 1픽셀 테두리가 추가된 상태로 로드됩니다. 이 테두리 내에서 확장 가능한 패치와 콘텐츠 영역을 그릴 수 있습니다. 이전에 저장된 NinePatch 파일(*.9.png)은 이미 그리기 영역이 존재하므로 그대로 로드됩니다.
선택적 컨트롤
- 확대/축소: 그리기 영역의 그래픽 확대/축소 레벨을 조정합니다.
- 패치 크기: 미리보기 영역의 이미지 크기를 조정합니다.
- 잠금 표시: 마우스 오버 시 그래픽의 그릴 수 없는 영역을 시각화합니다.
- 패치 표시: 그리기 영역에서 분홍색 확장 가능한 패치를 미리 봅니다. 그림 2와 같이 분홍색은 확장 가능한 패치를 나타냅니다.
- 콘텐츠 표시: 미리보기 이미지에서 콘텐츠 영역을 강조 표시합니다. 그림 2와 같이 보라색은 콘텐츠가 허용되는 영역을 나타냅니다.
- 잘못된 패치 표시: 그림 2와 같이 확장 시 그래픽에 아티팩트를 생성할 수 있는 패치 영역 주위에 빨간색 테두리를 추가합니다. 모든 잘못된 패치를 제거하면 확장된 이미지의 시각적 일관성을 유지할 수 있습니다.
그림 2. 콘텐츠, 패치 및 잘못된 패치를 보여주는 편집기의 NinePatch 이미지.