널푸공간

[변방계 테스트 #4]: 전체 투표 모드 추가 후 제자리 걸음..

NERDEYPIRTE — Tue, 3 Mar 2026 11:54:55 +0900

시뮬레이션 컨텐츠가 완성에 가까워지면서 다른 추가할 거리가 없을까 고민하던 중, 전체 투표 모드를 신설했다.

시청자 참여 컨텐츠처럼, 자신의 투표가 선택에 영향이가는 그런 컨텐츠이기 때문에 시즌제로 운영한다면 하나의 재미거리가 될 것 같았다.

전체 투표 모드 UI

핫타임에 투표를 할 수 있고, 하나의 턴(하루)마다 30분의 제한이 있으며, 투표는 개인당 최대 3개까지 할 수 있게 만들어 너무 자신의 한표가 쓸모없어지는 느낌을 막았다.

그러나 결국 이것도 사용자가 많아야 즐길만한 컨텐츠고, 이미 시뮬레이션 모드를 진행한 사람들을 기준으로 아주 새로운 재미가 되지 못했다는 치명적인 단점이 있었다.

방문자 추이

결국 이는 사용자들에게 어필이 되지 못한 채로 방문자 수는 계속해서 하락 추세를 보였다.

설상가상으로 시뮬레이션 자체를 플레이 하는 사람도 줄었다.

처참한 최근 기록

신학기가 시작하고, 새로운 프로젝트를 진행하고 있기에 이 변방계 테스트에 관심을 쏟을 수가 없었다.

이 저조한 성적은 남을 탓하는게 아니라 나 자신을 탓해야한다.

프로젝트성 사이트가 아니라 장기적으로 가기 위해서는 계속해서 부족해지는 니즈를 파악해야하고, 그럴 수 없다면 짧고 간단하게 치고 빠질 수 있으며, 동시에 중독성이 강한 그런 컨텐츠를 머릴 싸매며 고민해야한다는 것을 이번 개발을 통해 알게 되었다.

이 사이트를 회생시키려면,

1. 기록 경신에 큰 재미를 느끼게 해야한다. (시즌 최고기록자 상품등 유인이나, 자랑 등 성취감을 극대화시키는 방안)

2. 테스트나 시뮬레이션 과정이 더 쉽고 간단해져야한다. (특히 60개의 질문들은 다시 테스트할때 부담감만 극대화시킨다.)

2-1. 그래서 테스트 질문과 문항이 섞이지 않고 그대로 있는것이 좋을거라 판단된다. 이래야 다시 테스트할때 어떤걸 바꿔볼지, 이번엔 어떤 선택지를 고를지에 대해 뇌를 더 덜쓰게 만들테니.

3. 새로운 컨텐츠를 만들어야한다. 새로운 이벤트나.

아무튼 자주는 아니겠지만, 계속해서 이 변방계 테스트 사이트는 개선해나갈것이다.

[변방계 테스트 #3]: 난이도 조정 & 이벤트 추가 (+애니메이션)

NERDEYPIRTE — Sun, 15 Feb 2026 12:03:20 +0900

부활혈청 등 특별한 이벤트

기술, 숙련도에 따른 선택지별 성공확률

이벤트의 위급함을 강조

여러가지 엔딩 메시지

1. 난이도가 너무 쉬워서 10000스테이지를 넘거나 하는 일이 발생했습니다. 뇌지컬, 선택의 신중함보다 지루함을 버티는 것, 근성이 주가되었습니다. 이러면 다회차 플레이에 매력을 느끼지 못하게 되고, 무엇보다 그냥 게임이 재미없다고 생각하게됩니다. 이건 큰 문제입니다.

2. 카드 시인성과 습격같은 특수상황을 더 잘 알 수 있고 긴박함을 주기 위해 디자인을 개선했습니다.

3. 진짜 카드를 뒤집고 넘기는 느낌이 나도록 애니메이션을 추가했습니다.

4. 엔딩을 달성하기 어렵도록 만들었습니다. 진짜 림월드처럼 우주선 탈출 버튼 누르자마자 엔딩이 아닌, 15일을 꼭 버텨야만 엔딩을 볼 수 있게 되었습니다. 물론 15일 버티기 난이도는 어렵습니다.

5. 100일차마다 점점 더 난이도가 올라갑니다. 1000일도 달성하기 매우 어려운 과제라고 느끼고, 성취감을 느낄 수 있도록 난이도는 계속 패치할 예정입니다.

+ 나중에 다인 플레이도 제작해보고싶은데, 아직 이에 대한 아이디어가 나오진 않네요. 시뮬레이션이랑 또 다른 느낌과 여러명에서 생존하고 있다는 실감을 주고 싶은데,,

아무튼 진짜 게시글 쓰기 버거워도 무조건 이렇게 기록용으로 남기겠습니다. 최근에는 codex 사용해보고있는데 멀티에이전트 기능이 확실히 안티그래비티보다는 좋다는 느낌을 받아요. 오히려 인간의 아이디어가 나오는 속도가 느릴정도로 구현이 점점 빨라지고 있습니다.

[변방계 테스트 #2]: 시뮬레이션 고도화 및 편의성 패치

NERDEYPIRTE — Mon, 9 Feb 2026 20:50:48 +0900

https://test.ratkin.org/

림월드 정착민 테스트 | 변방계 생존 시뮬레이션

림월드 세계관에서 당신의 정착민 특성과 기술을 확인하세요. 변방계 생존 시뮬레이션 테스트입니다.

test.ratkin.org

일단 시뮬레이션 완성 후 배포했습니다. 직접 해보시면 뭐가 변했는지 잘 보여요

메인 페이지

1. 시뮬레이션, 리더보드 버튼 추가
2. 로그인 기능 추가

3. 사소하지만 업데이트 알림 기능 추가

첫번째부터 시뮬레이션 기능하기로 들어가면

정착민 보관함

이렇게 정착민 보관함 페이지로 이동하고, (로그인 후 생성했다면) 자동으로 저장된 정착민들이 보입니다.

상세보기로 정보를 전부 볼 수 있고 (/result 페이지로 이동) 시뮬레이션 버튼을 누르면 게임이 시작됩니다!

시뮬레이션 게임 화면 수정 전 → 수정 후

이게 조금 바뀐 시뮬레이션 게임화면입니다

1. 스킬 레벨별로 더욱 성공확률 세분화

2. 체력 등 자원 시인성 증가

3. 특성 / 기술 / 도움말 추가

이 외에도 특성별로 특별한 선택지가 추가되거나, 기술 레벨이 일정 이상이면 추가되는 재미 요소도 넣어놨습니다.

하지만 지금 가장 먼저 고쳐야 할 문제가 있었는데, 리더보드를 보면 그 문제점이 드러납니다

리더보드 화면

10412일, 3400일, 3333일...

대단한 수치이지만, 이는 엄청난 실력과 사기적인 특성의 정착민으로 달성한 기록이 아닙니다.

시뮬레이션 난이도가 너무나도 낮았죠.

2일당 식량 1이 줄어드는 것, 랜덤으로 습격 이벤트가 나오는것, 기지 강화 시스템이 전부 모여서 만든 결과입니다.

피드백도 "계속 진행하다 현타가 온다, 지루하다, 소모값 없이 무한동력이 가능하다" 같은 피드백이 나왔습니다.

그렇다고 아무런 대책 없이 습격 이벤트 빈도를 2배 늘리거나, 하루에 식량 1개가 소모되거나 하게된다면 어떻게 될까요.

플레이가 불합리해지거나, 너무나 운에 기댄 게임이 됩니다. 즉, 재미가 없어진다는 것이죠.

그래서 난이도는 올리지만, 플레이어의 판단이 더 중요해지는 그런 요소가 필요했습니다.

그렇게 만든 숙련도 시스템.

기존 생성된 정착민이 실제로 성장을 하며 게임을 풀어간다.

기술과 연관된 선택지를 고르면, 정착민은 숙련도를 얻습니다. 그리고 일정 숙련도가 되면, 레벨이 오르죠.

이를 위해서 구간별 확률(0-3일때 30%)에서 레벨별 상세 확률로 시스템도 바꿨습니다.

농사에 관련된 선택지를 계속해서 선택한다면, 점점 확률도 올라갑니다.
즉 플레이어가 나중을 위해 확률은 낮지만 숙련도를 택할지, 아니면 지금 확률 높은 선택지를 고를지 선택할 수 있게 된 겁니다! 아주 굿이죠

아직 수치를 조금만 조정해도 너무 어렵다와 너무 쉽다로 게임이 휙휙 바뀌지만,
계속 기능을 추가하고 수정하면 '적당히 어렵지만 도전할만하다'로 게임이 완성될 것 같습니다.

이제 또 테스트를 거쳐 피드백을 들어봐야죠!

감사합니당

[변방계 테스트 #1]: 시뮬레이션 기능 추가

NERDEYPIRTE — Sat, 7 Feb 2026 12:41:21 +0900

지금부터는 형식 신경쓰지 않고 개발일지를 올리기로 하겠습니다,,

어떤 기능을 추가했니, 어떤 기술을 사용했니를 상세하게 기록하는 것보다 꾸준하게 계속 올리는게 더 좋은 것 같아서..

업데이트 겸 근황 겸으로 앞으로는 자주 올릴게요!

먼저 통계 부분 수정했슴다

문제점 1. 통계가 쌓이면서 top10 특성이 변하지가 않음.

2. 마찬가지로 MBTI도 계속 1등이 1등, 꼴찌가 꼴지. 이건 재미없지.

그래서 이번 주 통계만 따로 떼어내서, 통계 페이지에서 먼저 보여주도록 변경했스요

자신이 어떤 정착민을 만들었는지 티도 좀 잘 날겁니다 이제부턴.

즉? 아주 작은 성취감이라도 줄 수 있게 된 것!

하지만 이걸론 방문자를 잡아둘 순 없슴니다

결과보겠다고 그 긴 설문조사를 한번 더 할 '동기', '동기'가 부족하다 아입니까.

그래서 생존 시뮬레이션을 추가한겁니다.

어떻게든 방문자들에게 테스트가 끝난 뒤 재미거리를 더 주고 싶었어요.

그래서 미니 림월드를 방문자들이 자신의 캐릭터로 직접 플레이 할 수 있도록 만드는 것을 기획!

60일을 살아남으면, 우주선을 탈 수 있고, 그러면 엔딩인걸로.

실패하면 다시 캐릭터를 만들어서 더 오래 살아남을 수 있도록 만들도록 유도했어요.

처음 프로토타입은 이렇게 로그 형식으로 만들었는데,

이것도 아날로그틱해서 미적으론 이쁜거 같아서 기분은 좋았었습니다.

가장 초기 버전은 중요사건에 선택지도 없고 치료제, 캠프 강화처럼
플레이어가 개입할 수 있는 요소가 거의 없는 수준이어서 재미가 아예 없는 수준이었기에 직접 상호작용 할 수 있는 기능을 잔뜩 추가.

또 그러다보니 시인성이 너무 안좋아져서... 그게 문제였죠.

다회차 플레이가 권장되도록 설계한건데 시인성 안좋다? 이건 좀 큰 문제져.

UI를 어떻게 변경해야 직관적이고, 눈도 안아프고, 이쁘기도 이쁠까 고민 하다가 Reigns라는 게임을 떠올렸습니다.

로그라이크 스토리 카드 게임이었나, 아무튼 카드를 넘기듯 선택지를 고르고 게임이 진행되는 그런 디자인입니다.

이건 아주 직관적인 UI고, 참고할만하다! 고 느꼈습니다.

그래서 이걸 토대로 카드형식으로 일차를 설명하고, 선택지를 만들고, 인디케이터를 하단으로 배치.

그 결과가 밑의 사진입니다!

좀 더 게임같은 느낌으로 변경!

이전보다 훨씬 발전한 UI가 되었습니다. 야호

다음 게시글에서는 이제 이걸 동작하게 만드는 계정 시스템, 그리고 데이터베이스, 사용자 경험 개선에 대해 쓸거같은데,

이게 걱정되는게 재미가 너무 없을 것 같아서요,,

진짜 재미 없다 싶으면 계속 시뮬레이션이나 기능 추가 중점으로 게시글 업로드할겁니다. 댓글로 많은 의견 부탁드립니다!

우리존재파이팅

[개발 일지 #4]: 백스토리 대격변 및 공유 UX 최적화

NERDEYPIRTE — Sat, 20 Dec 2025 14:42:32 +0900

안녕하세요! 널푸입니다!

단순한 MBTI 테스트를 넘어, 한 명의 '림'을 생성하는 마지막 작업!

4일차는 데이터의 깊이와 사용자 경험을 완성하는 것입니다. 겉핥기식 질문에서 벗어나 림월드 위키를 파고들며 정확한 백스토리 시스템을 이식했고, 공유 과정에서의 사소한 불편함을 제거하는 데 집중했습니다.

1. 림월드 정통 백스토리 DB 구축 (40종)

단순한 결과 텍스트가 아닌, 실제 게임 데이터 구조를 본뜬 백스토리 시스템을 구축했습니다.

데이터 규모: 아동기 15종, 성인기 25종 (총 40종)
지원 카테고리: 부족, 제국, 번화계, 중세, 해적, 외지인 등 7개 스폰 그룹.
정교한 메타데이터:
- 스킬 보정: 각 백스토리별 능력치 보너스/패널티(skillBonuses)
- 작업 결격: 특정 작업 수행 불가 설정(workDisables)
- 연관 특성: 특정 백스토리에 따른 고정 특성(traits) 매칭

Backstory Schema 예시:

JSON

{
  "id": "imperial_soldier",
  "title": "제국 보병",
  "skillBonuses": { "Shooting": 3, "Melee": 2 },
  "workDisables": ["PlantWork", "Artistic"],
  "spawnCategories": ["Imperial"]
}

2. 질문 확장: "당신은 어디서 왔습니까?"

사용자 성향 파악의 정확도를 높이기 위해 Part 2(배경 질문)의 선택지를 기존 4개에서 최대 6개로 대폭 늘렸습니다.

다양성 확보: 제국(Imperial), 중세(Medieval) 등 신규 출신지 및 유년기 활동 추가.
매칭 태그 도입: 각 답변에 backstory_preference 태그를 부착, 향후 구현될 백스토리 자동 매칭 알고리즘의 기반을 마련했습니다.
효과: 답변 다양성이 200% 증가하여 더욱 입체적인 정착민 생성이 가능해졌습니다.

3. 공유 UX의 완성: 디스코드 링크와 Kakao SDK

"공유가 귀찮으면 바이럴은 일어나지 않는다"는 원칙하에 공유 기능을 대대적으로 개편했습니다.

디스코드(Discord) 최적화: * 단순 링크 복사를 넘어 discord:// 프로토콜을 활용한 앱 자동 실행 구현.
- 앱 실행 후 500ms 뒤 자동으로 클립보드에 URL을 복사하여, 사용자가 바로 Ctrl+V만 할 수 있도록 동선을 설계했습니다.
카카오톡 공유: * api/og를 통한 동적 이미지 연동 완료.
- Next.js 환경에서의 SDK 초기화 로직 안정화.
도메인 마이그레이션: * test.ratkin.org로의 도메인 변경에 따른 모든 메타데이터 및 사이트맵(Sitemap) 동기화.

4. 마치며 :

이젠 정말 배포 뿐입니다! 배포 후 사용자들의 피드백이 무엇보다 중요하죠. 이제 다음 포스팅에는 실전 테스트 및 시행착오, 실제 배포 한 뒤 사람들의 피드백을 듣고, 수정하는 것까지 포스팅하겠습니다!

메인 페이지 이미지입니다! (52명은 제가 테스트한 횟수라 이후 런칭때는 초기화합니다!)

[개발 일지 #3] 공유 기능 추가 및 랜딩 이미지 (OG Image & i18n)

NERDEYPIRTE — Thu, 18 Dec 2025 00:29:40 +0900

테스트 결과가 아무리 정확해도, 다른 사람에게 보여줄 수 없다면 그저 낭비일 뿐이죠.

3일차 개발은 테스트의 꽃인 바이럴(Viral) 요소 구현에 집중했습니다. 단순히 링크를 던지는 것을 넘어, 링크를 마주하는 순간 클릭을 자극하는 동적 OG 이미지와 다국어 시스템을 구축한 과정을 공유합니다!

1. 동적 미리보기 이미지 (Dynamic Open Graph)

카톡방에 링크를 올렸는데 공용 로고만 덩그러니 있으면 재미없겠죠? 사용자의 결과값에 따라 실시간으로 생성되는 썸네일을 구현했습니다.

이 사진은 다음번에 기록할 카카오톡 API를 사용한 카카오톡 공유 기능입니다!

이미지는 결과값의 "이름"과 "MBTI"를 비추며, '림월드'를 모르는 사람들에게도 흥미를 심어 주도록 만들었습니다. 결과 확인하기 창을 통해 더 상세한 특성까지 볼 수 있죠!

기술 스택: Next.js ImageResponse (@vercel/og)
구현 로직:
1. 결과 페이지 URL에 쿼리 파라미터(?name=홍길동&trait=방화광) 주입.
2. 크롤러(카카오, X 등)가 URL 접근 시 Edge Function이 요청을 가로챔.
3. JSX/Tailwind 기반 레이아웃에 실시간 데이터를 바인딩하여 PNG 이미지로 렌더링.

typescript
// app/api/og/route.tsx (Simplified)
export async function GET(request: Request) {
    const { searchParams } = new URL(request.url);
    const name = searchParams.get('name');
    const mbti = searchParams.get('mbti');
    
    return new ImageResponse(
        (
            <div style={{ background: '#111', color: '#fff' }}>
                <h1>{name}님의 정착민 유형</h1>
                <div style={{ fontSize: 60 }}>{mbti}</div>
            </div>
        ),
        { width: 1200, height: 630 }
    );
}

2. 공유 버튼 삼총사 (카카오톡, X(트위터), 디스코드)

한국 시장 필수인 Kakao SDK와 글로벌 타겟의 X(Twitter), 범용적인 디스코드 그리고 범용 클립보드 복사 기능을 연동했습니다.

발생한 문제들: Next.js 환경에서 window.Kakao 객체 참조 시, 스크립트 로드 전 호출되어 발생하는 undefined 에러. 최대한 외부적인 요소를 통제 후 코딩 툴에 문제 해결을 요구해야 문제들이 해결됩니다.
해결 과정: next/script의 onLoad 전략과 커스텀 훅을 통해 SDK 초기화 상태를 엄격히 관리했습니다. (자세한 해결 과정은 5일차에 더 깊게 다룰 예정입니다.)

이젠 실제로 동작하는 공유 버튼!

3. 글로벌 확장 - 영어 지원 (i18n 기초 공사)

림월드는 전 세계 유저가 즐기는 갓-겜입니다. 한국어에만 가두기 아쉬워 국제화(i18n) 엔진을 올렸습니다.

데이터 저장: 기존 단일 JSON 구조를 언어별(ko, en)로 파편화하여 관리.
언어: useLanguage() 훅을 도입. 단순히 텍스트만 치환하는 것이 아니라, MBTI 계산 로직에 투입되는 데이터 소스 자체를 실시간으로 스위칭합니다.

4. 마치며 :

"테스트 - 결과 확인 - 공유"로 이어지는 핵심 루프는 완성되었습니다. 하지만 아직 결과 페이지의 '백스토리'가 림월드 특유의 맛을 살리지 못하고 있었습니다. 어린 시절과 성년 시절이 각자 3개의 경우의 수 밖에 없었고, 그것마저 별로 연관된 느낌이 아니었습니다. 단순 텍스트였던 백스토리를 게임 내 데이터 수준으로 고도화 및 질문 가짓수 대폭 추가 및 알고리즘 정교화를 이뤄내야 하죠.

그리고 이것이 개편 후 이미지입니다!

4일차에는 정착민의 인생을 결정짓는 백스토리 개편 이야기로 돌아오겠습니다! 감사합니다.

[미니 일지 #1] 도로롱 웹사이트 제작부터 배포까지

NERDEYPIRTE — Wed, 17 Dec 2025 08:22:49 +0900

귀여운 3D 캐릭터 '도로롱'을 웹사이트에 띄우고, 아스키 아트(ASCII Art) 효과를 적용해 레트로 감성을 더하는 아주 미니미니한 프로젝트를 진행했습니다.

프로젝트 개요 : 그저 "도로롱"

주요 기술 스택: React, Three.js, vite
배포 환경: GitHub Pages
핵심 구현: 3D 모델 렌더링, 쉐이더 기반 배경 제거, AsciiEffect 커스텀 튜닝
Antigravity 기반 바이브 코딩

1. ️ 원본 이미지 퀄리티 확보 (feat. 제미나이 활용 AI 업스케일링)

3D의 판에 2D캐릭터를 띄울 때 가장 먼저 봉착한 문제는 원본 이미지의 낮은 해상도였습니다. 해상도가 낮으면 3D로 돌리거나 확대 했을 때 깨져 보였고, 특히 색감이 미적으로 아름답지 못한 치명적인 문제가 있었습니다. 결국 도로롱을 보는 것이 전부인 사이트이기 때문에 이 비주얼 업스케일링은 필수적인 요소였습니다.

제미나이를 통한 도로롱 업스케일

그런 문제는 제미나이를 통해 업스케일링해, 쉽게 퀄리티를 확보했습니다!

2. Three.js AsciiEffect 커스텀 튜닝 상세 분석

Three.js의 AsciiEffect는 3D 씬을 텍스트로 쉽게 변환해 주지만, 프로젝트의 완성도를 높이기 위해 몇 가지 커스텀 작업이 필요했습니다.

2.1. 배경 제거를 위한 Fragment Shader 활용

캐릭터 이미지를 3D 사각형 판(Plane)에 매핑했기 때문에, 캐릭터 주변의 흰색 배경까지 아스키 아트로 변환되어 지저분해 보였습니다.

이슈	해결 방법: 배경 제거 쉐이더
흰색 배경 영역이 그대로 텍스트로 변환되어 캐릭터가 사각형 안에 갇혀 보임	Fragment Shader를 커스텀하여 RGB 값이 0.9 이상인 픽셀(거의 흰색)을 렌더링에서 제외(discard) 시켰습니다.
결과	캐릭터만 정확히 텍스트로 변환되어 배경에 투명하게 둥둥 떠 있는 듯한 효과를 구현했습니다.

2.2. Overscan을 이용한 렌더링 영역 정렬

AsciiEffect가 화면에 정확히 딱 맞게 렌더링 되지 않고 미세하게 여백이 생기거나 가장자리가 잘리는 현상이 발생했습니다.

해결: 렌더링 영역의 CSS 크기를 130%로 강제 확대하고, CSS transform 대신 top: -15%, left: -15% 속성으로 캔버스를 이동시켜 중앙을 맞추는 방식으로 화면 밖으로 여백을 밀어냈습니다. 이로써 아스키 아트가 화면 전체를 깔끔하게 채우도록 정렬했습니다.

2.3. 가독성 및 레트로 스타일 강조

텍스트가 흐릿해 보이면 명확성 및 레트로 감성이 반감되기에, CSS 스타일을 강력하게 적용했습니다. (픽셀 아트를 확대시 자동으로 안티에일리어싱이 걸려 흐릿하게 보이는 문제와 비슷하다고 보면 됩니다)

스타일링: 폰트는 시스템 기본 **monospace**로 고정하고, **font-weight: bold**와 **color: black**을 강제하여 쨍하고 선명한 터미널 스타일의 가독성을 확보했습니다.

완성본! 겁나귀엽습니다,,

3. 방문자 카운터 적용과 서비스 이슈 해결

사이트 하단에 '나만의 웹사이트' 느낌을 더하기 위해 방문자 수 카운터를 추가하려 했습니다.

이슈: 가장 유명한 hits.seeyoufarm.com 서비스의 종료(2025년 3월 예정)로 인해 배지가 표시되지 않는 버그가 발생했습니다.
해결: 대체 서비스인 **hits.sh**를 찾아 바로 적용했습니다.
스타일링: 사이트의 귀여운 분위기에 맞춰 카운터 배지 색상도 Pink (#FF69B4) 테마로 통일했습니다.

4. GitHub Pages 배포

vite로 빌드 후 GitHub Pages를 통해 무료로 호스팅했습니다.

간단한 미니 프로젝트였지만, 3D 렌더링, 쉐이더 커스텀, 아스키 아트 튜닝, 배포 경로 설정 등 웹 개발의 여러 요소를 알차게 경험해 볼 수 있었습니다.

배포 사이트: https://nerdeyprite-ctrl.github.io/doro/
GitHub Repository: https://github.com/nerdeyprite-ctrl/doro

도로롱 귀여워!

[개발 일지 #2] 시스템 고도화 (특성 가중치 & UI 개선)

NERDEYPIRTE — Wed, 17 Dec 2025 00:05:00 +0900

(1일차 개발일지)

[개발 일지 #1] 림월드 기반 '변방계 정착민 테스트', 기획부터 수익화까지 (Next.js & Antigravity

안녕하세요! 게임을 즐겨하고, 만들고 있는 널푸입니다. 오늘은 테스트 사이트를 기획 및 제작해봤습니다! 림월드의 특징인 복잡한 정착민의 특성과 MBTI 테스트의 요소를 결합한 변방계 정착민

ratkin.org

안녕하세요! 정신없이 2일차 개발을 마치고 개발 일지를 쓰고있는 널푸입니다!

1일차에 안티그래비티(바이브코딩 툴)를 통해 Next.js로 뼈대를 올리고 기본 구조를 잡았다면,

오늘은 드디어 '진짜 림월드스러운' 리얼리티를 불어넣는 작업에 몰두했습니다.

AI의 힘을 빌리고 있긴 하지만, 너무 인공지능에 의존한다면 단순 MBTI 테스트에 림월드 스킨을 씌운 일차원적인 테스트가 될 겁니다.

그래서 필요한 건 유기적이고 세부적인 로직이라고 생각했습니다. 오늘은 그 로직들을 만드느라 밤을 새다시피 했네요(일하는 것은 결국 안티그래비티긴 했지만요).

그럼, 변경점과 로직에 대해 설명해드리겠습니다!

UI/UX: 림월드 감성 한 스푼 더 (Dark & Minimal)

림월드 캐릭터 생성 화면

변방계 정착민 테스트 결과 화면

먼저, UI를 개선했습니다. 아무리 로직이 좋아도 보기에 불편하면 안 되겠죠! 림월드 특유의 '어둡지만 깔끔한(Dark & Minimal)' 인터페이스 감성을 살려 UI를 대폭 다듬었습니다.

주요 변경점을 보자면:

먼저 배경 스토리 타임라인을 통합했습니다. 기존에 따로 놀던 유년기와 성년기 결과 박스를 하나의 타임라인 컨테이너로 묶으니까, 캐릭터의 서사가 끊기지 않고 자연스럽게 이어지는 느낌이 사네요. 림월드 게임 내 탭을 보는 기분이랄까요?

색상도 싹 정리했습니다. 중구난방이던 회색 톤을 통일하고, 림월드의 핵심 포인트 컬러(오렌지 브라운 계열)를 중요 정보에 배치하니 한결 보기 편해졌습니다. 이름, 성별, 나이, 배경 이야기, 결격사항, 특성, 기술이 깔끔하게 나열되는데, 실제 림월드 캐릭터 생성창과 톤이 꽤 비슷하게 뽑혔어요. 반응형 레이아웃도 손봤습니다. 모바일에서도 테스트가 쾌적하도록 버튼 크기와 여백을 꼼꼼하게 재조정했죠. PC로 하든 휴대폰으로 하든 똑같이 림월드 감성을 느낄 수 있게 만들고 싶었거든요.

이제 테스트 결과를 그대로 게임에 적용할 수 있습니다:

실제로 결과창에서 정착민 정보를 복사해서 림월드에 그대로 옮기면 똑같은 캐릭터가 생성되도록 구현했어요. 이게 진짜 이 테스트의 핵심이자, 계속해서 사이트를 방문하게 만드는 원동력이에요!

1. 가중치 시스템 : 단순 1대 1 매칭은 이제 그만!

여기서부터가 진짜 시작이었습니다:

일대일로 대응되는 단순한 질문(예를 들면 "당신의 기분은 어떻습니까? 1. 우울하다 2. 기쁘다")으로 바로 특성이 결정된다면, 사용자는 딱 한 번 테스트를 진행해도 다시 이 테스트를 할 마음이 생기지 않을 겁니다. 뻔하잖아요.

그래서 사용자의 선택 하나하나가 결과에 정교하게 반영되도록 내부 로직을 싹 다 뜯어고쳤습니다:

이제 세계관에 몰입하고, 여러 상황에 대처할 때 사용자가 어떤 선택을 하느냐에 따라 조금씩 각각의 특성에 점수가 쌓입니다. 질문 하나가 사이코패스 특성의 점수를 올리고, 동시에 탐욕 특성의 점수도 올리는 식이죠. 재미있는 건 다른 질문에서 좀 이성적인 답변을 했다면, 사이코패스 특성 점수가 다시 내려가면서 최종 결과에서 그 특성이 안 뜰 수도 있다는 겁니다. 마치 실제 사람처럼 복합적인 성향을 가진 캐릭터가 만들어지는 거예요. 이 가중치 시스템을 만드는 게 오늘의 핵심 작업이었습니다.

2. "나이 값"을 하는 정착민을 만들다

테스트의 첫 화면. 정보 입력 창

림월드에서 18살 소년병과 80살 대장장이가 똑같은 숙련도를 가진다면 좀 맥이 빠지겠죠? 기존의 단순 랜덤 가산점 방식을 버리고, 생물학적 연령에 따른 능력치 성장 곡선 로직을 도입했습니다.

이제 나이에 따라 능력치 보정치가 달라집니다:

성장기 (20세 미만): 아직 배우는 단계, 풋내기입니다. 15살 애송이가 요리 10을 찍고 있으면 좀 이상하잖아요? 그래서 능력치에 약간의 패널티(0.1~0.95배)를 줘서 미숙함을 표현했습니다.

전성기 (20~60세): 경험치가 쌓이는 황금기입니다. 나이에 비례해 능력치가 점진적으로 상승(1.0~1.5배)하죠. 40대 중반쯤 되면 왠만한 기술은 다 익혔을 법하니까요.

노년기 (60세 이상): 신체는 노화하겠지만, 수십 년간 쌓인 기술적 숙련도는 정점에 달합니다. 경험치 보너스를 최대로(1.5배) 유지하도록 했어요. 70대 할아버지 대장장이가 20대 초짜보다 훨씬 숙련된 건 당연하니까요.

typescript

// Age Factor Logic
if (age < 20) {
    ageFactor = Math.max(0.1, age / 20); // 성장기
} else if (age <= 60) {
    ageFactor = 1.0 + ((age - 20) / 40) * 0.5; // 전성기
} else {
    ageFactor = 1.5; // 노련함
}

이게 무슨 차이를 만드냐면요, 20살 '철없는' 대학생과 50살 '베테랑' 용병이 같은 선택지를 골라도, 나오는 결과가 확연히 달라집니다. 같은 테스트를 해도 나이에 따라 전혀 다른 캐릭터가 나온다는 거죠. 이게 바로 제가 원하던 림월드 속 고증입니다!

3. 특성(Trait) 스펙트럼 시스템 : '중립'은 없다!

사람의 성격은 단순히 점수가 높다고 좋은 특성만 나오는 단면적 구조가 아닙니다. 누구나 장점과 단점을 동시에 가지고 있죠. 그래서 상반된 성향(Spectrum) 개념을 적용해 '극단적인' 선택을 유도하도록 설계했습니다.

스펙트럼이 뭐냐면요:

예를 들어 Mood(기분) 축이 있다고 칩시다. 점수가 양수로 높게 치솟으면 '낙천적(Optimist)' 특성이, 음수로 떨어지면 '우울증(Depressive)' 특성이 붙습니다. 중간쯤 왔다 갔다 하면? 아무 특성도 안 뜹니다.

주요 스펙트럼 예시:

기분: 낙천적, 긍정적(+) ↔ 부정적, 우울증(-)
사교: 직설적(+) ↔ 다정다감(-)
작업: 부지런함(+) ↔ 게으름(-)

사용자의 답변 점수가 양수로 높게 치솟으면 부지런함이나 직설적처럼 강력한 특성이, 음수로 떨어지면 다정다감이나 게으름처럼 또 다른 강력한 특성이 부여됩니다.

이렇게 대답에 따라 특성별 점수가 더해지거나 빠지는 로직을 만들었습니다.

이제 어중간한 '중도적인' 답변을 피하고, 확실한 성향을 드러내야만 강력한(혹은 치명적인) 특성을 얻게 됩니다:

테스트에 임하는 사용자에게 '극단적인 선택을 하라'는 재미있는 압박감을 주고 싶었거든요. 림월드 게임 자체가 워낙 극단적인 상황들이 많으니까, 테스트도 그래야 재미있을 것 같았습니다.

마치며 : '내 정착민' 자랑하기

구현된 공유창

이제 제법 그럴듯한 '변방계 정착민 테스트'가 만들어지고 있습니다. 로직을 깎는 과정에서 AI가 계속 오류를 뿜어내거나, 갑자기 UI를 싹 갈아엎어 분위기가 와창창 깨지거나 하며 머리가 좀 아팠지만, 테스트 결과가 개발 의도대로 나올 때 정말 뿌듯합니다.. 더 좋은 개선 방안을 계속해서 고민하게 만드는 선순환이 진행되는 것 같아요.

하지만 혼자만 알고 있기엔 아깝죠:

내가 어떤 폐급(?) 혹은 엘리트 정착민인지 친구들에게 자랑할 수 있어야 진정한 심리 테스트의 완성이라고 생각합니다.

다음 개발 일지에서는 Vercel OG를 활용한 동적 이미지 생성과 카카오톡/트위터 공유 기능을 구현해보려고 합니다. 테스트 결과를 예쁜 이미지로 만들어서 SNS에 공유하면 '이게 뭐야?' 하고 링크 타고 들어오는 사람들이 많아지겠죠? 그게 바이럴의 핵심이니까요.

아마 조금만 더 수정하면 배포 가능할 것 같네요. 에드센스 승인만 빠르게 나오면 좋겠습니다. 그럼 3일차 개발 일지에서 뵙겠습니다!

[개발 일지 #1] 림월드 기반 '변방계 정착민 테스트', 기획부터 수익화까지 (Next.js & Antigravity 활용)

NERDEYPIRTE — Tue, 16 Dec 2025 00:34:25 +0900

안녕하세요! 게임을 즐겨하고, 만들고 있는 널푸입니다.

오늘은 테스트 사이트를 기획 및 제작해봤습니다! 림월드의 특징인 복잡한 정착민의 특성과 MBTI 테스트의 요소를 결합한 변방계 정착민 테스트를 만든다면 재밌겠다! 고 생각한 프로젝트에요. 실제 림월드에서 캐릭터 에디터를 통해 테스트 결과와 똑같은 림(정착민)을 만들 수도 있으니 꽤 활용도도 있겠다 싶었어요.

(그렇게 현재 제작 중인 게임도 있지만) 하루라도 더 빨리 사람들에게 완성본을 배포하고 반응을 보고 싶어 개발부터 완성이 비교적 빠른 웹사이트 완성을 목표로 '변방계 정착민 테스트' 프로젝트를 시작했습니다.

1. 림월드 데이터 기반의 결과 로직

단순 MBTI와 달리, 제 목표는 '방화광'이나 '낙천적' 같은 상반된 특성들이 점수 스펙트럼에 따라 유기적으로 결정되는 섬세한 테스트였습니다. 이를 위해 모든 질의응답이 다수의 특성 점수에 가중치를 주는 방식으로 설계되었습니다. 이 점수 기반 로직은 최종적으로 간단 테스트와 풀 테스트(기술, 열정, 특성 모두) 결과로 나뉩니다. 이에 대한 자세한 설명은 다음 일지에 적겠습니다!

2. AI와의 협업

개발 효율을 위해 Antigravity(AI 코딩 툴)를 메인으로 사용했습니다. 가장 크게 중점을 둔 것은 AI의 '특성 할루시네이션(없는 특성 창작)' 방지였습니다. 해결책은 rimworld_data.md 파일에 존재하는 특성 목록만을 '유일한 진실'로 지정하고,. cursorrules 파일을 통해 AI의 코딩 원칙과 림월드 테마를 철저히 통제하는 것이었습니다.

3. 수익화 구조

이 프로젝트 및 다른 게임들이 지속성 있게 제작되고 퀄리티를 더 높이기 위해서는 수익성이 필요하다고 느꼈습니다. 그런 의도로 아래, AdSense 광고 자리를 처음부터 레이아웃에 통합했습니다. 특히, 최종 '전체 스탯 결과'를 공개하기 전 전면 광고를 노출하여 수익성을 극대화하는 로직을 미리 설계했습니다. 이는 프로토타입으로, 사용자의 경험을 심각하게 해친다면, 변경할 계획입니다.

이를 통해 안티그래비티로 골조와 질문들을 생성해서 만든 첫 결과 UI입니다.

다음 일지에서는 설문 대답에 따른 특성과 기술의 변화와 이에 대한 로직, UI 개선등 시행착오를 겪은 일을 공유하겠습니다.

아마 이 프로젝트는 에드센스만 빠르게 승인 난다면, 빠르게 끝나지 않을까 생각합니다!