Mac Automator로 웹사이트 HUD(팝업) 만들기
중요: 이 방법은 macOS와 Automator에 익숙한 사용자를 대상으로 합니다. Website Popup 액션 설치에는 관리자 권한이 필요합니다.
HUD란 무엇인가
HUD는 Heads-Up Display의 약자입니다. 간단히 말해, 작업 중에 방해받지 않으면서 빠르게 정보를 보여주는 작은 독립 창입니다. 게임의 체력 바나 무기 정보처럼, HUD는 특정 정보나 기능에 빠르게 접근하게 해줍니다.
한 줄 정의: HUD는 현재 작업을 방해하지 않으면서 특정 정보를 신속히 보여주는 작은 팝업 인터페이스입니다.
왜 웹사이트를 HUD로 쓸까?
- 브라우저 탭으로부터 독립적이다. 주요 사이트를 작은 창으로 띄워 다른 작업과 동시에 사용하기 쉽다.
- 빠른 확인용(알림, 메시지, 메일 등)에 적합하다.
- 화면 위치와 크기를 지정해 자주 쓰는 정보를 한눈에 보게 한다.
Caption: Automator로 만든 예시 HUD 미리보기 창
준비물
- macOS가 설치된 맥
- Automator 앱(기본 제공)
- Website Popup Automator 액션(서드파티) — 관리자 권한으로 설치 필요
중요: Website Popup 액션은 Automator의 액션으로 동작하므로 Automator에서만 사용할 수 있습니다.
Automator 워크플로 만들기 — 단계별 가이드
Website Popup 액션을 다운로드하고 설치합니다. 설치 프로그램이 관리자 비밀번호를 요구할 수 있습니다.
Automator를 엽니다. 새 문서에서 템플릿으로 “서비스” 또는 “애플리케이션“을 선택합니다. 둘 다 독립 실행형 워크플로를 만듭니다. 개인적으로는 서비스로 만들면 메뉴에서 항상 접근 가능하므로 편합니다.
서비스가 입력을 받지 않도록 설정합니다.
라이브러리에서 “Get Specified URLs(지정한 URL 가져오기)” 액션을 추가합니다. (검색창에 액션명을 입력하면 빠르게 찾을 수 있습니다.)
- URL 필드에 열고 싶은 사이트의 주소를 입력합니다.
Caption: Get Specified URLs 액션에서 URL을 지정하는 모습
“Website PopUp” 액션을 추가합니다. 이 액션에는 여러 설정이 있습니다.
Caption: Website Popup 액션의 설정 화면
주요 설정 설명:
- Site Size(사이트 크기): Large, Medium, iPhone, iPhone (Landscape), Custom 중 선택. Custom을 선택하면 픽셀 단위 크기를 직접 입력합니다.
- User Agent(사용자 에이전트): Safari 또는 iPhone. 모바일 레이아웃을 보고 싶으면 iPhone을 선택하세요.
- Position(위치): Centered(중앙) 혹은 At Pointer(포인터 위치)에 창을 띄웁니다.
- Output(출력): 대부분의 경우 동작 차이를 느끼기 어렵습니다. 기본값으로 두어도 무방합니다.
모든 설정이 완료되면 워크플로를 저장하고 적절한 이름을 붙입니다.
Caption: Automator에서 워크플로 이름을 붙여 저장하는 모습
단축키로 빠르게 열기
- 시스템 환경설정 -> 키보드 -> 단축키 -> 서비스로 이동합니다.
- 저장한 서비스 항목을 찾아 단축키를 지정합니다.
- 지정한 단축키로 언제든지 어느 앱에서나 HUD를 띄울 수 있습니다.
Caption: macOS 시스템 환경설정의 단축키 설정 화면
예시: MakeUseOf 사이트를 두 가지 모드로 띄우기
Site Size = iPhone, User Agent = iPhone → 작은 모바일 창
Caption: 모바일 레이아웃으로 표시되는 MakeUseOf HUD
Site Size = Large, User Agent = Safari → 큰 창, 데스크톱 레이아웃
Caption: 데스크톱 레이아웃으로 표시되는 MakeUseOf HUD
다른 사이트에도 동일한 방법으로 HUD를 여러 개 만들어 단축키마다 연결하면, 빠르게 각 사이트를 독립 창으로 열 수 있습니다.
Caption: Facebook, Gmail, Twitter 등을 HUD로 띄운 예시
언제 이 방법이 적합한가(사례) 및 한계(언제 실패하는가)
적합한 경우:
- 주된 용도가 “빠른 확인(메일, 알림, 메시지)”일 때
- 브라우저 탭을 많이 열어두기 싫을 때
- 특정 웹앱을 항상 같은 위치/크기로 띄워두고 싶을 때
한계와 실패 사례:
- 일부 사이트는 팝업 내부에서 자바스크립트 동작이나 권한(카메라, 알림 등)을 제한할 수 있습니다.
- 로그인 세션이나 쿠키 동작이 일반 브라우저와 다르게 처리되어 기능이 제한될 수 있습니다.
- 고급 웹앱(예: 복잡한 SPAs, 드래그 앤 드롭 등)은 HUD 내부에서 의도대로 작동하지 않을 수 있습니다.
- macOS 업데이트나 Website Popup 액션의 버전 불일치로 호환성 문제가 발생할 수 있습니다.
대안과 비교
- Fluid(사이트별 브라우저): 사이트를 독립 앱으로 만드는 방법. 더 많은 통합 설정(독립 북마크, 아이콘 등) 가능하지만 설치 및 관리가 필요합니다.
- 브라우저의 PWA(진행 중인 경우): 지원 사이트는 설치형 앱처럼 동작하며 시스템 통합이 우수합니다.
- 단순 북마크/바로가기: 시스템 트레이나 독에 고정하는 방식으로 빠르게 접근 가능하지만 HUD처럼 작은 팝업 UI는 제공하지 않습니다.
비교 요약:
- Automator + Website Popup: 빠르고 가벼움, 설정 자유도 높음
- Fluid: 앱처럼 관리, 더 강한 분리성
- PWA: 네이티브에 가까운 경험(사이트 지원 시)
역할별 체크리스트
일반 사용자 (빠른 확인 목적):
- Website Popup 액션 설치
- Automator에서 서비스 생성
- URL 입력 및 Site Size 설정
- 단축키 지정
고급 사용자 / 파워유저:
- 여러 HUD를 만들어 상황별 단축키로 연결
- Custom 크기와 위치로 화면 레이아웃 최적화
- 로그인 유지/세션 동작 확인
개발자 / IT 관리자:
- 엔터프라이즈 환경에서의 보안 정책 영향 검토
- 자동화 배포 시 권한/경로 관리
- macOS/액션 버전 호환성 테스트
테스트 케이스 / 수용 기준
- HUD가 지정한 URL을 열고 콘텐츠가 정상 렌더링되는가?
- 선택한 User Agent에 따라 모바일/데스크톱 레이아웃이 전환되는가?
- 단축키로 어느 앱에서도 HUD를 호출할 수 있는가?
- 로그인 및 세션 유지(필요한 경우)가 정상 동작하는가?
- 팝업 내에서 주요 기능(클릭, 스크롤, 입력)이 동작하는가?
문제해결 팁
- HUD가 흰 화면만 표시할 경우: User Agent를 바꿔보세요(Safari ↔ iPhone). 사이트가 데스크톱 전용 스크립트를 차단할 수 있습니다.
- 세션/로그인 문제가 있으면 브라우저에서 쿠키 정책을 확인하거나, 사이트를 새로고침해 보세요.
- 창 크기나 위치가 의도대로 나오지 않으면 Custom 픽셀 값을 직접 입력하세요.
- macOS 업데이트 이후 이상 동작 시 Website Popup 액션의 최신 버전을 확인하고 재설치하세요.
참고: 일부 사이트는 CORS, CSP, 또는 자체 보안 설정으로 인해 iframe이나 팝업 내에서 기능을 제한할 수 있습니다.
보안 및 개인정보 주의사항
- HUD도 실제 브라우저 세션을 사용하므로 민감한 정보 입력 시 일반 브라우저와 동일한 주의를 기울이세요.
- 공용 공유 맥이나 회사 환경에서는 세션 자동 유지 설정을 피하세요.
- 회사 내부 정책으로 인해 외부 스크립트 제한이 있는 경우 IT 부서와 상의하세요.
미니 방법론(빠른 체크리스트)
- Website Popup 설치 → 2. Automator에서 서비스 생성 → 3. URL 지정 → 4. Website Popup 추가 및 설정 → 5. 저장 → 6. 시스템 단축키 지정 → 7. 테스트
설정 템플릿 (복사해서 사용 가능)
- 템플릿 이름: HUD - [사이트이름]
- 서비스 입력: 없음
- 단계 1: Get Specified URLs — https://example.com
- 단계 2: Website PopUp
- Site Size: Custom 360 x 640 (예: 모바일)
- User Agent: iPhone
- Position: At Pointer
의사결정 흐름도
flowchart TD
A[HUD 필요성?] -->|빠른 확인| B[Automator + Website Popup]
A -->|앱처럼 쓰고 싶음| C[Fluid 또는 PWA]
B --> D{사이트 호환성}
D -->|호환| E[서비스 생성 및 단축키 등록]
D -->|비호환| C1줄 용어집
- HUD: 작업을 방해하지 않고 정보를 보여주는 작은 팝업 창
- Website Popup: Automator에서 HUD 형태의 웹사이트 팝업을 생성하는 액션
소셜 미리보기 제안
- OG 제목: Mac에서 Automator로 웹사이트 HUD 만들기
- OG 설명: Automator와 Website Popup으로 자주 쓰는 사이트를 작은 팝업(HUD)으로 빠르게 여는 방법을 단계별로 안내합니다.
짧은 공지(100–200자)
Automator와 Website Popup 액션을 사용하면 Twitter, Gmail 등 자주 가는 사이트를 작은 독립 창(HUD)으로 띄워 빠르게 확인할 수 있습니다. 설치부터 단축키 등록, 문제 해결까지 실무형 가이드로 정리했습니다.
요약
- Automator + Website Popup으로 자주 쓰는 사이트를 HUD로 만들면 빠른 접근성이 향상됩니다.
- Site Size와 User Agent를 바꿔 모바일/데스크톱 버전을 자유롭게 선택하세요.
- 일부 사이트는 보안 설정으로 인해 HUD에서 기능 제한이 있을 수 있으니 테스트가 필요합니다.
핵심 팁: 먼저 하나를 만들어 시험 운영한 뒤, 만족하면 다른 사이트로 확장(반복)하세요.
