Google Gemini 2.5 Pro의 멀티 모달 기반 코딩 성능을 시험해보기 위해서 테스트 이미지를 하나 올려놓고 질문해봤는데 제법 완성도 높은 결과물을 만들어냈습니다. 흥미로운 것은, Flutter 같은 널리 쓰이는 스택이 아니라 제가 관심을 두고 있는 Avalonia 같은 신흥 .NET 기반 UI 스택으로도 어느 정도 코드를 만들어내는 것이 흥미로운 부분이었습니다.
단순히 A를 만들어줘 같은 형태가 아니라 멀티모달이라서 그림을 보고 코드를 만들어내는 능력이 강력하다는 점이 달리 보이는 부분입니다. 참고로 이 기능은 Gemini 본 서비스에서만 현재 쓸 수 있고, GitHub Copilot에서는 2.5 모델이 있지만 지원되지 않고 있습니다.
다만 아쉬운건, ChatGPT랑 달리 Gemini는 채팅 세션 공유 기능이 없어서 동작 모습을 보이는 것이 다소 번거로운게 아쉽습니다.
Q: 이 이미지를 보고 Avalonia UI용 XAML 코드를 만들어줄 수 있어?
Answer:
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="1000" d:DesignHeight="700"
x:Class="YourAppNamespace.MainWindow"
Title="식탁보"
Icon="avares://YourAppNamespace/Assets/appicon.ico"> <Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="200,*">
<Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="#F5F5F5" Padding="10,5">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
<TextBox Name="SearchTextBox" Watermark="검색 키워드 입력 (예: 신한은행)" Width="250" Margin="0,0,10,0"/>
</StackPanel>
</Border>
<Border Grid.Row="1" Grid.Column="0" Background="#EEEEEE" Padding="10">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<StackPanel Spacing="8">
<RadioButton Content="뱅킹" GroupName="Categories" IsChecked="True" Margin="0,5,0,0"/>
<TextBlock Text="뱅킹" IsHitTestVisible="False" Margin="20,-22,0,5" Foreground="Gray"/> <RadioButton Content="대출/금융" GroupName="Categories" Margin="0,5,0,0"/>
<TextBlock Text="대출/금융" IsHitTestVisible="False" Margin="20,-22,0,5" Foreground="Gray"/>
<RadioButton Content="증권/투자" GroupName="Categories" Margin="0,5,0,0"/>
<TextBlock Text="증권/투자" IsHitTestVisible="False" Margin="20,-22,0,5" Foreground="Gray"/>
<RadioButton Content="보험" GroupName="Categories" Margin="0,5,0,0"/>
<TextBlock Text="보험" IsHitTestVisible="False" Margin="20,-22,0,5" Foreground="Gray"/>
<RadioButton Content="신용 카드" GroupName="Categories" Margin="0,5,0,0"/>
<TextBlock Text="신용 카드" IsHitTestVisible="False" Margin="20,-22,0,5" Foreground="Gray"/>
<RadioButton Content="공공" GroupName="Categories" Margin="0,5,0,0"/>
<TextBlock Text="공공" IsHitTestVisible="False" Margin="20,-22,0,5" Foreground="Gray"/>
<RadioButton Content="기타" GroupName="Categories" Margin="0,5,0,0"/>
<TextBlock Text="기타" IsHitTestVisible="False" Margin="20,-22,0,5" Foreground="Gray"/>
<RadioButton Content="교육" GroupName="Categories" Margin="0,5,0,0"/>
<TextBlock Text="교육" IsHitTestVisible="False" Margin="20,-22,0,10" Foreground="Gray"/>
</StackPanel>
</ScrollViewer>
</Border>
<ScrollViewer Grid.Row="1" Grid.Column="1" Padding="15" VerticalScrollBarVisibility="Auto">
<StackPanel Spacing="20">
<TextBlock Text="뱅킹 22개" FontSize="18" FontWeight="SemiBold"/>
<ItemsControl Name="BankingItemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" ItemWidth="110" ItemHeight="120"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Classes="iconCard" Margin="5" Padding="5" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="3" Background="White">
<StackPanel Spacing="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding IconPath}" Width="50" Height="50" Stretch="Uniform" Margin="0,5,0,0"/>
<TextBlock Text="{Binding Name}" FontSize="12" TextAlignment="Center" TextWrapping="Wrap" Height="35" VerticalAlignment="Top"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<TextBlock Text="대출/금융 80개" FontSize="18" FontWeight="SemiBold" Margin="0,20,0,0"/>
<ItemsControl Name="LendingItemsControl">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal" ItemWidth="110" ItemHeight="120"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Classes="iconCard" Margin="5" Padding="5" BorderBrush="#E0E0E0" BorderThickness="1" CornerRadius="3" Background="White">
<StackPanel Spacing="5" HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="{Binding IconPath}" Width="50" Height="50" Stretch="Uniform" Margin="0,5,0,0"/>
<TextBlock Text="{Binding Name}" FontSize="12" TextAlignment="Center" TextWrapping="Wrap" Height="35" VerticalAlignment="Top"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
<Border Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Background="#F5F5F5" Padding="10">
<Button Content="식탁보에 대하여..." HorizontalAlignment="Left"/>
</Border>
</Grid>
<Window.Styles>
<Style Selector="RadioButton">
<Setter Property="VerticalContentAlignment" Value="Center"/>
</Style>
<Style Selector="Border.iconCard:pointerover">
<Setter Property="Background" Value="#E8F4FF"/>
<Setter Property="BorderBrush" Value="#B0D7FF"/>
</Style>
<Style Selector="Border.iconCard">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Transitions">
<Transitions>
<BrushTransition Property="Background" Duration="0.1"/>
<BrushTransition Property="BorderBrush" Duration="0.1"/>
</Transitions>
</Setter>
</Style>
</Window.Styles>
</Window>
여기서 데이터 바인딩을 사용하도록 고쳐달라고 이어서 주문하면 코드 비하인드까지 이어서 처리해주었습니다.