오늘은 화려한 기능 개발 대신 ‘위생 관리’에 집중했습니다.

프로젝트가 커져서 스토리팩이 3개가 되고 페이지가 250개를 넘어가니, 제 AI 조수들의 ‘두뇌’(문서)가 엉망이 되기 시작했거든요.

맥락(Context)의 비용

AI 에이전트와 일할 때 가장 중요한 건 ‘맥락’입니다. 프로젝트 루트에 오래된 로그 파일 15개와 서로 충돌하는 가이드 문서 4개가 널려 있다면, AI는 혼란스러워합니다. 쓸데없는 파일을 읽느라 토큰을 낭비하고, 옛날 규칙을 참고해서 엉뚱한 코드를 짜기도 하죠.

그래서 오늘 대대적인 봄맞이 대청소를 했습니다.

  1. 과거 청산: 오래된 세션 로그 11개를 아카이브 폴더로 치웠습니다.
  2. 규칙 통일: KOREAN_CONTENT_GENERATION.md와 PERSONALITY_TRANSLATION_GUIDE.md를 CLAUDE_i18n.md 하나로 합쳤습니다.
  3. 토큰 표준화: 모든 토큰 관리 규칙을 TOKEN_OPTIMIZATION.md로 통합했습니다.

섹시한 작업은 아니지만, 앞으로의 모든 개발 세션을 20% 더 효율적으로 만들어줄 겁니다.

클라이언트 사이드 소셜 카드

그래도 기술적인 재미를 하나 챙겼습니다. 바로 소셜 카드 기능입니다.

사용자가 자신의 성격 진단 결과를 이미지로 다운로드할 수 있게 하고 싶었습니다. 보통은 서버에서 이미지를 생성합니다(Puppeteer 같은 걸 써서요). 하지만 그건 돈이 들고 서버 자원을 잡아먹습니다.

대신 저는 HTML5 Canvas API를 사용해 브라우저에서 100% 처리했습니다.

// 서버 필요 없음
function downloadCard() {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 배경 그리기
  const gradient = ctx.createLinearGradient(0, 0, 0, 630);
  gradient.addColorStop(0, '#2C3E50');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 1200, 630);
  
  // 텍스트 쓰기...
  ctx.fillText("INTJ: 전략가", 600, 320);
  
  // 다운로드
  canvas.toBlob(blob => {
    saveAs(blob, 'my-personality.png');
  });
}

빠르고, 공짜고, 오프라인에서도 작동합니다. 때로는 옛날 기술(Canvas는 정말 오래됐죠)이 가장 좋을 때가 있습니다.

이제 다시 이야기를 쓰러 가야겠네요.