AI 회사 사이트 페이지 구현

RebuilderAI 회사 소개 사이트의 '/technology' 페이지를 구현하였습니다.

배포 링크🔗

기술 스택

구현 사항

헤더 서브 메뉴 클릭 시 자동 섹션 이동 + 쿼리 스트링 추가

• 헤더 'Technology'에 hover하면 뜨는 서브 메뉴 중 하나를 클릭 시
• 해당 기술을 소개하는 페이지 내 섹션으로 이동 + URL에 섹션을 나타내는 쿼리 스트링 추가 (🔗관련 블로그)

시간차가 있는 fade-in 애니메이션 구현

(화면에 마우스가 등장하고 잠깐 기다려주세요!)

• 뷰포트에 들어왔을 때 동작하는 fade-in 애니메이션 (🔗관련 블로그)

스크롤 위치에 따라 뒷배경 영상 고정 or 스크롤

• 스크롤 중 뒷배경 영상 고정
• 섹션을 벗어나면 다시 스크롤되도록 처리
• position, top, bottom 조절 + 커스텀 훅 활용 (🔗관련 블로그)
• 코드: 🔗커스텀 훅 / 🔗적용한 컴포넌트

다국어 적용 (ko, en)

• i18next, react-i18next 사용
• 기본 언어: 한국어(ko) / fallback 언어: 영어(en)
• 스타일 적용 중 이슈 발생 (🔗관련 블로그)

반응형 구현 (breakpoint: 600/768/1024/1200/1280)

• 특정 breakpoint에서 화면 크기에 맞는 영상을 불러옴 (오른쪽 네트워크 탭, 1280/768/600일 때)
• 반응형 리팩토링 관련 이슈 (🔗관련 블로그)

CRA → Vite 마이그레이션

• CRA로 시작한 프로젝트를 Vite로 마이그레이션
• 결과: 렌더링 속도 87.5% 감소 (16초 → 2초)

Lighthouse 최적화

• 차세대 이미지 포맷 사용 (webp)
  • 브라우저 호환을 위해 png 추가 제공 (picture, source 태그 사용)
• 검색엔진최적화(SEO)
  • index.html에 meta 태그 작성
  • robots.txt 작성
• 최종 검사 결과 (배포 사이트 기준)

S3 + CloudFront 배포

• 프로젝트를 빌드한 후 정적 파일 저장소인 S3에 업로드
• 더 가까운 엣지 서버에서 리소스를 가져올 수 있도록 CloudFront를 거쳐서 배포
• 🔗관련 블로그

이슈 해결

Github Actions로 CI/CD 구축

CI/CD를 설정하여 재배포 과정을 간편화 (🔗관련 블로그)

영상 lazy load

뷰포트에 없는 영상을 지연 로드하여 네트워크 부하를 줄임 (🔗커밋)

폰트 preload

렌더링 전 폰트를 미리 불러와서 FOUT 현상 제거 (🔗관련 블로그)

부가 구현

코드 개선

• 컴포넌트가 UI 렌더링에만 집중하도록 자바스크립트 로직을 커스텀 훅으로 분리
• 섹션 4-7 반복되는 UI 모듈화 (🔗코드)
• 렌더링 간 변하지 않는 고정 값을 상수(constant) 처리

기능 구현

• 2가지 이상의 타입이 혼합된 배열에서 타입 가드 활용 (🔗커밋)
• 404 에러 안내를 위한 NotFound 화면 구현
• 첫 렌더링 때 항상 화면 최상단으로 이동 (ScrollToTop)
• Vite 절대 경로 설정
• ‘/’로 진입 시 ‘/technology’ 페이지로 리다이렉트