모든 개발자는 자신의 작업물을 전시할 장소가 필요하지만, 대부분의 포트폴리오 웹사이트는 비슷하게 끝납니다. 저는 좀 더 강한 개성을 가진 무언가를 원했고, 그래서 React, Vite, 그리고 Tailwind CSS v4로 구동되는 네오브루탈리즘(neobrutalist) 포트폴리오인 Aditya Portfolio를 만들었습니다.

기성 템플릿에 의존하기보다는, 코드를 깔끔하고 유지보수하기 쉬우면서도 빠르고 반응성이 뛰어나며 독특한 경험을 만드는 데 집중했습니다.

🎨 디자인 철학: 네오브루탈리즘 (Neobrutalism)

현대적인 미니멀리즘 디자인 트렌드를 따르기보다는, 강렬한 비주얼과 높은 대비를 강조하는 네오브루탈리즘 접근 방식을 선택했습니다.

주요 디자인 요소는 다음과 같습니다:

• border-4 border-black을 사용한 굵은 검정 테두리
• 그라데이션 대신 생생한 배경색을 사용한 단색 팔레트
• 복고풍 데스크톱 스타일의 외관을 만들기 위한 shadow-\[4px_4px_0px_rgba(0,0,0,1)\]를 사용한 하드 오프셋 그림자
• 가독성 향상을 위한 높은 대비 타이포그래피
• 최소한의 시각적 혼잡을 가진 단순하고 기능적인 레이아웃

목표는 탐색하기 쉽지만 기억에 남는 포트폴리오를 만드는 것이었습니다.

⚡ 성능 최적화

시각적으로 풍부한 인터페이스가 성능을 저하시켜서는 안 됩니다. 개발 과정에서 저는 웹사이트를 감사하고 렌더링 효율성을 개선하기 위해 여러 영역을 최적화했습니다.

강제 리플로우(Forced Reflow, 레이아웃 스래싱) 제거

한 가지 문제는 스크롤 진행 표시기에서 발생했습니다.

처음에 스크롤 핸들러는 모든 스크롤 이벤트마다 scrollHeight와 clientHeight 같은 레이아웃 값을 재계산했습니다. 이러한 값들은 레이아웃 정보를 필요로 하기 때문에, 스크롤하는 동안 반복적으로 읽으면 불필요한 리플로우를 유발하고 렌더링 성능을 저하시켰습니다.

해결책

저는 다음을 통해 구현을 최적화했습니다:

스크롤하는 동안 최대 스크롤 거리를 마운트 시점과 window resize 시점에만 계산하기
requestAnimationFrame()을 사용하여 업데이트를 브라우저의 렌더링 주기와 동기화하기
React 상태 업데이트를 유발하는 대신 useRef 참조를 통해 프로그레스 바 직접 업데이트하기
스크롤 리스너를 passive로 등록하여 스크롤 성능 개선하기
useEffect(() => {
let maxScroll =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;

const handleResize = () => {
maxScroll =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
};

let ticking = false;

const handleScroll = () => {
if (!ticking) {
requestAnimationFrame(() => {
const scrollTop =
window.scrollY || document.documentElement.scrollTop;

    const progress = 
      maxScroll > 0 ? (scrollTop / maxScroll) * 100 : 0;

...

};

window.addEventListener("resize", handleResize);
window.addEventListener("scroll", handleScroll, {
passive: true,
});

return () => {
window.removeEventListener("resize", handleResize);
window.removeEventListener("scroll", handleScroll);
};
},
[]);

이러한 최적화는 불필요한 레이아웃 계산을 줄이고, 스크롤의 부드러움을 개선했으며, 지속적인 스크롤 중에도 UI가 반응성을 유지하도록 했습니다.

🚀 사용 기술 (Tech Stack)
React
Vite
Tailwind CSS v4
Framer Motion
React Icons
반응형 디자인 (Responsive Design)
성능 중심 아키텍처(Performance-focused architecture)

이 포트폴리오를 구축하는 것은 단순히 개인 웹사이트를 만드는 것을 넘어, 디자인 시스템을 실험하고, 브라우저 성능을 최적화하며, 프론트엔드 엔지니어링 모범 사례를 적용할 기회였습니다.

저는 새로운 프로젝트를 추가하고, 애니메이션을 다듬고, 더 나은 최적화 기술을 탐구함으로써 지속적으로 개선하고 있습니다.

포트폴리오: https://aadi-sharma.dev

앞으로의 개선 사항에 대한 여러분의 생각이나 제안을 듣고 싶습니다.