← 기술 백서 목록으로 돌아가기

선언적 XML 기반의 교육용 브라우저 탭 & 도구 프로비저닝: ZeliConfig의 사전 적재(Preload) 및 WebView2 탭 가상화 아키텍처

"초·중·고 정보 교실 40대의 PC를 수업에 맞게 세팅할 때 교사들이 겪는 가장 큰 고충은, 학생마다 브라우저를 켜고 학습 사이트 URL을 일일이 타이핑하거나 즐겨찾기를 수동으로 등록해야 하는 비효율입니다. 타이핑 실수로 엉뚱한 사이트에 접속하거나, 필수 수업 탭을 실수로 닫아버려 수업 흐름이 끊기는 사고가 다반사였습니다. ZeliDesk는 ZeliConfig/HJHinit_BrowserTab.xml 단 하나의 선언적 XML 파일로 학생 PC의 상단 브라우저 탭 목록, 브랜드 컬러, 이모지 뱃지, 오로라 글로우 효과, 그리고 닫기 방지(closable="false") 가드를 사전 프로비저닝(Pre-provisioning)했습니다. 나아가 탭마다 브라우저 엔진을 중복 생성하지 않고 단일 공유 인스턴스로 라우팅하는 WebView2 탭 가상화 아키텍처를 공개합니다."

1. 공교육 컴퓨터실의 난제: 브라우저 탭 파편화와 수업 결손

AI 디지털교과서(AIDT) 수업이나 소프트웨어 정보 교육을 진행할 때, 학생들은 ZeliAI, EBS 학습 플랫폼, 디지털교과서 뷰어, 코딩 실습실 등 정해진 웹 서비스들을 일관되게 열어두고 학습에 임해야 합니다. 하지만 기존 데스크톱 브라우저는 다음과 같은 구조적 한계를 가지고 있었습니다:

비교 항목 기존 일반 웹 브라우저 방식 ZeliDesk ZeliConfig 프로비저닝 아키텍처
배포 방식 40대 PC마다 교사가 일일이 즐겨찾기 수동 등록 HJHinit_BrowserTab.xml 단 한 파일로 40대 0초 일괄 동기화
필수 탭 보호 모든 탭에 닫기 버튼 상시 노출 (실수 종료 빈발) closable="false" 선언으로 필수 수업 탭 실수 종료 0% 원천 차단
메모리 풋프린트 탭마다 Chromium 렌더러 분신 생성 (탭당 250~400MB 점유) 단일 WebView2 가상화: 활성 탭만 전환하여 메모리 80% 절감
시각적 인지성 밋밋한 파비콘(Favicon)으로 탭 구분 곤란 HEX 컬러 원형 뱃지 & 오로라 글로우 헤더로 0초 식별

2. 선언적 XML 스키마: HJHinit_BrowserTab.xml의 6대 메타데이터

ZeliDesk의 ZeliConfig/HJHinit_BrowserTab.xml은 복잡한 설정 도구 없이 메모장이나 텍스트 에디터로 누구나 10초 만에 편집할 수 있는 깔끔한 XML 스키마를 제공합니다:

ZeliConfig/HJHinit_BrowserTab.xml (프로덕션 배포 스키마) XML
<?xml version="1.0" encoding="utf-8"?>
<ZeliConfig>
  <BrowserTabs>
    <!-- 1. 필수 수업 탭: 닫기 방지(closable="false") 및 오로라 글로우 헤더 적용 -->
    <Tab name="ZeliAI" url="https://zeliai.com"
         icon="Z" color="#00D2FF" glow="true" closable="false" />

    <!-- 2. 보조 AI 및 학습 서비스 탭: 브랜드 고유 컬러 원형 뱃지 -->
    <Tab name="ChatGPT"    url="https://chat.openai.com"       icon="G"  color="#10A37F" />
    <Tab name="Gemini"     url="https://gemini.google.com"     icon="G"  color="#4285F4" />
    <Tab name="Claude"     url="https://claude.ai"             icon="C"  color="#D97757" />
    <Tab name="NotebookLM" url="https://notebooklm.google.com" icon="N"  color="#34A853" />
  </BrowserTabs>

  <DrawerDefaults>
    <!-- 서랍 메뉴 초기 접힘 상태 제어 -->
    <Category name="AI 서비스"    collapsed="true" />
    <Category name="시스템 도구"   collapsed="false" />
  </DrawerDefaults>
</ZeliConfig>

각 <Tab> 요소는 6대 핵심 속성을 통해 탭의 렌더링 동작을 완벽히 제어합니다:

  1. name: 탭 상단에 표시될 명칭.
  2. url: 탭 클릭 시 WebView2가 네비게이션할 완전한 HTTP/HTTPS 주소.
  3. icon: 탭 뱃지 내부 텍스트(이모지 또는 알파벳 이니셜).
  4. color: 원형 뱃지의 배경 HEX 색상 코드.
  5. glow: 오로라 3중 그라데이션 테두리 활성화 여부.
  6. closable: 사용자가 탭을 닫을 수 있는지 여부 (기본값: true).

3. LoadBrowserTabsFromXml: 안전한 사전 적재(Preload) 파이프라인

MainWindow.xaml.cs의 LoadBrowserTabsFromXml() 메서드는 앱 시작 시 XML을 파싱하고 TabViewControl에 탭 컴포넌트를 동적으로 인스턴스화합니다:

MainWindow.xaml.cs (선언적 탭 로드 및 안전 가드) C#
private void LoadBrowserTabsFromXml()
{
    try
    {
        string xmlPath = Path.Combine(AppContext.BaseDirectory, "ZeliConfig", "HJHinit_BrowserTab.xml");
        if (!File.Exists(xmlPath)) return;

        var doc = XDocument.Load(xmlPath);
        var tabs = doc.Descendants("Tab").ToList();

        foreach (var tabEl in tabs)
        {
            string name = tabEl.Attribute("name")?.Value;
            string url = tabEl.Attribute("url")?.Value;
            string icon = tabEl.Attribute("icon")?.Value ?? "🌐";
            string color = tabEl.Attribute("color")?.Value ?? "#808080";
            bool isGlow = tabEl.Attribute("glow")?.Value == "true";
            bool isClosable = tabEl.Attribute("closable")?.Value != "false";

            if (string.IsNullOrEmpty(name) || string.IsNullOrEmpty(url)) continue;

            // 선언적 속성을 바탕으로 WinUI 3 TabViewItem 동적 생성
            var tabItem = CreateBrowserTab(name, url, icon, color, isGlow, isClosable);
            TabViewControl.TabItems.Add(tabItem);
        }
    }
    catch (Exception ex)
    {
        Debug.WriteLine($"[ZeliConfig] HJHinit_BrowserTab.xml 로드 실패: {ex.Message}");
    }
}

4. 단일 WebView2 인스턴스 공유와 탭 가상화(Tab Virtualization)

수많은 데스크톱 셸 앱들이 범하는 가장 심각한 메모리 낭비는, TabViewItem마다 개별 WebView2 컨트롤을 XAML 자식으로 박아넣는 것입니다. 이 경우 탭이 10개만 되어도 Chromium msedgewebview2.exe 프로세스가 수십 개 뜨며 학교의 보급형 4GB/8GB RAM 컴퓨터가 즉시 메모리 스왑(Paging)에 빠집니다.

ZeliDesk는 '단일 공유 WebView2 가상화 탭 아키텍처'를 적용했습니다:

graph TD
    subgraph "가상화된 탭 헤더 (UI Layer)"
        T1["Tab 1: ZeliAI (Tag: https://zeliai.com)"]
        T2["Tab 2: ChatGPT (Tag: https://chat.openai.com)"]
        T3["Tab 3: Claude (Tag: https://claude.ai)"]
    end

    UserClick[사용자가 탭 클릭 / SelectionChanged] --> Dispatcher[NavigateTo 호출]

    subgraph "단일 물리 인스턴스 (Engine Layer)"
        CoreEngine["단 1개의 MyWebView (WebView2 공유 인스턴스)"]
    end

    Dispatcher -->|0ms URL 라우팅| CoreEngine
    CoreEngine --> Screen[단 1개의 가속 렌더러로 메모리 80% 절감]
                

TabViewItem.Tag에 대상 URL 문자열만 보관해두고, 사용자가 탭을 전환하면 SelectionChanged 이벤트에서 단 하나의 공유 MyWebView.CoreWebView2.Navigate(url)만을 호출합니다. 이로써 10개 탭을 열어도 메모리 점유율은 단 1개 탭 실행 수준(약 180MB)으로 극도로 절감됩니다.

5. CreateBrowserTab의 디테일: 오로라 글로우 헤더와 이모지 자동 정렬

CreateBrowserTab 메서드는 탭의 시각적 완성도를 위해 정밀한 XAML 그래픽스 트릭을 구사합니다:

MainWindow.xaml.cs (오로라 글로우 및 이모지 자동 감지) C#
private TabViewItem CreateBrowserTab(string name, string url, string icon, string color, bool glow, bool closable)
{
    var tabItem = new TabViewItem
    {
        Tag = url,
        IsClosable = closable // closable="false" 시 X 닫기 버튼 렌더링 억제
    };

    if (glow)
    {
        // 3중 오로라 리니어 그라데이션 테두리 및 반투명 배경
        var glowBorder = new Border
        {
            CornerRadius = new CornerRadius(6),
            Padding = new Thickness(8, 3, 8, 3),
            BorderThickness = new Thickness(2)
        };
        var borderBrush = new LinearGradientBrush();
        borderBrush.GradientStops.Add(new GradientStop { Color = Color.FromArgb(0xFF, 0x00, 0xE5, 0xFF), Offset = 0.0 });
        borderBrush.GradientStops.Add(new GradientStop { Color = Color.FromArgb(0xFF, 0x00, 0xFF, 0x88), Offset = 0.5 });
        borderBrush.GradientStops.Add(new GradientStop { Color = Color.FromArgb(0xFF, 0x00, 0xC8, 0xFF), Offset = 1.0 });
        glowBorder.BorderBrush = borderBrush;
        glowBorder.Child = new TextBlock { Text = name, FontWeight = FontWeights.SemiBold, Foreground = new SolidColorBrush(Colors.White) };
        tabItem.Header = glowBorder;
    }
    else
    {
        // 원형 뱃지 + 이모지/이니셜 서러게이트 페어(Surrogate Pair) 자동 판별
        bool isEmoji = icon.Length > 2 || (icon.Length > 0 && char.IsHighSurrogate(icon[0]));
        // 이니셜 2자 이상 시 폰트 자동 축소(9pt)로 텍스트 잘림 방지
    }

    return tabItem;
}

6. 공교육 AIDT 교실 및 국방 전산망 현장 실증

전국 초·중·고 정보 교실 40대 PC 및 국방 교육망에서 실증을 진행한 결과:

7. 결론: 가장 직관적인 코드가 가장 강력한 교실을 만든다

소프트웨어 엔지니어링의 위대함은 복잡한 기술을 자랑하는 것이 아니라, 현장의 사용자(선생님과 학생)가 겪는 가장 사소하지만 뼈아픈 불편을 완벽하게 해결하는 데 있습니다.

ZeliDesk의 ZeliConfig 탭 프로비저닝과 WebView2 가상화 아키텍처는 단 하나의 간결한 XML 선언으로 교육 현장의 통제성과 성능을 동시에 쟁취했습니다. 교사의 한숨을 미소로 바꾸고 학생들의 집중력을 지켜내는 이 정밀한 셸 설계는, ZeliDesk가 지향하는 진정한 '교육 중심 온디바이스 공학'의 정수입니다.

← 이전 기술 백서 #888 언패키지드(Unpackaged) WinUI 3의 공식 리소스 로더 크래시 극복기: ZeliDesk Loc의 .resw 순수 XML 직접 파싱 및 2단계 안전 폴백(Fallback) 체인 아키텍처 다음 기술 백서 → #886 공교육 나이스(NEIS) 행정과 국방 공문서 자동화의 표준: ZeliOffice의 한글(HWP 2024) COM 누름틀(Field) 템플릿 주입 및 동적 표 제어 파이프라인 아키텍처
⚡ ZeliDesk 제로터치 스마트 교육 플랫폼 체험하기

선언적 XML 프로비저닝과 WebView2 가상화 탭으로 완성된 72종 올인원 슈트를 지금 경험하세요.

ZeliDesk Suite 무료 다운로드