움직이지 않는 화면은
설명서에 가깝습니다

✕ 스크롤 연동 3D 씬 Three.js · GLSL · Lenis

무엇을 — 제품이 스스로 분해되고 다시 조립되는 소개 페이지입니다. 사용자는 스크롤만 하면 됩니다.

어려웠던 것 — 스크롤은 사람마다 속도가 다릅니다. 프레임에 값을 그대로 물리면 빠르게 내리는 사람에게는 애니메이션이 건너뛰어 보였습니다.

어떻게 — 스크롤 값을 목표치로 두고 카메라는 그 값을 향해 감쇠하며 따라가게 했습니다. 빨리 내려도 부드럽고, 멈추면 정확한 위치에 섭니다.

남은 것 — 저사양 기기에서는 파티클 수를 절반으로 떨어뜨립니다. 판단 기준은 아직 기기 메모리 하나뿐이라 더 다듬어야 합니다.

↗ 링크 열기

✕ 커서 물리 실험 Canvas · 스프링 감쇠 · 포인터 이벤트

무엇을 — 커서 주변의 점들이 밀려나고, 커서 자신은 스프링으로 따라옵니다.

왜 만들었나 — 인터랙션 면접에서 자주 나오는 주제인데, 말로 설명하기가 어려워 직접 만져 볼 수 있게 만들었습니다.

배운 것 — 감쇠 계수를 조금만 올려도 "반응이 빠르다"가 "신경질적이다"로 바뀝니다. 숫자 하나가 인상을 결정한다는 걸 여기서 배웠습니다.

접근성 — 동작 줄이기를 켠 사용자에게는 밀려남만 남기고 따라오기를 끕니다.

↗ 링크 열기

✕ 가변 폰트 모션 Variable Font · GSAP · ScrollTrigger

무엇을 — 빨리 스크롤하면 글자가 굵어지고, 멈추면 원래 굵기로 돌아옵니다.

어려웠던 것 — 가변 폰트의 굵기를 매 프레임 바꾸면 브라우저가 글자를 다시 그리느라 버벅였습니다.

어떻게 — 굵기를 연속값 대신 다섯 단계로 잘랐습니다. 눈으로는 차이를 못 느끼는데 다시 그리는 횟수가 크게 줄었습니다.

결과 — 60fps를 유지합니다. 부드러움을 지키려고 일부러 덜 부드럽게 만든 셈입니다.

↗ 링크 열기

✕ 셰이더 배경 라이브러리 WebGL · OGL · 8KB

무엇을 — 실크·도트·스포트라이트 같은 배경을 한 줄로 붙일 수 있게 묶은 라이브러리입니다.

제약 — 무거우면 아무도 안 씁니다. three.js 대신 OGL을 골라 전체를 8KB로 맞췄습니다.

설계 — 모든 효과가 같은 모양의 함수를 내놓습니다. mount(대상, 옵션) → { destroy }. 이 계약 하나로 React든 바닐라든 같은 파일을 씁니다.

지금 — 사내 세 팀이 쓰고 있고, 이 포트폴리오의 배경도 그중 하나입니다.

↗ 링크 열기