2023-04-15

Docusaurus 도입

시험이 끝난 그 주말, 난 곧장 docusaurus를 도입했다. github page로 deploy했다.

Github Action으로 Deploy

github action 을 손보는데 애를 먹었다. workflow yaml 파일이 어떤 구조로 돌아가는지 모르겠어서 그냥 복붙과 조금의 손보기로 일단 돌아가게는 만들어놓았다.

랜딩페이지 디자인 - Ripple Pattern

docusaurus 를 clone 하면 나오는 이미 만들어진 첫 페이지는 이 플랫폼에 대한 사용법이 적혀 있었다. 나만의 기깔나는 랜딩페이지를 만들기 위해 dribbble 을 오가며 디자인을 물색했다. 찾아보니, 화면을 반으로 나누어서 왼쪽은 캐치프레이즈, 오른쪽은 직관적인 데모 를 넣는 것이 깔끔하고 직관적인 트렌드인 것 같았다. 그래서 나는 이와 비슷하게 만들고 싶었다.

하지만, 따로 데모 사진을 넣을 것이 없어서, 그냥 캐치프레이즈가 중간에 뜨고, 뒤에 재밌는 효과가 들어간, 그런 심심하지 않은 디자인을 만들기로 했다. 뒤의 효과는, 잔잔한 파도가 치는 물 표면 같은 효과를 만들고 싶었다. github profile readme 에서 비슷한 효과를 줄 수 있는 extension이 생각이 났기 때문이다.

일단 파도의 무늬를 이룰 그림을 그릴 방법을 찾았다. 보통 그냥 물결무늬 여러번 들어간 png 파일을 만들어서 구현하는 것 같던데, 뭔가 너무 무식하게 만드는 것 같기도 하고, 굳이 사진을 로드해가면서 구현해야 하나 싶어서 svg로 그리기로 했다. 그 와중에 너무 신기했던 데모. 그 와중에 또 신기했던 데모.

무늬를 figma에서 그리고, svg로 추출해서 넣었다. img 태그로 불러와도 자꾸 src prop을 읽지 못한다고 에러가 나서 진절머리 나서 react 코드에 그냥 때려박았다. 원래 하려던 모양새.

import Ripple from "./Ripple.svg";
...
	<img src={Ripple}/>
...

또는

import {ReactComponent as Ripple} from "./Ripple.svg";
...
<Ripple />
...

지금 구현한 모습. 그냥 svg 내용을 때려박았다.

<svg className={styles.ripple_image}viewBox="0 0 715 144" fill="none" xmlns="http://www.w3.org/2000/svg">

<path d="M0 144V16.6851C83.1301 -37.2584 155.902 57.7703 225 58C342.597 58.3909 350 5.50006 454 5.50006C558 5.50006 625.521 69.694 715 5.5V82.0001V144H0Z" fill="#6E9CE1"/>

</svg>

무늬 만들기는 이렇게 정리하고, 이제 움직이게 만들어야 했다. 네 개의 층을 만들고, 각기 다른 모션으로 움직이게 만들면 물이 요동치는 것처럼 보일 것 같았다. 그래서 keyframe으로 좌우좌, 우좌우 움직임을 만들었다. svg를 다 같은 것을 사용하는지라, 역동적이게 보이기 위해서 1) 좌우로 width: 400% 넓히고, animation-duration 을 다르게 하여 속도를 다르게 하고,top 을 다르게 주어 파고를 다르게 했다.

파도가 글자를 가리지 않으면 흰글씨가 보이지 않아서, 색조도 조절해주었다. 모바일 화면으로 보면 파도 아래부분이 드러나는 에러가 있어 css media query로 따로 분리해서 또 따로 animation과 top을 재정의해주었다.

p.s. 화면 영상 캡쳐하는 것은 어렵다! webm으로 녹화되어서 gif로 바꿔야 하는 것도 번거롭다.