[Vue.js] 인스타그램 필터 기능 만들기

💡 실습 포인트!

• 작은 이미지들에 필터 기능을 적용해서 보여주는 건 만들었는데, 생각해보니 작은 이미지를 클릭했을 때 큰 이미지에 필터가 입혀지는 기능은 안 만들어서(캡처하다가 생각났다...) 조만간 코드를 수정해야겠다.

---

💜 필터 기능 만들기

• 사진 업로드 페이지(필터 선택 페이지)를 보면 하단에 작은 박스들이 있는데 이 각 박스들을 FilterBox Component 로 바꾸어줄 것이다.

🤍 FilterBox.vue 만들기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="filter-item" :style="`background-image: url(${imgUrl})`">
  </div>
</template>

<script>
export default {
  name: "FilterBox",
  data() {
    return {};
  },
  props: {
    imgUrl: String,
  },
};
</script>

<style>
.filter-item {
  width: 100px;
  height: 100px;
  margin: 10px 10px 10px auto;
  padding: 8px;
  display: inline-block;
  color: white;
  background-size: cover;
  background-position: center;
}
</style>

• FilterBox Component 로 작은 박스들을 채우기 위해서는 우선 FilterBox Component 부터 만들어야 한다.
• 따라서, FilterBox.vue 파일을 만들어서 위와 같이 코드를 작성해주었다.
• 그리고 작은 박스들은 업로드한 이미지가 채워진 상태에서 필터가 입혀지는 것이므로, 각 박스의 background-image 속성으로 App.vue 로부터 props 로 받아온 imgUrl 을 넣어주었다.

---

🤍 Container.vue 수정하기

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div>
    <div v-if="step === 0">
      <Post :post="post" v-for="(post, i) in posts" :key="i" />
    </div>

    <!-- 필터선택페이지 -->
    <div v-if="step === 1">
      <div
        class="upload-image"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="filters">
        <FilterBox
          :class="filter"
          :imgUrl="imgUrl"
          v-for="(filter, i) in filters"
          :key="i"
        ></FilterBox>
      </div>
    </div>

    <!-- 글작성페이지 -->
    <div v-if="step === 2">
      <div
        class="upload-image"
        :style="{ backgroundImage: `url(${imgUrl})` }"
      ></div>
      <div class="write">
        <textarea
          class="write-box"
          @input="$emit('content', $event.target.value)"
          placeholder="내용을 입력하세요!"
        ></textarea>
      </div>
    </div>
  </div>
</template>

<script>
import Post from "./Post.vue";
import FilterBox from "./FilterBox.vue";
export default {
  name: "Container",
  data() {
    return {
      filters: [
        "aden",
        "_1977",
        "brannan",
        "brooklyn",
        "clarendon",
        "earlybird",
        "gingham",
        "hudson",
        "inkwell",
        "kelvin",
        "lark",
        "lofi",
        "maven",
        "mayfair",
        "moon",
        "nashville",
        "perpetua",
        "reyes",
        "rise",
        "slumber",
        "stinson",
        "toaster",
        "valencia",
        "walden",
        "willow",
        "xpro2",
      ],
    };
  },
  components: {
    Post,
    FilterBox,
  },
  props: {
    posts: Array,
    step: Number,
    imgUrl: String,
  },
};
</script>

<style>
</style>

• Container.vue 에서 FilterBox Component 를 사용해야 하므로, 우선 FilterBox 라는 이름으로 FilterBox Component 를 import 해주고, components 에도 등록해주었다.

 

[ "aden", "_1977", "brannan", "brooklyn", "clarendon", "earlybird", "gingham", "hudson", 
"inkwell", "kelvin", "lark", "lofi", "maven", "mayfair", "moon", "nashville", "perpetua", 
"reyes", "rise", "slumber", "stinson", "toaster", "valencia", "walden", "willow", "xpro2"]

• 그러고 나서, data 보관함에 filters 라는 항목을 만들어서 위의 필터들 데이터를 담아주었다.

 

  <div class="filters">
    <FilterBox
      :class="filter"
      :imgUrl="imgUrl"
      v-for="(filter, i) in filters"
      :key="i"
    ></FilterBox>
  </div>

• 이제 filters 에 담긴 데이터만큼 반복문을 돌려서, 사진 업로드 페이지 하단의 작은 이미지들에 필터를 씌워주면 된다.
• 이 때, 중요한 것은 반복문을 돌린다고 해서 실제로 필터가 적용되는 것은 아니고 그냥 filters 의 길이만큼 업로드한 이미지와 똑같이 생긴 작은 이미지만 생긴다는 것이다.
• 실제로 필터 기능을 적용하고 싶다면 먼저 CSSgram 이라는 라이브러리를 설치해주어야 한다.
  (설치방법은 아래 참고!)
• 이제 FilterBox Component 에 각 filter 들이 적용되도록 class 에 filter 이름을 데이터바인딩해주면 각 필터에 필터명에 해당하는 필터가 적용된다.

---

🤍 CSSgram 설치하기 및 사용하기

• 사실 인스타그램 필터는 CSS 속성만으로도 흉내내는 것이 가능하다.
• 왜냐하면 CSS 속성을 통해 채도, 명도, 선명도, 블러와 같은 효과를 줄 수 있기 때문이다. 
• 이렇게 filter 와  linear-gradient 속성만으로 인스타그램 필터를 재현한 라이브러리가 있는데, 그것이 바로 CSSgram 이다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cssgram/0.1.12/cssgram.min.css" integrity="sha512-kr3JaEexN5V5Br47Lbg4B548Db46ulHRGGwvyZMVjnghW1BKmqIjgEgVHV8D7V+Cbqm/VBgo3Rcbtv+mGLoWXA==" crossorigin="anonymous" />

• CSSgram 설치는 위 코드를 index.html 의 <head></head> 에 추가해주면 끝난다.
• 설치가 완료되었으면 원하는 이미지에 class="hudson" 과 같이 class 를 추가해주면 필터가 적용되는 것을 볼 수 있다.