software

Laravel과 Next.js를 사용해 내 포트폴리오(Yabasha.dev)를 위한 AI 에이전트를 구축한 방법

발행: (2025년 12월 19일 오후 11:00 GMT+9)
6 분 소요
원문: Dev.to

Source: Dev.to

Laravel & Next.js를 사용해 내 포트폴리오(Yabasha.dev)용 AI 에이전트를 만든 방법의 표지 이미지

Tech Lead이자 AI 엔지니어로서 저는 동료들에게 자주 말합니다: “구두 수선공의 아이들은 신발이 없다.” 우리는 다른 사람을 위해 정교하고 고성능의 시스템을 구축하지만, 우리 자신의 포트폴리오 사이트는 종종 먼지가 쌓여 전문 작업에서 요구하는 완성도를 갖추지 못합니다.

저는 이를 제 플랫폼인 Yabasha.dev에 적용하기로 했습니다. 단순히 블로그를 만들고 싶었던 것이 아니라 AI 에이전트와 풀스택 아키텍처에 대한 제 전문성을 보여줄 살아있는 놀이터를 만들고 싶었습니다.

그래서 저는 AI 에이전트를 “시니어 에디터”이자 “SEO 매니저”로 만들어, 콘텐츠 제작의 지루한 부분을 자동화하고 글쓰기에 집중할 수 있게 했습니다. 여기 Laravel, Next.js, OpenRouter를 사용해 어떻게 구현했는지 자세히 살펴보겠습니다.

The Architecture: Hybrid Power

Backend: Laravel 12 (API, Filament 기반 Admin Panel)
Frontend: Next.js 15 (Static Generation, React Server Components)
AI Gateway: OpenRouter (OpenAI, Anthropic, Google, Meta 모델을 통합한 API)

이 구성은 데이터 관리를 위해 Laravel의 개발자 경험과 안정성을 제공하면서, 최종 사용자에게는 Next.js의 번개 같은 성능을 전달합니다.

The Problem: Friction

기술 글을 쓰는 일은 작업의 50 %에 불과합니다. 나머지 50 %는 다음과 같습니다:

  • 매력적인 메타 설명 작성
  • 주요 및 보조 SEO 키워드 선정
  • 트위터/링크드인에서 보기 좋게 만들기 위한 Open Graph(OG) 태그 생성
  • 콘텐츠 카테고리 지정
  • 읽는 시간 및 난이도 추정

이러한 마찰 때문에 “게시” 버튼을 누르는 것이 종종 미뤄졌습니다.

The Solution: The “Editor” Agent

Laravel(PostAiService)에 백그라운드 서비스를 만들어 자율 에이전트로 동작하도록 했습니다. 단순히 텍스트를 “요약”하는 것이 아니라 특정 페르소나를 가지고 분석합니다.

The Brain

핵심 로직은 복잡한 프롬프트를 구성하는 전용 서비스에 있습니다. LLM에게 “전문 SEO 전문가이자 콘텐츠 에디터” 역할을 수행하도록 지시합니다.

// app/Services/PostAiService.php

protected function buildAnalysisPrompt(string $content): string
{
    return apiKey)
        ->post($this->baseUrl . '/chat/completions', [
            'model' => $model->request_id,
            'messages' => [
                ['role' => 'user', 'content' => 'Count from 1 to 10.']
            ],
        ]);

    // Calculate tokens per second (TPS) and store it
    // ...
    $model->update(['actual_speed' => $tps]);
}

관리 패널에서는 비용과 속도(토큰/초) 기준으로 모델을 정렬하고, 에이전트에 사용할 활성 모델을 즉시 전환할 수 있습니다. 더 저렴한 모델이 등장하면 추가하고 벤치마크한 뒤 에이전트를 해당 모델로 전환합니다.

The Result: Zero‑Friction Publishing

이제 제 워크플로우는 다음과 같습니다:

  1. 마크다운으로 초안을 작성한다.
  2. 저장한다.
  3. PostObserver가 변화를 감지하고 작업을 큐에 넣는다.
  4. AI 에이전트가 초안을 읽고 모든 SEO 메타데이터, 요약, 카테고리를 채워 넣는다.
  5. Next.js가 페이지를 재빌드하면서 이 풍부한 메타데이터를 문서의 “에 삽입한다.

그 결과, Yabasha.dev에서 전혀 최적화에 시간을 쓰지 않고 완벽하게 최적화된 페이지가 생성됩니다.

Conclusion

AI는 엔지니어를 대체하는 것이 아니라 증폭시키는 도구입니다. 이 에이전트를 구축함으로써 블로깅에 드는 관리적 부담을 없애고, 지식 공유에만 집중할 수 있게 되었습니다.

비슷한 AI‑구동 아키텍처를 구축하고 싶거나 Next.js/Laravel 스택에 대한 시니어 수준의 지원이 필요하다면 언제든지 연락 주세요. 제 작업은 Yabasha.dev에서 확인하실 수 있습니다.

Back to Blog

관련 글

더 보기 »