웹사이트에 RPG 레벨 시스템 넣는 법

내 웹사이트를 RPG 캐릭터처럼 만드는 방법 — 작업을 하나 끝낼 때마다 퀘스트로 기록되고, 경험치가 쌓이고, 레벨이 오르고, 레벨업하면 사이트에 비주얼 효과가 해금되는 게이미피케이션이다. 이 사이트(sonnyplot.com)에 실제로 붙였고, 지금 레벨 6이다.

왜 사이트를 RPG로 만드나

AI랑 사이트를 만들다 보면 문제가 하나 있다. 뭘 만들어도 흔적이 안 남는다. 어제 뭐 했는지는 git 기록을 뒤져야 알고, 그건 나만 본다. 그래서 작업 자체를 눈에 보이는 성장으로 바꾸고 싶었다. 게임에서 퀘스트 깨고 레벨 오르듯이.

어떻게 붙이나

시킨 건 한 문장이었다.

“이 사이트 자체를 RPG 캐릭터로 만들어줘. 작업 하나 끝날 때마다 퀘스트 완료로 기록되고, 경험치 쌓이고, 레벨 오르게.”

구조는 이렇게 잡았다.

퀘스트 장부(JSON 파일) — 작업마다 { 날짜, 종류, 제목, 설명, 경험치 } 한 줄씩 쌓는다. AI가 작업을 끝낼 때마다 스스로 여기에 적는다 (“토벌: 가짜 데이터 몬스터” 같은 제목으로)
경험치 배점 — 작업 종류별로 XP를 다르게 준다 (새 기능=크게, 버그 수정=작게 식). 누적 XP로 레벨·칭호를 계산하는 로직을 한 파일에 몰아둠
상태창 + 로그 페이지 — 홈에 현재 레벨·칭호를 띄우고, 퀘스트 로그 페이지에서 전체 모험 기록을 본다

핵심은 “작업 → 장부 기록”을 습관으로 박아두는 것. 그래야 사이트를 만질 때마다 캐릭터가 자란다.

레벨업 보상 — 이게 재미 포인트

그냥 숫자만 오르면 재미없다. 그래서 레벨업마다 홈에 비주얼을 하나씩 해금되게 했다.

Lv.5 — 빛 입자가 떠다니기 시작
Lv.6 — 은은하게 숨쉬는 글로우
Lv.7 룬 각인 · Lv.8 오로라 · Lv.10 별하늘 (아직 잠들어 있음)

사이트를 키우는 맛이 생긴다. “다음 레벨 뭐 해금되지?” 하면서 자꾸 작업하게 된다.

그 외 같이 붙은 것들 (소소하게)

같은 날 홈에 다른 것도 여럿 붙었다. 자세한 건 다음 글에서 다루고, 목록만:

살아있는 대시보드: 시세 위젯(나스닥·S&P·비트코인/코스피·환율), AI 경제 브리핑, CNN 공포·탐욕 지수, 뉴욕·서울 시계, 검색창, 포스트잇
앰비언트 시스템: 방문자 지역의 날씨·시간에 따라 사이트 분위기가 바뀐다 (비 오면 빗방울, 밤엔 달 위상)
검색엔진 등록: sitemap·robots.txt 생성 + 구글 Search Console·네이버 서치어드바이저 등록
삽질도 있었다 — 야후가 코스피에 +6% 유령 스파이크를 보내 차트가 깨진 것(필터로 해결), 네이버 소유확인이 404 뜬 것(확인 방식이 ’HTML 파일 업로드’로 돼 있어서, 라디오 버튼 바꾸니 통과)

결과

✅ 퀘스트 23개 완료, 레벨 6, 비주얼 2종 해금
✅ 비용 0원, 내가 친 코드 0줄

게이미피케이션의 진짜 효과는 따로 있다. “만들까 말까” 고민이 사라진다. 아이디어가 떠오르면 바로 시키고, 망하면 지우면 되고, 그것도 퀘스트로 남으니까 일단 다 해보게 된다.