[CSS] CSS Glitch Art 효과

CSS은 아무리 공부해도 마스터했다는 느낌이 들지 않는다. 

경험 많은 프론트엔드 개발자 분들도 CSS는 마스터라는 개념이 없다고 종종 말씀하시는데, 정말 공감하는 바이다. 

 

하지만 그렇다고 공부를 아예 포기하는 것도 문제가 있다. 결국 디스플레이에 스타일을 입히는 것은 프론트엔드가 해야 하는 주요 업무 중의 하나이기 때문이다. 

 

관련해서 재밌는 포스트가 있어 번역해 옮겨본다.

 

CSS Glitch Art Effect

이번 포스팅의 주제는 Glitch Art이다.

 

Glitch Art가 무엇일까? 사실 Glitch Art는 틱톡 로고에 사용된 아트로 우리에게 친숙하다. 깜빡거리고 진동하는 효과로 우리의 시선을 끄는 마법과 같은 느낌이 있다. 

 

Glitch Art는 이미지가 깨지며 흠집이 생기는 느낌을 표현한다. 틱톡의 청록색 블럭과 빨간 블록이 오버랩되는 것은 이러한 흠집을 표현한 것이다. 이런 Glitch는 초기 영상의 시작에서 오늘날의 디지털 영상까지 그 과정을 함께한 분들에게는 매우 친숙한 현상이다. 틱톡의 로고는 정적이지만 우리의 뇌는 스스로 그 효과를 만들어내고 간섭신호까지 들리는듯한 효과를 낸다.

 

물론, 일반화된 Glitch Art는 이런 이펙트에만 국한된 것이 아니다. 필자의 생각으로는 더욱 광범위한데 이번 포스팅에서는 CSS로 만들어 낼 수 있는 Glitch Art 효과를 몇 개 소개해보려 한다. 

Use mixed mode to realize TikTok LOGO

우선 정적인 것부터 시작해보자. 틱톡 로고가 좋은 예이다. 

 

언듯 보기에는 3개의 J 모양이 오버랩 된것 처럼 보이지만, 사실은 두 개의 J 모양이 오버랩되었고 가운데 오버랩된 부분이 흰색으로 표현된 것이다. mis-blend-mode 기능은 다양하게 이용될 수 있다. 하나의 J 모양을 도식화하면 아래와 같다.

 

하나의 J 모양은 사실 3/4 원과 하나의 직선 그리고 1/4 원으로 이루어졌고 하나의 라벨과 두개의 수도 엘리먼트로 만들 수 있다. 

key point

• 전체적인 J 구조는 기본적으로 수도 엘리먼트로 제작되고 혼합 효과는 mix-blend-mode를 통해 만든다.
• mix-blend-mode: lighten 효과를 이용해 오버랩 되는 부분을 흰색으로 만든다.

따라서 전체 효과는 아래 두개의 태그만 있으면 된다:

< div  class = "j" > </ div > 
< div  class = "j" > </ div >

아래는 간단한 SASS 코드이다:

// implement the first J
 .j {
     position : absolute;
    & ::before {
         content : "" ;
        ...
    }
    & ::after {
         content : "" ;
        ...
    }
}
// Implement the second J, plus the blend mode
.j :last-child {
     position : absolute;
     mix-blend-mode : lighten;
    & ::before {
         content : "" ;
        ...
    }
    & ::after {
         content : "" ;
        ...
    }
}

도식 다이어그램을 표현하면 아래와 같이 된다.(이해를 돕기 위해 애니메이션을 추가했다):

 

 

 

 

출처: https://medium.com/@rocchokcoco/css-glitch-art-effect-17362d669a5f

CSS Glitch Art Effect