유동적이고 미니멀리스트 포트폴리오 만들기

Source: Dev.to

New Year, New You Portfolio Challenge Submission
이 작품은 Google AI가 주관하는 New Year, New You Portfolio Challenge에 제출된 것입니다

About Me

저는 성과 관리, 영업, 교육 분야 경력을 가진 AI Trainer(AIT)입니다. 이번 챌린지를 위해 “Rule of Three”(세 프로젝트 강조) 철학에 기반한 미니멀 포트폴리오를 만들었습니다. 집중된 사고방식이 잡음을 잠재우고, 과도한 복잡성을 배제한 미니멀리즘 접근법을 통해 모든 전환이 유동적이며 인터페이스가 거의 무게가 없는 듯한 느낌을 주고자 했습니다.

Portfolio

(포트폴리오 전시는 생략)

How I Built It 🐳

낮은 지연 시간을 달성하기 위해 런타임 정밀도에 집중했으며, 초기 자산이 전달된 뒤에는 상호작용이 유동적이고 인터페이스가 가벼운 느낌을 유지하도록 했습니다.

• Google AI Studio & Flash UI: Google AI Studio의 Gemini를 사용해 초기 UI 컴포넌트를 스캐폴딩하고 커스텀 애니메이션 로직을 생성했습니다. 핵심 카드 템플릿은 Flash UI 프로젝트에서 가져와 CSS와 JavaScript를 추출해 맞춤형 벤토 스타일 갤러리를 만들었습니다.
• Component Prototyping: CodePen에서 Flash UI 컴포넌트를 분리·정제한 뒤 최종 통합했습니다.
• Nano Banana Pro 🍌: 프로젝트 커버 이미지를 재생성해 정적 프리뷰를 포트폴리오의 모노크롬 미학에 맞는 시네마틱 장면으로 변환했습니다.
• Google Cloud Run ☁️: Docker 빌드와 “Scale‑to‑Zero” 전략을 사용해 Knative 서비스 정의로 배포했으며, 고성능·비용 중립적인 발자국을 위해 엄격한 리소스 제한을 적용했습니다.
• Serverless Communication: Google Apps Script를 미들웨어 API로 활용해 맞춤형 연락 시스템을 구축했습니다. 메시지는 Google Sheets에 직접 전송되고 이메일 알림을 트리거해 데이터베이스 없이 메시지를 처리합니다.

Performance Optimisation

• GSAP Scroll‑Driven Logic: GSAP를 사용해 스크롤 오프셋에 직접 연결된 스크러빙 전환을 구현, 사용자가 직접 UI 움직임을 제어하도록 했습니다.
• Direct DOM Manipulation: useRef와 네이티브 이벤트 리스너로 마우스 좌표를 추적해 Virtual DOM을 우회, 일관된 60 FPS를 유지했습니다.
• Lazy Video Loading: 카드가 활성 상태이거나 호버 상태에 들어갈 때만 HLS 스트림을 초기화합니다.
• Resource Constraints: Google Cloud 무료 티어 내에 머물도록 빌드를 256 MB 이하 메모리 사용량으로 최적화했습니다.

What I’m Most Proud Of ༄

The “Monochrome‑to‑Motion” Strategy

모노크롬 인터페이스를 사용해 인지적 잡음을 감소시켰으며, 생성 요소는 존재하지만 방해되지 않도록 했습니다. 갤러리 아이템은 정적 그레이스케일에서 호버/포커스 시 시네마틱 모션으로 전환되며, 커서 근접도에 따라 CSS 필터가 토글됩니다.

Mux Video Integration

모든 루프 비디오를 Mux에 오프로드해 적응형 비트레이트 스트리밍을 구현했습니다. 이를 통해 연결 속도와 관계없이 “Motion” 단계가 유동적으로 유지되고, 고비트레이트 처리를 클라이언트 GPU로 전환해 지연 없는 재생을 제공합니다.

Tablet‑First Approach

컴포넌트가 포커스와 활성 상태에 반응하도록 설계해, 태블릿에서는 “tap‑to‑reveal” 동작이 데스크톱의 호버 효과를 모방하도록 했습니다.

Conclusion: Orchestrating the Transition ⛏

이번 리팩터링은 보다 의도적인 방식으로 개발에 접근하게 된 변화를 보여줍니다—복잡성을 미니멀리즘 렌즈로 정제한 것이죠. 도구가 할 수 있는 일뿐만 아니라, 우리가 그것을 어떻게 제시하느냐가 중요합니다.