⚡ 해리 포터 테마 웹사이트를 재구축한 나의 경험 (Version 2.0)

Source: Dev.to

배경

첫 번째 버전의 해리 포터 테마 웹사이트를 만들었을 때, 뭔가 특별한 것을 만든 것 같았습니다. 잠시 떠나 있다가 다시 보니 아이디어는 마법 같았지만 구현은 훨씬 개선될 수 있었습니다. 그래서 처음부터 다시 만들기로 결심했고, 버전 2.0을 만들었습니다—더 깔끔하고, 빠르며, 몰입감이 높고, 그 어느 때보다 마법 같은 사이트가 되었습니다.

변경 사항

버전 1 하이라이트

• 토치라이트 마우스 효과
• 마법 지팡이 스타일 커서
• 비와 번개 애니메이션
• 캐릭터 호버 전환
• 마법 분위기 디자인

버전 2 개선점

• 부드러운 애니메이션을 적용한 완전히 새로 디자인된 랜딩 페이지
• 호그와트 느낌을 살린 새로운 레이아웃
• 다듬어진 지팡이 커서 인터랙션
• 향상된 번개, 분위기 및 배경 효과
• 더 깔끔하고 이해하기 쉬운 코드 구조
• 개선된 캐릭터 섹션
• “마법” 같은 느낌을 위한 타이포그래피와 색상 팔레트 강화

모든 것이 더 나은 로직과 깔끔한 코드로 재구성되었습니다—불필요한 복잡함도, 얕은 해결책도 없습니다.

사용 기술

<!-- HTML markup -->

/* CSS styling */

// JavaScript for interactivity

• AOS (Animate on Scroll) – 스크롤 트리거 애니메이션
• 커스텀 커서 애니메이션
• 기울어지고 겹쳐진 UI 섹션
• 호버 기반 3D 스타일 인터랙션
• 최적화된 이미지 처리
• 무거운 프레임워크 없이 순수 프론트엔드 창의력만 사용

배운 점

• 향수는 디자인에서 강력한 요소다
• 디테일이 경험을 만든다
• 깔끔한 코드는 자신감을 키운다
• UI는 스토리텔링이다
• 웹 개발은 예술이다

데모

버전 2.0의 전체 분위기, 전환, 섹션 및 v1과의 개선점을 보여주는 walkthrough 영상을 녹화했습니다.

Demo video on YouTube

소스 코드

버전 2.0 전체 소스 코드를 확인하고 싶다면 아래에서 구매할 수 있습니다:

Buy the full Version 2 source code

여러분의 지원이 제가 창의적인 프로젝트를 계속 만들 수 있게 도와줍니다.

읽어 주셔서 감사합니다—그리고 버전 2.0에 오신 것을 환영합니다 ⚡