[메인프로젝트] 랜딩페이지 애니메이션

CSS로 뭔가 꾸미는 데에는 요령이 없어서 이래저래 구글링 해가면서 완성했다.

너무 정신없이 만들어서 미처 정리도 못하고 gif만 대충 올려놓고 있었다.

검색한 것 다음에 다시 떠올리지 못하면 아쉬울 것 같아서 줄글로라도 적어놓는다.

 

사진이 둥둥 떠 다니는 keyframe 애니메이션

검색하다 블로그에서 mac이랑 safari에서는 background-position에 keyframe 먹인 게 안 보인다고 해서 추가로 더 검색해봤던 것 같다.

caniuse도 들어가봤는데 특별히 빨갛지 않았고 2021년 이후 검색결과만 필터링해 보기도 했는데 얘기가 많지 않은걸로 봐서는 써도 괜찮지 않을까 싶어서 (사실 엔진별로 설정해 놓은 게 너무 길어서 무서웠다) 계획대로 position을 위아래로 조정했다. 

처음엔 당연하게 background-size를 cover로 해 놓았다가 위아래로 움직여야 하면 여유가 있어야한다는 걸 깨달았다.

크기를 더 키우고 위아래로 infinite하게 움직이게 만들었다. 잘은 모르겠지만 이것도 최적화를 위해서는 횟수 제한을 걸어야 하지 않을까 싶다.

 

벤 다이어그램

대략 스케치할때는 이게 이렇게 어려울 줄 몰랐는데.....

일단 다이어그램 모양을 만드는 것부터 문제였다.

처음에는 애니메이션 먹이는 걸 생각 못하고 flex로 정렬한 다음 margin을 마이너스로 빼서 서로 겹치게 만들었다.

그런데 애니메이션 + 겹치는 부분 색칠을 어떻게 할지 생각하려다보니 도저히 답이 안 나오는 것이다...

 

css venn diagram으로 검색했을 때 아무래도 가장 많이 나오는 것은 라이브러리였는데,

실제로 무슨 데이터를 담아서 차트의 기능을 하는 것도 아니면서 라이브러리씩이나 끌어들이게 하고 싶지 않았다.

그러다 스택오버플로에서 훌륭한 vanilla javascript 코드를 발견했다.

 

https://stackoverflow.com/questions/29424794/creating-a-3-circle-venn-diagram-with-pure-css-html

Creating a 3 circle Venn diagram with pure css/html

 

처음엔 원 3개짜리 다이어그램에 붙은 class와 id가 너무 헷갈렸다.

전부 position: absolute인 걸 내 프로젝트에 맞춰서 바꿔 생각해보려니 더 헷갈렸다.

결국 직접 긁어다 랜딩페이지에 띄워보고 동그라미 하나를 지우고 나서야 어느 도형이 무슨 역할을 하는지 알았다.

무엇보다 '아하' 했던 부분은 색이 다른 가운데 부분이다.

저 부분에 색상을 지정하려면 js로 복잡한 계산식이 필요하려나 싶었는데 아니었다.

한쪽 동그라미 위치에 같은 크기의 컴포넌트를 두 개 만들어서 (크기는 같지만 하나는 부모, 하나는 자식) 자식을 margin값을 이용해 다른쪽 컴포넌트 위치로 밀어놓았다.

자식에 색깔을 주고 부모에 overflow:hidden을 주면, 부모가 wrapper의 역할을 하면서 겹치는 부분의 색만 보이고 나머지 부분은 가려지게 된다.

 

brilliant... 주로 js와 react로 값을 계산하는 데에만 몰두하다가 이런 css 트릭을 보니 느낌이 색달랐다.

툴팁의 꼭다리를 border-bottom으로 만드는 것을 봤을 때와 비슷한 충격이다.

실제 상황이야 어떻든 눈에 보이기를 그렇게 보이게 만들면 된다니.

물론 그 아이디어를 떠올리고 property를 자유자재로 다루는 것도 또 다른 능력이다.

 

컴퓨터 언어를 다루면서 동시에 이런 시각적이고 직관적인 작업도 병행할 수 있다는 게 프론트엔드의 매력인 것 같다.

이래저래 자잘하게 배울 것도 많고.. 치매 예방에도 좋을 것 같고..