AI 공부

[바이브코딩] MD5 배틀 시뮬레이터 제작기 1일차

싱커 2025. 7. 1. 17:48

어제 제미나이 2.5 프로를 구독하기 시작했다. 오늘 특이점이 온다 마이너 갤러리를 보니, 바이브 코딩 대회가 열린다고한다.

깡통 계정으로 재미난 시도를 해보고싶었고, 지하철에서 재밌을 것을 열심히 고민해봤다. 과거 아스트랄 투닥투닥을 재미나게 플레이(?)했던 기억이 있어서, 그와 비슷한 MD5 배틀 시뮬레이터를 만들기로 결정했다.

첫 프롬프트

2. 능력치 및 타입 책정

32자리의 해시를 2자리씩 끊어 능력치를 배분하는 방식은 아주 좋습니다. 데이터를 효율적으로 사용하면서 개성 있는 캐릭터를 만들 수 있습니다.
해시 (32자리): e4d909c290d0fb1ca068ffaddf22cbd0 (예시)
2-1. 능력치(Stat) 책정 (총 12자리 사용)
포켓몬의 HABCDS처럼 6개의 능력치를 정의하고, 해시의 앞 12자리를 할당합니다. 16진수 두 자리는 00부터 FF까지, 즉 0부터 255까지의 값을 가집니다.
HP: e4 → 228공격(Attack): d9 → 217방어(Defense): 09 → 9특수공격(Sp. Atk): c2 → 194특수방어(Sp. Def): 90 → 144스피드(Speed): d0 → 208

 

능력치는 대충 의도대로 작동하는 것을 확인했으니, 다음은 기술이다.

1. 기술 생성: 타입, 위력, 명중률을 해시로 결정

기술 하나당 3자리의 해시를 사용하는 방식으로 구현해 보겠습니다.
해시 (예시): e4d909c290d0fb1ca068ffaddf22cbd0사용할 해시: 능력치(12), 타입(1)에 13자리를 사용했으니, 14번째 자리부터 시작합니다.
기술 1 (14~16번째 자리: b1c)
타입 (14번째 자리: b): 16진수 b는 11입니다. 미리 정의한 16개의 타입 중 11번 타입을 기술의 속성으로 부여합니다.예시: 11번 타입 = '클라우드(Cloud)' 타입위력 (15번째 자리: 1): 16진수 1은 1입니다. 그대로 사용하면 위력이 너무 낮으니, 최소값을 더해주는 방식이 좋습니다.계산식: 위력 = 40 + (16진수 값 * 5) -> 40 + (1 * 5) = 45이렇게 하면 위력은 40(0일 때)부터 115(F=15일 때)까지 분포하게 됩니다.명중률 (16번째 자리: c): 16진수 c는 12입니다. 이것도 적절한 범위로 변환해 줍니다.계산식: 명중률 = 70 + (16진수 값 * 2) -> 70 + (12 * 2) = 94%이렇게 하면 명중률은 70%에서 100% 사이가 됩니다.
이런 방식으로 기술 2, 3도 생성할 수 있습니다.

 

조금 아쉽지만 봐줄만하다.


타입 상성

타입 상성을 만들기 위해 해시값 한자리로 할 수 있는 걸 시도해봤다.

밸런스도 그럴싸하고 컨셉도 신선하지만, 어딘가 많이 부족해보인다.

동양 세계관 init
상성표 v1

봐줄만한 상성표가 나오긴했지만 노잼이다.

봐줄만한 퀄리티긴한데 은근 노잼이다..
내가 익숙한 세계관은 유희왕 or디지몬인데, 오행에서 토->地로 쓰고, 무속성대신 風속성 넣어서 커버해볼까? 양음은 명암으로 바꿔쓰는게 좀더 핏할지도?

상성 매트릭스 V2, V3

이러한 수정을 거쳐서

상성 매트릭스V4

이 상태에서 만족하기로 했다.


바이브 코딩

드디어 만드는 코드

HTML, CSS, JS파일을 각각 만들어줬다.

바이브코드 V1

UI가 개짜치게 나왔다.. 그래도 에러없이 굴러는 간다는게 좋은거겠지.

그래서 날린 수정펀치

1. 랜덤상대 생성이 좀 구려! 숫자붙이기 개짜침!
상대 이름도 직접 넣는게 좋겠어.
2. 기술이름도 그럴싸하게 지어주면 좋겠어.
3. 시뮬창에서 물리특수도 보여주고 속성에 맞는 색도 반영되면 좋겠어.

바이브코드 V2

인간의 어감이 아니다.. 20년전 인터넷 선배는 아햏햏하다고 평가할듯

1. 지 크래시, 목 클로 짜침. 영어로 통일하자
2. 배틀창 그럴싸해지긴했는데 가시성 나쁜색도 있고, 턴 홀짝 돌아가며 공수바뀌는게 아니라 1턴에 선공후공 같이 치러지게 해.
3. 기술 위력은 5단위이면 좋겠어. 명중은 아예 누락됐니? 최저 30에 5단위면 그럴싸할것같은데. (100오버되면 그 해시값은 어떻게해야하지? 100으로 맞추면 100기술이 과다한것같긴해.)
개선사항 요약

언어 통일: 어색했던 '한글 타입 + 영어 기술' 조합을 버리고, 타입 이름을 모두 영어로 통일하여 전문적인 느낌을 더했습니다. (예: 지 크래시 → Earth Crash)배틀 시스템 및 UI 개선:가시성: 일부 타입 색상의 명도를 조정하여 어두운 배틀 로그 배경에서도 잘 보이도록 수정했습니다.전투 방식: 턴을 한 번씩 주고받는 대신, 한 라운드에 속도가 빠른 쪽이 먼저 공격하고, 살아남으면 느린 쪽이 반격하는 방식으로 변경하여 속도감과 긴장감을 높였습니다.능력치 및 명중률 시스템 추가:기술 위력: 모든 기술의 위력이 5의 배수로 떨어지도록 조정했습니다.명중률 도입: 게임에 명중률 개념을 새로 추가했습니다. 이제 모든 기술은 빗나갈 확률이 존재하며, 해시값에 따라 30%~100% 사이에서 5단위로 결정됩니다.

해 줘

코드 생략 한번 시전해주고 ㅋㅋㅋ

바이브코드 V3

기술에 한해 음역을 원했는데 영어로 바꿔버렸다.. 일단 봐줄만하니 여기서 1일차 스탑!

 

See the Pen Untitled by XinKer-Kim (@XinKer-Kim) on CodePen.