"지성의 기록을 탐험하다: 실시간 AI 번역과 인물 상세 프로필이 결합된 노벨상 아카이브"
실시간 데모: https://nobel-prize-sooty.vercel.app
GitHub: github.com/DUChae/Nobel-prize
1901년부터 현재까지 인류의 진보에 기여한 노벨상 수상자들을 탐색하는 아카이브 서비스입니다.
공식 API의 영문 데이터를 실시간 AI 번역을 통해 한글로 제공하며, 인물별 상세 배경을 즉시 확인할 수 있는 인터랙티브한 UI를 제공합니다.
기존의 레거시 환경(CRA + JS)을 Vite + TypeScript + 현대적 선언적 UI 구조로 완전히 리팩터링하여 성능과 타입 안정성을 극대화했습니다.
-
AI 기반 실시간 한글 번역 (New) 영어 원문으로만 제공되는 노벨상 업적(Motivation)을 Google Translate API를 통해 실시간 번역하여 제공합니다. 한/영 병행 표기를 통해 정보의 신뢰성과 접근성을 동시에 확보했습니다.
-
인물 상세 프로필 확장 (Accordion UI) 수상자 이름을 클릭하면 생년월일, 서거일, 출생지, 소속 기관 등 상세 데이터를 별도의 API 호출을 통해 즉시 확인할 수 있는 On-demand Fetching 구조를 구현했습니다.
-
데이터 클렌징 & 포맷팅 공식 데이터의 불완전한 날짜 형식(예:
1964-00-00)을 분석하여 사용자가 읽기 편한 한국형 날짜 형식(1964년)으로 정제하는 유틸리티 로직을 적용했습니다. -
지능형 UI 렌더링 (Data-Driven) '소속 없음', '기록 없음' 등 불필요하거나 누락된 데이터 항목은 UI에서 자동으로 제외하여 Apple 스타일의 미니멀한 디자인을 유지합니다.
-
기술적 SEO & 소셜 최적화 Google Search Console 등록, Sitemap.xml 생성, Open Graph 설정을 통해 검색 엔진 노출 및 SNS 공유 시 미리보기 최적화를 완료했습니다.
| 카테고리 | 기술 |
|---|---|
| Frontend | React 18, TypeScript, Vite, Framer Motion, React Router v6 |
| API | Nobel Prize Official API (v2.1 & v1), Google Translate API |
| 배포 & SEO | Vercel, Google Search Console, Sitemap.xml, Meta Tags |
| 기타 | ESLint (Strict), CSS Modules, Git/GitHub |
| 항목 | 이전 (CRA + JS) | 이후 (Vite + TS) | 개선율 |
|---|---|---|---|
| 개발 서버 구동 | ~8초 | 0.2초 | 95% 감소 |
| 타입 안정성 | 0% | 100% (any 완전 제거) | 런타임 에러 방지 |
| 언어 장벽 | 영어 전용 | 한/영 병행 표기 | 신규 적용 |
| 번들 크기 | 1.8MB | 1.1MB | 42% 감소 |
모든 수상자의 상세 정보를 한 번에 불러올 경우 발생하는 네트워크 부하를 방지하기 위해, 리스트를 먼저 렌더링하고 사용자가 클릭한 항목만 추가 API를 호출하는 구조로 설계하여 성능을 최적화했습니다.
공공 API 특유의 불규칙한 날짜 값(-00-00)과 소속 데이터의 None 값 등을 처리하기 위해 전처리 함수를 구현했습니다. 이를 통해 사용자에게 '데이터 없음' 대신 '정제된 정보' 혹은 '자연스러운 숨김' 처리를 제공했습니다.
복잡하게 중첩된 API 응답 구조를 정의하기 위해 LaureateDetailData 등 인터페이스를 정밀하게 설계하고, any 타입을 완전히 제거하여 개발 단계에서 잠재적 버그를 원천 차단했습니다.
- 제품 중심의 사고: 단순히 데이터를 보여주는 것을 넘어, 번역과 데이터 정제를 통해 사용자가 정보를 얼마나 쉽게 습득할 수 있는지 고민하며 UX의 중요성을 체감했습니다.
- 현대적 마이그레이션: 레거시 스택을 최신 환경으로 옮기며 빌드 도구와 타입 시스템이 개발 생산성에 미치는 실무적 영향을 학습했습니다.
- 컴포넌트 추상화: 기능 단위(LaureateItem 등)로 컴포넌트를 분리하여 비즈니스 로직과 UI 로직을 명확하게 분리하는 설계를 경험했습니다.
# 레포지토리 클론
git clone [https://github.com/DUChae/Nobel-prize.git](https://github.com/DUChae/Nobel-prize.git)
# 의존성 설치
npm install
# 개발 서버 실행
npm run dev