Corporate Website
S&HT
산업 자동화 및 AI 관제 솔루션 전문 기업의 다국어 반응형 기업 소개 웹사이트
주요 담당 업무
- Next.js 16 App Router 기반 프로젝트 아키텍처 설계
- GSAP ScrollTrigger 활용 스크롤 기반 애니메이션 구현
- 다국어 지원 (한국어/영어) - next-intl 적용
- 반응형 디자인 (PC/Tablet/Mobile) - 179개 이미지 최적화
- Resend API 연동 문의 폼 구현 (파일 첨부 지원)
- SEO 최적화 - JSON-LD, 메타데이터, 사이트맵
- 카카오맵 API 연동 오시는 길 페이지
주요 기능
회사 소개 섹션
스마트 엔지니어링 기업으로서의 정체성을 보여주는 인트로 섹션입니다. 심볼 로고와 함께 기업 미션을 전달하고, 다양한 산업 분야에 최적화된 솔루션을 소개합니다.
산업 분야별 솔루션
Industry, Ship Building, Gas Turbine, Spare Part, R&D 등 5가지 핵심 사업 영역을 스크롤 애니메이션과 함께 시각적으로 보여줍니다. GSAP ScrollTrigger를 활용한 부드러운 전환 효과를 적용했습니다.
제품 그리드
가속도계, AI 통합 관제 솔루션, Electric Safety, 전계장품, 산업용 케이블, PLC 등 6가지 주요 제품군을 카드 형태로 구성했습니다. 호버 시 상세 정보를 확인할 수 있습니다.
연락처 및 푸터
고객 문의를 위한 Contact 섹션과 회사 정보를 담은 푸터입니다. Resend API를 활용한 이메일 폼과 카카오맵 연동으로 접근성을 높였습니다.
기술적 특징
GSAP 애니메이션
ScrollTrigger를 활용한 스크롤 기반 애니메이션으로 몰입감 있는 사용자 경험을 제공합니다.
다국어 지원
next-intl을 활용하여 한국어/영어 완벽 지원. 644줄의 번역 파일로 전체 콘텐츠를 커버합니다.
반응형 이미지
PC/Tablet/Mobile 각 디바이스별 최적화된 179개 이미지로 빠른 로딩 속도를 보장합니다.
이메일 폼
Resend API를 활용한 문의 폼. 파일 첨부(10MB), 유효성 검사, HTML 이메일을 지원합니다.
SEO 최적화
JSON-LD 구조화 데이터, OpenGraph, 동적 메타데이터, 사이트맵으로 검색 노출을 극대화합니다.
모던 스택
Next.js 16, React 19, Tailwind CSS v4 등 최신 기술 스택으로 구축되었습니다.