본문 바로가기
Back to Projects
이포넷 홈페이지 리뉴얼

이포넷 홈페이지 리뉴얼

2023.10 - 2023.11프론트엔드 개발

프로젝트 개요

Express.js 기반의 회사 홈페이지를 Spring Boot + React.js로 리뉴얼하는 프로젝트입니다.

프로젝트 아키텍처 설계, 공통 컴포넌트 및 모듈 개발, 다국어 아키텍처 개선, 검색 엔진 최적화(SEO), 백엔드 통함 빌드 파이프라인 개발을 담당했습니다.

다국어 아키텍처 개선

문제 상황

물리적 파일 분리로 인한 유지보수 비효율성

기존 Express.js 환경에서는 한국어, 영어, 중국어 등 각 언어별 HTML 페이지를 각각 별도의 디렉터리에서 따로 관리하는 구조였습니다.

┗ 📂some-page
    ┣ 📂ko
    ┃   ┗ 📜index.html
    ┣ 📂en
    ┃   ┗ 📜index.html
    ┗ 📂ch
        ┗ 📜index.html

이렇게 하드코딩된 방식은 레이아웃이나 디자인이 동일하더라도, 텍스트 한 줄만 수정하거나 공통 UI 요소를 변경할 때마다 모든 언어의 HTML 파일을 찾아 일일이 동일한 작업을 반복해야 했습니다. 이 과정에서 불필요한 시간 낭비뿐 아니라 관리상의 병목과 휴먼 에러 발생 가능성도 높아졌습니다.

해결 방안

다국어 리소스 중앙 관리 (i18n)

React.js 도입 이후에는 각 언어별 페이지를 물리적으로 분리하지 않고, 다국어 리소스(텍스트 데이터)는 Properties 파일 형태로 중앙에서 관리하는 i18n 아키텍처를 적용했습니다.

// View 컴포넌트 내 적용 예시  
const { t } = useI18n();

return (
  <header>
    <h1>{t('home.title')}</h1>
  </header>
);

위 방법을 채택한 배경과 이유

  • 재사용성의 극대화: 디자인과 레이아웃이 같고 텍스트만 다를 경우, 물리적으로 파일을 여러 개 만들 필요 없이 단일 컴포넌트에서 다국어 텍스트를 적용할 수 있도록 설계했습니다. 이를 통해 불필요한 중복 코드를 줄이고, 컴포넌트를 보다 효율적으로 재사용하고자 했습니다.
  • 관심사의 분리과 협엽 효율성: 텍스트를 별도 리소스 파일로 추상화하여 키 값으로 매핑하니, 프론트엔드 개발자는 UI 컴포넌트와 아키텍처 설계에 더욱 집중할 수 있을 것이라 생각했습니다. 또한, 번역 담당자가 개발 지식 없이도 손쉽게 리소스 파일만 수정하면 되다 보니, 관심사의 분리(Separation of Concerns)와 협업 효율성까지 동시에 충족할 수 있을 것이라 판단했습니다.

성과 및 기대효과

  • 유지보수 비용 대폭 절감

 UI 구조나 콘텐츠를 바꿀 때 각 언어별 파일을 하나씩 열어볼 필요 없이, 연결된 리소스 키만 수정하면 모든 언어에서 자동 반영되어 프론트엔드 작업량이 크게 줄었습니다.

  • 무한한 언어 확장성 확보

 새로운 언어를 추가하고 싶을 때 기존 HTML 구조를 복제할 필요 없이, 해당 언어에 맞는 리소스 파일만 새로 만들어 연결하면 즉시 적용할 수 있게 되었습니다.

  • 번역 관리의 효율화

 번역 데이터가 코드와 분리되어 별도의 파일에서 관리되니 번역 워크플로우가 훨씬 단순해졌고, 이는 장기적으로 홈페이지 유지보수 비용 절감에도 큰 도움이 되었습니다.

아쉬웠던 점 및 보완 방향

  • 배포 및 운영 효율화 측면: 프론트엔드 프로젝트 내부에 번역 리소스가 바로 결합되어 있다 보니, 단순한 텍스트 수정이나 번역 업데이트 같은 작은 변경에도 전체 빌드 및 배포 과정을 반복해야 했던 불편함이 있었습니다. 앞으로는 다국어 리소스를 별도의 CDN으로 분리하고, 런타임에서 동적으로 불러오는 방식을 도입함으로써 번역 콘텐츠의 업데이트와 프론트엔드 배포를 완전히 분리하고자 합니다. 이를 통해 운영 효율성을 한층 높이고 변화에도 유연하게 대응할 수 있을 것으로 생각합니다.
  • SEO 관점: SPA의 특성상 다국어 처리에는 성공했지만, 언어별 URL 라우팅(예: /en/about, /ko/about), 동적 lang 속성, meta 태그 변경 등 검색 엔진 최적화 부분에서는 아직 개선의 여지가 남아 있습니다. 앞으로는 Next.js와 같은 프레임워크나 SSR을 활용해 이러한 SEO 취약점을 보완하고, 글로벌 환경에서도 충분히 경쟁력 있는 구조로 발전시키는 것이 저의 목표입니다.

Spring Boot 통합 빌드