2024.10

프론트엔드 개발자 핀테크

<aside> <img src="/icons/arrow-northeast_gray.svg" alt="/icons/arrow-northeast_gray.svg" width="40px" /> 보러가기

</aside>

프로젝트 개요

• 프로젝트 목표: 2001년에 제작된 오래된 회사 홈페이지를 현대적인 디자인과 기술로 리뉴얼하여 사용자가 쉽게 접근할 수 있도록 개선하고, 회사의 브랜드 이미지를 제고하는 데 중점을 두었습니다. 사이트의 접근성, UI/UX 개선, 다국어 지원을 통해 글로벌 사용자와 잠재 고객을 위한 최적의 경험을 제공하는 것이 주요 목표였습니다.
• 프로젝트 진행: 저와 디자이너 한 분이 협력하여 진행했으며, 프로젝트 전반을 제가 주도하여 기술적 방향성과 구현을 책임졌습니다. 디자이너와의 긴밀한 협업을 통해 사용자 친화적인 UI/UX를 설계하고 개발하였습니다.
• 주요 기능:
  • 다국어 지원
  • 빠른 로딩 속도를 위한 서버 사이드 렌더링 (SSR) 최적화
  • 유저 친화적인 UI와 직관적인 네비게이션

기여 내용

• Next.js 14: Next.js 14의 App Directory 구조와 Server Components를 사용하여 페이지 로딩 속도를 최적화하고 유지보수성을 높였습니다.
• MongoDB: 데이터베이스로 MongoDB를 사용해 회사의 타임라인, 팀 정보 등 데이터를 관리. CRUD API를 구축하여 동적인 데이터를 처리했습니다.
• i18next 및 next-intl: i18next와 next-intl을 활용해 한국어, 영어 등 다국어 지원 기능을 구현했습니다. 사용자 위치에 따른 언어 자동 변경과 언어 선택 기능을 제공합니다.
• Styled-components: Styled-components를 활용해 각 컴포넌트별로 스타일을 분리하여 코드의 가독성과 유지보수성을 높였습니다.
• TypeScript: 전체 프로젝트에서 TypeScript를 사용하여 타입 안정성을 확보하고, 컴파일 시간에 버그를 사전에 방지하는 데 기여했습니다.

문제 해결

• 다국어 처리 문제: i18next와 next-intl 통합 시 초기 데이터 로딩 시점에서 발생한 성능 문제를 해결하기 위해 서버 사이드에서 데이터 전처리를 도입, 클라이언트의 초기 렌더링 시간을 줄였습니다.
• SEO 최적화: Next.js의 서버 사이드 렌더링과 정적 페이지 생성을 적절히 사용하여 검색 엔진 최적화(SEO)를 달성했습니다. 이는 회사의 주요 키워드 검색 순위 향상에 기여했습니다.
• 타임라인 데이터 처리: 회사 연혁 페이지에서 타임라인 데이터를 동적으로 관리하고 UI에 반영하는 데 MongoDB와 Next.js API Routes를 사용하여 실시간 데이터 처리가 가능하게 했습니다. 또한 JWT와 관리자 계정을 통해 인증된 사용자만 데이터 추가, 수정, 삭제 작업을 할 수 있도록 하여 보안을 강화했습니다.

주요 기술 스택

주요 기능 시연 (스크린샷 및 GIF)