Layar Pertama yang Dilihat Pengguna

Saat Anda mendistribusikan aplikasi macOS sendiri, pengguna mengunduh file .dmg dan mengkliknya dua kali. Pada saat itu, sebuah jendela Finder tunggal terbuka. Jendela ini adalah layar pertama tempat pengguna bertemu dengan aplikasi Anda.

Jendela .dmg yang dibuat dengan baik biasanya terlihat seperti ini — gambar panduan mengisi latar belakang, ikon aplikasi berada di sebelah kiri, dan pintasan ke folder Applications berada di sebelah kanan. Pengguna menyelesaikan instalasi dengan menyeret ikon aplikasi ke Applications. Alur “seret untuk menginstal” ini secara efektif adalah pengalaman instalasi standar untuk aplikasi macOS indie.

Jendela ini tidak muncul begitu saja. Anda harus mendefinisikan sendiri gambar latar belakang, ukuran jendela, serta posisi dan ukuran setiap ikon. Seri ini membahas cara mendesain jendela .dmg tersebut.

Seri ini dimulai dari asumsi bahwa Anda sudah memiliki .app yang telah ditandatangani, dinotarisasi, dan di-staple — dengan kata lain, aplikasi yang selangkah lagi dari distribusi. Proses itu dibahas dalam seri “Mendistribusikan Aplikasi macOS Sendiri”. .dmg adalah artefak saluran distribusi langsung (Developer ID) dan tidak ada hubungannya dengan saluran Mac App Store.

Yang Akan Dibangun dalam Seri Ini

Selama dua bagian, Anda akan memiliki hal-hal berikut:

  • (Bagian 1, artikel ini) Alat create-dmg + folder staging yang hanya berisi .app + gambar latar belakang yang disiapkan
  • (Bagian 2) Mendesain koordinat jendela, ikon, dan drop link + menyelaraskan gambar latar belakang dengan koordinat tersebut + otomatisasi

Di akhir seri, Anda seharusnya memiliki:

  • Folder staging yang mengisolasi dan hanya berisi .app
  • Gambar latar belakang yang mengikuti konvensi @2x Retina dan memiliki DPI yang dinormalisasi
  • Perintah create-dmg di mana ukuran jendela dan posisi ikon semuanya ditetapkan oleh koordinat
  • Bentuk yang dapat digunakan kembali apa adanya untuk setiap rilis

Aplikasi Contoh — FocusTimer

Seperti dalam seri sebelumnya, kita akan menggunakan aplikasi macOS fiktif, FocusTimer (aplikasi timer sederhana untuk mengelola waktu fokus), sebagai contoh kita. FocusTimer, jalur, nilai koordinat, dan sebagainya adalah semua contoh. Dalam praktiknya, sesuaikan dengan aplikasi Anda sendiri.

Apa Itu DMG?

DMG (.dmg) adalah file disk image macOS. Bayangkan sebagai “disk virtual” yang mengemas seluruh struktur folder-dan-file di dalam satu file. Saat pengguna mengklik dua kali sebuah .dmg, macOS me-mount-nya seperti disk, dan isinya terbuka di jendela Finder.

Inilah mengapa DMG digunakan untuk distribusi aplikasi:

  • Aplikasi (.app) sebenarnya adalah folder. Sulit untuk meletakkan folder langsung di internet, tetapi membungkusnya dalam DMG menjadikannya satu file.
  • Anda dapat menyertakan pintasan ke folder Applications di dalam jendela DMG, memandu pengguna untuk menginstal dengan satu seret.
  • Anda dapat mendesain tampilan jendela — latar belakang, posisi ikon, dan sebagainya — membuat pengalaman instalasi menjadi bersih.

Alatnya — create-dmg

Membangun DMG secara manual berarti melewati beberapa langkah: membuat image dengan hdiutil, me-mount-nya, memanipulasi jendela Finder dengan AppleScript untuk menempatkan ikon, lalu unmount lagi. Ini membosankan dan rawan kesalahan.

create-dmg adalah alat open-source yang menggabungkan seluruh proses ini menjadi satu perintah. Berikan gambar latar belakang, ukuran jendela, dan koordinat ikon sebagai opsi, dan alat ini menghasilkan .dmg yang sudah jadi untuk Anda.

Anda sudah menginstalnya saat menyiapkan alat prasyarat di Bagian 1 seri “Mendistribusikan Aplikasi macOS Sendiri”. Jika belum, instal dengan Homebrew:

brew install create-dmg

Ada dua proyek bernama create-dmg. Yang digunakan dalam artikel ini adalah alat baris perintah yang diinstal oleh Homebrew (create-dmg/create-dmg). Jangan bingungkan dengan proyek terpisah yang memiliki nama opsi berbeda.

Langkah 1 — Folder Staging yang Hanya Berisi .app

DMG seharusnya berisi hanya satu ikon aplikasi, dengan bersih. Tetapi saat Anda mem-build dan mengekspor aplikasi, folder hasilnya tidak hanya berisi .app tetapi juga file sampingan seperti DistributionSummary.plist dan log packaging. Jika Anda langsung mengubah folder tersebut menjadi DMG, sampingan-sampingan itu juga akan terekspos di jendela.

Jadi Anda menyalin hanya .app ke folder kosong untuk mengisolasinya, lalu menggunakan folder tersebut sebagai bahan baku untuk DMG. Folder isolasi ini umumnya disebut folder staging.

# Salin hanya .app ke folder kosong agar tidak tercampur dengan sampingan
DMG_STAGE="build/dmg-stage"
rm -rf "$DMG_STAGE"
mkdir -p "$DMG_STAGE"
cp -R "build/export/FocusTimer.app" "$DMG_STAGE/"

Sekarang build/dmg-stage/ hanya berisi FocusTimer.app. Saat Anda mem-build DMG, arahkan create-dmg ke folder ini, dan jendela akan menampilkan hanya ikon aplikasi, dengan bersih. (Pintasan folder Applications dibuat secara otomatis melalui opsi create-dmg di Bagian 2.)

Langkah 2 — Menyiapkan Gambar Latar Belakang

Inti dari desain jendela DMG adalah gambar latar belakang. Ini adalah tempat di mana orang paling sering tersangkut, jadi mari kita bahas langkah demi langkah.

Ukuran Kanvas — Mengapa 1200×800?

Di Bagian 2, Anda akan menetapkan ukuran jendela DMG dengan melewatkan --window-size 600 400 ke create-dmg. Di sini, satuan 600 dan 400 bukan piksel melainkan titik (point). Titik adalah satuan koordinat logis yang digunakan macOS.

Pada layar Retina, 1 titik digambar sebagai 2 piksel. Jadi untuk mengisi jendela 600×400 titik sepenuhnya dan dengan tajam, gambar latar belakang harus berukuran dua kali lipat — 1200×800 piksel. Inilah konvensi @2x (resolusi ganda).

Ringkasnya — jendela berukuran 600×400 titik, dan gambar latar belakang berukuran 1200×800 piksel. Hubungan 2× ini kembali menjadi faktor penting saat Anda menyiapkan koordinat di Bagian 2.

Apa yang Digambar di Latar Belakang?

Ada kesalahpahaman umum yang patut dibahas. Jangan gambar ikon aplikasi atau ikon folder Applications ke dalam gambar latar belakang. Ikon-ikon tersebut ditempatkan ke jendela sebagai file aktual oleh create-dmg (Bagian 2).

Yang masuk ke gambar latar belakang adalah elemen dekorasi dan panduan saja:

  • Panah yang mengarah dari ikon aplikasi ke folder Applications — desain paling umum untuk memandu mata dan tangan pengguna untuk “seret ke sini.”
  • Jika diperlukan, frasa instruksional singkat seperti “Seret ke sini”
  • Warna merek atau pola latar belakang yang halus

Dengan kata lain, gambar latar belakang adalah “gambar yang membiarkan tempat di mana ikon akan berada kosong, dan hanya menggambar garis panduan yang menghubungkannya.” Anda membiarkan dua tempat ikon — kiri dan kanan, masing-masing berukuran 100 titik = 200 piksel (di Bagian 2) — kosong, dan menempatkan panah di ruang tengah di antara keduanya.

Jebakan Utama — DPI

Jebakan yang paling sering dihadapi orang dengan gambar latar belakang adalah DPI (piksel per inci).

Saat Anda mengekspor PNG dari editor gambar, file tersebut menyimpan tidak hanya jumlah piksel (1200×800) tetapi juga nilai DPI. Saat Finder menggambar latar belakang DMG, ia melihat DPI ini untuk menghitung balik “berapa titik ukuran gambar ini.” Perhitungannya kira-kira seperti ini:

Ukuran titik = jumlah piksel ÷ (DPI ÷ 72)
  • Jika DPI adalah 144: 1200 ÷ (144 ÷ 72) = 1200 ÷ 2 = 600 titik. Tepat mengisi jendela (600pt). ✅
  • Tetapi beberapa editor gambar (misalnya, Pixelmator Pro) menstempel nilai DPI sembarang (misalnya, 338) saat mengekspor. Jika DPI adalah 338: 1200 ÷ (338 ÷ 72) ≈ 256 titik. Itu jauh lebih kecil dari jendela (600pt), sehingga latar belakang digambar menyusut ke pojok kiri atas jendela. ❌

Jumlah piksel sama-sama 1200×800 dalam kedua kasus, namun latar belakang rusak karena satu nilai DPI. Pertama kali Anda mengalami ini, penyebabnya benar-benar sulit dilacak.

Solusinya adalah memaksa DPI PNG yang diekspor ke 144 yang seragam. Satu baris dengan perintah sips, yang sudah terpasang di macOS secara default, melakukannya:

sips -s dpiWidth 144 -s dpiHeight 144 dmg-background.png

Setelah Anda menjalankan satu baris ini, apa pun DPI yang di-stamp oleh editor, nilainya diatur ke 144, dan 1200×800 piksel diinterpretasikan sebagai tepat 600×400 titik.

Intinya — ① buat gambar latar belakang 1200×800 piksel, dan ② setelah mengekspor, normalisasi DPI ke 144 dengan sips. Ikuti dua aturan ini dan Anda akan menghindari jebakan DPI.

Rangkuman Bagian 1

Jika Anda telah mengikuti sejauh ini, Anda sekarang memiliki:

  • ✅ Alat create-dmg terinstal + pemahaman tentang perannya
  • ✅ Folder staging yang mengisolasi dan hanya berisi .app (build/dmg-stage/)
  • ✅ Gambar latar belakang yang dibuat pada 1200×800 piksel dengan DPI dinormalisasi ke 144

Bahan-bahannya sudah siap. Tetapi Anda masih belum memiliki jendela untuk menampilkan gambar latar belakang dan menempatkan ikon-ikonnya. Seberapa besar jendela terbuka, dan di mana menempatkan ikon aplikasi dan pintasan Applications — semua ini ditentukan oleh koordinat yang Anda berikan ke create-dmg.

Di bagian berikutnya, kita akan mendesain koordinat-koordinat itu satu per satu, membahas cara menyelaraskan koordinat piksel latar belakang dengan koordinat titik jendela sehingga panah dalam gambar latar belakang mendarat tepat di antara dua ikon, dan menunjukkan cara mengotomatiskan proses ini agar dapat digunakan kembali untuk setiap rilis.