개발자로서 우리는 끊임없이 방대한 양의 복잡한 기술 논문, 60페이지 분량의 비즈니스 백서, 그리고 장황한 문서를 접합니다. 모든 소음을 읽을 시간이 항상 있는 것은 아닙니다. 만약 어떤 PDF나 웹페이지든 분석하여 우리가 원하는 이해 수준—경영진용 요점 정리, 논리 기반 시스템 설명, 또는 아이에게 설명할 수 있는 간단한 비유 등—으로 즉시 번역해 주는 단일 도구가 있다면 어떨까요?

이 게시물에서는 제가 어떻게 **ELI-X (Explain Like I'm 10)**를 구축했는지 깊이 파고들어 보겠습니다. ELI-X는 React 19, Express, Tailwind CSS v4, 그리고 새로 출시된 @google/genai SDK를 사용하여 복잡한 PDF와 기사를 다섯 가지 난이도별 맞춤 청중 프로필로 분석하는 풀스택 웹 애플리케이션입니다.

창의적 테마 및 미학 선택

저는 또 다른 일반적인 소프트웨어 대시보드를 만드는 대신, ELI-X를 아트적 감각 / 브루탈리스트 네오팝(Artistic Flair / Brutalist Neo-Pop) 테마를 사용하여 디자인했습니다. 이 앱은 고대비의 잉크 같은 테두리(#1A1A1A), 두꺼운 그림자 효과(shadow-[4px_4px_0px_#1A1A1A]), 유동적인 오프셋 인터랙티브 움직임, 그리고 생생하고 채도가 높은 색상 블록을 사용합니다.

재미있는 폰트와 마이크로 애니메이션을 활용함으로써, 이 앱의 미학은 근본적인 목표를 강화합니다. 바로 기술 학습을 덜 지루하고 더 접근하기 쉽게 만드는 것입니다.

높은 수준의 아키텍처

ELI-X는 간단하고 깔끔한 풀스택 아키텍처 패턴을 따릅니다:

1. 클라이언트 인터페이스 (React 19): 사용자가 문서를 업로드(드래그 앤 드롭 파일 업로드)하거나 웹 URL을 입력하여 문서를 캡처하고, 청중 페르소나를 구성하며, 복잡성 강도를 설정한 다음, 우아한 마크다운으로 응답을 렌더링합니다.
2. 서버 라우팅 (Express + Multer): API 엔드포인트를 처리합니다. 웹 기사의 경우 원시 HTML을 가져오고, 파일의 경우 멀티파트 폼 페이로드를 받아 메모리에서 PDF를 직접 처리합니다.
3. AI 파이프라인 (Google Gemini API): 공식 @google/genai SDK와 통신하여 PDF 파일 버퍼 및 스크랩된 컨텍스트에 대해 다중 모드 추론(multimodal reasoning)을 수행합니다.

[ Client: React 19 ]
       |
       |(Multipart Form: File Buffer / URL string, Persona, Complexity)
...

기술 상세 분석: API 라우팅 계층 (Technical Breakdown: The API Routing Layer)

GEMINI_API_KEY와 같은 비밀 정보를 클라이언트 측 브라우저 번들에서 안전하게 유지하기 위해, 모든 AI 호출은 서버 측 엔드포인트를 통해 프록시됩니다.

multer를 사용하여 메모리 내 다중 파트 업로드(multipart uploads)를 처리하는 Express 엔드포인트 /api/explain을 설정합니다. 입력값을 구문 분석하고 Gemini 페이로드를 구성하는 방법을 살펴보겠습니다:

import express from 'express';
import multer from 'multer';
import { GoogleGenAI } from '@google/genai';
...

Tailwind CSS v4 및 Motion을 사용한 창의적 스타일링 (Creative Styling with Tailwind CSS v4 and Motion)

Tailwind CSS v4는 통합 네이티브 컴파일(unified native compilation)을 도입하여, 사용자 지정 테마를 매우 빠르게 구축할 수 있게 해줍니다.

페르소나 버튼의 경우, 메타데이터 기반 레이아웃을 직접 매핑합니다:

const PERSONAS = [
  { id: 'Age 10', label: '10-Year-Old', short: '10', color: 'bg-[#FFD700]', sub: 'Simple & Fun' },
  { id: 'College student', label: 'College Student', short: 'CL', color: 'bg-[#98FF98]', sub: 'Structured & Academic' },
...

동적 렌더링(dynamic rendering)을 통해, 어떤 페르소나를 클릭하든 즉시 상태가 변경되고 사용자 지정 테마가 실시간으로 렌더링됩니다.

사용자 상호작용이 즐겁고 촉각적인 느낌을 주도록 만들기 위해, Motion (구 Framer Motion)을 사용하여 상태 전환 애니메이션을 부드럽게 적용합니다:

<AnimatePresence mode="wait">
  {inputType === 'pdf' ? (
    <motion.div 
...

주요 시사점 및 개발자 이점 (Key Takeaways & Developer Benefits)

주요 시사점 및 개발자 이점 (Key Takeaways & Developer Benefits)

• 네이티브 PDF 수집(Native PDF ingestion): 복잡한 클라이언트 측 PDF.js 디코더를 컴파일하는 대신, Gemini의 네이티브 멀티모달 엔진이 원본 PDF 스트림을 직접 수집합니다. 이는 클라이언트 측 번들 크기를 획기적으로 줄이고 매우 정확한 문맥적 해석을 보장합니다.
• 마이크로 카피라이팅(Micro-Copywriting): 미세 조정된 프롬프트 가이드라인과 사용자가 직접 제어하는 다이얼(복잡도 슬라이더, 1~5)의 조합은 독해 밀도에 대한 비교할 수 없는 수준의 제어력을 제공합니다.
• 로컬 캐시 탭(Local Cache Tab): 간단한 Local Session 배열 상태가 클릭 간에도 최근 답변을 유지하여 서버에 불필요한 중복 호출을 방지합니다.

직접 사용해 보세요!

열정과 정밀함으로 구축된 ELI-X를 지금 확인하고 독서를 단순화하세요: https://www.dailybuild.xyz/project/192-eli-x