Tauri로 데스크톱 앱 만들기 — 3시간의 절망

Fecit 웹 버전을 Tauri v2로 감싸서 데스크톱 앱을 만들기로 했습니다. 웹 앱은 이미 돌아가고 있었으니까, Tauri로 감싸면 금방 될 줄 알았습니다.

금방 안 됐습니다.

정확히 두 가지 문제 때문에 3시간을 날렸습니다. 코드를 짜는 게 아니라 “왜 안 되지?”를 반복하는 3시간이었습니다. Claude Code와 함께 작업하면서 가장 절망적인 순간이었습니다. 둘 다 답을 모르고 있었으니까요.

아이콘이 왜 이렇게 큰 거야

macOS 앱 아이콘은 규격이 있습니다. 1024×1024 이미지를 준비하면 될 줄 알았습니다.

이미지를 만들어서 넣었습니다. 빌드했습니다. Dock에 아이콘이 뜹니다.

근데 다른 앱보다 큽니다. 혼자서 유난히 큽니다.

“사이즈가 틀렸나?” 1024×1024 맞습니다. “해상도가 다른가?” 아닙니다. 이미지 자체는 규격에 맞습니다.

문제는 여백이었습니다.

macOS 앱 아이콘은 전체 캔버스를 다 채우지 않습니다. 둥근 모서리와 함께 사방에 여백이 있어야 합니다. Apple의 다른 앱 아이콘을 보면 이미지가 캔버스 안에서 약간 작게 들어가 있습니다. 이 규칙을 모르고 캔버스를 꽉 채운 아이콘을 넣으니까, 다른 앱보다 뚱뚱해 보였던 겁니다.

아이콘에 여백을 주고, 둥근 모서리를 macOS 스타일에 맞췄습니다. 그제야 다른 앱들과 나란히 놨을 때 자연스러워졌습니다.

이걸 발견하기까지가 오래 걸렸습니다. “아이콘 크기”를 검색하면 1024×1024라는 답만 나옵니다. 여백 이야기는 Apple Human Interface Guidelines 깊숙한 곳에 있습니다.

창이 왜 안 움직여

아이콘 다음은 타이틀바였습니다.

Tauri 기본 타이틀바는 못생겼습니다. macOS 앱답게 만들려면 타이틀바를 투명하게 하고, 신호등 버튼(빨강/노랑/초록)만 남겨야 합니다. titleBarStyle을 Transparent로 설정했습니다.

타이틀바가 사라졌습니다. 예쁩니다.

그런데 창을 드래그해서 이동할 수 없습니다.

기본 타이틀바에는 드래그 기능이 내장되어 있습니다. 타이틀바를 투명하게 만들면 그 기능도 같이 사라집니다. 창을 잡고 이동하려면 드래그 가능한 영역을 직접 지정해야 합니다.

이걸 모르고 한참을 헤맸습니다. “타이틀바를 투명하게 했는데 왜 드래그가 안 되지?” CSS 문제인지, Tauri 설정 문제인지, 권한 문제인지. 하나씩 바꿔가면서 확인하는데 시간이 갈수록 답이 안 보였습니다.

결국 해결한 건 두 가지였습니다.

1. Tauri 설정에 startDragging 권한 추가
2. Sidebar 상단에 data-tauri-drag-region 속성으로 드래그 영역 지정

두 줄이면 끝나는 일이었습니다. 두 줄을 찾는 데 한 시간이 넘게 걸렸습니다.

3시간의 교훈

돌아보면 두 문제 다 같은 패턴입니다.

“원인을 모르니까 뭘 검색해야 하는지도 모른다.”

아이콘이 크게 보이는 게 여백 때문이라는 걸 모르면 “macOS icon padding”을 검색할 수 없습니다. “macOS icon size”만 검색하게 되고, 1024×1024라는 답만 나옵니다.

드래그가 안 되는 게 권한과 drag region 때문이라는 걸 모르면 “Tauri window drag not working”을 검색하게 되고, 관련 없는 답만 나옵니다.

AI와 함께 작업해도 마찬가지였습니다. 문제의 원인을 모르면 AI도 답을 못 줍니다. 같이 헤매다가 같이 발견하는 거였습니다.

3시간이 아깝긴 했지만, 결과적으로 데스크톱 앱이 macOS 네이티브 앱처럼 보이게 됐습니다. 아이콘도 적당한 크기고, 창도 자유롭게 움직입니다. 비용 대비 결과는 나쁘지 않았습니다.

다만, 다음에 비슷한 삽질을 하는 분이 계시다면 — macOS 아이콘은 여백이 필요하고, Tauri 투명 타이틀바는 드래그 영역을 직접 지정해야 합니다. 이 두 줄이 3시간을 아껴줄 겁니다.