사용자가 가장 먼저 보는 화면

macOS 앱을 직접 배포하면, 사용자는 .dmg 파일을 내려받아 더블 클릭합니다. 그 순간 Finder 창 하나가 열립니다. 이 창이 사용자가 당신의 앱과 만나는 첫 화면입니다.

잘 만든 .dmg 창은 보통 이렇게 생겼습니다 — 배경에 안내 그림이 깔려 있고, 왼쪽에 앱 아이콘, 오른쪽에 Applications 폴더 바로가기가 놓여 있습니다. 사용자는 앱 아이콘을 Applications 쪽으로 끌어다 놓아 설치를 마칩니다. 이 “드래그해서 설치하기"는 macOS 인디 앱의 사실상 표준 설치 경험입니다.

이 창은 그냥 만들어지지 않습니다. 배경 이미지, 창 크기, 아이콘의 위치와 크기를 모두 직접 정해 줘야 합니다. 이 시리즈는 그 .dmg 창을 디자인하는 방법을 다룹니다.

이 시리즈는 서명·공증·staple까지 끝난 .app이 손에 있다는 전제에서 출발합니다. 즉 배포 직전 단계의 앱입니다. 그 과정은 Developer ID 직접 배포 시리즈에서 다뤘습니다. .dmg는 직접 배포(Developer ID) 채널의 산출물이며, Mac App Store 채널과는 무관합니다.

이 시리즈에서 만드는 것

2편에 걸쳐 다음을 갖추게 됩니다.

  • (1편, 이 글) create-dmg 도구 + .app만 담는 스테이징 폴더 + 배경 이미지 준비
  • (2편) 창·아이콘·드롭링크의 좌표 설계 + 배경 이미지와 좌표 맞추기 + 자동화

시리즈를 마치면 다음이 갖춰져 있어야 합니다.

  • .app만 격리해 담은 스테이징 폴더
  • @2x 레티나 컨벤션에 맞고 DPI가 정규화된 배경 이미지
  • 창 크기·아이콘 위치가 모두 좌표로 정해진 create-dmg 명령
  • 매 릴리스에 그대로 재사용할 수 있는 형태

예시 앱 — FocusTimer

지난 시리즈들과 동일하게, 가상의 macOS 앱 FocusTimer(집중 시간을 관리하는 간단한 타이머 앱)를 예로 듭니다. FocusTimer, 경로, 좌표 값 등은 모두 예시입니다. 실제로는 본인 앱에 맞게 바꿔 사용하세요.

DMG란 무엇인가

**DMG(.dmg)**는 macOS의 디스크 이미지(disk image) 파일입니다. 하나의 파일 안에 폴더·파일 구조를 통째로 담은 “가상 디스크"라고 생각하면 됩니다. 사용자가 .dmg를 더블 클릭하면 macOS가 그것을 디스크처럼 마운트하고, 그 내용이 Finder 창으로 열립니다.

앱 배포에 DMG를 쓰는 이유는 이렇습니다.

  • 앱(.app)은 사실 폴더입니다. 폴더를 그대로 인터넷에 올리긴 어렵지만, DMG로 감싸면 파일 하나가 됩니다.
  • DMG 창 안에 Applications 폴더 바로가기를 함께 넣어, 사용자가 드래그 한 번으로 설치하도록 안내할 수 있습니다.
  • 창 배경, 아이콘 위치 등 창의 모양을 디자인할 수 있어, 설치 경험을 깔끔하게 만들 수 있습니다.

도구 — create-dmg

DMG를 손으로 만들려면 hdiutil로 이미지를 만들고, 마운트하고, Finder 창을 AppleScript로 조작해 아이콘을 배치하고, 다시 언마운트하는 등 여러 단계를 거쳐야 합니다. 번거롭고 실수하기 쉽습니다.

**create-dmg**는 이 과정을 명령 하나로 묶어 주는 오픈소스 도구입니다. 배경 이미지, 창 크기, 아이콘 좌표를 옵션으로 넘기면 완성된 .dmg를 만들어 줍니다.

Developer ID 직접 배포 시리즈 1편에서 사전 도구를 설치할 때 이미 깔아 두었습니다. 아직이라면 Homebrew로 설치합니다.

brew install create-dmg

create-dmg라는 이름의 프로젝트가 두 개 있습니다. 이 글에서 쓰는 것은 Homebrew로 설치되는 명령줄 도구(create-dmg/create-dmg)입니다. 옵션 이름이 다른 별도 프로젝트와 혼동하지 마세요.

1단계 — .app만 담는 스테이징 폴더

DMG 안에는 앱 아이콘 하나만 깔끔하게 들어가야 합니다. 그런데 앱을 빌드·내보내기 하면 그 결과 폴더에는 .app 말고도 DistributionSummary.plist, 패키징 로그 같은 부산물 파일이 함께 들어 있습니다. 이 폴더를 그대로 DMG로 만들면 부산물까지 창에 노출됩니다.

그래서 .app만 빈 폴더로 복사해 격리한 뒤, 그 폴더를 DMG의 재료로 씁니다. 이 격리용 폴더를 흔히 스테이징(staging) 폴더라고 부릅니다.

# 부산물과 섞이지 않도록 .app만 빈 폴더로 복사
DMG_STAGE="build/dmg-stage"
rm -rf "$DMG_STAGE"
mkdir -p "$DMG_STAGE"
cp -R "build/export/FocusTimer.app" "$DMG_STAGE/"

이제 build/dmg-stage/ 안에는 FocusTimer.app 하나만 있습니다. DMG를 만들 때 create-dmg에게 이 폴더를 가리키게 하면, 창에는 앱 아이콘만 깔끔하게 나타납니다. (Applications 폴더 바로가기는 2편에서 create-dmg 옵션으로 자동 생성합니다.)

2단계 — 배경 이미지 준비

DMG 창 디자인의 핵심은 배경 이미지입니다. 여기서 가장 많이 막히는 부분이므로 차근차근 보겠습니다.

캔버스 크기 — 왜 1200×800인가

2편에서 create-dmg에 --window-size 600 400을 주어 DMG 창 크기를 정합니다. 이때 600과 400의 단위는 픽셀이 아니라 **포인트(point)**입니다. 포인트는 macOS가 쓰는 논리적 좌표 단위입니다.

레티나(Retina) 디스플레이에서는 1포인트가 2픽셀로 그려집니다. 따라서 600×400 포인트 크기의 창을 빈틈없이, 선명하게 채우려면, 배경 이미지는 그 2배인 1200×800 픽셀로 만들어야 합니다. 이것이 @2x(2배 해상도) 컨벤션입니다.

정리하면 — 창은 600×400 포인트, 배경 이미지는 1200×800 픽셀. 이 2배 관계는 2편에서 좌표를 잡을 때 다시 중요하게 쓰입니다.

배경에는 무엇을 그리나

여기서 흔한 오해 하나를 짚고 갑니다. 배경 이미지에는 앱 아이콘이나 Applications 폴더 아이콘을 그려 넣지 않습니다. 그 아이콘들은 create-dmg가 실제 파일을 창 위에 얹어 줍니다(2편).

배경 이미지에 넣는 것은 장식과 안내 요소뿐입니다.

  • 앱 아이콘에서 Applications 폴더 쪽으로 향하는 화살표 — 사용자의 시선과 손을 “이쪽으로 드래그하라"고 유도하는 가장 흔한 디자인입니다.
  • 필요하다면 “여기로 드래그하세요” 같은 짧은 안내 문구
  • 브랜드 색이나 옅은 배경 무늬

즉 배경 이미지는 **“아이콘이 놓일 자리는 비워 두고, 그 사이를 잇는 안내선만 그린 그림”**입니다. 아이콘이 놓일 좌우 두 자리(2편에서 각각 100포인트=200픽셀 크기)는 비워 두고, 그 가운데에 화살표를 배치하는 식입니다.

핵심 함정 — DPI

배경 이미지에서 가장 많이 당하는 함정이 **DPI(인치당 픽셀 수)**입니다.

이미지 편집기로 PNG를 내보내면, 파일에는 픽셀 수(1200×800)뿐 아니라 DPI 값도 함께 저장됩니다. Finder는 DMG 배경을 그릴 때 이 DPI를 보고 “이 이미지가 몇 포인트 크기인지"를 역산합니다. 계산은 대략 이렇습니다.

포인트 크기 = 픽셀 수 ÷ (DPI ÷ 72)
  • DPI가 144이면: 1200 ÷ (144 ÷ 72) = 1200 ÷ 2 = 600포인트. 창(600pt)을 정확히 채웁니다. ✅
  • 그런데 일부 이미지 편집기(예: Pixelmator Pro)는 내보낼 때 임의의 DPI 값(예: 338)을 박아 둡니다. DPI가 338이면: 1200 ÷ (338 ÷ 72) ≈ 256포인트. 창(600pt)보다 훨씬 작아져, 배경이 창 왼쪽 위 구석에 쪼그라든 채 그려집니다. ❌

픽셀 수는 똑같이 1200×800인데 DPI 하나 때문에 배경이 깨지는 것입니다. 처음 겪으면 원인을 찾기가 정말 어렵습니다.

해결책은 내보낸 PNG의 DPI를 144로 강제 통일하는 것입니다. macOS에 기본 내장된 sips 명령으로 한 줄이면 됩니다.

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

이 한 줄을 거치면, 편집기가 어떤 DPI를 박아 두었든 144로 맞춰져 1200×800 픽셀이 정확히 600×400 포인트로 해석됩니다.

요점 — 배경 이미지는 ① 1200×800 픽셀로 만들고 ② 내보낸 뒤 sips로 DPI를 144로 정규화한다. 이 두 가지를 지키면 DPI 함정을 피할 수 있습니다.

1편 정리

여기까지 따라왔다면 이제 다음을 갖췄습니다.

  • ✅ create-dmg 도구 설치 + 역할 이해
  • ✅ .app만 격리해 담은 스테이징 폴더(build/dmg-stage/)
  • ✅ 1200×800 픽셀로 만들고 DPI를 144로 정규화한 배경 이미지

재료는 준비됐습니다. 하지만 아직 배경 이미지를 띄우고 아이콘을 배치할 창이 없습니다. 창을 얼마나 크게 열지, 앱 아이콘과 Applications 바로가기를 각각 어디에 놓을지 — 이 모든 것은 create-dmg에 넘기는 좌표로 결정됩니다.

다음 편에서는 그 좌표를 하나씩 설계하고, 배경 이미지의 화살표가 두 아이콘 사이에 정확히 놓이도록 배경 픽셀 좌표와 창 포인트 좌표를 맞추는 법, 그리고 이 과정을 매 릴리스에 재사용하도록 자동화하는 법을 다룹니다.