Wails v3의 새로운 기능

Wails v3에는 v2와 비교해 큰 변화가 도입되었습니다. 단일 창 중심의 선언형 API가 더욱 유연한 절차형 방식으로 대체되었습니다. 이 새로운 API 설계는 코드 가독성을 높이고 개발을 간소화하며, 특히 복잡한 다중 창 애플리케이션에서 유용합니다.

Wails v3는 Go와 웹 기술을 사용해 데스크톱 애플리케이션을 빌드하는 방식이 크게 발전한 버전입니다.

다중 창

Wails v3에는 하나의 애플리케이션에서 여러 창을 만들고 관리하는 기능이 도입되었습니다. 이 기능을 사용하면 단일 창 애플리케이션의 한계를 넘어 더 복잡하고 다양한 사용자 인터페이스를 설계할 수 있습니다.

각 창의 크기, 위치, 콘텐츠 및 동작을 독립적으로 구성할 수 있어 유연성이 높습니다. 따라서 기본 인터페이스, 설정 패널 또는 보조 보기처럼 기능별로 별도의 창을 사용하는 애플리케이션을 만들 수 있습니다.

개발자는 이러한 창을 프로그래밍 방식으로 생성하고 조작하며 관리할 수 있으므로 사용자 요구와 애플리케이션 상태에 맞춰 변화하는 동적 사용자 인터페이스를 구현할 수 있습니다.

예제

package main

import (
   "embed"
   "log"
   
   "github.com/wailsapp/wails/v3/pkg/application"
)

//go:embed assets/*
var assets embed.FS

func main() {

   app := application.New(application.Options{
        Name:   "Multi Window Demo",
        Assets: application.AssetOptions{
            Handler: application.AssetFileServerFS(assets),
        },
   })
   
   window1 := app.Window.NewWithOptions(application.WebviewWindowOptions{
       Title:  "Window 1",
   })
   
   window2 := app.Window.NewWithOptions(application.WebviewWindowOptions{
       Title:  "Window 2",
   })
   
   // load the embedded html from the embed.FS
   window1.SetURL("/")
   window1.Center()
   
   // Load an external URL
   window2.SetURL("https://wails.io")
   
   err := app.Run()

   if err != nil {
	   log.Fatal(err.Error())
   }
}

시스템 트레이 통합

Wails v3에는 강력한 시스템 트레이 기능 지원이 도입되어 애플리케이션을 사용자의 데스크톱에 계속 표시할 수 있습니다. 이 기능은 백그라운드에서 실행해야 하거나 주요 기능에 빠르게 접근할 수 있어야 하는 애플리케이션에 특히 유용합니다.

Wails v3 시스템 트레이 통합의 주요 기능은 다음과 같습니다.

창 연결: 시스템 트레이 아이콘에 창을 연결할 수 있습니다. 이 창이 활성화되면 아이콘 위치를 기준으로 중앙에 배치되므로 애플리케이션에 빠르게 접근할 수 있습니다.
포괄적인 메뉴 지원: 사용자가 시스템 트레이 아이콘에서 직접 이용할 수 있는 풍부한 대화형 메뉴를 만들 수 있습니다. 따라서 애플리케이션 전체 창을 열지 않고도 빠르게 작업을 수행할 수 있습니다.
적응형 아이콘 표시: 라이트 모드와 다크 모드 아이콘을 모두 지원하므로 시스템 테마가 달라도 애플리케이션의 시스템 트레이 아이콘이 잘 보이고 보기 좋게 유지됩니다. macOS에서는 템플릿 아이콘도 지원합니다.

예제

package main

import (
    "log"
    "runtime"

    "github.com/wailsapp/wails/v3/pkg/application"
    "github.com/wailsapp/wails/v3/pkg/icons"
)

func main() {
    app := application.New(application.Options{
        Name:        "Systray Demo",
        Mac: application.MacOptions{
            ActivationPolicy: application.ActivationPolicyAccessory,
        },
    })

    window := app.Window.NewWithOptions(application.WebviewWindowOptions{
        Width:       500,
        Height:      800,
        Frameless:   true,
        AlwaysOnTop: true,
        Hidden:      true,
        Windows: application.WindowsWindow{
            HiddenOnTaskbar: true,
        },
    })

    systemTray := app.SystemTray.New()

    // Support for template icons on macOS
    if runtime.GOOS == "darwin" {
        systemTray.SetTemplateIcon(icons.SystrayMacTemplate)
    } else {
        // Support for light/dark mode icons
        systemTray.SetDarkModeIcon(icons.SystrayDark)
        systemTray.SetIcon(icons.SystrayLight)
    }

    // Support for menu
    myMenu := app.Menu.New()
    myMenu.Add("Hello World!").OnClick(func(_ *application.Context) {
        println("Hello World!")
    })
    systemTray.SetMenu(myMenu)

    // This will center the window to the systray icon with a 5px offset
    // It will automatically be shown when the systray icon is clicked
    // and hidden when the window loses focus
    systemTray.AttachWindow(window).WindowOffset(5)

    err := app.Run()
    if err != nil {
        log.Fatal(err)
    }
}

개선된 바인딩 생성

Wails v3에서는 프로젝트의 바인딩 생성 방식이 크게 개선되었습니다. 바인딩은 Go 백엔드와 프런트엔드를 연결하여 양쪽이 원활하게 통신하도록 해 줍니다.

이제 정교한 정적 분석기를 사용해 바인딩을 생성하므로 바인딩 생성 프로세스가 획기적으로 개선됩니다. 속도가 향상되며 주석과 매개변수 이름을 유지하여 코드 품질도 보존합니다.

바인딩 생성 프로세스가 간소화되어 이제 wails3 generate bindings 명령 하나만 실행하면 됩니다.

예제

// @ts-check
// Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
// This file is automatically generated. DO NOT EDIT

// Generated layout (excerpt): frontend/bindings/<full-go-import-path>/greetservice.js
import { Call as $Call, Create as $Create } from "/wails/runtime.js";

/**
 * Greet greets a person
 * @param {string} $0
 * @returns {Promise<string>}
 */
export function Greet($0) {
    return $Call.ByID(1411160069, $0);
}

/**
 * GreetPerson greets a person
 * @param {main.Person} $0
 * @returns {Promise<string>}
 */
export function GreetPerson($0) {
    return $Call.ByID(4021313248, $0);
}

개선된 빌드 시스템

Wails v3에는 이전 버전의 한계를 해결한 더 유연하고 투명한 빌드 시스템이 도입되었습니다. v2에서는 빌드 프로세스의 내부 동작이 대부분 드러나지 않았고 사용자 지정도 어려워, 프로젝트 빌드 프로세스를 더 세밀하게 제어하려는 개발자에게 불편할 수 있었습니다.

아이콘 생성과 매니페스트 생성 등 v2 빌드 시스템에서 처리하던 모든 복잡한 작업이 CLI의 도구 명령으로 추가되었습니다. 이러한 호출을 조율하여 v2와 동일한 개발자 경험을 제공할 수 있도록 CLI에 Taskfile을 통합했습니다. 이 방식은 필요에 따라 빌드 프로세스를 사용자 지정할 수 있으므로 유연성과 사용 편의성 사이에서 최적의 균형을 제공합니다.

원한다면 make를 사용할 수도 있습니다!

예제

build/Taskfile.darwin.yml

yaml

darwin:build:
  summary: Builds the application for macOS
  platforms:
    - darwin
  cmds:
    - task: common:go:mod:tidy
    - task: common:build:frontend
    - task: common:generate:icons
    - task: darwin:build:app
  env:
    CGO_CFLAGS: "-mmacosx-version-min=10.15"
    CGO_LDFLAGS: "-mmacosx-version-min=10.15"
    MACOSX_DEPLOYMENT_TARGET: "10.15"

개선된 이벤트

이제 Wails는 다양한 런타임 작업과 시스템 활동에 대한 이벤트를 발생시킵니다. 따라서 애플리케이션이 이러한 이벤트에 실시간으로 응답할 수 있습니다. 또한 크로스 플랫폼(공통) 이벤트를 사용할 수 있어 서로 다른 운영 체제에서 동일하게 작동하는 일관된 이벤트 처리 메서드를 작성할 수 있습니다.

특정 이벤트를 동기식으로 처리하도록 이벤트 훅을 등록할 수 있습니다. On 메서드와 달리, 이러한 훅을 사용하면 필요한 경우 이벤트를 취소할 수 있습니다. 일반적인 사용 사례는 창을 닫기 전에 확인 대화 상자를 표시하는 것입니다. 이를 통해 이벤트 흐름과 사용자 경험을 더욱 세밀하게 제어할 수 있습니다.

예제

package main

import (
    "embed"
    "log"
    "time"

    "github.com/wailsapp/wails/v3/pkg/application"
    "github.com/wailsapp/wails/v3/pkg/events"
)

//go:embed assets
var assets embed.FS

func main() {

    app := application.New(application.Options{
        Name:        "Events Demo",
        Description: "A demo of the Events API",
        Assets: application.AssetOptions{
            Handler: application.AssetFileServerFS(assets),
        },
        Mac: application.MacOptions{
            ApplicationShouldTerminateAfterLastWindowClosed: true,
        },
    })

    // Custom event handling — App.Event.On(name, func(e *CustomEvent))
    app.Event.On("myevent", func(e *application.CustomEvent) {
        log.Printf("[Go] CustomEvent received: %+v\n", e)
    })

    // OS-specific application events — App.Event.OnApplicationEvent(eventType, func(e *ApplicationEvent))
    app.Event.OnApplicationEvent(events.Mac.ApplicationDidFinishLaunching, func(event *application.ApplicationEvent) {
        println("events.Mac.ApplicationDidFinishLaunching fired!")
    })

    // Platform-agnostic events
    app.Event.OnApplicationEvent(events.Common.ApplicationStarted, func(event *application.ApplicationEvent) {
        println("events.Common.ApplicationStarted fired!")
    })

    win1 := app.Window.NewWithOptions(application.WebviewWindowOptions{
        Title: "Takes 3 attempts to close me!",
    })

    var countdown = 3

    // Register a hook to cancel the window closing
    win1.RegisterHook(events.Common.WindowClosing, func(e *application.WindowEvent) {
        countdown--
        if countdown == 0 {
            println("Closing!")
            return
        }
        println("Nope! Not closing!")
        e.Cancel()
    })

    win1.OnWindowEvent(events.Common.WindowFocus, func(e *application.WindowEvent) {
        println("[Event] Window focus!")
    })

    err := app.Run()

    if err != nil {
        log.Fatal(err.Error())
    }
}

Wails 마크업 언어(wml)

일반 HTML을 사용하여 런타임 메서드를 호출하는 실험적 기능으로, htmx와 유사합니다.

예제

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Wails ML Demo</title>
  </head>
  <body style="margin-top:50px; color: white; background-color: #191919">
    <h2>Wails ML Demo</h2>
    <p>This application contains no Javascript!</p>
    <button wml-event="button-pressed">Press me!</button>
    <button wml-event="delete-things" wml-confirm="Are you sure?">
      Delete all the things!
    </button>
    <button wml-window="Close" wml-confirm="Are you sure?">
      Close the Window?
    </button>
    <button wml-window="Center">Center</button>
    <button wml-window="Minimise">Minimise</button>
    <button wml-window="Maximise">Maximise</button>
    <button wml-window="UnMaximise">UnMaximise</button>
    <button wml-window="Fullscreen">Fullscreen</button>
    <button wml-window="UnFullscreen">UnFullscreen</button>
    <button wml-window="Restore">Restore</button>
    <div
      style="width: 200px; height: 200px; border: 2px solid white;"
      wml-event="hover"
      wml-trigger="mouseover"
    >
      Hover over me
    </div>
  </body>
</html>

예제

더 많은 예제는 examples 디렉터리에서 확인할 수 있습니다. 살펴보세요!

접근성

이 문서 편집