포트폴리오 케이스 스터디

JOBDA

Next.jsTypeScriptMultilingualAI ContentLive Service

Yurasis의 공개 데이터를 읽어 8개 언어의 편집형 블로그로 보여 주는 데모입니다. 홈, 아카이브, 카테고리·태그 탐색, 아티클 읽기, 조회수 기록과 안전한 폴백까지 하나의 흐름으로 구현했습니다.

2026년 6월 22일4분 읽기Demo
JOBDA editorial home screen
01 / 3Editorial home

02 — 화면과 개요

지원 언어
8개
공개 화면
홈 / 아카이브 / 리더
콘텐츠 소스
Yurasis API + 안전한 폴백

클라이언트
JOBDA
역할
공개 API 연동, 다국어 라우팅, 편집형 읽기 경험, 데모 복원력 설계

03아키텍처

Yurasis 공개 API 위에 만든 집중형 퍼블리싱 화면

JOBDA는 읽기 경험을 담당하고, 발행된 포스트 데이터는 /api/public/external-sites/jobda에서 가져옵니다. 채널 설정, 포스트 요약과 본문, 번역, 조회 이벤트를 읽기 전용 경계로 분리해 Prisma나 대시보드 코드에 의존하지 않습니다.

요청은 서버에서 렌더링되고 60초 동안 캐시됩니다. 공개 엔드포인트를 일시적으로 사용할 수 없으면 같은 타입의 고정 샘플을 반환하므로 포트폴리오가 오류 화면으로 끝나지 않습니다.

04i18n

8개 언어 경로를 서버에서 일관되게 렌더링

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

내비게이션, 아카이브, 빈 상태, 페이지 이동, 리더의 UI가 하나의 타입 딕셔너리를 공유합니다. 화면 언어와 발행 포스트의 콘텐츠 언어는 분리되어 있어 모든 지원 경로가 같은 규칙으로 동작합니다.

05복원력

원본 콘텐츠가 바뀌어도 계속 확인할 수 있는 데모

공개 API를 우선 사용하지만 해당 의존성이 느리거나 비어 있을 때 화면 전체가 사라지지 않도록 했습니다. 타입이 같은 샘플 데이터가 블로그 정보, 목록 응답, 아티클 응답을 대신합니다.

별도 운영 사이트처럼 포장하지 않고 포트폴리오 데모임을 분명히 표시합니다. 리뷰어는 샘플 콘텐츠를 고객 서비스로 오해하지 않으면서 내비게이션과 상태 설계를 확인할 수 있습니다.

06읽기 흐름

홈에서 발견하고 아카이브를 거쳐 읽기까지

홈은 편집 방향을 한 문장으로 보여 주고 많이 읽은 글과 최신 글을 연결합니다. 아카이브에서는 카테고리와 태그로 탐색하며, 리더에서는 메타데이터·번역·정제된 본문과 다시 탐색으로 돌아가는 경로를 유지합니다.

조회수는 아티클이 보인 뒤 전송하므로 분석 처리가 페이지 표시를 기다리게 만들지 않습니다. 데모 하나에서 독자 경험과 플랫폼 연동을 함께 검토할 수 있습니다.

인터랙티브 빌드

JOBDA

편집형 홈에서 아카이브와 아티클 리더까지 직접 이동해 보세요. Yurasis 공개 API를 우선 사용하고, 원본을 불러오지 못할 때는 같은 타입의 고정 샘플로 안전하게 전환됩니다.

데모 보기

Yurasis

상호: 유라시스 랩

대표: 이규형

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

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

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

TEL: 010-2709-9846

Email: siholee@yurasis.com

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