DeepSite를 이용한 Vibe Coding 체험하기

 

지난 번에 아래 글을 작성하면서 조사를 한 터라 바이브 코딩이 어떤 것인지는 대충 알게 됐습니다.

바이브코딩(Vibe Coding) : AI가 바꾸는 개발의 미래와 인간 개발자의 역할

 

 

그래도, 아는 것보다 체험해 보는 것이 중요하다 싶더군요. 예전에도 ChatGPT를 이용해서 다양한 게임을 만들어 봤던터라 크게 다르지 않겠지, 작성된 코드를 제대로 동작하도록 만들기 위해서는 그래도 숨은 시행착오가 많이 생길 수 밖에 없겠지 하는 약간은 낮은 기대 수준을 가지고 시작했죠. 하지만, 결과는 전혀 예상치 못하는 수준이었습니다. 다음은 제가 해 본 테스트 결가입니다.

 

DeepSite란?

최근 공개된 DeepSeek-V3-0324를 기반으로 바이브 코딩을 할 수 있도록 만들어진 vibe coding 어플이며 아래 URL에 가시면 사용 가능합니다. 이 서비스를 만든 사람은 Hugging Face의 프론트엔드 엔지니어인 캐나나인 Enzo라는 분입니다.

 

DeepSite - a Hugging Face Space by enzostvs

 

주의) 로그인 없이 생성할 수 있는 것에는 제한이 있는 것 같았고, Hugging Face 로그인을 통해 추가적인 작업을 할 수 있었습니다. 다만, Hugging Face 계정에 대한 접근 권한을 요구하는 부분이 있었습니다. 아마도 생성되는 코드를 저장하거나 할 때 권한이 필요한 듯 생각되는데 제 경우, 작업을 추가로 진행하고 Hugging Face 계정 관리에서 다시 권한 허용을 해제했었습니다. 

 

DeepSite를 이용한 게임 제작 테스트

DeepSite를 이용해 간단한 게임을 만들어 보겠습니다. 메모리 게임과 청기백기 게임 2개를 해 볼 생각입니다. 

 

1️⃣ 메모리 게임 만들기

메모리 게임은 많이 해보셔서 아실 거라 생각합니다. 같은 그림들이 쌍으로 존재하는 배열을 보여주고 다 뒤집어 놓은 상태에서 같은 쌍의 이미즈를 찾는 게임으로 짧은 순간 고도의 집중과 기억력이 요구되는 재미난 게임입니다. 

 

DeepSite에의 입력 프롬프트

입력 프롬프트는 다음과 같습니다. 

a cybernatic memory game

 

너무 단순하죠? 하지만, 결과는 놀랍습니다. 프롬프트가 짧은데도 좋은 결과물이 나온다는 것은 어떤 룰이나 원리인지 설명하지 않아도 알 정도로 제시된 프롬프트에 해당하는 사례에 대한 학습이 많이 되었다는 것을 말할 겁니다. 게다가 DeepSite가 단순히 코딩을 잘하는 LLM만으로 동작하는 것이 아니라 뒷단에서는 기타 필요한 자동화 작업을 할 수 있도록 agent가 돌고 있을 것이란 생각이 들었습니다. 

 

생성된 결과물

 

아래 그림은 생성된 코드 (왼쪽)과 생성된 실제 작동 프로그램(오른쪽)입니다. 전체가 만들어지는데 대략 1분이 안 걸린 것 같습니다. 

그림 : 요구사항을 입력했을 때 생성된 코드와 결과물

 

생성된 결과물은 index.html 파일 하나입니다. 아래는 로컬에 다운받아서 브라우저로 열어보면 동작시켜본 결과 영상입니다. 

영상 : 생성된 게임을 로컬에서 동작시켜 본 결과 화면

 

 

2️⃣ 청기백기 게임

두 번째로 진행한 것은 청기백기 게임입니다. '청기 올려 백기 내려...' 이런 걸로 잘 알려져 있죠. 저는 이렇게 순발력을 요구하는 게임에는 잼병이고 제대로 해 본 적도 거의 없는터라, 잘 하시는 분의 플레이를 보고 있자면 감탄할 수 밖에 없었습니다. 

 

입력 프롬프트

 

청기백기 게임을 ChatGPT에게 설명해 달라고 하고 이 내용을 프롬프트로 사용했습니다. 내리지마 올리지마 등 훨씬 더 다양하게 설명을 넣어야 하지만 일단 테스트니까 간단하게만 동작 확인을 하는 것으로 하고 그대로 사용해 봅니다. (프롬프트를 입력할 때 줄바꿈이 없도록 텍스트 자체는 조정해야 했습니다.) 

'Blue and White Flag Game' is a traditional Korean game where players respond to the color of a flag raised by the game leader. It’s often played with children to help improve their listening skills and reaction time. Here’s how the game works:
1.Setup: There are two flags, one blue and one white. The game leader holds both flags.
2.Objective: The leader raises either the blue or the white flag, and the players must follow a specific action based on the flag color. When the blue flag is raised, players must raise their right hand. When the white flag is raised, players must raise their left hand.
3.Game Flow: The leader alternates between raising the blue and white flags. Players must quickly respond by raising the corresponding hand.
4.Rules: Players who fail to raise the correct hand or take too long to react are out of the game.

 

 

생성된 결과물

 

화면이 그럴 듯하게 나왔고 요청한대로 작동합니다. 다만, 다음과 같은 추가 작업이 필요할 것 같았습니다. 

• 깃발의 색깔은 흰색(왼), 파란색(오)인데 배경색이 깃발과 동일해서 표시가 잘 안 됩니다.
• 깃발의 움직임이 너무 작게 나와서 눈에 띄게 하려면 추가적인 가이드를 줘야 합니다. 
• 로직을 너무 단순하게 줘서 실제 청기백기게임과는 좀 다릅니다. 이건 다음에 제대로 된 코드를 만들어서 돌려볼 생각입니다. 

그림 : 생성된 청기백기 게임 예시

 

---

 

최근 X를 통해서 DeepSeek나 Gemini, Grok3 등이 게임을 즉석으로 만들어 주는 사례를 많이 접했었습니다. 그래도, 예전에 ChatGPT로 만들어 본 경험 때문에 '뭐... 이렇게 나오려면 뒤에서 시행착오가 얼마나 많았겠어...' 하며 애써 돌아보지 않았었는데 그게 제 오판이었습니다. AI를 이용한 코딩의 수준은 그 짧은 시간동안 또 한번 큰 점프를 해 버린 것 같습니다. 이제는 정말... 인간 개발자의 작업 대부분을 대체할 수 있는 수준까지 와 버린 것 같습니다. 

 

제가 전문 개발자가 아니다보니 위기의식 보다는 새로운 장난감을 만들어 볼 수 있게 되었다는 점에서 흥분됩니다. 다만, 보안 위험이 없고 비용이 합리적인 서비스가 나오면 좋겠습니다. 그게 아니면 가정용 PC에서 저사양의 그래픽카드(GPU)를 이용해도 충분이 잘 돌릴 수 있는 오픈소스 솔루션도 좋겠구요. 그래서 그런 것들을 개발하고 공개하는 분들께는 늘 감사하는 마음을 갖고 있답니다! ^^