왜 내 포트폴리오에 슈퍼파워와 악당 갤러리가 있는가

Source: Dev.to

Introduction

이 제출물은 Google AI가 주관하는 새해, 새로운 당신 포트폴리오 챌린지를 위한 것입니다. 기술 역량을 보여주면서도 스스로를 너무 진지하게 여기지 않는다는 점을 강조하고 싶어 만화책 테마를 선택했습니다.

Tech Stack

• React 19와 TypeScript를 사용해 타입 안전성을 확보했습니다.
• Vite를 이용해 빠르고 최소한의 빌드 설정을 구현했습니다.
• Tailwind CSS에 커스텀 만화책 색상 팔레트와 고전적인 효과(회전된 텍스트, 굵은 테두리)를 적용했습니다.
• Recharts로 스킬 레벨 시각화를 만들었습니다.
• Docker(멀티스테이지 빌드)와 Google Cloud Run을 사용해 배포했습니다.

Content Generation with Google AI

Google AI Studio와 Gemini를 활용해 섹션 이름을 브레인스토밍하고 프로젝트 설명을 다듬었습니다. 만화책 같은 어조를 유지하면서도 솔직함을 잃지 않도록 했습니다.

Comic‑Book Theme

일반적인 헤딩 대신 섹션명을 다음과 같이 바꿨습니다:

• Superpowers → Skills
• Missions → Projects
• Villain Gallery → 내가 해결한 문제들(예: 시스템 장애, 급증하는 AWS 비용)

각 항목은 문제, 해결책, 그리고 그 영향에 대해 설명합니다. 마우스를 올리면 “KAPOW!”와 “ZAP!” 텍스트가 표시되고, 헤더는 만화 패널처럼 회전됩니다.

Interactive Features

• Konami Code 이스터 에그.
• Click‑combo system: 빠르게 클릭하면 시각 효과가 트리거됩니다.
• 배경에 Floating particles가 떠다니며 은은한 움직임을 줍니다.

모든 인터랙션은 접근성을 고려해 구현했습니다: 시맨틱 HTML, ARIA 라벨, 그리고 모바일에서도 완벽히 반응하도록 테스트했습니다.

Deployment Details

• 멀티스테이지 Docker 빌드: Node가 앱을 컴파일하고, Nginx가 정적 파일을 제공합니다.
• 최종 이미지 크기 ≈ 50 MB.
• Cloud Run이 자동 스케일링, HTTPS, 그리고 챌린지 라벨 요구사항을 처리합니다.
• 배포는 몇 분 안에 완료됩니다.

Results & Impact

• 9개의 클라우드 인증과 다양한 프로젝트(서버리스 게임, 카오스 엔지니어링 실험) 보유.
• 주요 성과:
  • 한 프로젝트에서 다운타임을 95 % 감소.
  • 다른 프로젝트에서 클라우드 비용을 35 % 절감.

Performance

• Lighthouse 점수가 모든 카테고리에서 90대 중반을 기록.
• 최적화된 Docker 이미지와 Cloud Run 자동 스케일링 덕분에 트래픽 급증에도 원활하게 대응합니다.

Conclusion

이 포트폴리오는 기술적 깊이와 개성을 동시에 보여주며, 내가 숙련된 동시에 접근하기 쉬운 사람이라는 인상을 남기고자 합니다.

Live Site

https://comic-portfolio-610288702971.us-central1.run.app

Source Code

GitHub Repository

Professional Profile

LinkedIn