대시보드 개발 도움말 가이드: 나인 패치 이미지

대시보드 개발 시 시각적 효과를 위해 차트나 특정 영역의 테두리를 이미지로 설정하는 경우가 많습니다.

하지만 컨트롤의 너비나 높이가 테두리 이미지의 크기와 다를 경우 이미지의 왜곡이 발생합니다.

이러한 대시보드는 담당자의 마음을 사로 잡지 못할 뿐만 아니라 개발자도 속수무책일 수 있습니다.

대시보드의 새로운 개발 모식은 배경 설정을 전면적으로 업데이트:

• “배경 채우기” 와 “테두리”를 따로 구분하여 “채우기 컬러 설정” 과 ” 테두리 이미지 삽입” 사이에 서로 영향을 미치지 않게 하였습니다.
• “테두리” 패널에서 이미지를 삽입한 후 “나인 패치 이미지”를 선택하여 이미지의 변형이 생기지 않도록 설정할 수 있습니다.

그럼 ” 나인 패치 이미지”는 대체 무엇인가요? 어떻게 패턴 테두리를 보호하고 개발자에게 편의를 제공할 수 있을까요?

같이 알아보도록 하겠습니다.

먼저 임의의 한 컨트롤을 선택합니다. 속성 패널의 “테두리” 에서 이미지를 삽입하고 “나인 패치 이미지 채우기 설정” 을 클릭합니다.

이때 대화형 패널이 뜨게 됩니다.

위, 아래와 좌, 우의 4개 선을 조절하여 이미지에서 고정될 영역과 변경될 영역의 범위를 설정할 수 있습니다.

설정한 후 4개 모서리는 컨트롤의 높이와 너비에 변경이 생겨도 그대로 보호되지만 위,아래, 좌, 우 4개 변은 길이에 따라 조절이 됩니다. 

컨트롤의 크기와 이미지의 크기 사이에 큰 차이가 없을 때는 “이미지로 채우기” 와 ” 나인 패치 이미지로 테두리를 설정” 이 큰 차이가 없습니다.

하지만 컨트롤의 크기와 이미지의 크기에 차이가 있을 때 나인 패치 이미지로 설정하면 아주 현저한 효과를 볼 수 있습니다.

예를 들어 컨트롤의 길이가 긴 상황에서 가로 세로 길이가 비슷한 이미지로 채우면 세로 테두리가 비정상적으로 두꺼워지고 (아래의 그림에서 빨간색 부분 참조) 가로 테두리의 너비도 불균형적입니다.

나인 패치 이미지로 테두리를 설정하면 이러한 문제들을 해결할 수 있습니다.

컨트롤의 가로 길이가 긴 경우 나인 패치 이미지로 테두리를 설정하면 그 효과를 더욱 뚜렷하게 확인할 수 있습니다.

그림에서 볼 때 일반적인 이미지로 채우면 오른쪽 상단의 패턴이 깨져 시각적 완성도가 떨어집니다.

하지만 나인 패치 이미지로 테두리를 설정하면 테두리의 패턴이 원래 모양 그대로 나타나게 됩니다.

한마디로 말하면 ” 나인 패치 이미지” 는 설정이 간단하지만 시각적 측면의 효과를 높일 수 있는 기능입니다.

간단한 나인 패치 이미지 설정을 통하여 개발자는 이미지와 패턴이 왜곡되는 문제를 해결할 수 있고 동일한 이미지 소재를 사용할 수 있으며 서로 다른 비율의 컨트롤에 같은 테두리를 추가할 수 있습니다.

FineReport는 사용자의 개발 편의를 위해 계속해서 노력하고 있습니다. 

대시보드에 관련 볼 만한 콘텐츠 …