거의 미래지향적인 포트폴리오
발행: (2026년 2월 1일 오전 04:19 GMT+9)
3 분 소요
원문: Dev.to
Source: Dev.to
개요
이 제출물은 Google AI가 주관하는 새해, 새로운 당신 포트폴리오 챌린지를 위한 것입니다. 저는 최첨단 기술과 아름다운 디자인을 결합한 몰입형 웹 경험을 만드는 데 열정을 가진 개발자입니다.
Live URL:
핵심 기술
- React – 컴포넌트 기반 UI 아키텍처
- Vite – 최적화된 청크 분할을 갖춘 초고속 빌드 도구
- Three.js (
@react-three/fiber+@react-three/drei) – 몰입형 3D 그래픽 - i18next – 국제화 (PT/EN 지원)
- GSAP – 애니메이션
배포
- Google Cloud Run – Docker 기반 컨테이너 배포
- Google Cloud Build – CI/CD 파이프라인
- Nginx – 최적화된 MIME 타입을 제공하는 프로덕션 급 웹 서버
시각·성능 하이라이트
- 사이버펑크 미학 – 네온 색상, 그리드 배경, HUD 요소
- GPU 가속 애니메이션 – 모든 애니메이션이
transform과opacity사용 - 반응형 디자인 – 모바일 퍼스트 접근 방식과 유동적인 타이포그래피
- 접근성 – 시맨틱 HTML, ARIA 레이블, 올바른 헤딩 계층 구조
초기 빌드
- 기본 React + Vite 설정으로 시작했습니다.
- Three.js 3D 씬(신스웨이브 그리드, 네온 태양)을 포함한 히어로 섹션을 구현했습니다.
- 지연 로드된 섹션을 추가했습니다: About, Skills, Projects, Contact.
도구·최적화 과정
Google AI 도구를 직접 사용해 코드를 생성하지는 않았지만, 다음 Google 서비스를 활용했습니다:
- Google Cloud Run – 서버리스 배포 플랫폼
- Google Cloud Build – 자동화된 빌드 및 배포
- Google Antigravity – 개발 플랫폼, IDE를 에이전트‑퍼스트 시대로 진화시키는 프로젝트
반복적인 최적화 과정은 데이터 기반으로 진행했으며, PageSpeed Insights를 사용해 성능 병목을 식별하고 제거했습니다.
성능 지표
| 지표 | 값 | 비고 |
|---|---|---|
| FCP (First Contentful Paint) | ~1.5 s | 기준 대비 ~60 % 빠름 |
| TBT (Total Blocking Time) | 최소 (15,350 ms에서 감소) | |
| Forced Reflows | 29 ms 제거 | Framer Motion 제거로 |
| Bundle Size | 324 KB gzipped (critical JS) | |
| Three.js Optimizations | frameloop="demand", dpr={[1, 1.5]}, antialias: false, Intersection Observer pausing | |
| Memoized Components | HUDElement와 DecorativeLine을 React.memo() 로 래핑 |
인용구
“Busquem conhecimento” — ET Bilu