개요
.NET MAUI에서는 기존의 Frame이 더 이상 권장되지 않으므로, 새로운 Border 컨트롤을 사용해 현대적이고 유연한 UI를 구현할 수 있다. 이 블로그는 Border 컨트롤의 속성, 스타일링, 모양 변경, 고급 사용법 등을 예제로 설명하며 실무적인 UI 디자인 기법까지 다룬다.
기본 사용법: Stroke와 StrokeThickness
가장 기본적인 Border는 Stroke(테두리 색상)와 StrokeThickness(두께) 속성을 활용하여 컨텐츠에 외곽선을 그린다. 내부에 Label 등을 배치하면 깔끔한 테두리를 만들 수 있다.
라운드 처리: StrokeShape
StrokeShape="RoundRectangle"와 같은 형태로 둥근 테두리를 설정할 수 있다. 버튼, 카드 등의 모던 UI에 적합하며, 각진 느낌을 탈피할 수 있다.
점선 테두리: StrokeDashArray
StrokeDashArray로 점선 패턴을 만들 수 있다. 5,3은 5픽셀 선, 3픽셀 공백의 반복이고 StrokeDashOffset으로 시작 위치도 조정 가능하다. 시각적 구분이나 선택 영역에 효과적이다.
그라디언트 Stroke
Stroke 영역에 LinearGradientBrush를 사용해 경계선에 색상 그라데이션을 적용할 수 있다. 고급스럽고 주목을 끌고 싶은 요소에 적합하다.
배경색과 그라디언트 배경
Border는 내부 컨텐츠 배경도 지정 가능하다. Background 속성으로 단색을, Border.Background 내부에 LinearGradientBrush를 사용해 그라디언트 배경을 지정할 수 있다.
고급 스타일링
StrokeLineCap="Round": 선의 끝을 둥글게 처리StrokeLineJoin="Round": 선들이 만나는 지점을 둥글게StrokeMiterLimit: 두꺼운 선에서 코너 포인트가 지나치게 튀어나오는 것을 제어
이런 세밀한 제어는 시각적 완성도를 높이는 데 중요하다.
타원, 원 Border
StrokeShape에 <Ellipse />를 사용해 타원형 또는 원형 테두리를 만들 수 있다. 높이와 너비를 동일하게 하면 원이 되며, 아이콘, 프로필 사진 등에 활용된다.
여백 처리와 레이아웃
Padding 속성을 활용해 내부 컨텐츠와 테두리 간 공간 확보 가능. 또한 HorizontalOptions, VerticalOptions, WidthRequest 등을 활용해 위치 및 크기를 세밀하게 제어할 수 있다.
그림자 효과
Border.Shadow를 활용해 테두리에 그림자를 줄 수 있다. 시각적 깊이와 계층 구조 표현에 유용하다.
<Shadow Brush="Black" Opacity="0.5" Radius="10" Offset="5,5" />
복합 컨텐츠 구성
Border는 단순한 텍스트뿐만 아니라, StackLayout과 같은 복합 컨트롤도 내부에 배치할 수 있어 카드 형태, 폼 구성 등에 적합하다.
커스텀 도형 (Path 기반)
StrokeShape에 Path 데이터를 지정해 다이아몬드, 말풍선, 별, 하트, 삼각형, 팔각형, 집, 화살표 등 다양한 사용자 정의 모양을 만들 수 있다. 이는 SVG Path처럼 사용되며, UI의 창의성과 개성을 살릴 수 있다.
<Path Data="M 50,5 L 95,50 L 50,95 L 5,50 Z" /> <!-- 다이아몬드 예시 -->
베스트 프랙티스
- 성능: 복잡한 Path보다는 가능한 단순한 도형 사용
- 디자인: 둥근 정도(코너 반경) 일관성 유지, 과한 그림자 지양
- 접근성: 명확한 색상 대비, 충분한 여백 확보로 터치 용이성 확보
결론
Border는 단순한 테두리를 넘어서 앱 UI의 시각적 완성도를 높이고, 직관적인 사용자 경험을 제공하는 강력한 도구이다. 고급 속성들을 적절히 조합하면 고퀄리티 앱 디자인을 구현할 수 있다.