포트폴리오에 WebGL 비주얼 추가하고 한영 폰트 통일

포트폴리오 전체 섹션에 WebGL 비주얼을 붙이고, 한/영 양쪽 폰트를 S-Core Dream으로 통일했다.

왜 이 시점에 WebGL였나

포트폴리오 사이트는 오래전부터 CSS 애니메이션 + SVG 수준으로 굴리고 있었다. 기능적으로 문제는 없었지만 "팀장이 직접 만든 포트폴리오"치고는 인상이 너무 조용했다. 뭔가를 보여줘야 하는 자리에서 밋밋한 화면은 곧 기회 손실이다. WebGL을 도입하기로 한 건 그 단순한 판단에서 시작했다.

Three.js를 택한 것도 자연스러운 흐름이었다. 직접 WebGL 셰이더를 짜는 건 관리 비용이 너무 높다. three.min.js를 프로젝트 로컬에 넣은 건 CDN 의존성을 끊기 위해서였다. 외부 CDN이 죽거나 버전이 튀면 포트폴리오 전체 비주얼이 날아가는데, 그건 내가 통제할 수 없는 리스크다. 팀 프로젝트에서도 항상 강조하는 부분이다 — 외부 의존성은 최대한 버전 고정 또는 로컬 번들로.

작업 구조

변경 파일을 기준으로 역할을 정리하면 이렇다.

핵심은 effects.js가 각 섹션의 컨테이너를 순회하면서 Three.js 씬을 붙이는 방식으로 설계했다는 점이다. 섹션마다 별도 canvas를 만들어 올리는 구조.

// effects.js 대략적인 패턴
document.querySelectorAll('.section-webgl').forEach((section) => {
  const canvas = document.createElement('canvas');
  canvas.classList.add('webgl-canvas');
  section.prepend(canvas);

  const renderer = new THREE.WebGLRenderer({ canvas, alpha: true });
  // ... 씬 / 카메라 / 메시 셋업
});

alpha: true로 배경을 투명하게 두고 기존 HTML 콘텐츠 위에 canvas를 레이어링하는 패턴이다. CSS에서 position: absolute로 캔버스를 섹션에 겹쳐 올리면 텍스트/버튼은 그 위에 살아있게 된다. effects.css에서 z-index 관리를 꼼꼼하게 잡지 않으면 인터랙션이 씹히거나 텍스트가 묻히는 문제가 생긴다. 이게 생각보다 자주 실수하는 지점이다.

S-Core Dream 폰트 결정

한/영 동시 지원이다 보니 폰트 선택이 까다롭다. 한국어 웨이트 표현이 잘 되는 폰트 중에서 영문 글리프도 깔끔한 것을 찾아야 했다. S-Core Dream은 두 조건을 모두 충족하면서 라이선스도 자유롭다. portfolio/index.html과 portfolio/en/index.html 양쪽에 동일하게 선언해서 언어에 따라 렌더링이 달라 보이는 불일치를 없앴다.

폰트 통일은 단순 미관 문제가 아니라 일관성 관리 문제다. 한국어 페이지는 예쁜데 영문 페이지에서 폰트가 깨지거나 다르게 보이면 전체 퀄리티 인상이 떨어진다. 팀원들한테도 항상 강조하는 부분 — 다국어 지원할 때 폰트/타이포그래피는 양쪽을 같이 QA해야 한다.

회고

이번 작업을 하면서 다시 느낀 건, WebGL 비주얼의 비용은 구현보다 성능 관리에 있다는 점이다. 섹션이 많아질수록 씬 수가 늘고 드로우콜이 쌓인다. Intersection Observer로 뷰포트 밖 섹션의 렌더 루프를 멈추는 최적화는 필수다. 지금 구현에 그게 빠져 있으면 다음 커밋에서 반드시 잡아야 한다.

포트폴리오라고 해서 코드 품질을 낮게 잡으면 안 된다. 오히려 내가 직접 짠 코드가 가장 잘 보이는 자리다.

끝.

🛒 이 글과 어울리는 추천 상품

• 기계식키보드 쿠팡에서 보기 →
• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.