본문 바로가기
Library

[작업 정리] AR GEAR

by 나나 (nykim) 2018. 5. 4.
배운 점 정리

작업 정리 : AR GEAR

인트로

작업이 끝나면 배운 점이나 느낀 점을 적어야 기억에 남는 법...! 인데, 귀찮다고 맨날 까묵까묵.
그래서 이번에는 잊기 전에 정리해봅니다!

작업 분량은 원페이지 + 풀반응형 + 간단한 스크립트정도였고, 주어진 기간은 3일 정도였습니다. 물리적으로 시간이 부족해서 기한을 맞추고자 밤샌 건 안 비밀. 그래서 총 작업일은 약 4일입니다.

SVG의 활용 - 로고/타이틀

작업 전에 SVG에 대해 아주 사알짝 공부를 했어서, 이번 작업에는 SVG를 사알짝 넣어봤습니다. :9

먼저, 로고와 타이틀을 .png 확장자로 저장하는 대신 .svg 코드로 저장했습니다. 래스터 이미지였다면 레티나에 대응하도록 2x 크기로 저장하거나, 또는 그에 해당하는 이미지를 따로 저장해야하지만 SVG는 코드만 저장하면 되니 훨씬 편합니다. 물론 이미지가 복잡할수록 png보다 용량이 훨씬 커지므로, 비교적 단순한 로고/타이틀에는 적극적으로 활용할 수 있을 듯합니다.

SVG의 활용 - SVG filters


그리고 메인 화면의 이것. blur 효과를 svg 필터로 준 모습입니다. CSS에서도 filter 효과를 줄 수 있기는 합니다. IE가 지원을 안 해서 못 쓸 뿐이지만요^0^  (참고: [caniuse.com])

물론 포토샵으로도 blur 효과를 주는 방법도 있지만, 문제는 요소마다 blur 정도가 다르다는 점입니다. 결국 각 요소마다 효과를 다르게 줘서 따로따로 이미지를 저장해야 하는데, 유지보수 측면에서 영 좋지 못하죠. 그래서 브라우저 상으로 blur 효과를 줄 방법을 찾았고 그게 바로 svg filter입니다. filter를 지정한 svg를 만들고, 그 id값을 filter="url()"로 지정하면 됩니다.

<!-- 효과를 설정한 svg 요소 -->
<svg xmlns="http://www.w3.org/2000/svg" height="0">
  <defs>
    <filter id="blur7" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="7"/>
    </filter>
  </defs>
</svg>

<!-- 효과를 줄 div 요소 -->
<div class="circle deco-mini-1 blur-7"></div>

/* class에 filter 효과 지정 */
.blur-7 {
  background-image: url(images/myImage.png);
  filter: url(#blur7); 
}

SVG filter 효과는 다행히도 IE 10부터 지원됩니다.  (참고: [caniuse.com]) 그래서 다행이구나~ 하고 효과를 넣고 IE에서 켜봤는데요.....
안 나옵니다 (뚜둥)

이런 저런 실험 결과(?), 저런 식으로 div 요소에 filter 효과를 주는 것은 IE에서 지원되지 않는 듯합니다. 따라서 아래와 같이, 내부에 요소를 넣는 방식으로 삽입해야 합니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 347.3 76.1">
    <image filter="url(#blur7)" xlink:href="images/myImage.png" width="100%" height="100%" x="0" y="0" />
</svg>

아니면 IE 브라우저를 판단하여, 해당 브라우저일 때만 블러 처리된 이미지를 보여주는 방법도 있습니다.

// data-agent 판단
 document.documentElement.setAttribute("data-agent", navigator.userAgent);
/* 해당 data-agnet 아래 요소 셀렉팅 */
html[data-agent*="Trident"] .title {
  background-image: url(images/myImage-blur.png)
}

SASS로 for문 / each문 작성

매번 작업할 때마다 느끼는 거지만 SCSS 문법은 사랑입니다. 그런 SCSS를 좀더! 적극적으로! 격렬하게(?!) 쓰고자 for문과 each문을 사용해봤습니다. 근데 맨날 쓸 때마다 까먹어서 복습 겸 적어봅니다.

for문

@for $<변수> from <최소값> through <최대값>

@for $i from 1 through 4 { //background image
  &:nth-child(#{$i}){
    &:before {
      background-image: url(#{$path-image}bg-#{$i}.png);
    }  
  }
}

each문

@each $<변수> in <list 혹은 map 변수>

$colorList:(
    'main' : 'black',
    'sub' : 'blue',
    'important' : 'red',
    'button': 'green'
  );
  
  @each $role, $color in $colorList {
    .#{$role} {
      color: $color;
    }
  }


티스토리툴바