문제
Bigtablet 공식 홈페이지의 리뉴얼과 운영 유지보수에 참여했습니다. 회사·제품 소개, 연혁과 채용 정보가 한국어·영어로 제공되는 사이트에서 언어별 콘텐츠, 렌더링과 인터랙션이 함께 일관되게 동작해야 했습니다.
문구를 번역하는 것만으로는 부족했습니다. 오류·404 화면에 한국어가 남거나 연혁 데이터의 언어가 섞일 수 있었고, 연도를 빠르게 전환할 때 이전 GSAP 효과가 살아 있으면 새 화면의 표시 상태를 바꿀 수 있었습니다.
선택한 방법
정적인 구성과 클라이언트 동작의 경계
정적 위젯을 조합하는 메인 화면의 불필요한 클라이언트 선언을 제거했습니다. 소개 화면은 서버 컴포넌트에서 언어에 맞는 메시지를 읽도록 옮기고, 연혁 데이터는 Zod로 구조를 검증해 단순 타입 단언에 의존하지 않도록 했습니다.
오류와 복귀 경로까지 다국어로 유지
next-intl 메시지에 오류, 재시도와 목록 복귀 문구를 포함했습니다. 채용·블로그·소개 화면뿐 아니라 루트 오류와 404 화면도 같은 언어 기준을 사용하도록 정리했습니다. 여러 줄 메시지의 줄바꿈과 뉴스 이미지의 대체 텍스트도 함께 보완했습니다.
애니메이션의 시작과 해제를 함께 관리
연혁의 화면 효과를 해당 요소에 한정한 gsap.context 안에 두고, 정리 시 revert하도록 변경했습니다. 연도를 바꾸거나 화면을 떠날 때 requestAnimationFrame뿐 아니라 그 안에서 생성한 tween도 정리하도록 한 변경입니다.
모션 감소 설정을 읽는 훅을 추가하고 스크롤 효과와 배너에 반영했습니다. 브랜드 인터랙션을 유지하면서 사용자의 시스템 설정에 따라 움직임을 줄일 수 있게 했습니다.
공개 사이트의 운영 품질 유지
페이지 메타데이터, sitemap·robots와 정적 자산 경로를 관리했습니다. 다국어 문구와 링크, 반응형 화면을 수정할 때 빌드·검증 흐름과 배포 브랜치도 함께 확인했습니다.
확인한 결과
공식 홈페이지의 정적 구성은 서버에서 처리하고, 실제 상호작용이 필요한 영역은 클라이언트에 남기는 구조로 정리했습니다. 다국어 적용 범위는 본문에서 오류·재시도·복귀 동작까지 확장됐습니다.
연혁 애니메이션은 화면 전환 때 함께 해제되고, 모션 감소 설정을 지원하도록 바뀌었습니다. 공개 커밋에서 렌더링 경계, 메시지 구조와 모션 수명 관리에 대한 담당 변경을 확인할 수 있습니다.