숨겨진 포트폴리오: 가상 토치로 웹을 탐험하는 개발자
7년차 소프트웨어 품질 보증 엔지니어(Software Quality Assurance Engineer)가 기존 포트폴리오의 틀을 깨고 독창적인 웹사이트 구축을 시도함
사용자가 가상 토치를 사용해 콘텐츠를 탐험하는 '숨겨진' 웹사이트를 구현하여 이색적인 사용자 경험(User Experience) 제공
바닐라 자바스크립트(Vanilla JavaScript) 기반으로 제작하여 높은 성능(Performance) 점수를 달성하고, 불필요한 의존성을 제거함
기존 포트폴리오의 한계와 차별화 전략
본문에서는 기존의 획일적인 포트폴리오 대신, 사용자가 능동적으로 참여하는 '숨겨진' 웹사이트를 구축하여 차별화를 시도했다.
'LOOK AT ME!' 방식 탈피: 수동적인 정보 전달에서 벗어나, 사용자가 직접 탐험하는 인터랙티브(Interactive) 경험 제공
미니 어드벤처(Mini-Adventure) 컨셉: 가상 토치를 활용하여 콘텐츠를 발견하는 과정을 통해 흥미 유발 및 몰입도 증대
UX(User Experience) 개선: 어두운 화면으로 인한 사용자 이탈 방지를 위해 자동 시작 기능 구현
바닐라 자바스크립트(Vanilla JavaScript) 기반의 성능 최적화
저자는 바닐라 자바스크립트(Vanilla JavaScript)를 선택하여 불필요한 라이브러리 의존성을 제거하고, 높은 성능(Performance)을 확보했다.
제로 디펜던시(Zero Dependency) 전략: Three.js, React 등 무거운 라이브러리 사용을 지양하고, 순수 자바스크립트(Pure JavaScript)로 구현
커스텀 렌더링 엔진(Custom Rendering Engine): 2D 캔버스(Canvas) 기반의 렌더링 엔진 직접 구현
Lighthouse 성능 100점: 불필요한 코드 제거를 통해 페이지 로딩 속도(Page Loading Speed) 및 렌더링 성능(Rendering Performance) 극대화
구글(Google) Gemini 3 Pro를 활용한 개발 생산성 향상
저자는 구글(Google) Gemini 3 Pro를 활용하여 개발 과정에서 수학 튜터(Math Tutor) 및 데브옵스 엔지니어(DevOps Engineer) 역할을 수행했다.
수학 문제 해결: 복잡한 유체 역학(Fluid Dynamics) 및 퍼린 노이즈(Perlin Noise) 관련 수학 문제 해결 지원
UI/UX 개선: 글래스모피즘(Glassmorphism) CSS 구현 지원
클라우드 인프라 자동화: 도커(Docker) 설정 및 구글 클라우드 런(Google Cloud Run) 배포 자동화 지원
결과적으로 AI(Artificial Intelligence) 기반 툴 활용을 통해 개발 효율성을 높였다.
