이 프로젝트는 스타벅스 공식 웹사이트의 랜딩 페이지를 클론하는 예제입니다.
HTML, CSS, JavaScript를 활용하여 웹 개발 스킬을 연마하고, 다양한 웹 기술을 적용해 보았습니다.
아래 내용과 함께 완성된 코드를 확인해보세요!
이 프로젝트는 웹 개발 역량을 향상시키기 위해 스타벅스의 공식 웹사이트를 클론한 것입니다.
로그인 페이지를 포함하여 여러 화면에서 최적화된 반응형 디자인을 제공하며, 다양한 애니메이션 효과와 인터랙션을 구현했습니다.
📦 starbucks
├─ README.md
├─ 📁 css
│ ├─ common.css
│ ├─ main.css
│ └─ signin.css
├─ favicon.ico
├─ favicon.png
├─ 📁 images
├─ index.html
├─ 📁 js
│ ├─ common.js
│ ├─ main.js
│ └─ youtube.js
└─ 📁 signin
└─ index.html
- HTML5: 웹페이지의 구조 설계
- CSS3: 레이아웃, 스타일링, 반응형 디자인, 애니메이션 구현
- JavaScript (ES6+): 상호작용 및 다양한 기능 구현
- GSAP: 애니메이션 효과
- Swiper: 슬라이드 라이브러리
- YouTube API: 유튜브 영상 제어
- npm: 패키지 관리
- Vercel: 프로젝트 배포 및 호스팅
- 레포지토리 클론:
git clone https://github.com/rlnrlnworld/starbucks.git cd starbucks-clone - 패키지 설치:
npm install
- 번들러 설치:
npm i -D parcel
- 개발 서버 실행:
npm run dev
- 브라우저에서 접속:
http://localhost:1234에서 애플리케이션 확인 가능
브라우저에서 index.html 파일을 열어 프로젝트를 실행할 수 있습니다.
- 반응형 디자인: 다양한 화면 크기에 대응하여 콘텐츠가 조정됩니다.
- 애니메이션 효과: GSAP 라이브러리를 활용하여 스크롤 애니메이션과 동적인 화면 전환을 구현했습니다.
- 이미지 슬라이더: Swiper 라이브러리를 사용하여 제품 이미지 슬라이더를 구현했습니다.
- 로그인 페이지: 별도의 로그인 페이지를 구현하여 사용자 인증 UI를 디자인했습니다.
- YouTube API 활용: 사이트에 삽입된 YouTube 동영상을 제어할 수 있습니다.
- 오픈 그래프 및 메타 태그 설정: SNS 공유 시, 사이트에 대한 정보가 잘 나타나도록 메타 태그를 설정하였습니다.
프로젝트의 라이브 데모를 확인하려면 아래 링크를 클릭하세요!
이 프로젝트는 학습 및 연구 목적으로 만들어졌으며, 상업적 목적으로 사용할 수 없습니다.