AI를 사용해 브라우저 게임 포털을 만든 방법과 내가 직접 고쳐야 했던 것들

발행: 5일 전 (2026년 1월 15일 오전 01:09 GMT+9)

13 min read

Source: Dev.to

브라우저 기반 Vibe‑Coding 도구와 React를 선택한 이유

제가 처음 시작한 Vibe‑Coding 도구는 초기 프롬프트만으로도 실행 가능한 웹 애플리케이션을 빠르게 만들어 줍니다:

I want to build a puzzle games website where people 
can play different brain teasers and logic puzzles. 
Users should be able to create accounts, track their scores, 
and compete on leaderboards. 
Use react and vite.

저는 이미 어느 정도 익숙한 기술 스택을 의도적으로 선택했으며, 이를 통해 생성된 코드의 품질을 직접 판단할 수 있었습니다—그리고 결과는 꽤 인상적이었습니다!

첫 번째 실험에서 인상 깊었던 점

첫 번째 버전만으로도 시각적으로나 기술적으로 이미 꽤 훌륭했습니다.
도구가 제 프롬프트를 정확히 이해하고 잘 실행했습니다.
인터페이스가 브라우저 내 VS Code와 비슷하게 보이며, 소스 코드와 실행 중인 앱을 자유롭게 전환할 수 있었습니다.

첫 번째 성공

앞서 언급했듯이, 게임 포털은 AI 코딩 도구 안에서 빠르게 가동되었습니다. 나는 모호하고 비기술적인 프롬프트만으로 전체적인 외관을 조정할 수 있었습니다:

Use different colors. It should be bright and friendly.
Also, make sure it looks good on mobile screens.

AI가 만든 색상, 게임 로고, 텍스트는 아래 스크린샷에서 볼 수 있듯이 아주 훌륭했습니다.

내가 특별히 요청하지 않았음에도 생성기가 처음 추가한 게임 중 하나는 메모리 게임과 지뢰찾기였습니다. 두 게임 모두 즉시 작동했고 색상, 버튼 스타일, 반응형 레이아웃 등 약간의 조정만 필요했으며—모두 비기술적인 프롬프트로 해결했습니다:

Add buttons for restarting the game and starting the 
game of the day. While all games are randomly initialized, 
the game of the day should be the same game for all users.

AI는 “시드(seed)” 개념을 고안해 현재 날짜를 기반으로 하는 의사 난수 시드를 구현했습니다. 정말 매끄럽게 동작했습니다!

다양한 변형(필드 크기 변경 등)을 추가하는 것도 AI에게 요청하기만 하면 되는 일이라, 나는 크게 감탄했습니다.

이러한 초기 성공은 게임이 단순했기 때문에 가능했습니다. 더 복잡한 게임을 만들려고 시도하면서 상황은 달라졌습니다.

AI가 어려워했던 부분: 복잡한 게임 및 시각 요소

AI는 다음과 같은 구조의 React 게임 컴포넌트를 일관되게 생성했습니다:

import React, { useState, useEffect } from "react";
// … types and constants

export function Game({ seed, gridSize: initialSize }: GameProps) {
  // state hooks
  const [isRunning, setIsRunning] = useState(false);
  // …

  // set up grid
  const initializeGame = () => {
    // …
  };

  // side effects
  useEffect(() => {
    // …
  }, []);

  // handlers
  const onNewGame = () => {
    // …
  };

  // JSX
  return (
    
      {/* … */}
    
  );
}

게임이 복잡해질수록 이 패턴은 여러 문제를 야기했습니다:

길어진 컴포넌트 – 읽고 이해하기 어려움.
책임 혼합 – 게임 로직과 프레젠테이션 로직이 뒤섞여 있음.
테스트 불가능한 로직 – 핵심 메커니즘에 대한 단위 테스트를 작성하기 어려움.
재사용성 낮음 – 동일한 로직을 다른 게임이나 컴포넌트에서 공유할 수 없음.

이러한 문제 때문에 포털 유지보수가 힘들어졌고, 작은 버그조차도 나와 AI 모두에게 큰 고통이 되었습니다.

저는 파이프 연결 게임(시작점에서 끝점까지 물이 흐를 수 있도록 파이프 격자를 연결하는 게임)을 만들면서 이 교훈을 뼈저리게 배웠습니다.

파이프 게임을 여기서 직접 플레이해 볼 수 있습니다: .

초기 버전의 문제점

의사 난수 초기 솔루션이 올바르게 생성되지 않음.
승리 조건 감지가 실패함.
연결된 파이프가 다른 색으로 강조되지 않음.
파이프에 대한 SVG 윤곽선이 누락됨.

해결 방법

AI에게 컴포넌트 리팩터링 요청 – 로직을 별도 파일로 분리.
적절한 TypeScript 클래스(또는 순수 함수 집합)를 만들어 모든 게임 메커니즘을 캡슐화.
새 클래스에 대한 단위 테스트 작성 – 시드 생성, 승리 감지, 파이프 색상 로직을 검증.
React 컴포넌트를 얇게 유지 – 이제는 렌더링과 사용자 인터랙션만 담당하고, 무거운 작업은 추출된 로직 모듈에 위임.

이 리팩터링을 통해 가독성, 테스트 가능성, 유지보수성이 크게 향상되었으며, 새로운 파이프 형태나 난이도 레벨 추가와 같은 향후 확장도 훨씬 쉬워졌습니다.

요약

시작은 간단하게 – AI 생성기는 대상이 작고 독립적인 UI 컴포넌트일 때 빛을 발합니다.
AI가 전체 아키텍처를 장악하지 않게 – 핵심 로직을 재사용 가능하고 테스트 가능한 모듈로 추출하세요.
프롬프트로 반복 – 비기술적이고 높은 수준의 프롬프트는 스타일링과 사소한 수정에 매우 유용하지만, 복잡한 동작을 위해서는 AI가 더 나은 관심사 분리를 할 수 있도록 안내해야 합니다.
생성된 코드를 초안으로 간주 – 배포 전에 항상 검토하고, 리팩터링하며, 테스트를 추가하세요.

다음 포스트에서는 리팩터링 과정에 대해 더 깊이 파고들고, 포털의 최종 아키텍처를 공유하며, 프로젝트가 성장함에 따라 코드베이스를 건강하게 유지하기 위해 AI를 어떻게 활용하고 있는지 논의할 예정입니다. 기대해 주세요!

상태와 메서드와 함께

솔루션 생성기를 별도 파일로 분리합니다.
게임 버튼용 재사용 가능한 컴포넌트를 만들고 모든 게임에서 사용합니다.

학습 과정

생성된 코드를 읽기 시작하고 실제로 이해했습니다.
브라우저 기반 코드 생성기에서 일반 목적 LLM 채팅으로 전환했습니다.
해결해야 할 문제에 대한 전형적인 데이터 구조와 알고리즘 접근법을 채팅에 물었습니다.

구현

게임 로직과 솔루션 생성기의 자체 구현을 작성했습니다.
내가 무엇을 하고 있는지 실제로 이해하지 않으면 피할 방법이 없다는 것을 깨달았습니다.
논문이나 대학 강의를 읽을 필요 없이 필요한 데이터 구조와 알고리즘을 빠르게 배우기 위해 LLM 채팅을 활용했습니다.
필요한 방식대로 구현을 만들고 대안적인 접근법을 논의하기 위해 LLM을 활용했습니다.

SVG 렌더링

파이프를 렌더링하는 데 사용되는 SVG와 관련해서는, 내가 원하는 방식으로 구현을 만들기 위해 LLM 채팅과 긴밀하고 반복적으로 작업하는 것 외에 대안이 없었습니다.

주요 요점 및 결론

AI 지원 코딩 도구를 사용하는 것이 재미있었고 빠르게 첫 결과를 얻을 수 있었습니다. 실제 사용자와 테스트할 수 있는 프로토타입을 만들었습니다.
AI 코드 생성기에는 여전히 한계가 있습니다.
AI가 실패한 부분에 직접 개입하는 것이 중요했으며, 함께 코드를 리팩터링하고 단순화했습니다.
다른 AI 도구를 사용해 정확하고, 신뢰할 수 있으며, 유지보수가 가능한 구현을 찾았습니다.

AI 코드 생성기의 시대에도 깨끗한 코드, 테스트 자동화, 신중한 아키텍처와 같은 좋은 엔지니어링 실천은 여전히 중요하며, 오히려 더 중요해졌습니다.

AI는 나(그리고 아마도 여러분)에게 코딩 속도를 높이는 데 도움을 줄 수 있지만, 엔지니어링 판단이 있어야만 유지보수 가능하고 안정적이며 안전한 소프트웨어를 만들 수 있습니다.

다음에 무엇을 써야 할까?

다음 포스트에서는 아래 영역 중 하나를 더 깊게 파고들까 합니다:

브라우저 기반 게임의 보안 고려사항
- 치팅, 공격, 급증하는 클라우드 비용
저비용 엔드‑투‑엔드 아키텍처
- AI가 생성한 React 코드부터 배포 가능하고 유지 보수 가능한 프로덕션 환경까지
프라이버시 준수 사용자 분석
- 제3자와 사용자 데이터를 공유하지 않고 플레이어 행동을 측정하는 방법
획득
- 제한된 예산으로 사람들이 실제로 게임을 찾고 플레이를 시작하는 방법

어떤 주제가 가장 유용할지 알려 주세요!