dsh-pet 딥다이브
— 작은 투명 창으로 배우는 데스크톱 앱 설계

1프로젝트 한줄 요약

dsh-pet은 투명 배경 영상을 재생하는 캐릭터에 클릭·드래그·이동·대화 기능을 붙인 데스크톱 유틸리티입니다. 브라우저에서는 DeepSeek Harness(이하 DSH) 화면 위의 떠 있는 요소로, 데스크톱에서는 테두리 없는 Electron 창으로 나타납니다. 여러 캐릭터를 동시에 띄우고 각각 크기와 표시 위치를 정할 수 있습니다.

같은 캐릭터 로직을 브라우저와 데스크톱에 연결하는 방법이 이 저장소의 가장 큰 학습 자산입니다. 캐릭터 그림을 그리는 법만 배우는 것이 아닙니다. 설정을 읽고, 행동을 선택하고, 입력을 계산하고, 두 환경에 결과를 전달하는 전체 흐름을 배웁니다.

1-1. 기능을 세 층으로 나누면 읽기 쉽다

DSH 안에서는 세션의 작업 상태와 잔액도 캐릭터에 연결합니다. DSH 없이 실행할 때는 작은 대체 컨텍스트가 필요한 서비스를 제공합니다. 다만 세션 연동과 AI 대화는 다른 조건을 갖습니다. 독립 AI 대화는 별도 설정으로 켤 수 있고, DSH 세션 이벤트는 DSH 호스트가 있어야 합니다.

2왜 주목받는가

2026-10-23 기준 GitHub Trending TypeScript 주간 12위에 선정됐고, 스타는 3,663개, 포크는 266개입니다. 생성일은 2026-08-14입니다. 이 수치가 특정 기능 때문에 올랐다는 인과관계는 확인할 수 없지만, 코드와 문서에서는 다음 세 가지 매력을 읽을 수 있습니다.

2-1. 결과가 눈에 보이고, 시작점이 다양하다

설정 파일의 pets[].display에는 web, desktop, both, none이 있습니다. 기본값은 both입니다. DSH 화면 안에서 쓰다가 데스크톱으로 옮길 수 있으며, 독립 CLI와 Windows 앱을 위한 진입점도 있습니다. 설치 방법이 한 가지에 묶이지 않는다는 점이 입문자에게 매력적입니다.

2-2. 캐릭터를 바꾸는 길이 소스 바깥에도 있다

내장 재생용 WebM은 106개, 약 51.83 MiB입니다. 별도 펫 팩은 $DSH_HOME/dsh-pet/pet/종류-config.json과 $DSH_HOME/dsh-pet/pet/종류-animation/으로 구성됩니다. 설정의 인스턴스 id와 소재 위치인 assetRoot를 구분해, 여러 인스턴스가 같은 소재를 재사용할 수 있습니다.

작은 결과물을 빨리 확인하면서도, 그 뒤의 설정·통신·배포 설계까지 단계적으로 공부할 수 있습니다. AI 영상 제작용 프롬프트와 Python 처리 스크립트도 있어, 앱 개발과 미디어 파이프라인이 어떻게 만나는지 살펴보기 좋습니다.

2-3. 다른 도구의 상태를 보여 주는 출력 장치가 된다

/dsh-pet-7340 아래의 API로 말풍선·애니메이션·위치를 제어할 수 있습니다. 커밋 48007b6은 제3자 메뉴 등록 시 표시할 쪽을 지정하는 target을 다룹니다. dsh-pet/src/host/menu.ts의 MenuRegistry.register()는 web / desktop / both를 검사하며, 생략하거나 null이면 기존 호출과 같은 both로 처리합니다.

2-4. 비슷한 목적의 구현과 비교하기

아래 표는 특정 경쟁 제품의 성능 순위가 아니라 구현 방식별 선택 기준입니다. dsh-pet의 장점은 영상 자산·호스트 연동·여러 실행 형태가 함께 있다는 데 있습니다.

3기술 스택 전체 지도

주 패키지는 저장소 루트 바로 아래의 dsh-pet/package.json에 있으며 버전은 0.3.8입니다. 의존성에 적힌 허용 범위와 잠금 파일에 고정된 버전은 서로 다른 정보입니다. 예를 들어 TypeScript는 ^5.5.0으로 선언돼 있지만 dsh-pet/pnpm-lock.yaml에는 5.5.2로 고정돼 있습니다.

3-1. 백엔드에 해당하는 호스트와 로컬 서버

일반적인 클라우드 백엔드나 데이터베이스는 필수 구성 요소가 아닙니다. 설정과 대화 기록은 로컬 파일에, 화면 동기화 상태는 메모리에 둡니다. DSH 호스트의 모델·잔액 서비스를 쓰거나 독립 AI 설정을 켜면 외부 요청이 발생할 수 있습니다.

3-2. 프론트엔드와 데스크톱 껍데기

dsh-pet/tsconfig.json은 strict: true, moduleResolution: Bundler, jsx: react-jsx, noUnusedLocals: true를 사용합니다. 다만 호스트 접점에는 ctx: any도 남아 있습니다. 엄격한 컴파일 옵션이 외부 서비스 전체의 타입 안전성을 자동으로 보장하지는 않습니다.

3-3. 인프라·빌드·검사

Cargo.toml, go.mod, pyproject.toml, Dockerfile은 없습니다. 핵심 런타임은 Node·Electron이며, Python·Swift는 주로 소재 제작을 돕습니다. Swift 인코더는 Apple의 AVFoundation·VideoToolbox를 사용합니다.

4아키텍처 심화 분석

화살표는 데이터와 호출의 방향을 요약합니다. DSH 플러그인과 독립 CLI는 호스트와 Helper가 나뉘지만, 독립 앱은 호스트 로직과 창 관리 코드를 같은 Electron 메인 프로세스에 둡니다. 앱의 메인 프로세스를 합쳤다는 뜻이지 Electron의 렌더러 프로세스까지 하나라는 뜻은 아닙니다. 일반적인 메인·렌더러 구분은 Electron 공식 프로세스 모델에서도 확인할 수 있습니다.

4-1. 패턴 ① 환경을 바꾸는 어댑터

dsh-pet/src/host/index.ts의 apply(ctx)는 호스트 서비스를 받아 라우트와 부수 효과를 등록합니다. 내부 handlePetRoute()가 기능별 요청을 처리합니다. 독립 실행은 이 로직을 복제하는 대신 dsh-pet/src/standalone/context.ts의 createStandaloneContext()로 필요한 모양의 ctx를 만듭니다.

대체 webServer.register()는 같은 핸들러를 배열에 모읍니다. dsh-pet/src/standalone/server.ts가 그 배열을 Node HTTP 서버에 연결합니다. effect()는 등록 함수가 돌려준 해제 함수를 모으고, dispose()는 역순으로 호출합니다. 창·타이머·라우트를 만드는 일에 종료 경로까지 짝지어 둔 것입니다.

빌드도 이를 지원합니다. dsh-pet/tsdown.config.mjs는 독립 실행에서만 DSH 전용 패키지 세 개를 dsh-pet/src/standalone/shims/로 바꿉니다. noExternal로 먼저 번들 대상에 포함한 뒤 alias를 적용합니다. 외부 패키지로 그대로 남으면 대체 구현을 고를 기회조차 없기 때문입니다.

4-2. 패턴 ② 설정을 한곳에서 완성하는 경계

dsh-pet/src/host/config.ts의 readAllConfig()는 내장 기본값, 사용자 주 설정, 종류별 펫 파일을 읽습니다. mergeEntry()는 최상위 필드를 검사해 유효한 값을 고르고, mergePet()는 인스턴스의 숫자·불리언·표시 위치를 정규화합니다.

physics·font 같은 객체는 임의의 깊은 병합이 아니라 필드 단위의 전체 교체입니다. 잘못된 객체를 명시하면 해당 필드가 기본값으로 돌아갑니다. 반면 position은 하위 필드별로 병합합니다. 모든 중첩 객체가 같은 병합 규칙을 따를 것이라고 생각하면 설정이 예상과 달라집니다.

종류별 설정에는 packBase()가 허용한 공통 설정만 사용자층에서 전파합니다. 인스턴스의 whisperPrompt는 의도적으로 유효한 기본 문구를 미리 채우지 않습니다. 값을 비워 두는 것이 “종류의 설정을 계속 따라간다”는 뜻이므로, 저장 과정에서 상속이 고정값으로 변하지 않게 합니다.

4-3. 패턴 ③ 최신 상태와 행동 결과를 구분하는 동기화

dsh-pet/src/host/state.ts의 PollStateStore는 공통 sections와 펫별 pets를 관리합니다. 각 말단 항목에는 { counter, data }가 있고, 쓰기는 writeSection() 또는 writePet()를 거칩니다. 내부 next()는 다음 식으로 같은 밀리초의 연속 쓰기도 구별합니다.

// dsh-pet/src/host/state.ts의 next() 핵심
this.last = Math.max(Date.now(), this.last + 1);
return this.last;

// 응답 형태를 줄인 학습용 예시
{
  counter: 1002,
  sections: { workStatus: { counter: 1001, data: {} } },
  pets: { main: { say: { counter: 1002, data: { text: "안녕" } } } }
}

클라이언트의 dsh-pet/src/shared/state.ts는 첫 응답의 버전을 flattenCounters()로 기록하고, 이후 takeChanged()로 달라진 말단 항목만 전달합니다. dsh-pet/src/client/pet.ts의 PetMulti는 since와 timeout을 보내 장기 폴링합니다. 현재 클라이언트 대기는 1,000ms, 호스트가 허용하는 상한은 10,000ms입니다.

요청을 받아들였다는 사실과 화면에서 실제 동작이 끝났다는 사실은 별도로 기록해야 합니다. dsh-pet/src/host/playback.ts의 PlaybackStore가 이 차이를 담당합니다. POST /anim을 수락하면 호스트가 accepted를 기록하고, 렌더러는 실제 재생에 따라 playing, ended / failed / cancelled를 보고합니다. 재생 시작 전에도 로딩 실패로 failed가 될 수 있고, 새 재생 요청이 기존 요청을 대체하면 호스트가 기존 요청을 cancelled로 바꿉니다. 끝난 상태는 늦게 도착한 보고로 다시 바뀌지 않습니다.

이 상태 저장소는 이벤트 전체를 보존하는 큐가 아닙니다. 같은 말단 항목을 빠르게 두 번 쓰면 중간 값은 조회 전에 덮일 수 있습니다. 첫 응답에서는 과거 말풍선을 재생하지 않지만, 메뉴처럼 현재 있어야 할 데이터는 별도로 읽어 넣습니다. counter는 프로세스 안에서 증가를 보장할 뿐, 영구 저장 로그나 시스템 시계 변경까지 해결하는 분산 시계는 아닙니다.

4-4. 패턴 ④ 계산은 공유하고, 화면 장치는 나눈다

dsh-pet/src/shared/physics.ts의 springStep()·throwStep(), dsh-pet/src/shared/pickers.ts의 rollKind(), dsh-pet/src/shared/motion.ts의 planMove()는 DOM 없이 계산할 수 있습니다. 브라우저는 이를 TypeScript 번들로 쓰고, dsh-pet/scripts/build-desktop-core.mjs는 같은 진입점 dsh-pet/src/shared/index.ts를 IIFE로 묶어 window.PetShared로 제공합니다.

반면 화면 그리기는 다릅니다. 브라우저의 makePetUI()는 React 훅을 받고, 데스크톱의 dsh-pet/runtime/electron-helper/sprite.js는 영상 DOM과 창 이동을 다룹니다. 공유 폴더 전체가 순수 함수인 것은 아닙니다. dsh-pet/src/shared/menu.ts에는 두 환경이 함께 쓰는 DOM 메뉴 구현도 있습니다.

이 분리는 테스트에도 유리합니다. 중력과 반사 계산을 확인하려고 Electron 창을 띄울 필요가 없습니다. 계산 결과를 검증하는 테스트와 실제 창이 올바르게 움직이는 UI 검사는 서로 다른 문제로 남깁니다.

5디렉토리 구조 해부

저장소 루트의 README.md·scripts/는 전체 프로젝트를 설명하고, 실제 npm 패키지와 앱 소스는 dsh-pet/ 아래에 모여 있습니다. 파일을 찾을 때는 실행 환경을 먼저 고르고, 그다음 공유 로직으로 내려가면 길을 잃기 어렵습니다.

5-1. 처음부터 끝까지 전부 읽지 않아도 된다

5-2. 코드 규모를 읽는 기준

다음은 커밋 48007b6에서 파일 확장자별로 센 물리적 줄 수입니다. 빈 줄과 주석, 테스트를 포함하고 .git은 제외했습니다. 코드의 복잡도나 테스트 커버리지를 뜻하는 수치는 아닙니다.

TypeScript는 dsh-pet/src/host/ 17,431줄, dsh-pet/src/client/ 6,646줄, dsh-pet/src/shared/ 5,745줄, dsh-pet/src/standalone/ 3,970줄, dsh-pet/src/app/ 626줄입니다. 특히 호스트 쪽 테스트가 8,464줄이라, 실제 사용 조건과 실패 사례를 찾는 데 도움이 됩니다.

6학습 포인트 (기술별)

6-1. TypeScript: 값의 종류를 타입으로 표현하기

dsh-pet/src/shared/state.ts의 SayCue는 말하기와 지우기를 서로 다른 형태로 표현합니다. 빈 문자열을 특별한 명령으로 쓰면 일반 입력 검증과 충돌할 수 있습니다. kind 같은 구분 필드를 두면 가능한 행동을 코드에서 드러낼 수 있습니다.

// 실제 SayCue에서 선택 필드를 생략한 학습용 축약
type SayCue =
  | { kind: 'say'; text: string; duration?: number }
  | { kind: 'clear' };

function describe(cue: SayCue): string {
  if (cue.kind === 'clear') return '말풍선 지우기';
  return cue.text; // 이 분기에서는 text가 있는 형태로 좁혀짐
}

배울 것: 선택 필드가 많은 객체 하나와, 구분 가능한 여러 형태의 합집합은 다릅니다. 작은 실습: 말풍선의 “숨김”과 “삭제”를 구별해야 한다면 필요한 형태를 먼저 종이에 써 보세요. 개념은 TypeScript 공식 타입 좁히기 문서와 연결됩니다.

6-2. React와 영상 API: 늦게 도착한 응답을 버리기

dsh-pet/src/client/pet.ts의 switchTo()는 두 영상 요소를 번갈아 사용합니다. 뒤쪽 영상에 새 파일을 준비하고, loadeddata를 받은 뒤 앞쪽으로 바꿉니다. 이전 영상의 onended를 지우고 멈춰, 이미 교체된 영상의 종료 이벤트가 다음 행동을 건드리지 못하게 합니다.

여기에는 네 가지 수명 관리가 있습니다. AbortController로 파일 요청에 10초 제한을 걸고, pendingRef.current?.gen으로 뒤늦은 결과를 버리고, mountedRef로 이미 사라진 화면을 건드리지 않으며, 교체한 객체 URL은 URL.revokeObjectURL()로 해제합니다.

배울 것: “불러왔다”·“디코딩할 수 있다”·“재생이 시작됐다”는 서로 다른 시점입니다. 작은 실습: A 요청 뒤 B 요청을 보냈는데 B가 먼저 도착하는 시간표를 그리세요. 세대 번호가 없을 때 어떤 영상이 마지막에 보이는지 설명하면 비동기 경합을 이해한 것입니다.

6-3. 물리 계산: 초 단위 시간과 화면 좌표 연결하기

dsh-pet/src/shared/physics.ts에서 기본 중력은 1400 px/s², 반발 계수는 0.78, 바닥 마찰은 2.5 /s입니다. throwStep()는 입력 시간 간격을 최대 0.05초로 제한합니다. 탭이 멈췄다가 돌아왔을 때 한 번에 멀리 순간 이동하는 상황을 줄이는 장치입니다.

// throwStep()의 계산 순서에서 경계 처리를 제외한 부분
const dt = Math.min(Math.max(dtRaw, 0), MAX_STEP_DT);
vy += physics.gravity * dt;
x += vx * dt;
y += vy * dt;

// 오른쪽 벽 충돌: 왼쪽으로 돌아서며 속력 감소
vx = -Math.abs(vx) * physics.restitution;

화면에서는 아래쪽으로 갈수록 y가 커집니다. 정지 상태에서 1/60초를 진행하면 중력으로 vy가 약 23.33 px/s 증가합니다. 벽에 1000 px/s로 부딪히면 반대 방향 속력은 780 px/s가 됩니다.

드래그의 springStep()는 SPRING_K=200, SPRING_C=30으로 목표 위치와 현재 위치의 차이, 현재 속도를 함께 사용합니다. 작은 실습: 기본 강도에서 속도 0, 위치 0, 목표 100, 시간 1/60초라면 새 속도는 약 333.33이고, 호출자가 위치를 갱신한 뒤에는 약 5.56이 됩니다. 단위를 붙여 손으로 계산해 보세요.

6-4. Electron: 투명함과 클릭 통과는 별개다

dsh-pet/runtime/electron-helper/main.js는 펫마다 작은 BrowserWindow를 만들고, transparent: true, frame: false, alwaysOnTop: true를 지정합니다. 화면 전체를 덮는 투명 창 하나를 만드는 방식이 아닙니다. 창은 캐릭터와 말풍선을 담도록 이동합니다.

픽셀이 투명하다고 클릭까지 자동으로 뒤에 전달되지는 않습니다. 메인 프로세스의 setIgnoreMouseEvents()와 preload의 setInteractive()·setInputBusy()가 이를 조정합니다. 드래그 중에 갑자기 클릭 통과로 바뀌면 pointerup을 놓칠 수 있으므로 입력 중 상태를 따로 전달합니다.

창 설정에는 contextIsolation: true, nodeIntegration: false가 있지만 sandbox: false도 있습니다. 이 세 설정은 같은 뜻이 아닙니다. dsh-pet/runtime/electron-helper/preload.js는 contextBridge.exposeInMainWorld()로 정해진 동작을 노출합니다. 옵션의 의미는 공식 BrowserWindow 문서를 함께 보세요.

작은 실습: 창 제어, 영상 재생, 파일 읽기 각각이 어느 프로세스의 책임인지 표를 만들어 보세요. dsh-pet/src/app/desktop-auth.ts의 installDesktopAuth()가 대상 origin과 로컬 최상위 렌더러를 확인한 뒤에만 헤더를 붙이는 이유도 설명해 보세요.

6-5. AI 연결: 설정을 켜는 일과 주기 호출을 허용하는 일

독립 AI의 DEFAULT_AI_SETTINGS는 enabled: false, automaticWhispers: false입니다. 최대 출력은 기본 1024 토큰, 요청 제한 시간은 30,000ms입니다. createStandaloneAi()는 설정·모델·주소·키가 갖춰졌을 때만 준비 상태가 됩니다.

dsh-pet/src/host/whisper-policy.ts의 automaticWhisperSchedule()는 독립 실행에서 펫별 허용, AI 준비 상태, 자동 발화 허용을 모두 확인합니다. dsh-pet/src/standalone/ai-provider.ts에는 동시 요청 제한, 분당 6회 제한, 취소 신호, 입력·출력 길이 제한도 있습니다. 작은 AI 기능에서도 사용자가 켠 기능과 실제 외부 요청이 시작되는 조건을 명확히 연결해야 합니다.

dsh-pet/src/standalone/ai-storage.ts의 writePrivateJson()은 임시 파일에 제한된 권한을 먼저 적용한 뒤 내용을 쓰고, fsyncSync()와 renameSync()로 교체합니다. POSIX에서는 0600, Windows에서는 사용자 SID 기반 권한을 적용합니다. 키는 로컬 JSON 파일에 저장되며, 운영체제 비밀 저장소로 암호화하는 구현은 아닙니다.

작은 실습: dsh-pet/src/standalone/ai-config.ts의 설정 반환에서 키 대신 hasKey만 내보내는 경로를 추적하세요. 대화 기록은 $DSH_HOME/dsh-pet/memory.json에 보존하면서, 모델에 보내는 문맥은 sliceMemoryRounds()로 최근 몇 턴만 고르는 차이도 확인하세요. 기본 chatMemoryRounds는 5이며, 문맥을 줄인다고 저장된 과거 기록이 삭제되는 것은 아닙니다.

6-6. 영상 처리: 투명도와 기준 좌표를 함께 보존하기

scripts/chroma_step02.py의 실제 변환은 NumPy 배열로 HSV 색상을 판정합니다. scripts/normalize_step03.py는 처음과 끝의 서 있는 프레임을 읽어 중심·높이를 측정하고, 전체 동작의 범위도 확인합니다. 소재마다 크기가 달라 보이거나 발 위치가 튀는 문제를 제작 단계에서 줄이는 접근입니다.

scripts/encode_thumbs.py는 디코딩에 libvpx-vp9를 명시하고 format=yuva420p로 투명 채널을 유지합니다. 실행 화면의 dsh-pet/src/shared/constants.ts에는 CANVAS_H=360, FEET_Y=330, 고정된 HIT_BOX가 있습니다. 소재 형식을 바꿀 때는 재생 파일만 아니라 이 좌표 계약도 맞춰야 합니다.

6-7. 테스트와 CI: 빌드 성공의 범위 읽기

dsh-pet/package.json의 test는 Node 내장 테스트 러너와 타입 제거 옵션을 사용하고, test:ui는 별도의 dsh-pet/scripts/tests/*.test.mjs를 실행하도록 정의합니다. 테스트 API와 타이머 모의 기능의 개념은 Node 공식 테스트 문서에서 이어서 읽을 수 있습니다.

.github/workflows/release-app.yml은 Windows runner에서 Node 24·pnpm 12를 쓰고, --frozen-lockfile 설치, 버전 일치 검사, 번들, 타입 검사, 패키징을 진행합니다. 기존 릴리스에 ZIP을 올리는 구성입니다. 이 workflow에는 단위 테스트·UI 테스트 실행 단계가 보이지 않습니다.

작은 실습: dsh-pet/scripts/prepare.js의 전체 빌드와 릴리스 workflow를 대조해 보세요. 전체 빌드에는 build:desktop-core가 있지만, 이 커밋의 앱 workflow는 bundle을 호출합니다. dsh-pet/runtime/electron-helper/shared-core.js는 Git에서 제외되고 dsh-pet/scripts/dist.mjs도 이를 만들지 않으므로, 깨끗한 체크아웃에서 배포 자산의 생성 경로가 완결되는지 검토할 지점입니다. 실제 릴리스 ZIP의 포함 여부는 별도 확인이 필요합니다.

7하드웨어 / 시스템 요구사항

README는 Windows·Linux·macOS에서의 런타임 지원을 설명합니다. 코드도 운영체제별 Electron 경로를 고르지만, 이것만으로 모든 창 관리자와 하드웨어에서 같은 동작을 보장할 수는 없습니다. 특히 Electron의 플랫폼 안내는 Wayland에서 창 위치·크기 변경 등에 제약이 있다고 설명합니다.

hasGraphicalDisplay()는 Linux에서 DISPLAY 또는 WAYLAND_DISPLAY를 검사합니다. 둘 다 없으면 데스크톱 실행을 건너뛰며, DSH_PET_DESKTOP_FORCE=1은 예외 처리용입니다. 그래픽 세션 없는 서버가 캐릭터를 직접 그려 주는 것은 아닙니다.

7-1. 메모리와 저장 공간은 얼마나 필요한가

공식 최소 CPU·RAM·GPU 사양은 명시돼 있지 않습니다. 재생용 WebM의 약 51.83 MiB는 소재 크기이며, Electron 런타임과 실행 중 메모리까지 포함한 크기가 아닙니다. 데스크톱에서 여러 펫을 띄우면 창·영상 디코더·상태 조회도 늘어납니다. 최소 사양을 임의의 숫자로 단정하기보다 인스턴스 수별로 측정해야 합니다.

8직접 해볼 수 있는 실습 과제

아래 과제는 종이 추적이나 별도 연습 파일로 시작할 수 있습니다. 외부 모델·잔액 서비스에 연결하지 않아도 핵심 원리를 확인할 수 있습니다. 과제의 완료 기준을 눈에 보이는 결과와 실패 사례로 정하면, 단순히 코드를 따라 쓰는 데서 벗어날 수 있습니다.

// 경계값까지 추가하면 더 좋은 연습이 된다
const weights = { idle: 10, turn: 5, move: 5 };
const rolls = [0.0999, 0.10, 0.1499, 0.15, 0.1999, 0.20];
// 비교 연산이 미만인지 이하인지 원문에서 확인한다.

// 저장소 구현을 읽기 위한 독립적인 학습용 의사 코드
let generation = 0;
async function change(load: () => Promise<string>) {
  const mine = ++generation;
  const result = await load();
  if (mine !== generation) return;
  show(result);
}
// show와 load는 연습용 가짜 함수로 정의한다.

9관련 기술 심화 학습 로드맵

함수와 객체를 읽을 수 있다면 시작할 수 있습니다. async/await가 낯설다면 2주 차에 시간을 더 쓰세요. 화면을 먼저 꾸미기보다 계산·상태·입력 경계를 차례로 익히면, 환경이 달라져도 배운 설계를 재사용할 수 있습니다.

9-1. 그다음에는 관심사별로 갈라진다

• 프론트엔드: 영상 로딩 경합, 접근성의 동작 줄이기 설정, 말풍선·메뉴의 화면 경계 처리를 더 살펴봅니다.
• 시스템 설계: HelperProcess의 종료와 재시작을 읽습니다. restartBackoffDelayMs()는 기본 750ms에서 지수적으로 늘려 최대 30초로 제한하고, 연속 실패 기본 12회에서 자동 재시작을 멈춥니다.
• 미디어: alpha 채널, 색 공간, 발 기준선, 프레임률을 익히고 한 영상의 처리 전후를 비교합니다.
• AI 앱: 대화 기억의 보존 범위, 모델에 보내는 문맥, 자동 호출 허용을 나누어 설계합니다.

10핵심 키워드 사전

이 용어들은 펫 앱에만 쓰이지 않습니다. 업로드 UI, 채팅 앱, 작업 상태 표시기, 작은 데스크톱 도구에서도 비동기 결과·설정·렌더링·종료 조건을 연결할 때 같은 개념을 사용합니다.

11참고 링크

11-1. 공식 저장소와 코드의 출발점

• 공식 저장소 · 분석 기준 커밋의 파일 목록
• 프로젝트 안내 · 패키지 선언 · 의존성 잠금 파일
• 호스트 진입점과 공통 라우트 · 독립 실행 컨텍스트
• 설정 병합 · 공유 물리 계산
• 호스트 상태 저장소 · 재생 결과 상태 기계
• 브라우저 영상·상태 소비 · Electron 창 관리
• HTTP API 안내 · OpenAPI 명세 · 페이지 내부의 읽기 서비스
• 재생용 영상 인코더 · Windows 앱 릴리스 workflow · v0.3.8 릴리스

11-2. 개념을 더 배우기 위한 공식 문서

• TypeScript: 타입 좁히기와 구분 가능한 합집합
• Electron: 메인·렌더러·preload의 관계
• Electron: 창 옵션과 운영체제별 제약
• Node.js: 내장 테스트 러너와 모의 타이머
• FFmpeg: 필터 공식 참고 문서

공식 문서는 최신 버전 설명으로 바뀔 수 있습니다. 소스의 동작은 커밋 48007b6, 패키지 버전은 이 커밋의 선언과 잠금 파일을 기준으로 읽으세요.

현재 상태 (2026-10-23 GitHub 기준)