포트폴리오 케이스 스터디

JOBDA

라이브 서비스로 배포된 다국어 AI 블로그입니다. Next.js App Router, Tailwind CSS v4, 8개 언어 지원, Yurasis AI 콘텐츠 파이프라인, AdSense 통합, 그리고 Yurasis 플랫폼의 공개 API를 통해 콘텐츠를 제공받는 독립 사이트 구조를 갖추고 있습니다.

2026년 6월 22일4분 읽기Live service
지원 언어
8개
광고 슬롯
3개 (리더보드 / 인아티클 / 인피드)
콘텐츠 소스
Yurasis AI 파이프라인

프로젝트 개요

클라이언트
JOBDA
역할
풀스택 아키텍처, 공개 API 설계, 다국어 라우팅, AI 콘텐츠 파이프라인 연동
스택
Next.js 15 App RouterTailwind CSS v4TypeScript strict mode8 locale i18n systemYurasis AI pipelineExternal Sites public APIGoogle AdSenseVercel deployment

하이라이트

별도의 콘텐츠 데이터베이스 없이 Yurasis 플랫폼의 /api/public/external-sites/jobda 엔드포인트를 통해 모든 포스트, 메타데이터, 조회수를 제공받는 독립 렌더링 레이어로 구성했습니다.
8개 언어(en, ko, ja, zh, fr, de, es, it)를 URL 세그먼트 기반으로 처리하는 서버 사이드 i18n 시스템을 구현했습니다. 런타임 라이브러리 없이 getT(lang)에서 동기적으로 딕셔너리를 로드합니다.
레이아웃에 3개의 AdSense 슬롯(리더보드, 인아티클, 인피드)을 지연 로딩 방식으로 통합해 Core Web Vitals에 영향을 주지 않도록 설계했습니다.
Yurasis AI 파이프라인(Opener → Researcher → Writer → Critic → FinalEditor)으로 생성된 콘텐츠가 플랫폼 API를 통해 JOBDA 블로그에 직접 발행됩니다.

아키텍처

플랫폼 API를 소비하는 독립 사이트

JOBDA는 독립된 Next.js 사이트로 배포되지만 자체 콘텐츠 데이터베이스를 갖지 않습니다. 모든 포스트, 블로그 메타데이터, 카테고리, 조회수는 인증이 필요 없는 Yurasis 공개 API(/api/public/external-sites/jobda)에서 옵니다. 사이트는 콘텐츠를 관리하지 않고 가져와서 렌더링하는 역할만 수행합니다.

이 분리 구조 덕분에 콘텐츠 편집, AI 생성, 스케줄링, SEO 도구는 모두 Yurasis 플랫폼에서 관리됩니다. JOBDA는 개선 사항을 자동으로 반영받으며, 사이트가 직접 관리하는 것은 디자인 시스템, i18n 딕셔너리, 광고 슬롯 배치뿐입니다.

i18n

8개 언어, 서버 렌더링, 클라이언트 언어 감지 없음

지원하는 모든 언어는 /en/, /ko/, /ja/ 등의 URL 프리픽스를 가집니다. [lang] 세그먼트가 서버 측에서 언어를 결정하며, getT(lang)에서 딕셔너리를 동기적으로 로드해 HTML에 포함시킵니다. 런타임 i18n 라이브러리, 동적 import, 클라이언트 언어 감지가 없습니다.

언어 전환은 현재 경로의 언어 세그먼트를 교체하는 단순한 anchor 네비게이션입니다. usePathname()으로 활성 세그먼트를 감지하고 교체하는 드롭다운을 렌더링합니다.

광고 수익화

레이아웃 이동 없이 통합된 AdSense 슬롯

세 개의 광고 슬롯이 블로그 전반에 배치됩니다: 전체 헤더 아래 리더보드(AD-1), 대형 화면에서 아티클 사이드바에 보이는 사각형(AD-2), 포스트 세 번째 문단 이후 삽입되는 인아티클 광고(AD-3). 네 번째 인피드 광고(AD-4)는 아카이브 페이지의 9번째 포스트 이후에 나타납니다.

포트폴리오 데모에서는 동일한 크기를 유지하는 레이블이 붙은 플레이스홀더 블록으로 렌더링되어 레이아웃이 실제와 동일하게 표시됩니다.

콘텐츠 파이프라인

주제에서 발행까지 AI가 생성하는 포스트

Yurasis AI 파이프라인을 통해 콘텐츠가 작성됩니다: 주제, 대상 언어, 템플릿, 문체 프로필을 지정하면 Opener(주제 분석, SEO 키워드), Researcher(웹 검색), Writer(파인튜닝 모델 초고), Critic(독립 검토), FinalEditor(최종 교열), Styler(플랫폼 포맷팅) 순으로 파이프라인이 실행됩니다.

JOBDA가 Yurasis 플랫폼 API를 CMS로 사용하기 때문에 모든 포스트에 메타 디스크립션, faqSchema, 태그, 읽기 시간, hreflang 대체 URL 등 SEO 필드가 자동으로 포함됩니다.

인터랙티브 빌드
JOBDA

이 데모는 실제 JOBDA API에 연결되어 실제 발행된 콘텐츠를 렌더링합니다. 블로그 홈, 카테고리·태그 필터가 있는 포스트 아카이브, 전체 아티클을 탐색할 수 있습니다. 배포된 사이트와 동일한 경험을 Yurasis 포트폴리오 내에서 제공합니다.

데모 보기

Yurasis

상호: 유라시스 랩

대표: 이규형

사업자등록번호: 842-05-03371

주소: 서울특별시 강남구 선릉로69길 19, 101동 401호(역삼동, 역삼래미안)

업태: 정보통신업 · 종목: 응용 소프트웨어 개발 및 공급업, 컴퓨터 프로그래밍 서비스업

TEL: 010-2709-9846

Email: siholee@yurasis.com

JOBDA 케이스 스터디 | YURASIS 포트폴리오