Skip to main content
TILNOTEAI 노트
page thumbnail

입코딩을 넘어 이제는 그림 코딩! [Tldraw]

Ditto_GPT
Ditto_GPT
•Views 4,166

GitHub - tldraw/make-real: Draw a ui and make it real

와 gpt에 그냥 웹사이트 디자인 그림으로 그려주면, 그대로 홈페이지도 만들어 줬으면 좋겠다고 생각했더니, 진짜로 그러한 서비스가 나왔습니다!

입코딩을 넘어 이제는 그림 코딩! [Tldraw] image 1

위의 그림이 제가 그린 것이고 아래가 OpenAI API 키를 입력하여 만들어진 사이트 입니다.

아주 똑같진 않지만 버튼까지 구현을 해줍니다!

게다가 자연어로 설명을 써써 게임까지 만들 수 있습니다.(다만, 최소한의 설명과 구성 내용은 써줘야 바르게 동작합니다.)

입코딩을 넘어 이제는 그림 코딩! [Tldraw] image 2

저는 핀볼 어드벤처를 한 15분 만에 그리고 만들어봤습니다.

입코딩을 넘어 이제는 그림 코딩! [Tldraw] image 3

몬스터랑 싸우는 게임도 만들어봤는데, 이게 좀 더 자세히 적어줘야 할 것 같기는해요!

하지만 공의 움직임이나 버튼을 누르면 움직이는 동작, 게임 오버등의 메세지를 띄워주는 것까지 알아서 구현해주는 부분이 정말 대단하다고 느껴졌습니다.

입코딩을 넘어 이제는 그림 코딩! [Tldraw] image 4

그리고 이렇게 코드 까지 복사 가능합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinball Adventure</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
  .pinball-container {
    background-color: #ffffff;
    border: 2px solid #000000;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }
  .flipper {
    background-color: #34D399;
    position: absolute;
    bottom: 20px;
    width: 100px;
    height: 20px;
    transform-origin: right center;
  }
  .flipper.left {
    left: 20px;
    transform: rotate(30deg);
  }
  .flipper.right {
    right: 20px;
    transform: rotate(-30deg);
  }
  .ball {
    background-color: #FBBF24;
    border-radius: 50%;
    position: absolute;
    bottom: 50px;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
  }
  .obstacle {
    background-color: #10B981;
    position: absolute;
  }
  .block {
    background-color: #EC4899;
    position: absolute;
  }
</style>
</head>
<body class="bg-gray-100">
<div class="min-h-screen flex flex-col items-center justify-center">
  <h1 class="text-4xl font-bold mb-6">Pinball Adventure</h1>
  <div class="pinball-container h-96 w-96">
    <!-- Blocks -->
    <div class="grid grid-cols-8 gap-1 absolute top-2 left-2 right-2">
      <div class="block h-6 w-6"></div>
      <div class="block h-6 w-6"></div>
      <div class="block h-6 w-6"></div>
      <div class="block h-6 w-6"></div>
      <div class="block h-6 w-6"></div>
      <div class="block h-6 w-6"></div>
      <div class="block h-6 w-6"></div>
      <div class="block h-6 w-6"></div>
    </div>
    <!-- Obstacles -->
    <div class="obstacle h-6 w-6 left-10 top-24"></div>
    <div class="obstacle h-6 w-6 left-36 top-32"></div>
    <div class="obstacle h-6 w-6 left-64 top-24"></div>
    <div class="obstacle h-6 w-6 left-80 top-32"></div>
    <!-- Flippers -->
    <div class="flipper left"></div>
    <div class="flipper right"></div>
    <!-- Ball -->
    <div class="ball"></div>
  </div>
  <div class="flex justify-center mt-4">
    <button class="bg-green-500 text-white px-4 py-2 rounded-lg mr-2">Press L</button>
    <button class="bg-green-500 text-white px-4 py-2 rounded-lg">Press R</button>
  </div>
</div>
<script>
  const leftFlipper = document.querySelector('.flipper.left');
  const rightFlipper = document.querySelector('.flipper.right');
  let leftFlipperAngle = 30;
  let rightFlipperAngle = -30;

  document.querySelector('button:nth-child(1)').addEventListener('click', () => {
    leftFlipper.style.transform = `rotate(${leftFlipperAngle}deg)`;
    leftFlipperAngle = leftFlipperAngle === 30 ? 20 : 30;
  });

  document.querySelector('button:nth-child(2)').addEventListener('click', () => {
    rightFlipper.style.transform = `rotate(${rightFlipperAngle}deg)`;
    rightFlipperAngle = rightFlipperAngle === -30 ? -20 : -30;
  });
</script>
</body>
</html>

이외에도 사용자들이 만들어 본 다양한 예시들이 있는데 정말 흥미롭네요!

#웹사이트 제작#UI 디자인#OpenAI API#자동 코드 생성#인터랙티브 게임