스타벅스 랜딩 페이지 구현에 사용된 유용한 라이브러리

이번 스타벅스 랜딩페이지(홈페이지) 구현에

사용된 유용한 라이브러리들과

몇 가지 사이트들에 대해 적어보았다.

 

╰(⊡-⊡)و✎⮹

.

.

.

 

Open Graph Protocol

Open Graph Protocol은 페이스북에서 만든 메타 태그로,

소셜 미디어 서비스(페이스북, 카카오톡 등)로 웹 사이트를 공유할 때 미리보기를 만들어 주는 역할을 한다.

 

※ 본 구현에선 Kakaotalk의 Open Graph Protocol을 사용하였다.

<!-- Kakaotalk Open Graph protocol -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="Starbucks" />
  <meta property="og:title" content="Starbucks Coffee Korea" />
  <meta property="og:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="og:image" content="./images/starbucks_seo.jpg" />
  <meta property="og:url" content="https://starbucks.co.kr" />

ex) Kakaotalk

 

---

Twitter Cards

트위터에는 Twitter Cards라는 기능이 있다.

140자의 텍스트만 표현할 수 있는 트위터의 제약을 확장할 수 있는 기능으로

추가적인 이미지나 내용을 미리보기처럼 보여주는 기능이다.

 

※ 본 구현에서 사용된 Twitter Cards 코드

<!-- Twitter Cards -->
  <meta property="twitter:card" content="summary" />
  <meta property="twitter:site" content="Starbucks" />
  <meta property="twitter:title" content="Starbucks Coffee Korea" />
  <meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." />
  <meta property="twitter:image" content="./images/starbucks_seo.jpg" />
  <meta property="twitter:url" content="https://starbucks.co.kr" />

ex) Twitter

 

---

Reset CSS

Reset CSS는 웹 브라우저마다 각기 다른 default 스타일이 지정되어 있어,

이를 초기화함으로써 다양한 웹브라우저에서도 동일한 스타일이 적용되도록 하는 설정이다.

 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for Open Source

 

---

Google Fonts

Google Fonts는 라이선스에서 자유로운 952개의 글꼴 라이브러리이다.

 

※ 본 구현에선 'Nanum Gothic' 체를 사용하였다.

 

https://fonts.google.com/

Google Fonts

 

---

Google Material Icons

Google Material Icons는 구글이 제공하는 아이콘 디자인 모음이다.

 

https://material.io/resources

Material Design

 

---

lodash.js 라이브러리

lodash 라이브러리는 다양한 유틸리티 기능을 제공하는 모던 자바스크립트 라이브러리이다.

array, object, string 등의 데이터를 쉽게 다룰 수 있도록 해준다.

이는 자바스크립트로 개발할 때 가장 많이 사용되는 라이브러리들 중 하나라고 한다.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

https://cdnjs.com/libraries/lodash.js

lodash.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

---

GSAP 라이브러리

GSAP은 GreenSock Animation Platform의 약자로,

GreenSock에서 만든 타임라인 기반의 자바스크립트 애니메이션 라이브러리이다.

이 GSAP 라이브러리를 사용하면, 보다 더 세밀하고 효과적인 애니메이션 설정이 가능해진다.

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js" integrity="sha512-H6cPm97FAsgIKmlBA4s774vqoN24V5gSQL4yBTDOY2su2DeXZVhQPxFK4P6GPdnZqM9fg1G3cMv5wD7e6cFLZQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

https://cdnjs.com/libraries/gsap

gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

---

ScrollToPlugin

GSAP 라이브러리는 기능별로 js 파일을 따로따로 제공하기 때문에,

원하는 기능만 선택적으로 골라 쓸 수 있다는 장점이 있다.

 

그에 대표적인 기능 중에 ScrollToPlugin이 있다.

ScrollToPlugin은 스크롤 애니메이션을 지원하는 GSAP 플러그인이다.

 

※ 본 구현에선 Scroll To Top 버튼을 만들 때 이 플러그인이 사용되었다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollToPlugin.min.js" integrity="sha512-agNfXmEo6F+qcj3WGryaRvl9X9wLMQORbTt5ACS9YVqzKDMzhRxY+xjgO45HCLm61OwHWR1Oblp4QSw/SGh9SA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

https://greensock.com/scrolltoplugin/

ScrollToPlugin

 

---

Swiper 라이브러리

Swiper 라이브러리는 하드웨어 가속 전환과 여러 기본 동작을 갖춘 현대적인 슬라이드 라이브러리이다.

 

<주의> Swiper 라이브러리 version에 따라 약간의 차이가 존재한다.

*** 본 구현에서도 가장 최근 버전 라이브러리를 사용했다가 계속 안돼서 애를 먹었다는 사실...ㅎ

 

※ 본 구현에선 공지사항 슬라이드 & 프로모션 이미지 슬라이드를 만들 때 이 라이브러리 요소들이 사용되었다.

<link rel="stylesheet" href="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@6.8.4/swiper-bundle.min.js"></script>

https://swiperjs.com/get-started

Getting Started With Swiper

 

---

ScrollMagic 라이브러리

ScrollMagic 라이브러리는 스크롤과 요소의 상호 작용을 위한 자바스크립트 라이브러리이다.

 

※ 본 구현에선 스크롤 위치를 계산하여 요소들이 양쪽에서 나오는 애니메이션을 줄 때 이 라이브러리를 사용했다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

https://cdnjs.com/libraries/ScrollMagic

ScrollMagic - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

---

Youtube IFrame Player API

IFrame Player API를 통해 웹사이트에 YouTube 동영상 플레이어를 퍼가고 JavaScript를 사용하여 플레이어를 제어할 수 있다.

 

※ 본 구현에 사용된 youtube.js 코드

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
function onYouTubeIframeAPIReady() { // 함수명 변경하면 X
  // <div id="player"></div>
  new YT.Player('player', {
    videoId: 'An6LvWQuj_8', // 재생할 유튜브 영상 ID
    playerVars: { // 영상을 재생하기 위한 여러가지 옵션들
      autoplay: true, // 자동 재생 유무
      loop: true, // 반복 재생 유무
      playlist: 'An6LvWQuj_8' // 반복 재생할 유튜브 영상 ID 목록
    },
    events: { // 추가적인 옵션
      onReady: function(event) { // 동영상 플레이어가 준비가 되면 이 함수를 실행
        event.target.mute() // target(현재 재생되고 있는 영상) 음소거
      }
    }
  });
}

https://developers.google.com/youtube/iframe_api_reference?hl=ko#Getting_Started 

iframe 삽입에 대한 YouTube Player API 참조 문서  |  YouTube IFrame Player API  |  Google Developers

 

---

Netlify

Netlify는 Web 프로젝트를 정적서버로 쉽게 호스팅을 가능하게 하는 서비스이다.

Netlify는 배포를 보다 쉽게 하도록 해주면서, GitHub, GitLab, Bitbucket 등과 연동하여 변경사항도 자동으로 적용해준다.
이는 웹사이트의 유지보수를 용이하게 도와준다는 장점이 있다.

 

https://www.netlify.com/

Netlify: Develop & deploy the best web experiences in record time