좌표로 완성하는 DMG 레이아웃

1편에서는 create-dmg 도구를 소개하고, .app만 담은 스테이징 폴더와 배경 이미지를 준비했습니다.

이제 마지막 조각, 레이아웃입니다. DMG 창을 얼마나 크게 열지, 앱 아이콘과 Applications 바로가기를 각각 어디에 놓을지 — 이 모든 것은 create-dmg에 넘기는 좌표로 결정됩니다. 이 글에서 그 좌표를 하나씩 설계합니다.

1편과 마찬가지로 FocusTimer, 좌표 값 등은 모두 예시입니다.

create-dmg 전체 명령

먼저 완성된 명령의 전체 모습을 봅니다. 예시 앱 FocusTimer 1.0의 DMG를 만드는 명령입니다.

create-dmg \
  --volname "FocusTimer 1.0" \
  --background build/dmg-background.png \
  --window-pos 200 120 \
  --window-size 600 400 \
  --icon-size 100 \
  --icon "FocusTimer.app" 175 190 \
  --hide-extension "FocusTimer.app" \
  --app-drop-link 425 190 \
  --no-internet-enable \
  "build/FocusTimer-1.0.dmg" \
  "build/dmg-stage/"

마지막 두 줄이 결과물과 재료입니다.

• build/FocusTimer-1.0.dmg — 만들어질 DMG 파일 경로
• build/dmg-stage/ — 1편에서 .app만 담아 둔 스테이징 폴더

그 위의 --로 시작하는 줄들이 창과 아이콘을 디자인하는 옵션입니다. 하나씩 보겠습니다.

좌표계 이해하기

옵션을 보기 전에 좌표가 어떻게 동작하는지부터 잡고 갑니다.

create-dmg의 위치 좌표는 모두 DMG 창 내부의 좌표입니다. 단위는 1편에서 설명한 **포인트(point)**입니다.

• 원점 (0, 0)은 창의 왼쪽 위 모서리입니다.
• X는 오른쪽으로 갈수록 커지고, Y는 아래로 갈수록 커집니다. (수학 그래프와 달리 Y가 아래로 증가하는 점에 주의)
• 창 크기를 600 400으로 잡았다면, 좌표는 가로 0~600, 세로 0~400 범위 안에서 움직입니다.

아이콘의 위치 좌표는 그 아이콘의 중심점을 가리킵니다. 아이콘의 왼쪽 위 모서리가 아니라 한가운데입니다.

옵션 하나씩

몇 가지는 따로 짚을 만합니다.

--window-pos vs --window-size — 둘을 헷갈리기 쉽습니다. --window-pos는 사용자가 DMG를 열었을 때 그 창이 화면(데스크톱)의 어디에 나타날지이고, --window-size는 그 창 자체의 크기입니다. 좌표 설계에서 중요한 것은 --window-size입니다.

--icon-size 100 — 창 안 아이콘이 100포인트 크기로 그려집니다. 이 값은 배경 이미지를 디자인할 때도 알고 있어야 합니다. 아이콘이 차지할 100포인트(=배경 이미지에서는 200픽셀) 공간은 배경에서 비워 둬야 하기 때문입니다.

--icon과 --app-drop-link — 이 둘이 창의 좌우 두 주인공입니다. --icon은 사용자가 끌어야 할 앱 아이콘, --app-drop-link는 끌어다 놓을 목적지인 Applications 폴더 바로가기입니다. --app-drop-link는 별도로 심볼릭 링크를 만들 필요 없이 create-dmg가 알아서 Applications 바로가기를 만들어 배치해 줍니다.

--hide-extension — 이게 없으면 아이콘 밑에 FocusTimer.app이라고 확장자까지 표시됩니다. 숨기면 FocusTimer로만 깔끔하게 보입니다.

--no-internet-enable — “인터넷 활성화(internet-enable)“는 예전 Safari가 다운로드한 DMG를 자동 처리하던 옛 기능으로, 지금은 더 이상 쓰이지 않습니다. 이 옵션을 주면 create-dmg가 그 처리 단계와 관련 경고를 건너뜁니다.

좌표 설계 — 두 아이콘 배치하기

이제 핵심입니다. 창 크기를 600 400으로 잡았으니, 그 안에서 앱 아이콘과 Applications 바로가기를 어디에 놓을지 정합니다.

예시 명령에서는 이렇게 잡았습니다.

• 앱 아이콘: --icon "FocusTimer.app" 175 190
• Applications 바로가기: --app-drop-link 425 190

이 숫자들의 의미를 풀어 보면 이렇습니다.

X축 (가로) — 175와 425

창 가로폭은 600포인트, 그 중앙은 300입니다. 두 아이콘을 175와 425에 두면, 각각 중앙에서 왼쪽으로 125, 오른쪽으로 125만큼 떨어진 자리가 됩니다. 즉 두 아이콘이 중앙을 기준으로 좌우 대칭으로 놓입니다. 앱 아이콘이 왼쪽, Applications가 오른쪽이라 “왼쪽에서 오른쪽으로 드래그"라는 자연스러운 방향이 만들어집니다.

Y축 (세로) — 둘 다 190

창 세로폭은 400포인트, 그 중앙은 200입니다. 두 아이콘을 같은 190에 두면 같은 높이로 나란히 놓이고, 정중앙(200)보다 살짝 위에 자리잡습니다. 아이콘 이름표가 아이콘 아래에 붙으므로, 살짝 위로 올려 두면 이름표까지 포함해 시각적으로 가운데에 옵니다.

좌표에 정답이 있는 것은 아닙니다. 위 값은 “600×400 창에 100포인트 아이콘 두 개를 좌우 대칭으로 나란히” 두는 한 가지 균형 잡힌 예일 뿐입니다. 본인 배경 디자인에 맞춰 자유롭게 조정하세요.

배경 이미지와 좌표 맞추기

여기서 1편의 @2x 컨벤션이 다시 등장합니다.

아이콘 좌표(175,190, 425,190)는 창의 포인트 좌표입니다. 그런데 배경 이미지는 그 2배인 1200×800 픽셀입니다. 배경 이미지에 화살표를 그릴 때는, 창 좌표에 2를 곱한 픽셀 좌표로 생각해야 합니다.

배경 이미지의 픽셀 좌표 = 창의 포인트 좌표 × 2

예시의 두 아이콘을 배경 이미지 픽셀 좌표로 환산하면 이렇습니다.

따라서 배경 이미지(1200×800)에 시선 유도 화살표를 그릴 때는, 두 아이콘 자리인 픽셀 (350, 380)과 (850, 380) 사이에 그려야 합니다. 아이콘 크기가 100포인트=200픽셀이므로, 각 아이콘이 차지하는 200픽셀 영역은 비워 두고 그 사이 공간에 화살표를 배치하면 됩니다.

이렇게 배경 이미지의 그림과 create-dmg의 아이콘 좌표를 같은 기준으로 맞추는 것이 DMG 디자인의 핵심입니다. 둘이 어긋나면 화살표가 아이콘을 비껴가거나 아이콘 위에 겹쳐 그려집니다.

검증과 미세 조정

명령을 실행하면 build/FocusTimer-1.0.dmg가 만들어집니다. 만들어진 DMG를 더블 클릭해 직접 열어 보세요.

• 배경이 창을 빈틈없이 채우는가? (구석에 쪼그라들었다면 → 1편의 DPI 함정. sips로 144 정규화)
• 앱 아이콘과 Applications가 배경 화살표의 양 끝에 잘 놓였는가?
• 아이콘 이름표가 잘리거나 겹치지 않는가?

좌표는 한 번에 완벽하게 맞지 않는 게 보통입니다. --icon과 --app-drop-link의 숫자를 조금씩 바꿔 가며 명령을 다시 실행하고, 눈으로 확인하는 과정을 몇 번 반복하면 됩니다. 한 번 좌표를 확정하면 그 뒤로는 바꿀 일이 거의 없습니다.

매 릴리스에 재사용 — 자동화

DMG 디자인은 사실상 한 번만 하는 작업입니다. 배경 이미지와 좌표를 한 번 확정하고 나면, 이후 모든 릴리스에서 똑같은 설정을 재사용합니다.

그래서 이 create-dmg 호출은 릴리스 빌드 스크립트의 한 단계로 넣어 두는 것이 좋습니다. 스크립트에서는 보통 이런 흐름이 됩니다.

1. 서명·공증·staple이 끝난 .app을 스테이징 폴더로 복사 (1편)
2. 배경 이미지를 복사한 뒤 sips로 DPI를 144로 정규화 (1편의 함정 방지)
3. 위에서 설계한 좌표로 create-dmg 실행
4. 스테이징 폴더 등 임시 파일 정리

버전 번호(--volname의 1.0, 결과 파일명의 FocusTimer-1.0.dmg)만 릴리스마다 바뀌므로, 그 부분만 스크립트 변수로 빼 두면 매번 명령을 손볼 필요가 없습니다. 배경 이미지 경로와 모든 좌표는 고정값으로 둡니다.

배경 이미지의 DPI 정규화(sips)를 스크립트가 매번 자동으로 수행하게 해 두는 것을 권합니다. 디자인 원본을 다시 내보내 교체할 때 DPI 정규화를 깜빡해도, 스크립트가 항상 바로잡아 주기 때문입니다.

시리즈 정리

2편에 걸친 DMG 디자인이 끝났습니다. 이제 다음을 갖췄습니다.

• ✅ (1편) create-dmg + .app 스테이징 폴더 + @2x·DPI 정규화된 배경 이미지
• ✅ (2편) 창·아이콘 좌표 설계 + 배경 픽셀 좌표와 창 포인트 좌표 맞추기 + 자동화

핵심을 다시 정리하면 이렇습니다.

• DMG 창은 600×400 포인트, 배경 이미지는 그 2배인 1200×800 픽셀(@2x).
• 배경 PNG의 DPI는 반드시 144로 정규화한다 — 그래야 배경이 창을 정확히 채운다.
• 아이콘 좌표는 창 내부의 포인트 좌표, 배경 그림 좌표는 그 2배인 픽셀 좌표 — 둘을 같은 기준으로 맞춘다.
• 한 번 확정한 디자인은 빌드 스크립트에 넣어 매 릴리스에 그대로 재사용한다.

작은 화살표 하나, 아이콘 위치 몇 포인트가 사용자의 첫인상을 좌우합니다. .dmg 창은 사용자가 당신의 앱과 처음 만나는 자리인 만큼, 한 번 정성껏 디자인해 둘 가치가 있습니다.

참고 자료

• create-dmg — GitHub
• sips — macOS 명령어 매뉴얼