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

(1일차 개발일지)

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

 

 

안녕하세요! 정신없이 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일차 개발 일지에서 뵙겠습니다!