얼마 전, OpenSilver의 공식 컨트롤 패키지인 OpenSilver.ControlsKit 에 제가 만든 FlexPanel
을 기여했는데, 감사하게도 OpenSilver 공식 X 계정(@OpenSilver)에서 샤라웃까지 받았습니다!
FlexPanel이란?
웹 개발자라면 익숙할 CSS의 Flexbox 개념을 WPF 스타일의 XAML에서 사용할 수 있도록 만든 Panel입니다.
WPF에서 흔히 어떤 요소를 좌우로 배치하려면 각각의 컨트롤에 HorizontalAlignment
를 지정하거나 Margin
으로 조절하곤 했죠. 이런 반복되는 수고를 줄이기 위해 만든 것이 바로 FlexPanel
입니다.
예시로 보면 더 직관적입니다.
기존 방식
<Grid>
<Grid Width="100" Height="50" Horizontal="Left"/>
<Grid Width="100" Height="50" Horizontal="Right"/>
</Grid>
FlexPanel 적용
<FlexPanel Justify="SpaceBetween">
<Grid Width="100" Height="50"/>
<Grid Width="100" Height="50"/>
</FlexPanel>
보다시피 훨씬 직관적이고 깔끔해졌죠!
언제 쓰면 좋을까?
FlexPanel
은 아이템을 유연하게 배치하고 싶을 때 특히 유용합니다. 예를 들면, 버튼 두 개를 양쪽에 배치하거나, 간단한 카드 레이아웃을 만들 때.
물론 많은 아이템을 배치할 용도보다는 간결한 UI 정렬을 위한 목적에 가깝습니다.
WPF에도 있나?
WPF 기본에는 없습니다.
다만, 제가 따로 개발 중인 Slate
라는 WPF용 컨트롤 라이브러리에 포함돼 있으며, 해당 라이브러리를 정식 배포하게 되면 WPF에서도 사용하실 수 있게 됩니다.
그럼 왜 먼저 OpenSilver에?
Flex는 원래 웹에서 온 개념이니만큼, Slate보다도 웹 성향이 강한 OpenSilver에서 먼저 선보이는 게 더 자연스럽다고 생각했어요.
그리고 결과적으로 OpenSilver에서도 WPF에서 사용하던 코드를 거의 그대로 붙여넣기(Ctrl+C / Ctrl+V)만으로 적용이 가능했습니다. 꽤 흥미로운 경험이었죠.
느낀 점: 크로스플랫폼 진영 정리
이번 경험을 통해 개인적으로 다음과 같이 정리해봤습니다.
- Avalonia → WPF의 현대화
- Uno Platform → WinUI3의 크로스플랫폼화
- OpenSilver → WPF의 WebAssembly화
WPF 진영의 팬으로서, 이런 다양한 시도들이 정말 흥미롭고 반갑습니다.
혹시 이 FlexPanel이 궁금하시거나, Slate 라이브러리에 관심이 있으신 분은 댓글이나 DM 주세요!
기여도 재밌고, 이렇게 공식 계정에서 언급받는 건… 기분이 정말 좋네요