내 포트폴리오를 인피니티 건틀렛처럼 만들기
Source: Dev.to
This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI
About Me
안녕하세요! 저는 Zacky이며, 실제 “사람들의 문제”를 해결하는 애플리케이션을 만드는 데 열정을 가진 풀‑스택 개발자입니다.
아이디어를 실현하기 위해 스택 전반을 다루며 주로 JavaScript, Node.js, PHP, PostgreSQL, 그리고 MySQL을 사용합니다. 최근에는 Rust 세계에도 깊이 뛰어들고 있습니다.
제 개발 철학은 다른 사람들을 돕는 도구를 만드는 데 초점이 있습니다. 예를 들어, 저는 RLI 라는 우아한 로딩 인디케이터 오픈‑소스 React 컴포넌트 라이브러리를 만들고 유지보수하고 있으며, NPM에서 점점 인기를 얻고 있습니다.
이 포트폴리오는 단순히 프로젝트를 보여주는 것이 아니라, 기술적인 “방법”과 창의적이고 인터랙티브한 디자인을 결합할 수 있는 제 능력을 보여주기 위해 만들었습니다.
Portfolio
(위에 삽입된 임베드가 작동하지 않을 경우, 여기에서 라이브 사이트를 확인할 수 있습니다: zacky.dev)
How I Built It
The Stack & Tools
- Framework: Remix.js (풀‑스택 React 프레임워크)
- Noteworthy Libraries: Three.js, Material UI
- Language: TypeScript
- Deployment: Google Cloud Run
- Code Editor: Antigravity
Design Decisions
- Hybrid Architecture: Remix는 스냅 같은 SPA 느낌을 제공하면서도 민감한 자격 증명과 로직을 서버 측에서 안전하게 처리합니다.
- Performance: 페이지에 대한 레이지 로딩을 구현해 초기 로드가 즉시 이루어지고, 필요한 경우에만 리소스를 가져옵니다.
- Accessibility & UX: 다크 모드와 라이트 모드를 제공해 사용자가 시청 환경을 직접 선택할 수 있으며, UI는 깔끔하고 직관적이면서도 복잡함이 없습니다.
- SEO: 서버‑사이드 렌더링을 통해 사전 렌더링된 페이지를 제공함으로써 SEO 순위를 높입니다.
The AI Assistant
개발 전반에 걸쳐 Google Gemini 3.0과 Antigravity 코드 편집기를 활용했습니다. Gemini는 개인 튜터 역할을 하며 복잡한 로직을 분해하고 “왜”를 먼저 설명한 뒤 “어떻게”를 알려주었습니다.
What I’m Most Proud Of
1. Successful GCP Deployment
포트폴리오를 Google Cloud Run에 배포한 것은 큰 성과였습니다. 과정이 원활했으며, 문서가 각 단계를 안내해 주어 큰 도움이 되었습니다.
2. The 3D Interactive Experience
Three.js와 직접 작성한 셰이더를 사용해 맞춤형 3D 인터랙티브 페이지를 만들었습니다. Gemini 3.0은 JavaScript 지식과 셰이더 프로그래밍에 필요한 복잡한 수학 사이의 간극을 메우는 데 중요한 역할을 했으며, 포트폴리오를 돋보이게 하는 부드럽고 인터랙티브한 시각 효과를 구현했습니다.
3. Fully Responsive Design
CSS 미디어 쿼리와 JavaScript를 조합해 모든 디바이스에서 원활히 작동하도록 설계했으며, 어디서든 일관된 경험을 제공합니다.
4. Solving Problems (The RLI Library)
오픈‑소스 작업을 사이트에 직접 소개하게 되어 자랑스럽습니다. RLI (React Loading Indicators)를 선보임으로써 다른 개발자들이 의존하는 솔루션을 만들고 있음을 보여주며, NPM에서 인기를 얻는 모습을 보며 오픈‑소스 코드를 계속해서 배포하고 싶어집니다.
읽어 주셔서 감사합니다. 여러분의 생각과 피드백을 언제든 환영합니다.