빛번짐 효과, box-shadow & filter 활용하기 (feat. ionicons)

단 몇 줄의 코드로 색다른 효과를 낼 수 있다!

 

오늘도 코드가 원하는대로 짜지지 않아 김빠짐을 경험하여 유튜브와 코드팬속에서 헤엄치던 중...

역시나 사이트에 재미를 선사하는 요소로 hover effect를 빼놓을 수 없지 않을까 라는 생각을 했다.

그리고 조금은 색다른 효과를 내보는 것도 재밌겠다 싶어

오늘은 단순히 색만 바뀌는 것이 아닌 빛번짐 효과로 좀 더 화하고 쨍한 느낌의 효과를 내는 법에 대해서 소개해보려한다. 굉장히 간단하니 겁내지 마시라!!

 

내가 직접 구현해 본 Hover effect

https://codepen.io/swpark907/pen/qBVNqYg

Light bleed hover effect(Pure CSS)

 

빛번짐 효과를 내는 두가지 방법 box-shadow, filter: drop-shadow() ( feat. blur )

일단 빛번짐 효과를 일으키는 속성에 대해 알아보자.

css에는 blur효과를 낼 수 있는 property들이 있는데

내가 처음에 생각한 방법은 말그대로 filter속성의 blur이다.

하지만 지금 우리가 원하는 것은 blur가 아니라는 점을 알아야 한다!!

blur를 사용하면 내가 원하는 요소의 바깥쪽만 blur처리가 되는 것이 아닌 해당 요소 모든것이 blur처리가 되어 글자, 아이콘까지도 흐릿하게 보이는 것을 확인 할 수 있다.

 

왼쪽은 filter: blur(3px), 보았는가 이 흐릿함을

그렇기에 우리가 사용하려는 것은 blur가 아니라는 것이다.

저렇게 배경화면을 흐릿하게 만들고 싶으면 blur를 사용하면 된다.

 

그렇다면 우리가 원하는 효과를 얻기 위해서는 어떤 속성을 사용하여야 할까??

주변의 빛번짐을 내는 방법은 제목에서 알 수 있듯이

적용하고자 하는 요소가 어떤것이냐에 따라 두가지로 나뉜다. (다른 방법이 있다면 댓글로 알려주기 바란다.)

 

1. box-shadow

2. filter: drop-shadow()

 

도대체 뭐가 다르기에 또 두가지로 나뉘어 있느냐...

이것들의 개념과 차이점에 대해 한번 알아보자.

 

box-shadow랑 drop-shadow랑 뭐가 다른거야?

이 두가지는 정확히 무슨 차이점을 갖고 있을까?

box-shadow가 영역의 shadow를 설정하는 것이기 때문에 네모난 영역의 그림자를 생성하는 것이라면,

drop-shadow는 실제 존재하는 선을 인식하여 그림자를 생성시켜 준다.

box-shadow와 drop-shadow의 차이

 

위의 그림을 보면 확연히 구분이 가능할 것이다.

아이콘을 감싸고 있는 영역의 노란색 그림자는 box-shadow,

아이콘의 선을 주위로 나타난 초록색 그림자는 drop-shadow이다.

 

다만 drop shadow를 사용할 시 주의할 점이 있는데

해당 요소의 모든 선을 인식하기 때문에 border를 설정한다면 border의 주위에도 drop-shadow가 생겨버린다는 점!

아래 그림은 border 속성을 입력하고 난 후의 모습이다.

흰색 border 주위에 초록색 그림자가 생겨버린 모습

이 점만 알고 있으면 상황에 맞게 원하는 색깔의 그림자를 입힐 수 있을 것이다!!

 

이제 둘의 차이점이 무엇인지 알았으니 사용하는 방법에 대해 살펴보도록 하자.

 

box-shadow 이용하기

 

아래는 box-shadow의 parameters를 쉽게 알 수 있고 만들어 주는 사이트이니 참고하기 바란다.

https://html-css-js.com/css/generator/box-shadow/

Box Shadow CSS Generator

box-shadow의 구성을 살펴보면 총 5가지의 파라미터를 입력할 수 있는데 순서대로

- offset-x(필수)

- offset-y(필수)

- blur

- spread

- color(기본 검정, color를 따라감)

blur는 번짐의 정도, spread는 그림자의 크기 라고 생각하면 되겠다.

 

처음 box-shadow에 대해 알았을 때 그냥 단순 그림자를 생성해 주는 툴인 줄 알았으나

꽤나 다양한 효과를 나타낼 수 있다.

그 방법은 여러개의 box-shadow를 사용하는 것.

box-shadow 안에는 여러개의 색, 효과를 지정을 할 수 있는데 코드를 예시로 보자면

 

예시

.preview{
-webkit-box-shadow: 5px 5px 0px 0px #289fed, 10px 10px 0px 0px #5fb8ff,
    15px 15px 0px 0px #a1d8ff, 20px 20px 0px 0px #cae6ff,
    25px 25px 0px 0px #e1eeff, 0px 0px 0px 5px rgba(0, 0, 0, 0);
  box-shadow: 5px 5px 0px 0px #289fed, 10px 10px 0px 0px #5fb8ff,
    15px 15px 0px 0px #a1d8ff, 20px 20px 0px 0px #cae6ff,
    25px 25px 0px 0px #e1eeff, 0px 0px 0px 5px rgba(0, 0, 0, 0);
}

한개만 가능한게 아니었군요!

이런 식으로 다양하게 활용할 수 있다는 점!! 아이디어만 있다면 정말 많은 표현을 할 수 있을 것 같다.

 

filter: drop-shadow() 이용하기

drop-shadow()도 사용법은 box-shadow와 많이 유사하다.

다만 filter 안의 파라미터로 속성을 넣어주어야 하며 

아래 네가지가 속성값으로 box-shadow와는 다르게 spread가 없는 모습.

- offset-x(필수)

- offset-y(필수)

- blur

- color

 

spread는 없지만 이것도 마찬가지로 여러개의 drop-shadow를 사용하면 색감 대비를 더 명확하게 낼 수 있다.

#first{
  padding: 1rem;
  color: rgb(36, 255, 102);
  filter: drop-shadow(0 0 2px rgba(36, 255, 102, 0.7));
}
#second{
  padding: 1rem;
  color: rgb(36, 255, 102);
  filter: drop-shadow(0 0 2px rgba(36, 255, 102, 0.7))
    drop-shadow(0 0 5px rgba(36, 255, 102, 0.7))
    drop-shadow(0 0 15px rgba(36, 255, 102, 0.7));
}

여러번 사용해보자!

 

이렇게 box-shadow와 filter: drop-shadow()를 통한 빛번짐 효과 사용법을 알아보았다!!

 

참고사항!! 간편하게 아이콘을 사용하는 곳 ionicons

hover 이펙트는 글자 또는 바탕색을 바꾸는 경우 많이 쓴다.

하지만 좁은 화면에 많은 정보를 넣어야 하는 경우,

아이콘을 이용하면 트렌디하고 간단하게 사용자에게 정보를 전달할 수 있기 때문에 아이콘은 굉장히 많이 쓰는 수단이다.

내가 소개할 사이트는 ionicons!!

많은 이용자를 보유한 font-awsome은 방대한 양의 아이콘이 있다는 확실한 장점이 있지만 회원가입을 해야하고 사용할 때마다 나의 kit key를 확인하러 여러 번 클릭해 들어가야 하는 번거로움이 있더라... 

 

하지만 내가 최근에 알게 된 사이트 ionicons은 자주 쓰는 기본 아이콘들은 당연히 있고 특히나 사용법이 굉장히 굉장히 굉장히 간단하다.

 

https://ionic.io/ionicons

Ionicons: The premium icon pack for Ionic Framework

사이트 UI도 굉장히 깔끔한게 내 스타일이다!!

우선 사이트에 들어가 상단의 Usage라고 되어있는 곳을 클릭한 후,

Installation에 있는 코드를 body의 하단에 붙여넣기만 하면 설치 끝!! 무려 설치하는 데 사이트 검색부터 시작해서 1분도 안걸린다. 가입도 필요 없이. 무료로.

 

그런 후 다시 홈으로 돌아와서 원하는 아이콘을 클릭하면

이렇게 코드가 뜨는데 이것을 원하는 곳에 붙여넣어 바로 사용할 수 있다. 

코드를 클릭하면 복사가 되는 친절함까지!!

 

마아무리

프론트엔드 개발자는 다양한 시야가 필요하다고 생각한다. UI를 만드는 것 또한 그중에 한가지.

그렇기 때문에 나는 디자인을 보는 시야도 여타 기능개발만큼 중요하다. 디자이너와 협업하고 디자이너가 없는 경우 직접 만들어야 하니 말이다. 실제 스타트업의 경우 디자이너가 없는 경우도 많다고 들었다.

물론 상황에 맞게, 사이트의 분위기에 맞게 이펙트를 사용하여야 하겠지만, 이런 몇줄의 코드로 좋은 효과를 내는 방법을 여러가지 알고 있다면 다 트렌디하고 아름다운 사이트를 만들어야 할 때!! 능숙하게 사용자의 입맛에 맞게 제작할 수 있지 않을까 생각한다.

오늘도 한걸음 발전한 여러분의 모습을 보며 스스로에게 박수를 쳐주는 하루가 되길 바란다.