윈드에너지 — 친환경 풍력에너지 기업 사이트

실존 기업 사이트의 정보 구조와 모션을 정밀 분석해, 가상의 친환경 풍력에너지 기업 '윈드에너지'의 공식 홈페이지로 재해석한 데모 프로젝트입니다. 메인 1개와 서브 5개, 총 6개 페이지로 구성했습니다. 라이브 데모 바로가기

레퍼런스 분석에서 시작한 설계

국내 모빌리티 기업 hycore.com을 대상 페이지로 삼아 섹션별 타이포그래피(크기·웨이트·컬러), 여백, 스크롤 트리거 애니메이션(fadeInUp/fadeIn/slideInUp 0.7s), 헤더 상태 전이(히어로 위 투명 → 스크롤 시 화이트)까지 계측해 디자인 토큰으로 옮겼습니다. 브랜드 컬러는 틸(#00BBB4) 계열을 유지하되 콘텐츠는 풍력에너지 도메인으로 새로 썼습니다.

메인 페이지

2슬라이드 크로스페이드 + 켄번스 줌 히어로, IntersectionObserver 기반 스크롤 리빌, 라운드 이미지 위에 화이트 패널이 좌우 교대로 떠 있는 코어 밸류 카드, 호버 줌 솔루션·뉴스 카드, 텍스트 워드마크 파트너 그리드, 채용 배너로 이어지는 8개 섹션으로 구성했습니다.

서브 페이지 5종

• 사업분야 — 클릭·호버로 펼쳐지는 가로 아코디언 핵심기능 탭(모바일에선 세로 스택), 다크 스탯 밴드, 스펙 테이블
• 기술 — 사이트 유일의 다크 테마. 캔버스 파티클 배경, 01~03 기술 카드, 인증·특허 무한 마르퀴
• 프로젝트 — 카테고리 필터 탭(전환 시 스태거 리플레이), 연혁 타임라인
• 뉴스 — 카테고리 탭과 페이지네이션을 갖춘 보드형 리스트
• 문의 — 문의유형 칩, 3단 연락처, 파일 첨부, 개인정보 동의까지 갖춘 검증형 폼

기술 스택

Next.js 16(App Router) 정적보내기, React 19, 단일 전역 CSS로 만든 디자인 시스템, Pretendard Variable. 모든 사진은 로컬 AI 이미지 생성 CLI(agy)로 만든 오리지널 에셋이며, Cloudflare Pages에 배포했습니다. PC·모바일 반응형과 prefers-reduced-motion을 모두 대응합니다.

실제 기업 사이트의 완성도를 재현하면서도 도메인에 맞게 재해석하는 것이 이번 작업의 핵심이었습니다. 전체 화면은 배포된 데모에서 직접 확인해 보세요.