카카오톡 데스크탑 뷰어

카카오톡 대화 내보내기 파일(.txt)을 데스크톱에서 열어볼 수 있는 뷰어 프로그램입니다.

카카오톡의 "대화 내보내기" 기능으로 저장한 텍스트 파일과 미디어 파일을 파싱하여, 원래 채팅 UI와 유사한 형태로 보여줍니다.

카카오와 관련 없는 비공식 오픈소스 프로그램입니다.

주요 기능

• 채팅방 목록 및 대화 내용 조회
• 사진, 영상, 오디오 등 미디어 파일 재생
• 메시지 검색
• 캘린더 기반 날짜 이동
• 북마크 (마지막 읽은 위치 저장)
• 내 닉네임 설정 (내 메시지 구분)

요구사항

• Node.js >= 22
• pnpm

시작하기

pnpm install
pnpm dev

대화 파일 구조

내보낸 대화 폴더들을 하나의 상위 폴더에 모아두고, 그 상위 폴더를 기본 폴더로 선택해야 합니다. 앱은 하위의 모든 채팅방을 자동으로 인식합니다.

base-folder/
├── KakaoTalk_Chats_2024-01-01/
│   ├── Talk_2024-01-01.txt
│   ├── photo_01.jpg
│   └── audio_01.m4a
└── KakaoTalk_Chats_2024-02-01/
    └── Talk_2024-02-01.txt

대화 텍스트 파싱은 kakaotalk-chat-parser 패키지를 사용합니다.

기술 스택

영역	기술
Framework	Electron (electron-vite)
Frontend	React, TypeScript, Tailwind CSS
가상 스크롤	@tanstack/react-virtual
데이터 캐싱	@tanstack/react-query
오디오 트랜스코딩	ffmpeg-static (AMR → AAC)
설정 영속화	electron-store
패키지 매니저	pnpm

프로젝트 구조

src/
├── main/              # Electron main process
│   ├── index.ts       # 앱 라이프사이클
│   ├── ipc.ts         # IPC 핸들러 등록
│   ├── chat-rooms.ts  # 채팅방 파싱 (순수 도메인 로직)
│   ├── config.ts      # electron-store 기반 설정
│   ├── protocol.ts    # media:// 커스텀 프로토콜
│   ├── transcode.ts   # 오디오/영상 트랜스코딩
│   ├── file-system.ts # 파일 시스템 접근
│   └── window.ts      # 윈도우 생성
├── preload/           # Preload scripts
├── shared/            # main/renderer 공유 타입
│   ├── types.ts       # Api 인터페이스, ChatMessage 등
│   └── constants.ts   # 공유 상수
└── renderer/src/      # React 앱
    ├── pages/
    │   ├── chat-room-list/  # 채팅방 목록
    │   ├── chat-room/       # 채팅방 상세
    │   ├── calendar/        # 캘린더
    │   ├── drawer/          # 서랍
    │   ├── media-viewer/    # 미디어 뷰어
    │   ├── settings/        # 설정
    │   └── help/            # 도움말
    ├── components/    # 공용 컴포넌트
    ├── hooks/         # 공용 hook
    └── utils/         # 공용 유틸리티

아키텍처

IPC 통신

Renderer → Main 간 통신은 Electron IPC를 사용합니다. src/shared/types.ts의 Api 인터페이스에 모든 IPC 메서드가 정의되어 있고, renderer에서는 globalThis.api로 호출합니다.

새 IPC 채널 추가 시 아래 순서로 4개 파일을 수정합니다:

1. src/shared/types.ts — Api 인터페이스에 메서드 추가
2. src/main/ 도메인 모듈 — 실제 로직 구현
3. src/main/ipc.ts — 핸들러 등록
4. src/preload/index.ts — api 객체에 ipcRenderer.invoke() 추가

미디어 프로토콜

채팅방의 미디어 파일은 media:// 커스텀 프로토콜로 제공됩니다.

• media://local/{chatRoomId}/{filename} — 원본 미디어 파일
• media://cache/{chatRoomId}/{filename} — 트랜스코딩된 캐시 파일

Chromium이 지원하지 않는 코덱(AMR 등)이나 원본 파일이 손상된 경우, ffmpeg-static으로 트랜스코딩을 시도하여 복구 및 재생합니다.

빌드 참고사항

macOS

• ffmpeg-static 바이너리는 asarUnpack으로 asar 외부에 추출됩니다 (asar 내부에서는 바이너리 실행 불가).
• afterSign 훅(build/resign.js)으로 빌드 후 ad-hoc 재서명합니다. ffmpeg 바이너리의 기존 서명이 앱 번들 서명과 충돌하는 문제를 방지합니다.

라이선스

MIT