Wails로 데스크톱 앱 만들기 #7 프론트엔드 프레임워크 붙이기 — Svelte·Vue·React

프레임워크 Wails 자바스크립트 데스크톱
4 분 소요

본편 여섯 편(#1〜#6)은 바닐라 자바스크립트로 앞단을 만들었습니다. 개념을 배우는 데는 그게 가장 군더더기 없지만, 화면이 늘고 상태가 얽히는 실제 앱에서는 프레임워크가 편합니다. 이번 심화 편은 Wails에 Svelte·Vue·React 같은 프론트엔드 프레임워크를 붙이는 법을 다룹니다. 실전 트랙이 “가벼운 컴포넌트 프레임워크를 전제한다"고 넘어간 그 지점을 여기서 채웁니다.

이 시리즈는 본편 6편 + 심화 2편, 총 8편입니다.

  • 본편: #1 · #2 · #3 · #4 · #5 · #6
  • 심화: #7 프론트엔드 프레임워크 붙이기 — Svelte·Vue·React ← 이번 글 · #8 디버깅 — 개발자 도구·로그·흔한 에러

Wails가 프론트엔드를 가리지 않는다는 것 #

#2에서 봤듯, Wails 프로젝트는 Go 루트와 frontend 디렉터리로 나뉩니다. Wails는 이 frontend 디렉터리 안에서 무엇을 쓰든 상관하지 않습니다. Wails가 요구하는 것은 딱 두 가지, 곧 프론트엔드를 설치하는 명령과 빌드하는 명령뿐입니다. 이 둘은 wails.json에 적혀 있습니다.

wails.json — 프론트엔드 명령 
{
  "frontend:install": "npm install",
  "frontend:build": "npm run build"
}

wails dev나 wails build는 이 명령을 불러 프론트엔드를 준비하고, 그 결과물(정적 파일)을 최종 바이너리에 묶습니다. 그래서 프레임워크가 Vite로 빌드되는 것이면 무엇이든 자연스럽게 들어맞습니다. Svelte, Vue, React, Solid 모두 이 구조 안에서 같습니다.

wails init 템플릿으로 시작하기 #

새 프로젝트라면 처음부터 프레임워크 템플릿으로 시작하는 것이 가장 쉽습니다. wails init의 -t 옵션에 템플릿 이름을 줍니다.

프레임워크 템플릿으로 새 앱 생성 
wails init -n myapp -t svelte      # 또는 svelte-ts
wails init -n myapp -t vue         # 또는 vue-ts
wails init -n myapp -t react       # 또는 react-ts
wails init -n myapp -t vanilla     # 본편에서 쓴 기본

-ts가 붙은 템플릿은 타입스크립트판입니다. 템플릿은 frontend를 해당 프레임워크와 Vite로 미리 구성해 주므로, 생성 직후 wails dev만 하면 핫 리로드 개발 루프가 그대로 돕니다. 어떤 프레임워크를 고르든 Go 쪽 코드(#3의 바인딩, #4의 런타임)는 전혀 바뀌지 않습니다.

바인딩은 프레임워크와 무관하게 같다 #

Wails가 Go 메서드를 프론트엔드 함수로 노출하는 방식(#3)은 프레임워크와 상관없이 동일합니다. wailsjs 폴더에 자동 생성되는 바인딩을 import해서 부르면 됩니다. 아래는 같은 Greet 호출을 세 프레임워크에서 쓰는 모습인데, 다른 것은 상태를 화면에 잇는 방법뿐입니다.

Svelte — 반응형 변수에 잇기 
<script>
  import { Greet } from "../wailsjs/go/main/App";
  let name = "", result = "";
  async function greet() { result = await Greet(name); }
</script>
<input bind:value={name} />
<button on:click={greet}>인사</button>
<p>{result}</p>
Vue — ref에 잇기 
<script setup>
import { ref } from "vue";
import { Greet } from "../wailsjs/go/main/App";
const name = ref(""), result = ref("");
const greet = async () => { result.value = await Greet(name.value); };
</script>

핵심은 import { Greet } from "../wailsjs/go/main/App" 한 줄이 세 프레임워크에서 똑같다는 것입니다. Go 메서드를 부르는 부분은 공통이고, bind:value(Svelte)나 ref(Vue)처럼 결과를 화면에 반영하는 방식만 프레임워크마다 다릅니다. 실전 트랙에서 데이터의 진실을 Go에 두고 프론트엔드는 화면만 담당한다고 한 이유가 여기서 분명해집니다. 어느 프레임워크든 Go를 부르는 방법은 하나이기 때문입니다.

무엇을 고를까 #

  • 바닐라: 의존성이 없고 번들이 가장 작습니다. 본편처럼 상태가 단순한 도구에 적합합니다.
  • Svelte: 가볍고 반응형이 문법에 녹아 있어, 데스크톱 앱의 작은 번들과 잘 맞습니다.
  • Vue·React: 생태계와 컴포넌트 자산이 크고, 팀이 이미 익숙하다면 학습 비용이 0입니다.

정답은 팀이 이미 쓰는 것입니다. 새로 배워야 한다면, 데스크톱 앱은 번들 크기와 단순함이 중요하므로 바닐라나 Svelte에서 시작해 필요할 때 키우는 쪽이 무난합니다.

바닐라 앱에 나중에 붙이기 #

이미 바닐라로 시작한 앱에 프레임워크를 더하고 싶다면, frontend 디렉터리를 해당 프레임워크의 Vite 프로젝트로 교체하고 wails.json의 빌드 명령이 맞는지 확인하면 됩니다. 이때 Vite의 빌드 출력 경로가 Wails가 기대하는 위치(frontend/dist)와 맞아야 하는데, 어긋나면 #8에서 다룰 “창은 뜨는데 화면이 비어 있는” 증상이 나옵니다.

정리 #

  • Wails는 프론트엔드를 가리지 않습니다. wails.json의 설치·빌드 명령 두 개만 맞으면, Vite로 빌드되는 어떤 프레임워크든 들어맞습니다.
  • 새 프로젝트는 wails init -t svelte|vue|react(또는 -ts판)로 시작하는 것이 가장 쉽습니다. Go 쪽 코드는 프레임워크와 무관하게 그대로입니다.
  • 바인딩 호출(import { Greet } from "../wailsjs/...")은 세 프레임워크에서 동일합니다. 다른 것은 결과를 화면에 잇는 방식뿐입니다.
  • 선택은 팀이 쓰는 것을 우선하되, 새로 배운다면 번들이 작은 바닐라·Svelte가 데스크톱에 무난합니다.
  • 바닐라에 나중에 붙일 때는 Vite의 출력 경로를 Wails 기대 위치에 맞춥니다. 어긋나면 빈 화면이 됩니다.
  • 다음 글에서 이런 문제를 포함한 흔한 에러를 개발자 도구와 로그로 잡는 디버깅을 다룹니다.
X