[Vue.js/개발일지] 2. 메인 페이지 swiper 제작

메인 페이지에 뭘 만들어야할까 다양한 레퍼런스들을 찾아보다가 그냥 깔끔 무난한 스타일로 swiper하나를 제작 해보기로 맘먹었다.

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

대규모 프로젝트들에서도 많이 사용하고 현업에서 진짜 많이 사용하는 슬라이더이다. 

https://www.dji.com/kr

DJI - 공식 웹사이트

DJI같은 곳에서도 잘 사용하고 있고, 최대한 모던한 스타일로 몇년 지나도 안구려보이도록 심플하게 (엄청 어렵지만) 만들 생각이였다. 

하지만 Vue에서 swiper.js를 어떻게 사용해야 할지 몰라 난항을 겪었지만, 쉽게 사용할 수 있도록 데모버전을 보여주고 있었다. swiper demo 사이트를 통해서 일반 에크마 스크립트부터 리액트, 뷰, 앵귤러, 스벨트까지 데모 코드를 보여주고 있었다 덕분에 편하게 제작 가능 했다.

https://swiperjs.com/demos

Swiper Demos

이 다음 고민으로는 내가 포토샵을 맛깔나게 해서 swiper에 사진을 넣어야 할지, 아니면 gsap같은 애니메이션을 따로 넣어서 개발해줘야 할지 고민을 했지만, 스와이퍼 내에서 글씨 애니메이션도 사용 할 수 있는 방안이 있어서 Parallax를 이용하여 글씨 날리기 까지 개발 했다.

//Swiper.VUE 스크립트 부분
  import { Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax } from 'swiper';
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  import 'swiper/css/effect-fade';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax],
      };
    },
    methods: {
      
    }
  };

부트스트랩 container 속성을 이용하여 옆에 마진을 주고 그 안에서 글씨를 볼 수 있도록 만들었다. 그리고 최대한 웹과 대응을 위하여 media-query 속성을 활용하여 웹에서도 깨지지않고 볼 수 있도록 개발 하였다.

<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Comforter&family=Noto+Sans+KR:wght@700&family=Roboto:wght@700&display=swap');
 
 .wrap-swiper{
    position: relative;
    font-family: 'Roboto','Noto Sans KR', sans-serif;
    img{
      filter: brightness(40%);
      z-index: 2;
      width: 1320px;
    }
    .title{
      font-size: 45px;
      position: absolute;
      z-index: 1;
      top: 30%;
      left: 10%;
      color:white;
      .subtitle{
        font-size: 30px;
        position: absolute;
        color:white;
      }
    }
    @media (max-width: 1000px) {
      .title{
      font-size: 25px;
      position: absolute;
      z-index: 1;
      color:white;
      left: 15%;
      .subtitle{
        font-size: 20px;
        position: absolute;
        color:white;
      }
    }
     img{
      width: 800px;
    }
  }
}
</style>

sass로 개발하였으며 1000픽셀 미만의 화면과 그 이상의 화면을 분리해놓은 모습이다. 폰트는 구글 폰트들을 사용하였다.

깔끔하게 넘어가는 방식을 사용하기 위해 vue swiper.js안에 있는 data-swiper-parallax를 통해 글씨는 옆으로 슬라이드되고  swiper는 fade effect로 주었다. 

<swiper
      :style="{
        '--swiper-navigation-color': '#fff',
        '--swiper-pagination-color': '#fff',
      }"
      :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
      }"
      :modules="modules"
      effect="fade"
      :slides-per-view="1"
      :speed="1200"
      navigation
      :parallax="true"
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange">
      <swiper-slide class="wrap-swiper">

클릭, 스크롤로 넘어가는거 제어 다 가능하고, 오토플레이 설정도 다 가능하다. script부분에서 import 되어야 사용가능한 기능들이다.

//HomeSwiper.vue
<template>
  <div class="container-md">
    <swiper
      :style="{
        '--swiper-navigation-color': '#fff',
        '--swiper-pagination-color': '#fff',
      }"
      :autoplay="{
        delay: 5000,
        disableOnInteraction: false,
      }"
      :modules="modules"
      effect="fade"
      :slides-per-view="1"
      :speed="1200"
      navigation
      :parallax="true"
      :pagination="{ clickable: true }"
      :scrollbar="{ draggable: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange">
      <swiper-slide class="wrap-swiper">
        <div
          class="title"
          data-swiper-parallax="-200">
          Becoming One in Love<br />
          Growing Leaders<br />
          Helping People to Serve God<br /><br />
          <div
            class="subtitle">
            We Are OICA
          </div>
        </div>
        
        <img
          src="../assets/swiper/swiper1.png"
          alt=""
          class="swiper-img" />
      </swiper-slide>
      <swiper-slide class="wrap-swiper">
        <div
          class="title"
          data-swiper-parallax="-200">
          사랑으로 하나되는 학교 <br />
          리더를 세워가는 학교 <br />
          섬김으로 봉사하는 학교 <br /><br />
          <div
            class="subtitle">
            우리는 OICA입니다
          </div>
        </div>
        <img
          src="../assets/swiper/swiper2.png"
          alt=""
          class="swiper-img" />
      </swiper-slide>
      <swiper-slide class="wrap-swiper">
        <div
          class="title"
          data-swiper-parallax="-200">
          Growing Global Leaders<br />
          in God's Words. <br /><br />
          <div
            class="subtitle">
            We Are OICA
          </div>
        </div>
        <img
          src="../assets/swiper/swiper3.png"
          alt=""
          class="swiper-img" />
      </swiper-slide>
      <swiper-slide class="wrap-swiper">
        <div
          class="title"
          data-swiper-parallax="-200">
          하나님 말씀 안에서<br />
          글로벌 리더 양성<br /><br />
          <div
            class="subtitle">
            우린 OICA입니다
          </div>
        </div>
        <img
          src="../assets/swiper/swiper4.png"
          alt=""
          class="swiper-img" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
 


  import { Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax } from 'swiper';
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  import 'swiper/css/effect-fade';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, EffectFade, Autoplay, Parallax],
      };
    },
    methods: {
      
    }
  };
</script>

<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Comforter&family=Noto+Sans+KR:wght@700&family=Roboto:wght@700&display=swap');
 
 .wrap-swiper{
    position: relative;
    font-family: 'Roboto','Noto Sans KR', sans-serif;
    img{
      filter: brightness(40%);
      z-index: 2;
      width: 1320px;
    }
    .title{
      font-size: 45px;
      position: absolute;
      z-index: 1;
      top: 30%;
      left: 10%;
      color:white;
      .subtitle{
        font-size: 30px;
        position: absolute;
        color:white;
      }
    }
    @media (max-width: 1000px) {
      .title{
      font-size: 25px;
      position: absolute;
      z-index: 1;
      color:white;
      left: 15%;
      .subtitle{
        font-size: 20px;
        position: absolute;
        color:white;
      }
    }
     img{
      width: 800px;
    }
  }
}
</style>

작업물은 이곳에서 볼 수 있다. 

 

swiper 제작도 참 오래 걸렸다. 괜히 뷰로 제작했다라는 생각을 수십번은 한 거 같다. 일반 JS로 개발 했으면 더 편했을거란 생각도 한다. 하지만 지금 개발하고 있는 라우팅 뷰나 나중에 사용할 vuex같은 것들을 생각 해 본다면 지금 이렇게 들이박기식 공부법도 도움이 되지 않을까 생각한다. 다음은 footer 제작을 해야겠다.