ch03. 앱별 단축키 -- Chrome PIP, 주소창 영문 변환

Chrome에서 영상 보면서 작업하기, 주소창에서 한영 전환 실수 없애기, ChatGPT 답변을 마크다운으로 깔끔하게 복사하기. 세 가지 매크로로 브라우저 활용도를 높인다.

이런 불편함, 겪어보셨나요?

YouTube 영상을 보면서 다른 작업을 하고 싶을 때가 있다. 탭을 왔다 갔다 하거나, 창 크기를 줄여서 구석에 놓거나. 어느 쪽이든 불편하다.

Chrome에는 PIP(Picture-in-Picture) 기능이 있다. 영상을 작은 창으로 띄워서 다른 작업 위에 올려놓는 기능이다. 문제는 이걸 쓰려면 영상 위에서 마우스 오른쪽 버튼을 두 번 눌러야 한다는 것이다. 매번 하기엔 번거롭다.

주소창도 마찬가지다. Command+L을 눌러서 주소창으로 이동했는데, 한글 입력 상태인 걸 모르고 URL을 입력한다. 입력한 내용이 검색어가 되어 엉뚱한 결과가 나온다. 다시 영문으로 바꾸고 다시 입력한다. 하루에도 몇 번씩 반복되는 이 과정은 생각보다 짜증이 난다.

ChatGPT도 비슷한 문제가 있다. 답변을 복사할 때 일반 복사를 하면 서식이 깨진다. 마크다운 형식으로 복사하려면 답변 하단의 작은 버튼을 찾아 클릭해야 한다. 버튼이 작아서 한 번에 안 눌릴 때도 있다.

이런 작은 불편을 해결하는 매크로 세 개를 만들어본다.

매크로 분석: Chrome - PIP 모드

무엇을 하는 매크로인가

Control+P를 누르면 현재 탭의 영상이 PIP 모드로 전환된다. Chrome과 Safari 모두에서 동작한다. 매크로 그룹이 "Chrome&Safari"로 설정되어 있어서, 이 두 브라우저가 활성화되었을 때만 실행된다.

트리거

트리거 타입 설명
HotKey Control+P Chrome 또는 Safari가 활성화된 상태에서만 동작

액션 흐름

flowchart TD A(["트리거: Control+P"]) --> B{"Chrome인가?"} B -->|Yes| C["WebKit PIP API 실행"] B -->|No| D{"Safari인가?"} D -->|Yes| E["표준 PIP API 실행"] D -->|No| F(["완료"]) C --> F E --> F style A fill:#E3F2FD,stroke:#1976D2 style B fill:#FFF8E1,stroke:#FFA000 style C fill:#E8F5E9,stroke:#388E3C style D fill:#FFF8E1,stroke:#FFA000 style E fill:#E8F5E9,stroke:#388E3C style F fill:#E3F2FD,stroke:#1976D2

그림 3-1. Chrome PIP 모드 전환 흐름도

이 매크로의 액션은 단 하나의 IfThenElse 블록이다. 하지만 그 안에 중첩된 IfThenElse가 하나 더 있다.

  1. 조건 확인: 현재 앱이 Chrome인가? -- 첫 번째 분기점이다.
  2. Chrome일 때 -- document.querySelector("video").webkitSetPresentationMode("picture-in-picture")를 실행한다. Chrome의 WebKit 전용 PIP API다.
  3. Chrome이 아닐 때 (Safari 등) -- 두 번째 IfThenElse로 넘어간다.
  4. Safari일 때 -- 표준 API인 document.querySelector("video").requestPictureInPicture()를 실행한다.

왜 두 가지 방식이 필요할까? Chrome과 Safari가 PIP를 구현하는 방식이 다르기 때문이다. Chrome은 webkitSetPresentationMode라는 WebKit 전용 메서드를 사용한다. Safari는 W3C 표준인 requestPictureInPicture 메서드를 지원한다. 하나의 매크로에서 조건 분기를 통해 두 브라우저를 모두 지원한다.

핵심 기술 해설

ExecuteJavaScript in Browser

KM은 Chrome과 Safari에서 JavaScript를 직접 실행할 수 있다. Execute JavaScript in Browser 액션을 추가하고, 실행할 JavaScript 코드를 입력하면 된다. 웹페이지의 DOM에 직접 접근할 수 있어서, 버튼 클릭이나 요소 조작이 가능하다.

이 매크로에서 사용하는 JavaScript 코드를 살펴보자.

Chrome용:

document.querySelector("video").webkitSetPresentationMode("picture-in-picture");

Safari용:

document.querySelector("video").requestPictureInPicture();

두 코드 모두 document.querySelector("video")로 페이지에서 첫 번째 비디오 요소를 찾는다. 그 다음 각 브라우저에 맞는 PIP 메서드를 호출한다.

IfThenElse 조건 분기

이 챕터에서 처음 등장하는 핵심 개념이다. "현재 앱이 무엇인가?"를 확인하고, 결과에 따라 다른 액션을 실행한다.

IfThenElse 액션은 세 부분으로 구성된다:

  • If (조건) -- 참/거짓을 판별하는 조건식
  • Then (참일 때) -- 조건이 참이면 실행할 액션 목록
  • Else (거짓일 때) -- 조건이 거짓이면 실행할 액션 목록

Else 안에 다시 IfThenElse를 넣으면 중첩 조건이 된다. 프로그래밍의 if-else if-else와 같은 구조다.

활용 팁

  • YouTube뿐 아니라 Netflix, 쿠팡플레이 등 비디오가 있는 모든 사이트에서 동작한다.
  • PIP 창은 항상 최상위에 떠 있으므로, 전체 화면으로 다른 작업을 해도 보인다.
  • PIP를 끄려면 PIP 창의 닫기 버튼을 누르거나, 같은 단축키를 다시 누르면 된다.
  • 비디오가 여러 개인 페이지에서는 첫 번째 비디오가 PIP로 전환된다. 특정 비디오를 지정하려면 querySelector의 선택자를 수정하면 된다.

매크로 분석: Chrome - 주소입력창 이동 후 영문 변환하기

무엇을 하는 매크로인가

Command+L을 누르면 Chrome 주소창으로 이동하면서 자동으로 영문 입력 모드로 전환된다. 한글 상태에서 URL을 입력하는 실수를 원천적으로 방지한다.

트리거

트리거 타입 설명
HotKey Command+L Chrome 기본 단축키를 가로채서 기능을 추가한다

액션 흐름

flowchart TD A(["트리거: Command+L"]) --> B["딜레이 최소 설정"] B --> C["영문 입력 모드 전환"] C --> D["Command+L 키 전달"] D --> E(["주소창 이동 완료"]) style A fill:#E3F2FD,stroke:#1976D2 style B fill:#F5F5F5,stroke:#757575 style C fill:#E8F5E9,stroke:#388E3C style D fill:#F3E5F5,stroke:#7B1FA2 style E fill:#E3F2FD,stroke:#1976D2

그림 3-2. 주소창 영문 변환 흐름도

이 매크로는 세 개의 액션이 순차적으로 실행된다.

  1. SetActionDelay -- 액션 간 딜레이를 최소로 설정한다. 세 단계가 거의 동시에 실행되도록 하기 위함이다.
  2. SetKeyboardLayout -- 입력 소스를 영문(ABC)으로 강제 전환한다.
  3. SimulateKeystroke Command+L -- 원래의 Command+L 동작, 즉 주소창으로 포커스 이동을 실행한다.

세 단계가 순식간에 실행되므로, 사용자 입장에서는 Command+L을 눌렀을 때 주소창으로 이동하면서 동시에 영문 모드가 된 것처럼 느껴진다.

핵심 기술 해설

기존 단축키 가로채기

이 매크로에서 가장 중요한 패턴이다. Command+L은 Chrome의 기본 단축키다. KM에서 같은 단축키를 트리거로 설정하면, Chrome의 기본 동작 대신 KM의 매크로가 실행된다.

그런데 매크로 안에서 SimulateKeystroke로 Command+L을 다시 보내면, 원래 기능도 동작한다. 이것이 가능한 이유는 KM이 매크로 실행 중에는 트리거를 무시하기 때문이다. 매크로 안에서 보내는 Command+L은 KM의 트리거에 걸리지 않고 Chrome에 그대로 전달된다.

이 패턴을 정리하면:

  1. KM이 기존 단축키를 가로챈다
  2. 원하는 추가 동작을 먼저 수행한다 (영문 전환)
  3. SimulateKeystroke로 원래 단축키를 다시 보낸다
  4. 앱이 원래 동작을 수행한다 (주소창 이동)

"기존 동작 앞에 추가 동작을 끼워넣는" 패턴이다. 이 패턴은 다른 앱의 단축키를 확장할 때 자주 사용된다.

SetKeyboardLayout

macOS의 입력 소스를 강제로 변경하는 액션이다. 영문, 한글, 일본어 등 원하는 입력 소스로 전환할 수 있다. 현재 입력 소스가 이미 영문이어도 에러 없이 동작한다.

SetActionDelay

매크로 내 액션 간 기본 딜레이를 설정한다. 기본값은 보통 0.1~0.3초인데, 이 매크로에서는 0초(또는 최소)로 설정한다. 주소창 이동과 영문 전환이 거의 동시에 일어나야 자연스럽기 때문이다.

활용 팁

  • Safari에서도 같은 패턴을 적용할 수 있다. Safari에서 Command+L은 동일하게 주소창으로 이동한다.
  • 입력 소스 전환이 필요한 다른 단축키에도 같은 방식을 쓸 수 있다. 예를 들어 Spotlight(Command+Space)를 영문 모드로 여는 매크로도 가능하다.
  • 검색 창(Command+F)에도 적용할 수 있다. 영문 코드를 검색할 때 유용하다.

매크로 분석: ChatGPT - 마크다운 형식으로 복사하기

무엇을 하는 매크로인가

Control+C를 누르면 ChatGPT 답변을 마크다운 형식으로 복사한다. ChatGPT 웹 인터페이스의 "Copy" 버튼을 자동으로 클릭하는 방식이다. 일반 텍스트 복사와 달리, 코드 블록과 서식이 보존된다.

트리거

트리거 타입 설명
HotKey Control+C ChatGPT 앱/사이트가 활성화된 상태에서만 동작

매크로 그룹이 "ChatGPT"로 설정되어 있다. 이 그룹은 ChatGPT 앱 또는 ChatGPT 웹사이트가 활성화되었을 때만 매크로를 실행한다. 다른 앱에서 Control+C를 누르면 이 매크로가 아닌 시스템 기본 복사 기능이 동작한다.

액션 흐름

flowchart TD A(["트리거: Control+C"]) --> B["딜레이 설정"] B --> C{"ChatGPT 페이지인가?"} C -->|Yes| D("복사 버튼 클릭") C -->|No| G(["완료"]) D --> E[/"0.2초 대기"/] E --> F("한 번 더 클릭") F --> G style A fill:#E3F2FD,stroke:#1976D2 style B fill:#F5F5F5,stroke:#757575 style C fill:#FFF8E1,stroke:#FFA000 style D fill:#F3E5F5,stroke:#7B1FA2 style E fill:#F5F5F5,stroke:#757575 style F fill:#F3E5F5,stroke:#7B1FA2 style G fill:#E3F2FD,stroke:#1976D2

그림 3-3. ChatGPT 마크다운 복사 흐름도

  1. SetActionDelay -- 딜레이를 설정한다.
  2. IfThenElse: ChatGPT 페이지인가? -- 현재 페이지가 ChatGPT인지 조건을 확인한다.
  3. 참일 때 -- 마크다운 복사 버튼의 좌표를 클릭한다.
  4. 0.2초 대기 -- UI가 반응할 시간을 준다.
  5. 한 번 더 클릭 -- 복사 완료를 확인하는 두 번째 클릭이다.
  6. 거짓일 때 -- 아무 동작도 하지 않는다. 기본 Control+C 복사가 작동한다.

핵심 기술 해설

MouseMoveAndClick

화면의 특정 좌표를 클릭하는 액션이다. ChatGPT 답변 옆에 있는 마크다운 복사 버튼의 위치를 좌표(X, Y)로 지정한다.

좌표 기반 클릭의 장단점:

  • 장점: 설정이 간단하다. DOM 구조를 몰라도 된다.
  • 단점: 창 크기나 UI 레이아웃이 바뀌면 좌표도 바뀐다. 해상도에 따라 달라질 수 있다.

Pause (딜레이)

액션 사이에 대기 시간을 넣는 액션이다. 이 매크로에서는 첫 번째 클릭과 두 번째 클릭 사이에 0.2초를 둔다. 웹 UI가 클릭에 반응하는 데 시간이 필요하기 때문이다.

딜레이가 너무 짧으면 두 번째 클릭이 무시될 수 있다. 딜레이가 너무 길면 매크로 실행이 느리게 느껴진다. 0.2초는 적절한 균형점이다.

활용 팁

  • ChatGPT UI가 업데이트되면 버튼 좌표를 다시 설정해야 할 수 있다.
  • "Found Image" 액션을 사용하면 좌표 대신 이미지로 버튼을 찾을 수 있다. UI가 변경되어도 버튼 모양이 같으면 동작한다.
  • Claude나 Gemini 같은 다른 AI 도구에도 같은 방식으로 마크다운 복사 매크로를 만들 수 있다.

세 매크로의 공통점

이번 챕터의 세 매크로에는 공통 패턴이 있다.

앱 제한(Targeting)

세 매크로 모두 특정 앱에서만 동작한다. Chrome - PIP 모드는 Chrome&Safari 그룹에 속해 있고, ChatGPT 복사는 ChatGPT 그룹에 속해 있다. 이렇게 매크로 그룹 단위로 "이 앱이 활성화되었을 때만 실행"을 설정할 수 있다.

같은 단축키를 여러 앱에서 다른 용도로 사용할 수 있다는 뜻이다. 예를 들어 Control+C는 ChatGPT에서는 마크다운 복사, 다른 앱에서는 일반 복사가 된다.

단축키 확장

주소창 매크로는 기존 단축키(Command+L)를 가로채서 기능을 확장한다. PIP 매크로는 새로운 단축키(Control+P)를 만든다. ChatGPT 매크로는 기존 단축키(Control+C)에 새로운 의미를 부여한다.

세 가지 모두 "단축키 하나로 복잡한 동작을 간단하게"라는 KM의 핵심 철학을 보여준다.

직접 만들어보기

가장 실용적인 "주소창 영문 변환" 매크로를 직접 만들어보자. 액션이 세 개뿐이라 처음 만들기에 적합하다.

  1. KM 에디터를 열고 좌측 그룹 목록에서 새 그룹을 만든다. 이름은 "Chrome&Safari"로 설정한다.
  2. 새로 만든 그룹을 선택하고, 하단의 "Available in these applications"에서 "Google Chrome"을 추가한다. Safari도 사용한다면 함께 추가한다.
  3. 그룹 안에 새 매크로를 만든다. 이름을 "Chrome - 주소입력창 이동 후 영문 변환하기"로 설정한다.
  4. 트리거를 추가한다. "Hot Key Trigger"를 선택하고 Command+L을 입력한다.
  5. 첫 번째 액션: Set Action Delay 를 추가한다. 딜레이를 0초로 설정한다.
  6. 두 번째 액션: Set Keyboard Layout 을 추가한다. "ABC" (영문)을 선택한다.
  7. 세 번째 액션: Simulate Keystroke 를 추가한다. Command+L을 입력한다.
  1. Chrome을 열고 테스트한다. 한글 입력 상태에서 Command+L을 누른다.
  2. 주소창으로 이동하면서 영문 모드가 되면 성공이다.

이 챕터에서 배운 것

  • 브라우저에서 JavaScript를 실행하여 웹페이지를 조작하는 방법 (ExecuteJavaScript)
  • IfThenElse 조건 분기로 앱별로 다른 동작을 수행하는 방법
  • 기존 단축키를 가로채서 기능을 추가하는 "끼워넣기" 패턴
  • SetKeyboardLayout으로 입력 소스를 강제 전환하는 방법
  • 매크로 그룹을 이용한 앱 제한(Targeting) 설정
  • MouseMoveAndClick으로 특정 좌표를 클릭하는 방법

다음 챕터 예고

ch04에서는 Chrome 프로필 전환 매크로를 다룬다. 공부, 개인, 회사, 교양, AI 다섯 개 프로필을 단축키 하나로 전환하는 방법을 배운다. 비슷한 구조의 매크로를 패턴화하는 기법과, ch03에서 배운 IfThenElse를 더 복잡하게 활용하는 사례를 살펴본다.