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

가상의 친환경 풍력에너지 기업 '윈드에너지'를 위한 6페이지 데모 사이트입니다. 메인 1개와 서브 5개를 통해 회사, 기술, 프로젝트, 뉴스, 문의 정보를 하나의 기업 디자인 시스템으로 구성했습니다. 라이브 데모 바로가기

디자인 시스템과 모션

타이포그래피(크기·웨이트·컬러), 여백, 스크롤 트리거 애니메이션(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을 모두 대응합니다.

복잡한 산업 정보를 신뢰감 있고 명료하게 전달하면서 모든 페이지에서 일관된 경험을 만드는 것이 이번 작업의 핵심이었습니다. 전체 화면은 배포된 데모에서 직접 확인해 보세요.