OpenSilver에 FlexPanel 기여하고 샤라웃 받았습니다 🎉

얼마 전, OpenSilver의 공식 컨트롤 패키지인 OpenSilver.ControlsKit 에 제가 만든 FlexPanel을 기여했는데, 감사하게도 OpenSilver 공식 X 계정(@OpenSilver)에서 샤라웃까지 받았습니다! :raised_hands:

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 기본에는 없습니다. :sweat_smile:
다만, 제가 따로 개발 중인 Slate라는 WPF용 컨트롤 라이브러리에 포함돼 있으며, 해당 라이브러리를 정식 배포하게 되면 WPF에서도 사용하실 수 있게 됩니다.

그럼 왜 먼저 OpenSilver에?

Flex는 원래 웹에서 온 개념이니만큼, Slate보다도 웹 성향이 강한 OpenSilver에서 먼저 선보이는 게 더 자연스럽다고 생각했어요.

그리고 결과적으로 OpenSilver에서도 WPF에서 사용하던 코드를 거의 그대로 붙여넣기(Ctrl+C / Ctrl+V)만으로 적용이 가능했습니다. 꽤 흥미로운 경험이었죠.

느낀 점: 크로스플랫폼 진영 정리

이번 경험을 통해 개인적으로 다음과 같이 정리해봤습니다.

  • Avalonia → WPF의 현대화
  • Uno Platform → WinUI3의 크로스플랫폼화
  • OpenSilver → WPF의 WebAssembly화

WPF 진영의 팬으로서, 이런 다양한 시도들이 정말 흥미롭고 반갑습니다. :grinning:


혹시 이 FlexPanel이 궁금하시거나, Slate 라이브러리에 관심이 있으신 분은 댓글이나 DM 주세요!
기여도 재밌고, 이렇게 공식 계정에서 언급받는 건… 기분이 정말 좋네요 :smile:

20개의 좋아요