![](https://www.finereport.com/kr/wp-content/uploads/2021/12/1-4-1024x408.png)
대시보드 개발 도움말 가이드: 나인 패치 이미지
최종 업데이트:2022-10-11
대시보드 개발 시 시각적 효과를 위해 차트나 특정 영역의 테두리를 이미지로 설정하는 경우가 많습니다.
하지만 컨트롤의 너비나 높이가 테두리 이미지의 크기와 다를 경우 이미지의 왜곡이 발생합니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/1-6.png)
이러한 대시보드는 담당자의 마음을 사로 잡지 못할 뿐만 아니라 개발자도 속수무책일 수 있습니다.
대시보드의 새로운 개발 모식은 배경 설정을 전면적으로 업데이트:
- “배경 채우기” 와 “테두리”를 따로 구분하여 “채우기 컬러 설정” 과 ” 테두리 이미지 삽입” 사이에 서로 영향을 미치지 않게 하였습니다.
- “테두리” 패널에서 이미지를 삽입한 후 “나인 패치 이미지”를 선택하여 이미지의 변형이 생기지 않도록 설정할 수 있습니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/2-1.png)
그럼 ” 나인 패치 이미지”는 대체 무엇인가요? 어떻게 패턴 테두리를 보호하고 개발자에게 편의를 제공할 수 있을까요?
같이 알아보도록 하겠습니다.
먼저 임의의 한 컨트롤을 선택합니다. 속성 패널의 “테두리” 에서 이미지를 삽입하고 “나인 패치 이미지 채우기 설정” 을 클릭합니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/3-2.png)
이때 대화형 패널이 뜨게 됩니다.
위, 아래와 좌, 우의 4개 선을 조절하여 이미지에서 고정될 영역과 변경될 영역의 범위를 설정할 수 있습니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/4-3.gif)
설정한 후 4개 모서리는 컨트롤의 높이와 너비에 변경이 생겨도 그대로 보호되지만 위,아래, 좌, 우 4개 변은 길이에 따라 조절이 됩니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/5-1.png)
컨트롤의 크기와 이미지의 크기 사이에 큰 차이가 없을 때는 “이미지로 채우기” 와 ” 나인 패치 이미지로 테두리를 설정” 이 큰 차이가 없습니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/6-1.png)
하지만 컨트롤의 크기와 이미지의 크기에 차이가 있을 때 나인 패치 이미지로 설정하면 아주 현저한 효과를 볼 수 있습니다.
예를 들어 컨트롤의 길이가 긴 상황에서 가로 세로 길이가 비슷한 이미지로 채우면 세로 테두리가 비정상적으로 두꺼워지고 (아래의 그림에서 빨간색 부분 참조) 가로 테두리의 너비도 불균형적입니다.
나인 패치 이미지로 테두리를 설정하면 이러한 문제들을 해결할 수 있습니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/7-1.png)
컨트롤의 가로 길이가 긴 경우 나인 패치 이미지로 테두리를 설정하면 그 효과를 더욱 뚜렷하게 확인할 수 있습니다.
그림에서 볼 때 일반적인 이미지로 채우면 오른쪽 상단의 패턴이 깨져 시각적 완성도가 떨어집니다.
하지만 나인 패치 이미지로 테두리를 설정하면 테두리의 패턴이 원래 모양 그대로 나타나게 됩니다.
![](https://www.finereport.com/kr/wp-content/uploads/2021/12/8-1.png)
한마디로 말하면 ” 나인 패치 이미지” 는 설정이 간단하지만 시각적 측면의 효과를 높일 수 있는 기능입니다.
간단한 나인 패치 이미지 설정을 통하여 개발자는 이미지와 패턴이 왜곡되는 문제를 해결할 수 있고 동일한 이미지 소재를 사용할 수 있으며 서로 다른 비율의 컨트롤에 같은 테두리를 추가할 수 있습니다.
FineReport는 사용자의 개발 편의를 위해 계속해서 노력하고 있습니다.