ARCANE BREW 개발기 (1) - 아이디어와 세계관 설계

시리즈를 시작하며

포트폴리오용 Vue 3 프로젝트가 필요했다. 그런데 또 하나의 TODO 앱이나 대시보드를 만들고 싶지는 않았다. 면접관 입장에서 생각해봤다. 수십 개의 CRUD 프로젝트 사이에서 눈에 띄려면 시각적으로 인상적인 무언가가 필요하다.

판타지 연금술 상점이라는 컨셉이 떠올랐다. 처음엔 반쯤 농담이었는데, 생각할수록 기술적으로 매력적이었다. Canvas 파티클 애니메이션, 복잡한 상태 관리, 게임화 시스템, 인터랙티브 UI — 다양한 프론트엔드 기술을 자연스럽게 녹일 수 있는 주제였다. 단순한 포트폴리오가 아니라 하나의 작품을 만들기로 했다.

이 시리즈는 그 과정을 기록한다.

🌙 "아르카눔 골목" 세계관

프로젝트 이름은 ARCANE BREW. 마법의 양조, 연금술 조제라는 뜻이다. 세계관의 무대는 "아르카눔 골목" — 마법사들이 재료를 거래하고 물약을 조제하는 은밀한 거리다. 톤은 다크 판타지에 아카데믹한 연금술 분위기를 더했다.

5원소 체계

세계관의 근간은 5원소 체계다. 모든 재료, 레시피, 물약이 이 원소들의 조합으로 이루어진다.

원소	이름	색상	성격
🔥 화(Fire)	이그니스	`#ef4444`	파괴와 변환, 격렬한 반응
💧 수(Water)	아쿠아	`#06b6d4`	용해와 정화, 유연한 흐름
🌿 지(Earth)	테라	`#10b981`	안정과 성장, 견고한 기반
💨 풍(Air)	아우라	`#a78bfa`	휘발과 확산, 가벼운 촉매
✨ 영(Spirit)	에테르	`#fbbf24`	초월과 결합, 궁극의 원소

이 색상 체계는 UI 전반에 걸쳐 일관되게 사용된다. 재료 카드의 테두리 색, 파티클 효과, 물약의 발광 — 모두 원소 컬러를 기반으로 한다. 디자인 시스템과 게임 로직이 동일한 데이터를 공유하는 구조다.

콘텐츠 규모

세계관의 깊이를 위해 꽤 많은 콘텐츠를 설계했다.

33종의 마법 재료 — 각 원소별 6~7종, 각각 고유한 효과와 희귀도
22개 레시피 — 2~4개 재료의 조합, 원소 궁합에 따라 성공률 변동
19개 업적 — 탐험, 조제, 수집 카테고리별 도전 과제
108가지 지팡이 조합 — 코어, 나무, 장식의 조합으로 고유한 지팡이 생성

숫자 자체가 중요한 건 아니다. 핵심은 이 데이터들이 서로 유기적으로 연결된다는 점이다. 재료의 원소 속성이 레시피의 성공률에 영향을 주고, 특정 물약을 조제하면 업적이 해제되고, 업적 달성이 새로운 재료를 개방하는 식이다.

⚙️ 기술 스택 선정

세계관이 정해지면 기술 스택은 자연스럽게 따라온다.

Vue 3 Composition API + TypeScript — 5원소, 33재료, 22레시피를 타입 안전하게 관리하려면 TypeScript는 필수였다. 원소 간 궁합 계산, 레시피 검증 같은 복잡한 로직을 composable로 분리하기에 Composition API가 적합했다.

Tailwind CSS v4 — v4에서 새로 도입된 @theme 디렉티브가 결정적이었다. 원소 컬러, 골드 악센트, 다크 판타지 팔레트를 CSS 변수로 선언하면 bg-elem-fire, text-gold-400 같은 유틸리티 클래스가 자동 생성된다. 테마 시스템과 디자인 시스템을 하나로 통합할 수 있었다.

GSAP + ScrollTrigger — 연금술 상점에 걸맞은 극적인 스크롤 애니메이션이 필요했다. CSS 트랜지션만으로는 한계가 있는 시퀀스 애니메이션, 스크롤 기반 트리거를 GSAP이 깔끔하게 처리해준다.

Canvas API — 가마솥의 물약 조제 장면에서 파티클 시스템과 유체 시뮬레이션이 필요했다. Three.js까지 갈 필요는 없었고, 2D Canvas로 충분히 구현 가능한 범위였다.

Pinia + LocalStorage — 게임 상태(보유 재료, 해제된 업적, 제작한 물약)를 브라우저에 영속화해야 했다. Pinia store와 LocalStorage를 연동하면 서버 없이도 진행 상황이 유지된다.

📋 8 Phase 개발 전략

한 번에 완성할 수 있는 규모가 아니었다. 점진적으로 기능을 쌓아가는 전략을 세웠다.

Phase	내용	핵심 기술
1	기반 구축 — 스타일, 타입, 라우터	Tailwind v4, TypeScript, Vue Router
2	랜딩 페이지 — 첫인상이 전부	GSAP, ScrollTrigger, Canvas
3	재료 시스템 — 필터, 검색, 상세	Pinia, Transition Group
4	가마솥 조제 — 핵심 인터랙션	Canvas 파티클, 드래그 앤 드롭
5	비법서/갤러리 — 컬렉션	동적 레이아웃, 필터링
6	지팡이 공방 — 커스텀 조합	Canvas 합성, 상태 조합
7	프로필/업적 — 게임화	업적 시스템, 통계 시각화
8	폴리싱/배포 — 마무리	GitHub Pages, 퍼포먼스

각 Phase가 독립적으로 동작 가능한 단위다. Phase 3까지만 완성해도 재료 도감으로서 의미가 있고, Phase 4가 더해지면 인터랙티브 게임이 된다. 이런 점진적 구조 덕분에 중간에 방향을 틀거나 우선순위를 조정하기가 수월했다.

정리

이번 편에서는 ARCANE BREW의 출발점을 다뤘다. 포트폴리오 프로젝트로서의 목표, 5원소 기반 세계관, 기술 스택 선정 이유, 그리고 8단계 개발 전략까지. 설계 단계에서 시간을 충분히 들인 덕분에 이후 구현이 훨씬 수월해졌다.

다음 편에서는 Phase 1의 실제 구현을 다룬다. Tailwind CSS v4의 @theme 디렉티브로 판타지 테마를 구축하고, TypeScript 타입 시스템을 설계하고, Vue Router와 Pinia의 기본 골격을 잡는 과정이다.