새해, 새로운 당신 포트폴리오 챌린지: THE OTHER SIDE
Source: Dev.to
Introduction
이 글은 Google AI가 주관하는 New Year, New You Portfolio Challenge에 제출한 작품입니다.
제 이름은 로버트 이쇼카이며, 웹사이트라기보다 하나의 장소 같은 느낌을 주는 무언가를 만들고 싶었습니다. 저는 4년 차 모바일 개발자로, 부드러운 인터랙션과 사려 깊은 사용자 경험에 중점을 두고 있습니다.
이 챌린지는 Stranger Things 방영이 끝난 직후에 찾아왔고, 저는 평행 세계, 현실의 숨은 층, 그리고 작지만 사소해 보이는 힘이 어떻게 공간을 완전히 바꿀 수 있는지에 대해 생각하게 되었습니다. 제 포트폴리오가 바로 그런 느낌—사용자와의 상호작용에 따라 변하고 변형될 수 있는—을 담아내길 원했습니다.
Concept
정보를 전통적인 방식으로 제시하고 싶지 않았습니다. 스킬 목록을 스크롤하는 대신 사용자가 공간을 이동하도록 만들고 싶었습니다. 이를 위해 포트폴리오의 모든 요소—레이아웃, 스크롤 물리, 색상, 타이포그래피, 전환—를 재구상해야 했습니다. 각 요소가 살아있는 세계처럼 느껴져 Reality에서 The Other Side로 넘어갈 때 포털을 통과하는 느낌이 들도록 해야 했습니다.
이 프로젝트는 코드로 세계를 구축하는 실험이 되었습니다. Stranger Things의 평행 세계에서 영감을 받아 다음을 활용했습니다:
- 예상치 못한 색상 변화
- 미묘한 모션 물리
- 숨겨진 인터랙티브 이스터 에그
- 환경을 반응적이고 살아있게 만드는 동적 전환
스크롤 물리부터 비밀 “Konami” 개발자 모드까지 모든 선택은 단순히 읽는 것이 아니라 탐험할 수 있는 공간을 만들기 위한 것이었습니다.
Live site: THE OTHER SIDE (if the embed above doesn’t load)
Technical Details
- Framework: Flutter (Web)
- State Management:
flutter_riverpod(v2+) - Deployment: Google Cloud Run (Docker + Nginx)
The Struggle
Flutter Web은 전통적인 웹 프레임워크가 아니며, 그 차이를 즉시 느낍니다. 가장 큰 난관은 기능이 아니라 느낌이었습니다.
- 스크롤, 관성, 차원 간 전환이 무겁고 의도적이며 물리적인 느낌을 주어야 했습니다.
- 여러 차례 최적화와 늦은 밤 작업을 통해 물리 곡선과 렌더 타이밍을 미세 조정했습니다. 포털을 통과하는 느낌이 들 때까지 배포를 거부했습니다.
저는 Antigravity(Google의 고급 에이전시 AI)를 페어 프로그래밍 도우미로 활용했습니다. 특히 다음에 도움이 되었습니다:
- 전체 아키텍처 브레인스토밍
- 초기 Cloud Run 배포 중 반복적으로 깨지는 Nginx 설정 디버깅
AI가 실패 원인을 함께 고민해 주어 반복 작업이 크게 빨라졌습니다.
Secret Konami Code
비밀을 빼놓을 수 없었죠. 클래식 Konami Code를 입력하면:
↑ ↑ ↓ ↓ ← → ← → B A숨겨진 매트릭스 스타일 개발자 오버레이가 열립니다. 이는 시스템 루트 접근 권한을 부여하고, 제 이력서를 JSON‑파싱한 원본 PDF 형태로 다운로드할 수 있게 합니다. 호기심 많은 개발자에게 작은 보상을 주기 위한 이스터 에그입니다.
버튼 하나만 누르면 전체 애플리케이션이 변형됩니다:
- 색상 시스템
- 타이포그래피
- 레이아웃 물리
- 인터랙션 동작
모두 즉시 바뀌며 프레임 손실이 없습니다. Flutter Web에서 이 정도의 전역 변형을 최적화하는 것은 가장 어려운 기술적 과제 중 하나였지만, 부드럽게 동작하는 모습을 보면 그만한 가치가 있습니다.
Invitation
이 프로젝트는 저를 기술적인 면뿐 아니라 창의적인 면에서도 크게 벗어나게 만들었습니다. 웹이 페이지와 폼을 넘어설 수 있다고 생각한다면, The Other Side에 함께 들어와 주시길 바랍니다.