🎮 그림마피아 만들면서 겪은 10가지 문제와 해결

처음에는 그냥 간단한 프로젝트라고 생각했다.

AI랑 같이 개발하면 오히려 더 빠르게 만들 수 있을 줄 알았고 막히는 부분도 금방 해결될 거라고 생각했다.

참고로 이번 바이브 코딩은 Copilot으로 구현했다.

why? VS Code에 기본으로 붙어있어서 가장 자연스럽게 사용하게 됐다.

그런데 구현을 해보면서 느낀 게 하나 있었다.

AI가 코드는 잘 짜주지만 문제를 정의하고 해결하는 건 결국 나였다.

그래서 이번 글은 "무엇을 만들었는지"보다 👉 어떤 문제가 있었고, 어떻게 해결했는지에 집중해서 정리해봤다.

(문제 상황 캡처 없음 주의 👀)

🧠 1. 모바일에서 그림이 안 그려짐

PC에서는 정상적으로 그려지는데 모바일에서는 아무리 눌러도 안 그려졌었다 ㅠㅠ

원인은 간단했다.

👉 mouse 이벤트만 사용하고 있었음

..아 ㅋㅋ

그래서

• pointer events로 통합
• touch-action: none 적용
• 좌표 계산 로직 수정

이 세 가지를 적용하니

모바일에서도 드래그 기반으로 자연스럽게 그림이 그려졌었다.

🧠 2. 제시어가 이상하게 나옴

“먹는 고양이 / 마시는 강아지”

이거 보고 진짜 노답이라 생각했었다.

이건 게임이 아니라 👉 억지 문제 생성기였다.

진짜

그리는 사람도 애매하고 맞추는 사람도 애매하고

그냥 다 애매했다.

그래서

행동/피사체 카테고리 분리 자연스러운 조합만 허용

으로 바꿈

그러니 어느 정도 완화가 되었다 ~

🧠 3. 마피아가 너무 쉬움

문제는 이거였다

행동이 항상 같음

예: 자는 고양이 자는 강아지

이러면 그냥 눈치게임이다.

그래서

• 같은 행동
• 비슷한 행동
• 완전히 다른 행동

👉 확률 기반으로 섞는 구조로 변경

이때부터 정답 추론 난이도가 상승하면서 게임이 조금 더 재밌어졌다.

🧠 4. 채팅이 UX를 망침

채팅 넣었는데…

입력 중인데 화면 스크롤이 계속 아래로 내려감

원인은?

무조건 scroll bottom 처리였다.

그래서

하단 근처일 때만 자동 스크롤로 변경하였다.

🧠 5. 내가 보낸 메시지도 알림 뜸

내가 보낸 메시지인데도 알림이 떴다. 이건 진짜 사소한데 거슬렸다.

원인

sender 구분 없음

그래서

playerId 기준으로 필터링

불필요한 알림 제거가 되었고 UX가 더 깔끔해진 느낌이 들었다.

🧠 6. 채팅창이 움직임

hover 하면

채팅창이 오른쪽으로 밀렸었다.

이건 UX가 아니라 버그였다

원인

transform + hover 충돌

그래서

위치 고정 처리를 해 UI 안정성을 확보하였다.

🧠 7. 모바일은 그냥 다른 서비스였다

처음엔 그냥 “줄이면 되겠지”라고 생각했는데

아니었다

완전히 다른 UX가 필요했다.

그래서

• 세로 레이아웃으로 재구성
• UI 흐름 다시 설계

를 하였다.

🧠 8. 투표 시간이 애매함

짧으면 선택을 못 하고 길면 게임이 루즈함

그래서

👉 60초 + 전원 투표 시 즉시 종료

이 구조로 변경

이건 꽤 잘한 선택인 것 같았다.

덕분에 템포 유지 + 불필요한 대기 시간 제거 게임 흐름 개선이 되었다.

🧠 9. 채팅 넣을지 말지 고민 (기획)

채팅 넣으면 재밌을거 같았다.

하지만 힌트 공유되는 문제와 함께 그렇게 되면 게임이 망한다.

그래서 결국

대기방 / 투표에서만 채팅을 허용하여 재미 요소, 게임 밸런스를 유지시켰다.

🧠 10. 실시간 vs 턴제 충돌

턴제 게임인데 실시간으로 보여야 하는 구조

그래서 구조를 이렇게 나눴다.

👉 입력은 한 명만 👉 보는 건 모두 다

이걸 하고 게임 로직과 실시간성이 유지되어 게임이 제대로 돌아갔다 😊

💡 느낀 점

이번 프로젝트 하면서 느낀 거

Copilot이 코드를 다 짜주긴 하는데 문제 해결은 결국 내가 해야 한다

그리고 이게 특히 중요했다.

👉 “왜 이게 문제인지”를 알아야 해결된다

그냥 AI가 시키는 대로 하면 되는 것 같다가 결국 무너진다.

🔥 한 줄 정리

이 프로젝트는

“기능 구현”이 아니라 문제 정의와 구조 개선의 연속이었다

📢 다음 계획

다음 프로젝트에서는

• Codex
• Claude Code

까지 같이 활용해서

👉 AI를 더 잘 쓰는 방향으로 가볼 생각이다

🧡 마무리

아직 부족한 부분 많지만

그래도 이 프로젝트 하나만으로 바이브 코딩력이 +1이 되어 뿌듯하다

3월에 해보았던 바이브코딩을 이제서야 올리게 되네요..ㅎ 읽어주셔서 감사합니다 🙏

📌 + ..?

이 프로젝트는 GPT로 기획하고, Copilot으로 구현했다.

다음에는

• Codex
• Claude Code

를 각각 따로 사용해서

어떤 AI가 어떤 단계에서 더 적합한지 비교해볼 생각이다.

단순히 “AI를 쓴다”가 아니라
👉 “어떻게 써야 효율적인지”까지 실험해보고 싶다.

AI 강의를 듣다 보면 이런 상황이 반복됐다.

설명 들을 때 → “아 이해됨” 문제 보면 → “???”

처음엔 그냥 이렇게 생각했다.

👉 “아직 익숙하지 않아서 그런가?”

근데 아니었다.

내가 착각하고 있었던 것

👉 “이해했다”가 아니라 “이해한 느낌만 든 상태”였다

조금 더 정확하게 말하면

설명 들을 때는 흐름을 따라가니까 이해된 것 같고 막상 혼자 풀려고 하면 기억이 안 남

즉,

내 머리로 생각해서 이해한 게 아니라 그냥 설명을 따라간 것뿐이었다

금붕어 상태의 핵심 문제 🐟

나는 이게 더 큰 문제였다.

강의 들을 때는 이해한 느낌 몇 분 뒤 → 흐릿 문제 보면 → 아예 생각이 안 남 심지어 방금 본 내용인데도 다시 처음 보는 느낌 😓😒

👉 결론 “이해한 게 아니라 잠깐 스쳐간 것”

그래서 생긴 착각이 이거였다.

“분명 들을 때는 이해했는데 왜 못 풀지?”

👉 애초에 내 것이 아니었기 때문

2. 내가 막혔던 부분

(1) 개념이 따로 논다

AI / ML / DL → 외우긴 했는데 감이 없음 회귀 / 분류 → 문제 나오면 헷갈림 R², 손실함수 → 그냥 공식 느낌

공통점 왜 쓰는지 모른다

(2) 수학에서 막힘

행렬 곱 → 왜 되는지 이해 안 됨 내적 → 감이 안 잡힘 가우스 소거법 → 그냥 읽히질 않음

👉 여기서부터 집중 끊김

(3) 코드 이해 없이 사용

df.isna().sum()

이건 쓸 줄 아는데

설명 못함

I'm 상태 - “그냥 이렇게 쓰는 거”

3. 문제 원인

내 공부 방식이 이랬다.

강의 듣고 이해한 느낌 받고 그냥 넘어감 . . 반복 . . 결과

👉 쌓인 게 없음

4. 바꾼 방식

(1) 무조건 “왜?” 붙이기 왜 회귀는 연속값일까? 왜 분류는 확률일까? 왜 이 함수 쓸까?

👉 답 못 하면 이해 못한 걸로 처리

(2) 코드 말로 풀기 df.isna().sum()

👉 이렇게 설명

결측치 있는지 확인 컬럼별 개수 세기

👉 말로 설명 가능 = 이해

(3) “다시 꺼내보기” 필수

금붕어 특성 때문에 추가한 방식

한 번 이해 → 끝 ❌ 여러 번 다시 보기 → 이해 ⭕

5. 약간의 AI 개념 정리

✔ 회귀 vs 분류 | 구분 | 의미 | 예시 | |------|------|------| | 회귀 | 연속값 예측 | 집값 | | 분류 | 카테고리 예측 | 합격/불합격 |

✔ R² (결정계수) 모델이 얼마나 잘 맞는지 1에 가까울수록 좋음

✔ 손실함수 틀린 정도 작을수록 좋음

👉 학습 = 이걸 줄이는 과정

✔ RLHF 사람이 더 좋은 답을 선택 그 기준으로 모델 학습

6. 느낀 점

“이해한 느낌”은 믿으면 안 된다 AI는 개념이 연결되어야 이해됨 수학을 피하면 결국 다시 돌아온다

그리고 제일 중요한 거

나는 금붕어다 🐟

그래서 이제 기준을 바꿨다.

“한 번 이해했다”는 인정 안 함 “다시 설명할 수 있어야 이해한 것”

7. 앞으로 방향

코드 → 이유까지 설명 가능하게 개념 → 왜 쓰는지까지 이해 애매하면 절대 넘기지 않기 금붕어 방지용 복습하기

결론

“이해했다는 느낌”이 들 때가 아니라
“설명할 수 있을 때”가 진짜 이해다

한 달에 2번 올리고 싶었는데
이번에도 결국 말에 올리게 됐다 😅

그래도 한 달 1번은 지켰으니 일단 만족

끝까지 읽어주셔서 감사합니다 :)

(다음 글은 좀 더 빨리 올려보겠습니다… 아마도)

2월?

짧은 달이라 그런지 진짜 눈 깜짝할 새에 끝났다.

엄청난 사건이 있었던 건 아닌데 가만히 돌아보면 은근히 많은 일이 있었다.

붙은 것도 있고, 떨어진 것도 있었고, 과락도 있었고,

생각보다 꽤 정신없는 달이었다.

1️⃣ IM 취득

IM을 취득했다.

엄청 대단한 건 아니지만 그래도 SSAFY에서 퇴소할 위기에서 한 걸음은 멀어진 느낌이라 만족한다.

그리고 이 생각이 들었다.

"아 나 그래도 뭔가 쌓이고 있구나."

이 느낌이 은근히 크다

2️⃣ 싸피셜 지원 → 탈락

떨어졌다.

깔끔하게.

조금 기대했기에 조금 아쉬웠다. (흠.. 조금 많이 일지도..? ㅎ)

근데 또 생각해보면 지금은 더 채워야 할 시기인 것 같기도 하다.

뭐, 이왕 떨어진 김에 개발 공부 더 해야지

오히려 조아

3️⃣ 기프티콘의 계절은 끝났나

1월만 하더라도 SSAFY 라이브 방송이나 이벤트 덕분에 소소하게 기프티콘을 받곤 했는데

이번 달은 조용했다.

음.. 아쉬운거지 뭐

오히려 절약할 수 있는 시기가 형성된 거잖아?

4️⃣ 과락을 맞다.

이건 솔직히 멘탈이 살짝 흔들렸다.

근데 사실 그 전부터 "아 난 과락인 것 같애..." 하고 있었어서

막 엄청 충격은 아니었다.

그래도 과락이라는 단어는 기분이 좋지 않았다.

"어...?" 싶었다.

하지만 재시험은 통과했다는 사실😊

5️⃣ 알고리즘

2월하면 제일 먼저 떠오르는 건 알고리즘이다.

정렬 리스트 델타탐색 그리디...

진짜 왜 이렇게 헷갈리고 하기 싫은지 ㅠㅠ

계속 콜론(:) 빠뜨리고, 인덱스 에러 내고, 또 고치고, 또 에러 나고.

고침 → 에러 → 고침 → 에러 무한 반복.

그래도 웃긴 건 싫다고 하면서도 조금씩 익숙해지고 있다는 것.

아마 나중엔 "왜 이걸 어려워했지?" 할지도 모른다.

(지금은 아니다.) (근데 난 금붕어라 아닐 수도 있다 ㅎ…)

6️⃣ 일타싸피

일타싸피란 SSAFY에서 진행하는 게임형 활동인데 당구 게임 같지만 사실상 구슬치기 느낌이다.

반 대표를 뽑는 대항전이었는데,

솔직히 기대 하나도 안 했다.

코드 제출도 우여곡절이었다.

팀원 코드인 줄 알고 냈다가 알고 보니 내 코드였고 그 와중에 다른 팀 코드를 제출하는 대참사가 있었고 어찌저찌 겨우 제출했다.

그래서 더 기대를 안 했다.

근데 하다 보니

어? 어? 어?

하다가 4강까지 올라갔다.

2월의 작은 하이라이트였다.

🧠 2월 한 줄 요약

빨랐지만, 비어 있지는 않았던 달.

완벽하진 않았지만 가만히 있지도 않았다.

붙은 것도 있고 떨어진 것도 있고 흔들린 것도 있고 극복한 것도 있다.

그게 2월이었다.

📅 스타트캠프 기간 2026.01.07 ~ 2026.01.16

보안서약서를 작성했기 때문에 세부적인 내용은 공개할 수 없습니다..! 어디까지 말해도 될지 애매할 바엔 차라리 안 말하는 게 상책이라 판단했습니다 😅 그래서 이 글은 👉 ‘무엇을 했는지’보다 ‘어떤 느낌이었는지’ 위주로 적어볼게요.

🎓 중간 근황: 나 졸업했어요

스타트캠프 중간에 고등학교 졸업식이 있었습니다!

이제 진짜로 👉 고졸입니다 ㅎㅎ

기분이 이상하더라구요, 학생이었던 시간이 끝난 느낌도 들고 이제 진짜 새로운 단계로 넘어온 느낌..?

(그치만 이 글을 쓰는 지금도 졸업인게 실감이 안나요..ㅎㅎ)

⏰ 스타트캠프 중 딱 하루, 지각썰

스타트캠프 진행 중 하루에 있었던 일입니다.

참고로 말씀드리면 SSAFY는 8시 59분까지 도착하면 되는 구조인데,

저는 보통 👉 항상 8시 40분 전에는 도착하는 편입니다. (그 전날, 그 다음 날 전부 정상 출근 완료)

근데... 그날만 정말 예외였어요.

그날도 평소처럼 새벽 5~6시에 기상 -> 아침 먹고 -> 여유롭게 준비 하고 있었는데,

준비 도중 못 걸어갈 정도로 배가 아파서 "아 오늘은 걸어가면 안 되겠다" 판단.

그래서 👉 택시 타려고 했습니다.

why? 서울 버스 파업이 있던 날이였거든요 😓

하지만

택시를 10번 넘게 호출했는데 전부 실패

결국 지하철로 방향을 틀었는데 문제는...

👉 저는 길치인데다, 시골에서 살았던지라 서울 지하철이 아직 많이 낯선 편입니다.

어느 방향으로 타야 하는지 몰라 이어폰 안 끼고 계신 분들께 여쭤보긴 했는데, 출근 시간대라 그런지 다들 바빠 보이셔서 쉽게 도움을 받기엔 어려웠습니다.

겨우 방향을 알아내서 지하철을 탔는데

이유는 모르겠으나 출발을 몇 분 늦게 하더라구요?

그렇게 결국 👉 17분 지각이라는 결과가 나왔습니다 😭

다시 말하지만 이날 딱 하루만 그랬고, 그 전후로는 항상 제시간 도착했습니다… (억울)

🤝 스타트캠프를 통해 느낀 점

스타트캠프는 단순히 프로그램을 하는 시간이기보다는, 같은 반 사람들과 팀워크를 다질 수 있는 시간 이라는 느낌이 들었습니다.

짧은 기간이었지만 함께 움직이고, 대화하고, 협력하면서 "아 앞으로 이 사람들이랑 같이 가는구나" 라는 감각이 생겼어요.

아직은 모두 조심스러운 단계지만, 그래도 혼자가 아니라는 느낌을 받기엔 충분한 시간이었습니다.

🍚 싸밥 후기 (중요)

결론부터 말하자면

싸밥 맛있어요. 진짜로.

저는 👉20층 죽돌이였습니다. 10층은 딱 한 번 가봄…

🏢 20층 vs 10층 차이 (내 기준)

• 20층

  • 자유롭게 담을 수 있음
  • 양 조절 가능
  • 든든함 MAX

• 10층

  • 이미 담겨 있는 도시락
  • 제가 갔을 땐 전부 솔드아웃…이라 샐러드나 샌드위치는 잘 몰라요..ㅎㅎ
  • 결국 도시락 먹었는데 밥양이 너무 많아서 남김 ㅠㅠ

맛은 둘 다 괜찮은데 개인적으로 20층이 자율배식을 할 수 있다는 점에서 더 좋았습니다:)

📸 내가 찍은 싸밥 모음집 맛있어 보이죠? 실제로도 맛있었습니다 😋

💤 입학식 날의 나

솔직히 말하면.. 피곤했습니다.

평일 평균 수면 시간이 4시간인지라 생각보다 긴 입학식은 피곤했습니다 그래서 쉬는 시간마다 잠깐씩 눈을 붙였던 것 같아요 ㅎㅎ

그래도 "아 이제 진짜 시작이구나" 라는 느낌은 확실히 들었습니다.

🎉 싸피데이 = 리프레시

싸피데이는 확실히 리프레시용 느낌!

계속 긴장만 하다가 숨 돌릴 수 있는 시간이라 좋았어요

🎁 웰컴키트 후기

웰컴키트...

조아여.

말 다 했음. 잘 쓸 수 있는 물품 위주로 받아서 좋았고 "아 나 싸피인이 되었구나" 체감도 확 옵니다

🧡 마치며

아직은 모든 게 낯설고 체력적으로도 쉽지 않지만,

그래도 👉 이제 진짜 시작이라는 느낌이 들어요.

남은 기간 동안 열심히 해보겠습니다 💪

📢 공지

앞으로 벨로그는 👉 한 달에 1~2회 정도 올라올 것 같아요. 많으면… 3번?

왜냐하면 점점 더 바빠지고 있거든요 허허… 😇

그래도 올릴 땐 제대로 올려볼게요!

읽어주셔서 감사합니다 !!

시작하기 전에 한 마디 난 임시저장 버튼을 더블클릭을 해서 사진처럼 나온걸 확인한 후 임시글을 보았는데 또 날라가 있는 거 보고 멘탈이 같이 날라감 ^^...

안녕하세요? 👋 벨로그 계정이 증발해버린 사람입니다.

제 전 계정은 이 친구👇 👉 tnwl0_otnwl.log

🔗 전 계정 프로필 보러가기

열심히 써온 글들... 정리해둔 기록들... 임시저장한 초안들...

모두 안녕... 👋

📌 사건 개요 (눈물의 타임라인)

1️⃣ 학교 졸업 = 노트북 반납

이제 졸업이 2주 정도 남아서 학교 노트북을 반납해야 했고,

"아 어차피 저장할 서류는 다 메일로 나한테 보냈으니 포맷 한 번 쫙하면 되겠지~"

라는 아주 안일한 생각으로 노트북을 포맷했습니다.

2. 새 노트북 + 벨로그 로그인

새 노트북에서 정말 아무 생각 없이 벨로그 로그인 버튼 클릭

그리고 마주한 화면 👇

. . . 예 이 상태가 되었습니다^^

하하하하하하하하하ㅏ하하하하하하핳 웃음이 나오더라고요 (안 나옴)

해결 과정 (하지만 해결은 못함)

당연히 계정을 되찾으려고

• 구글 문의 ❌
• 네이버 메일 문의 ❌

다 넣어봤는데 아직도 회신 없음...

"기다리느니 그냥 새로 파자..."

그래서 👉 계정 이사 결정

🎒 그래서 지금은?

✔️ 전 계정: 추억 속으로… ✔️ 새 계정: 이제부터 진짜 시작

앞으로는

• 개발 기록
• SSAFY 생활
• TMI

등등등 다 여기다 남길 예정입니다.

🧡 결론 (중요)

그래서 말인데요...

이제 여기서 많이 활동할 거니까요?

👉 많관부 부탁드립니다 🙇‍♀️ 👉 팔로우 환영 👉 댓글 달아주면 진짜 좋아함

계정은 날아갔지만 의욕은 더 커졌습니다 🔥

앞으로 잘 부탁드려요! 😊