새해, 새로운 당신 포트폴리오 챌린지 by Simpled1
Source: Dev.to
이 글은 Google AI가 주관하는 New Year, New You Portfolio Challenge에 대한 제출물입니다.
About Me
저는 복잡한 알고리즘 로직과 인간 직관 사이의 격차를 메우는 데 열정을 가진 풀스택 엔지니어입니다. “New Year, New You” 챌린지를 통해 정적인 텍스트와 예측 가능한 그리드에서 벗어나고 싶었습니다. 엔지니어링 역량을 단순히 나열하는 것이 아니라 실제로 보여줄 수 있는 포트폴리오를 만들고자 했습니다. 코드는 경험되어야 한다고 믿으며—듣고, 보고, 상호작용할 수 있어야 한다고 생각해 정렬 알고리즘과 JavaScript 이벤트 루프와 같은 추상 개념을 구체적이고 인터랙티브한 경험으로 바꾸는 애플리케이션을 설계했습니다.
Portfolio
How I Built It
이 포트폴리오는 성능과 인터랙티브성을 위해 설계된 싱글 페이지 애플리케이션입니다.
Tech Stack
- Framework: React 19 & TypeScript (Vite)
- Styling: Tailwind CSS와 커스텀 “Cyber‑Minimalist” 미학 (네온 포인트가 들어간 Zinc/Slate 팔레트)
- Animation: 복잡한 레이아웃 전환과 물리 기반 인터랙션을 위한 Framer Motion
- Audio: 실시간 주파수 합성을 위한 Native Web Audio API (알고리즘 소리화)
- Deployment: Docker 컨테이너화 후 Google Cloud Run의 Nginx를 통해 서비스
Google Gemini AI Integration
AI를 단순 챗봇이 아닌 맥락을 이해하는 튜터로 만들고 싶었습니다. 무료 Gemini 2.5 Flash API를 활용해 시각화 엔진에 직접 통합했습니다:
- Algorithmic Commentary: 정렬 비주얼라이저에서 Gemini가 현재 배열 프레임(인덱스 비교, 교환 로직)을 분석하고, 교환이 일어나는 이유를 스포츠 해설가 스타일의 재치 있는 설명으로 생성합니다.
- Runtime Tutor: 이벤트 루프 시뮬레이션에서 AI가 Call Stack, Microtask Queue, Macrotask Queue를 분석해 우선순위 규칙(예: Promise가 Timeout보다 먼저 해결되는 이유)을 설명합니다.
- Semantic Maze Generation: 경로 찾기 섹션에서 사용자가 자연어 프롬프트(예: “3개의 방이 있는 벙커” 혹은 “나선형 패턴”)를 입력하면 Gemini가 해당 의도를 2D JSON 그리드 레이아웃으로 변환해 알고리즘이 해결하도록 합니다.
What I’m Most Proud Of
제가 가장 자랑스러워하는 것은 Event Loop Visualizer입니다. JavaScript 비동기 처리(Microtasks vs. Macrotasks)를 이해하기 어려워하는 초보 개발자들에게는 매우 난해한 주제이기 때문입니다. 저는 코드 실행, Call Stack, Web API를 실시간으로 시각화하는 단계별 디버거를 만들었습니다.
또한 Audio Synthesis 엔진도 자랑스럽습니다. 미리 녹음된 MP3를 사용하는 대신 Web Audio API를 이용해 실시간으로 오실레이터를 생성했습니다. 이를 통해 정렬 비주얼라이저가 “노래”를 부르게 되었으며, 정렬되지 않은 배열의 혼란스러운 소리와 정렬된 배열의 부드러운 상승 사운드를 실제로 들을 수 있어 알고리즘을 더 많은 감각으로 접근할 수 있게 했습니다.
