Electron / 중급 / 읽는 시간: 15분

Notion: Electron 앱은 서식 있는 텍스트를 어떻게 복사할까요?

REA로 보고서에 기록된 Notion의 클립보드 경로를 렌더러에서 IPC를 거쳐 시스템 클립보드까지 추적하세요. 같은 방법을 자신의 Electron 앱에 적용해 보세요.

이 페이지의 내용
얻게 될 결과

소스 근거를 갖춘 텍스트·HTML 페이로드, 프로세스 경계, 클립보드 기록 코드의 경로도입니다.

준비물

REA, 분석 가능한 Electron 앱, 해당 app.asar 또는 추출한 JavaScript가 필요합니다. 네이티브 엔진은 필요 없습니다.

01. 앱 전체보다 페이로드부터 시작하기

굵은 텍스트 복사는 하나의 동작처럼 느껴집니다. Electron에서는 편집기, 웹 페이지에 노출된 브리지, 운영체제에 쓰기 권한이 있는 프로세스가 서로 다른 코드일 수 있습니다. 이들을 연결하는 것이 목표입니다.

공식 Notion 분석은 Desktop 7.6.1을 대상으로 했습니다. 보고된 경로는 클립보드 API와 IPC 수신부를 통해 텍스트와 HTML을 전달합니다. 그래프만으로 전체 경로가 확인되지는 않았으며 래퍼 코드를 직접 읽어 빠진 연결을 보완했습니다. 이 튜토리얼은 그 분석 방법을 적용하며 Notion을 새로 캡처한 자료는 아닙니다.

코딩 에이전트에 요청하기
REA로 /absolute/path/app.asar를 분석하세요. 서식 있는 텍스트 복사만 분석하세요. 렌더러 호출, 프리로드 브리지, IPC 채널, 수신 핸들러, 최종 클립보드 기록을 찾으세요. 각 연결의 파일과 소스 범위를 보여 주세요. 동적이거나 누락된 연결은 미해결로 표시하세요. 애플리케이션은 실행하지 마세요.

02. 배포본의 진입점 찾기

애플리케이션 파일의 복사본으로 작업하세요. macOS의 Electron 패키지는 app.asar를 Contents/Resources 아래에 두는 경우가 많고, Windows와 Linux 패키지는 보통 resources 폴더를 사용합니다. 모든 앱의 구조가 같다고 가정하지 말고 경로를 확인하세요.

함께 제공되는 app.asar.unpacked 디렉터리가 있으면 아카이브 옆에 두세요. 경로도를 신뢰하기 전에 파싱 실패, 건너뛴 파일, 발견된 메인 진입점을 검토하세요. 불완전한 목록에는 필요한 수신부가 빠질 수 있습니다.

터미널
npx -y rea-agents@6.4.0 analyze-javascript-application "/absolute/path/app.asar" --json > app-analysis.json

03. 렌더러에서 메인 프로세스로 넘어가기

에이전트에 분석 결과의 contextBridge, clipboard, ipcRenderer.invoke 참조 주변 실제 소스를 확인하도록 요청하세요. 브리지는 채널을 변수로 전달하는 범용 함수를 노출할 수 있습니다. 래퍼 소스에 채널이 있어도 그래프에서 채널 리터럴을 검색하면 결과가 없을 수 있습니다.

원본 Notion 보고서는 패키지에 포함된 API 객체를 읽어 notion:clipboard:write 채널을 식별한 뒤 수신부를 Electron clipboard.write에 연결했습니다. 자신의 버전에서 대응하는 이름을 기록하세요. 다른 릴리스에 과거 오프셋을 그대로 붙여 넣지 마세요.

  • 렌더러: 어떤 이벤트가 복사 페이로드를 구성하나요?
  • 프리로드: 어떤 공개 API가 이를 전달하며 채널은 어떻게 전달되나요?
  • 메인 프로세스: 어떤 핸들러가 수신하며 발신자는 어떻게 검사하나요?
  • 최종 전달 지점: 어떤 텍스트, HTML, 사용자 정의 필드가 클립보드 API에 도달하나요?

04. 서식 기능 하나 테스트하기

일회용 문서에서 굵게 표시한 단어 하나가 들어 있는 짧은 문장을 복사하세요. 서식 있는 텍스트 편집기와 일반 텍스트 편집기에 붙여 넣고 두 출력을 기록하세요. 링크, 줄바꿈, 비ASCII 문자로 반복하세요. 이를 통해 일반 텍스트 대체 동작과 서식 보존을 구분할 수 있습니다.

소스 경로가 일치해도 운영체제가 모든 형식을 받아들였다는 증거는 아닙니다. 원본 분석은 별도로 캐시된 웹 모듈도 사용했으며 같은 버전의 데스크톱 복사 세션을 기록하지 않았습니다. 자신의 보고서에서도 이 차이를 유지하세요.

코딩 에이전트에 요청하기
확인한 동작을 바탕으로 내 앱에 쓸 작은 복사 페이로드 함수를 만드세요. 일반 텍스트와 HTML을 분리하세요. 굵은 텍스트, 링크, 줄바꿈, 유니코드 테스트를 추가하세요. 아직 설명되지 않은 사용자 정의 클립보드 형식을 나열하고 Notion과의 완전한 호환성을 주장하지 마세요.

05. 래퍼에서 추적이 멈출 때

래퍼 정의와 호출 지점을 함께 분석하세요. 채널명이 런타임에 조합된다면 리터럴 값을 지어내지 말고 표현식을 기록하세요. 네이티브 애드온이 쓰기를 수행하면 JavaScript 분석은 그 경계에서 끝납니다.

최종 결과에는 각 단계의 근거가 있는 짧은 경로와 실제로 실행한 서식 테스트가 있어야 합니다. 이 정도면 편집기 전체를 재현한다고 주장하지 않고도 유용한 복사 기능을 재구현할 수 있습니다.

명령은 REA 6.4.0 기준으로 확인했습니다. 대상별 결과는 아티팩트와 프로바이더에 따라 달라집니다. 원본 자료와 검증 범위 읽기 →

분석 이어가기다음 튜토리얼 선택 →

REA가 처음인가요? REA란? · 가이드 검증 방법