AI 패널 통합형 데스크톱 API 클라이언트 PingPaddle 개발기

Context

API 테스트 중 발생하는 오류 해결을 위해 외부 AI 도구로 화면을 전환하는 컨텍스트 스위칭 발생. 브라우저 확장 프로그램이나 별도 탭 사용 시 작업 흐름이 단절되는 구조적 불편함 존재.

Technical Solution

• Electron, React, Vite 기반의 데스크톱 앱 설계로 네이티브 환경의 사용자 경험 제공
• Node.js와 Express를 활용한 CORS Proxy 서버 구축으로 브라우저 제약 없는 자유로운 API 요청 환경 구현
• Python 및 FastAPI 기반의 AI 백엔드와 Groq API를 연동하여 사이드바 형태의 실시간 AI 채팅 패널 통합
• CodeMirror와 Prism 라이브러리를 적용한 구문 강조(Syntax Highlighting) 응답 뷰어 구현
• 대용량 HTML 응답 처리 시 뷰어 렌더링 부하 방지를 위한 샌드박스 iframe 격리 방식 채택
• 응답 속도(ms) 추적을 위한 실시간 곡선 차트 및 응답 크기 트래커의 시각적 배치 설계

Key Takeaway

사용자 작업 흐름 내에 AI 인터페이스를 직접 통합하여 컨텍스트 스위칭 비용을 최소화하는 도구 중심의 AI UX 설계 원칙.