굵기가 있는 div 만들기

요즘 kinetic animation 이 대세이다. 대충 이러한 [SAMSUNG AI] 애니메이션들이라 볼 수 있다.

위와 같은 애니메이션은 사실 그렇게 어렵지 않게 캔버스 없이도 웹으로 구현이 가능하다. 아주 동일하지는 않지만, bezier curve를 대충 그린다면 이렇게 구현을 할 수 있다.

하지만 만약 3D animation 이라면 이야기가 조금 달라진다. LG 로고의 예시를 봐보자.

눈도 반짝 입도 활짝, 저 뭐 달라진거 없나요? 해당 영상을 보면 로고가 다채롭게 움직이는걸 볼 수 있다.

물론 해당 이미지는 canvas 를 활용하면 손쉽게 3D animation 으로 구현할 수 있지만, 문서안 혹은 텍스트 사이에 사용하기 쉽지 않아, div 로 구현을 해보려고 한다.

DIV 만들기

전체 애니메이션을 따라 만들기에는 시간이 부족하니 우선 3D 부분이 눈에 띄는 눈 부분을 제작해보기로 하자.

처음 드는 생각은 눈 자체를 동그란 형식으로 만든 뒤 rotateX 혹은 rotate3D를 통해 돌리는 방안이 제일 먼저 떠오른다.

하지만 그렇게 설계하고 구현할 경우, 굵기를 표현하기가 어려운데, 간단하게 이미지로 예시를 들어보면 다음과 같다.

이를 만약 우리가 보는 화면 기준에서 바라본다면.

이런 형식으로 보이게 될 것이다.

전혀 3D 처럼 보이지 않는다.

이는 perspective 나 3D 로테이션을 준다 하여도 thickness 자체를 주기는 어려워보인다.

실제 현실에서 어떤식으로 구현이 되어야 하는지 한번 생각해보면 다음과 같다.

이런식으로 표현 될 수 있다.

이를 dom 을 통해 구현해보자.

정작 그림에 필요한 부분을 따로 본다면 다음 이미지 처럼 볼 수 있다.

즉 간단하게 도식화 해서 살펴보자면 해당 부분만 구현을 하면 3D 처럼 보일 수 있다.

그리고 이미 원 부분은 간단하게 그린 후 rotateX(90) 으로 해결이 되므로 위 막대만 위치에 맞춰 회전 시켜주면 된다.

그럼 대충 이런 형식으로 그릴 수 있다.