RPG 포트폴리오 만들기 — Kaboom.js 픽셀 RPG 단일 페이지

회사명 없는 이력서라는 게 말이 되나요? 하지만 NDA를 지키려면, 혹은 민감한 프로젝트 정보를 감춰야 한다면 어떻게 해야 할까요? 이 문제를 풀기 위해 RPG 포트폴리오를 만들었습니다.

왜 RPG 포트폴리오인가

전통적인 포트폴리오는 텍스트 중심입니다. 링크를 따라다니고, 스크롤하고, 읽는 과정이 수동적이죠. 반면 게임처럼 상호작용하는 포트폴리오라면 어떨까요?

RPG 형식을 선택한 이유:

• 🎮 Engagement: 클릭만 해도 이야기가 펼쳐짐
• 🗺️ Navigation: 맵 탐색 메타포로 경력 구조 표현
• 🎨 Distinctiveness: 기억에 남는 첫인상 (한 눈에 개발자임을 알 수 있음)

Kaboom.js — 웹 게임 개발의 민주화

Kaboom.js는 매우 간단합니다:

kaboom({
  width: 800,
  height: 600
});
 
add([
  sprite("player"),
  pos(400, 300),
  area(),
]);
 
onKeyDown("right", () => {
  // 이동 로직
});

기존 게임 엔진(Godot, Unity)은 설치·학습 곡선이 큽니다. 하지만 Kaboom.js는:

• No Build: 단일 HTML 파일에서 시작 가능
• CDN 기반: npm 설치 불필요 (버전 고정도 쉬움)
• 간결한 API: 3시간 안에 동작하는 게임을 만들 수 있음

핵심 아키텍처

portfolio-rpg/
├── index.html        # 진입점 (3KB, ES Modules로드)
├── game/
│   ├── main.js       # Kaboom 초기화, 게임 루프
│   ├── scenes/       # 씬 (마을, 던전, 보스 등)
│   ├── data/         # 경력 데이터 + redaction.js
│   └── assets/       # 스프라이트, 맵 타일
└── assets/           # 음악, 폰트 (CDN 링크)

No-Build 전략:

• <script type="module"> 로 ES6 import 사용
• 최신 브라우저는 모두 지원 (2025년 기준)
• 번들러 없음 = 배포 간단 (GitHub Pages 1초)

NDA 마스킹 — PUBLIC_MODE 한 줄

민감한 정보(회사명, KPI, 스크린샷)를 자동으로 일반화하려면?

// game/data/redaction.js
export const PUBLIC_MODE = true;  // ← 한 줄로 전환
 
export function maskCompanyName(name) {
  return PUBLIC_MODE ? `Company${name.charCodeAt(0)}` : name;
}
 
export function maskKPI(value) {
  return PUBLIC_MODE ? Math.round(value / 1000) * 1000 : value;
}
 
export const PROJECTS = [
  {
    title: "결제 시스템 고도화",
    company: maskCompanyName("토스"),  // PUBLIC_MODE면 "Company토"
    metrics: `${maskKPI(340)}% 성능 개선`,  // "300% 성능 개선"
  }
];

장점:

• 소스코드 공개 가능 (리뷰용)
• 한 줄 토글로 공개/비공개 전환
• 일관된 마스킹 규칙

실제 플레이

Live Demo: seongyeon1.github.io/portfolio-rpg/

게임플레이:

1. 마을에서 NPC와 대화 (프로젝트 설명)
2. 던전 입장 (기술 스택 시연)
3. 보스 전투 (핵심 성과 수치)
4. 엔딩 (연락처, 깃허브 링크)

매번 플레이할 때마다 약간씩 다른 이야기가 펼쳐지도록 대사와 맵을 설계했습니다.

배운 점

생각보다 쉬웠던 것:

• Kaboom.js API는 정말 직관적
• CDN 캐싱으로 로딩 속도 우려 불필요
• 깃허브 Pages는 정적 호스팅만으로 충분

다음은?

이 경험을 바탕으로:

• 다른 개발자도 똑같이 만들 수 있도록 템플릿 오픈소스화
• 팀 내 "성과 가시화" 용도로 확장 (연차 리포팅)
• VR/AR 포트폴리오로 한 단계 더 도전 (2026 로드맵)

참고

• Kaboom.js 공식 문서
• 폴더 구조 및 소스
• Pixel Art Generator — 스프라이트 생성
• No-Build 웹 개발 트렌드 (Jake Archibald)