메뉴 전체보기

회원메뉴

Vibe는 AI 디자인 도구를 코딩하고 음악으로 생명을 불어넣었습니다. > 게시판

본문 바로가기

쇼핑몰 검색

NO. 3445
제목 : Vibe는 AI 디자인 도구를 코딩하고 음악으로 생명을 불어넣었습니다.
2026-09-28 10:34

소개: Vibe는 AI 디자인 도구를 코딩하고 음악으로 생명을 불어넣었습니다.


2022년 11월, 데이비드 스미스 (자신을 수학자가 아닌 "도형 애호가"라고 부르는 은퇴한 인쇄 기술자)는 PolyForm Puzzle Solver 라는 프로그램을 가지고 놀다가 13변 다각형을 만들었습니다. 뭔가 가능성이 있어 보일 때마다 그는 종이에서 조각을 잘라 손으로 이리저리 밀어 보았습니다. 결국 그는 결코 반복 패턴에 빠지지 않으면서 한 표면을 덮는 도형을 만들어 냈습니다. 최초의 그런 도형이었습니다!

그와 몇몇 협력자들은 페도라처럼 생긴 모양 때문에 그것을 "모자"라고 별명 붙였습니다(많은 사람은 티셔츠처럼 보인다고 생각하는데, 저도 그쪽입니다). 스미스와 그의 동료들(카플란, 조지프 새뮤얼 마이어스, 하임 굿맨-스트라우스)은 그 사실을 증명하는 데 몇 달을 보냈고, 2023년 3월에 최초의 진정한 "비주기 단일 타일"을 발표했습니다.

하나의 도형, 무한한 덮기, 반복 없음, 파이의 숫자처럼 결코 순환에 안착하지 않는 패턴.

전문 수학자들은 50년 동안 이런 도형을 찾아왔습니다. 하지만 퍼즐 소프트웨어와 종이 오리기를 활용한 한 애호가가 그것을 찾아냈습니다. 정말 놀랍지 않나요!

저에게도 그랬고, 저는 그 생각을 멈출 수 없었습니다. 아이가 그린 것처럼 보이면서도 결코 패턴에 안착하지 않는 도형이라니, 뭔가 아름답게 느껴졌습니다. 저도 그만큼 아름다운 것을 만들 수 있을지 알고 싶었습니다… 하지만 나무로 만들고 싶었습니다.

이 Instructable은 그 프로젝트의 디자인 단계, 즉 수학적 도형에 매료된 제가 나무로 된 "퍼즐 플래터"를 위한 실제로 제작 가능한 디자인을 만들어 가기까지의 과정을 다룹니다.

그 과정에서 저는 곧 디자인 도구를 만들어야 한다는 사실을 깨달았습니다. 그래서 Claude AI와 함께 바이브 코딩으로 도구를 만들고 여러 레이아웃을 실험했습니다. 이 과정은 매우 성공적이었고, 창의적인 파트너인 AI와 더 잘 협업하는 방법을 가르쳐 주었습니다.

그다음에는 한 단계 더 나아가 AI에게 제작 규칙을 가르쳐 스스로 몇 가지 놀라운 패턴을 만들 수 있도록 했습니다. 여러분이 보게 될 패턴은 지금까지 한 번도 만들어진 적이 없습니다!

그 후 저는 제 디자인과 Claude의 디자인을 음악과 음성에 반응하는 만화경 으로 구현했습니다. 한때는 제가 동아리에서 그것을 발표했을 때 방 전체가 춤추게 만들기도 했습니다. (7단계를 참조하세요.)

그렇다면 왜 무지개를 비유로 사용했을까요? 무지개와 비주기 타일링은 사실 같은 발상입니다. 무지개는 매끄러운 규칙에 따라 다음 색으로 이어지는 색의 스펙트럼이지만, 어느 띠도 정확히 반복되지 않습니다. 아인슈타인 타일(일명 모자/셔츠)은 기하학에서 그 원리를 구현한 것입니다. 둘 다 "반복 없는 구조"입니다. 타일링을 무지개처럼 색칠하거나 다른 색 구성표를 적용하면, 같은 객체 안에 이 공통된 발상이 구현되어 있음을 볼 수 있습니다. 그래서 "무한 스펙트럼"입니다.

춤출 준비를 하거나, 지금까지 본 적 없는 새로운 아인슈타인 타일 디자인을 그저 감상해 보세요. (그리고 8단계의 플라즈마 모드도요!)




STEP 1. 준비물


준비물


준비물


아인슈타인 타일 모양으로 잘린 종이와 나무 타일

디자인과 테마 색 구성표를 만들기 위한 AI (Claude) 및 PC

재미를 위한 아인슈타인 타일 스탬프


제휴 링크




STEP 2. 아인슈타인 모자/셔츠를 만나보세요.


아인슈타인 모자/셔츠를 만나보세요.


아인슈타인 모자/셔츠는 세 가지 서로 다른 변 길이를 가진 13각형입니다. 이러한 특정 변들이 회전되거나 거울처럼 뒤집힌 복사본과 서로 맞물려 평면을 비주기적으로 덮을 수 있게 해줍니다.

내가 선택한 크기에서, 하나의 타일 크기는 50.8 × 36.7 mm (2 × 1.44 인치)입니다.




STEP 3. 종이 재앙 (왜 도구가 필요했는가)


종이 재앙 (왜 도구가 필요했는가)


종이 재앙 (왜 도구가 필요했는가)


나는 누구나 시작하는 방식으로 시작했으며, 다윗 스미스가 했던 방식으로도 시작했다: 종이에 모자를 인쇄하고, 몇십 개를 잘라내어 주방 테이블에서 디자인을 조립해 보았다. 나는 두 가지 문제를 겪었다.

첫째, 이 형태는 눈대중으로 만들 수 없다. 정사각형이나 육각형과는 달리, 합법적인 배치와 불법적인 배치가 있다. 불법적인 배치는 보기에는 괜찮아 보이지만, 몇 개의 타일 후에는 아무것도 채울 수 없는 틈이 생긴다.

둘째, 아내가 사무실에 들어왔을 때, 문에서 불어오는 바람이 내가 정성스럽게 배열한 종이 타일을 바닥에 흩날리게 했다. 몇 시간의 조정이 한 번의 바람에 사라졌다.

나무 타일이 도움이 되었지만, 나는 금방 바닥이 나버렸고 흥미로운 디자인을 생각해내는 데 시간이 걸렸다. 나는 많은 실패를 겪었다.

그래서, 나는 디지털로 디자인을 탐색하고 배열을 시도하며, 그것들이 유효한지 빠르게 확인하고, 디자인이 확정된 후에만 나무에 투자할 수 있는 방법이 필요했다.




STEP 4. AI Vibe 코딩으로 디자인 도구 만들기


AI Vibe 코딩으로 디자인 도구 만들기


저는 AI 어시스턴트(Claude)와 함께 (vibe code) 슬라이딩 퍼즐 조각을 테이블 위에서 쉽게 움직이듯이 모자/셔츠 타일 레이아웃을 탐색할 수 있는 인터랙티브 도구를 만들었습니다. 우선, vibe 코딩은 그렇게 어렵지 않습니다. 만들고 싶은 행동과 기능을 설명하기만 하면 됩니다. 저는 Claude에게 모자/셔츠 타일의 SVG 파일을 제공한 후, 제가 만들고 싶은 것을 말했습니다. 아래에서 우리가 만든 기능 목록을 확인할 수 있습니다. AI와 함께 작업하는 것이 파트너와 함께 작업하는 것처럼 가장 좋기 때문에 의도적으로 '우리'라고 말합니다. 또한, 막히면 AI에게 당신이 하려는 것에 대해 인터뷰해 달라고 요청하면, 당신이 몰랐던 무언가를 창조하는 데 도움이 될 것입니다. 시도해 보세요!

제가 만든 기능:

자석 스냅. 이것은 가장 중요한 기능이었습니다. 타일을 다른 타일 근처로 드래그하면, 근처의 모서리를 감지하고 스냅하여 자석이 서로 붙듯이 합법적인 결합 위치로 들어갑니다. 정점을 손으로 배치하는 것이 아니라, 타일을 가까이 이동시키면 유효한 위치에 잠깁니다.

회전 및 뒤집기. 타일은 비주기적으로 타일링하기 위해 회전과 거울 이미지가 필요하므로, 모든 타일은 30도 또는 60도 단위로 회전할 수 있고 거울 형태로 뒤집을 수 있습니다. 타일을 선택하고 회전하거나 뒤집은 후 이웃 타일에 스냅되는 것을 보는 것이 디자인의 핵심 루프입니다.

색상 지정. 타일을 개별적으로 또는 그룹으로 색칠하여 어떤 나무나 에폭시가 어디에 들어갈지를 계획합니다. 저는 이를 사용하여 제 무지개 색 구성표를 배치했습니다.

색상별 타일 수. 디자인에서 각 색상의 타일이 정확히 몇 개 사용되는지를 보여주는 실시간 집계입니다. 이는 각 조각에 대해 얼마나 많은 나무나 에폭시 색조를 준비해야 하는지를 알려주기 때문에 물리적 제작에 필수적입니다.

자. 방사형 자가 디자인에 측정 링을 오버레이하고, 물리적 타일 크기를 직접 설정합니다. 이 도구는 정확한 치수를 보고하므로 완성된 조각이 얼마나 클지 항상 알 수 있습니다(밀리미터 또는 인치 단위로).

디자인 저장 및 공유. 디자인은 저장하거나 다시 로드할 수 있는 간단한 텍스트 형식으로 내보낼 수 있습니다. 종이 접근 방식 이후 신뢰성을 갖는 것이 중요했습니다.

에폭시를 위한 포켓 간격. 모든 타일을 균일한 양만큼 안쪽으로 축소하여 모든 타일 사이에 일정한 너비의 채널을 열어 그 채널이 색상 에폭시가 들어갈 곳이 되도록 합니다. 어떤 붓기 전에 지금 조정하면 물리적 제작에서 추측을 없앨 수 있습니다.

CNC 내보내기. 이 도구는 디자인을 정확한 물리적 크기의 CNC 준비 컷 파일로 내보내며, 에폭시 포켓 간격이 내장되어 있습니다.




STEP 5. AI에게 "유효함"이 무엇인지 가르치기 (재미있는 부분)


AI에게 "유효함"이 무엇인지 가르치기 (재미있는 부분)


AI에게 "유효함"이 무엇인지 가르치기 (재미있는 부분)


AI에게 "유효함"이 무엇인지 가르치기 (재미있는 부분)


AI에게 "유효함"이 무엇인지 가르치기 (재미있는 부분)


AI에게 "유효함"이 무엇인지 가르치기 (재미있는 부분)


내가 예상치 못한 반전이 있다: AI(클로드)는 이 타일들이 어떻게 맞물리는지 몰랐기 때문에 결국 AI를 가르치게 되었다, 반대의 경우가 아니다. 나는 클로드에게 내가 손으로 작업하며 정리한 규칙들을 가르쳤다: 합법적인 배치가 어떻게 생겼는지, 가장자리가 어떻게 정렬되어야 하는지, 괜찮아 보이는 조인트가 몇 개의 타일 후에 채워지지 않는 빈 공간을 가둘 수 있는 이유, 그리고 멋진 대칭의 빈 공간이 어떻게 생겼는지, 그래서 그것을 유지해야 한다는 것이다.

우리는 오랜 시간 동안 왔다 갔다 했다(훈련 비디오를 참조). 나는 배치를 제안했고; 그것은 그것을 일반 규칙으로 바꾸려고 했다; 우리는 실제 배열에 대해 그 규칙을 테스트하고 어디서 깨지는지 찾았다. 조금씩 우리는 "가지", "코브", "쐐기"라는 공유 언어와 힘들게 얻은 규칙 세트를 만들었다:

  1. 타일은 일치하는 가장자리를 따라 맞물리며, 타일의 가장 긴 가장자리는 사실 두 개의 짧은 가장자리를 변장한 것이다(그것은 여러 번 시도해야만 확정할 수 있었다).
  2. 패턴이 식별되면 60° 쐐기로 바깥쪽으로 구축한 다음, 여섯 배 대칭을 위해 회전한다.
  3. 다음으로 넘어가기 전에 각 주머니를 닫아야 하며, 그렇지 않으면 아무것도 맞지 않는 구멍을 가두게 된다(흥미로운 빈 공간이 아닌 한).
  4. 깨끗한 빈 공간(예: 육각형)은 특징이며; 울퉁불퉁한 것은 실수일 가능성이 높다.

정말로 교정하고, 테스트하고, "이해하는" 모습을 지켜보며 가르치는 것 같은 기분이었다. 하지만 중간쯤에 클로드가 내가 여러 번 수정한 후에도 계속 실수를 반복할 때 인내심을 잃고 있다는 것을 깨달았다. 그러고 나서 그 인내심이 좋지 않다는 것(일이나 나 자신에게)과 이 과정이 내가 조심하지 않으면 사람들에게 인내심을 잃게 만들 수 있다는 것을 깨달았다. 그것도 수업의 일부가 되었다.

그 모든 가르침의 결과는 규칙 과 내가 무엇을 자르기 전에 좋은 디자인과 막다른 길을 구별할 수 있는 도구였다.




STEP 6. 에폭시 채널 계획하기


에폭시 채널 계획하기


에폭시 채널 계획하기


에폭시 채널 계획하기


에폭시 채널 계획하기


목재에 에폭시를 사용하는 두 가지 방법을 시도해 보고 싶었다:

  1. 타일 모양 사이에 채널을 만들고 투명 에폭시로 채워 나무 타일이 공간에 떠 있는 것처럼 보이게 하는 방법이다. 이 채널의 CNC 경로를 만드는 일은 순조로웠다.
  2. 반대 방식은 다른 이야기였다. 무지개색 에폭시로 채울 타일 모양의 포켓을 만들고, 스테인드글라스의 납선처럼 나무 테두리로 포켓을 분리해 각 나무 모양의 윤곽이 드러나고 무지개색이 선명하게 보이도록 하고 싶었기 때문에 1단계와 반대되는 작업을 만들었다. 내보낸 CNC 파일은 포켓을 정의하므로, CNC로 가공할 조각은 에폭시를 부어 넣기에 알맞은 크기가 된다.

(1)과 (2)를 정의하고 친구 Mitchell과 함께 CNC에서 테스트한 뒤, 기포 없이 에폭시를 붓는 방법도 조사해야 했다. 그 작업에는 시간이 걸렸기 때문에 디지털 디자인 도구를 더 가지고 놀면서 반응형 이미지를 만들기로 했다.

또한 다양한 목재 종류와 색상으로 퍼즐 플래터를 만들 계획이다. 어서 만들어 보고 싶다. AI는 이미 TBone relief를 만들어 각진 CNC 절단 조각을 가장 잘 접착하는 방법을 알려 주었다.




STEP 7. 클로드를 풀어주기


클로드를 풀어주기


클로드와 함께한 모든 훈련과 재훈련을 통해, 나는 그것이 스스로 어떻게 할지를 보고 싶었다. 그래서 내가 가르친 내용을 바탕으로 몇 가지 흥미로운 디자인을 만들어 달라고 요청했다.

이 패턴을 이전에 본 적이 없어서 정말 놀라웠다. 나는 클로드에게 그것들을 검색해 보라고 요청했지만 아무것도 찾지 못했으니 - 정말 독창적인 작품들이다!




STEP 8. 디자인을 생동감 있게 만들기


디자인을 생동감 있게 만들기


에폭시 붓기를 연구하는 동안 디자인이 정적인 그림으로 남아있게 하기보다는, 나는 클로드와 다시 작업하여 가장 재미있는 부분을 만들었습니다. 나는 소리 및 음성 반응형 만화경을 만들었습니다.

이것이 하는 일은 다음과 같습니다:

타일이 음악에 맞춰 피어납니다. 노래를 로드하거나 마이크를 켜면 디자인이 오디오에 맞춰 드러납니다. 타일은 여섯 배 대칭 그룹으로 나타나므로 만화경의 대칭이 매 순간 보이며 패턴은 비트에 맞춰 꽃이 피듯이 성장합니다.

실제 비트 감지. 이를 제대로 구현하는 데는 노력이 필요했습니다. 초기 버전은 실제 음악의 많은 비트를 놓쳤습니다. 우리는 스펙트럼 플럭스를 기반으로 감지를 재구성했으며, 저음만이 아니라 전체 소리를 감시하여 갑작스러운 시작을 감지하도록 했습니다. 그런 다음 거의 모든 타격이 눈에 띄는 팝으로 이어지도록 조정했습니다. 감도 슬라이더는 어떤 노래에든 맞출 수 있습니다.

음성 활성화 기능도 있습니다. 마이크를 통해 듣기 때문에, 나는 내 목소리, 박수, 대화, 노래로 이를 조작할 수 있으며 타일이 반응합니다.

리빌 모드. 패턴이 나타나는 여러 가지 방법: 블룸(중심에서 바깥쪽으로), 스파클(무작위 그룹), 소용돌이(나선형), 링(동심원), 핀휠(회전하는 쐐기), 캐스케이드(가장자리에서 안쪽으로), 그리고 펄스(전체 디자인이 숨을 쉬듯이).

다양한 기분의 무지개. 팔레트 메뉴는 전체 타일링을 즉석에서 재색칠합니다: 무지개, 일몰, 바다, 네온, 그리고 계절 및 휴일 테마(가을, 겨울, 발렌타인, 할로윈, 크리스마스 등). "모두 루프" 옵션은 모드, 기분 또는 심지어 다른 디자인을 자동으로 순환시켜 결코 반복되지 않도록 하여 비주기적인 타일링에 적합합니다.

버블(즉, 액체 타일). 토글을 사용하면 모든 타일이 고체 채우기 대신 수백 개의 작은 잘린 원으로 재구성되어 전체 디자인이 거품처럼 변하며, 각 모자는 정확한 형태를 유지하면서 탄산수의 거품으로 녹아내립니다. 밀도 슬라이더는 가벼운 반짝임에서 완전한 붓기로 조정할 수 있습니다. 내가 에폭시에서 계속 싸우고 있는 거품이 내가 원하는 유일한 장소라는 것이 적절합니다.

눈부신 피날레. 디자인이 완성되면 각 비트가 타일을 통해 확장되는 빛의 물결을 발사하며, 조정 가능한 "눈부심" 속도가 있습니다. 그런 다음 리셋되고 새로운 패턴이 피어납니다.

사람들을 춤추게 했습니다. 나는 이 모든 것을 지역 AI 모임에 가져가 90분 동안 강연하며 아인슈타인 타일 디자인 도구와 만화경을 실시간으로 시연했습니다. 끝날 무렵, 나는 방 안의 사람들이 음악에 반응하는 타일에 맞춰 춤추게 만들었습니다. 새로운 수학적 형태가 비트에 맞춰 맥동하고 물결치는 모습을 보는 것은 사람들을 자리에서 일어나게 만드는 무언가가 있습니다.

디자인 단계에 완벽한 동반자입니다: 나무와 에폭시가 기다리는 동안, 기하학은 이미 살아 있습니다.




STEP 9. 결론


결론


아인슈타인 모자/셔츠 타일은 만들어진 지 4년이 채 되지 않았으며, 여기에서 탐색하고 색을 입혀 잘라낼 준비를 마쳤습니다. 물리적인 플래터는 아직 제 앞에 놓이지 않았지만(기포 없는 에폭시를 연구 중입니다), 디자인 단계 자체가 하나의 프로젝트가 되었습니다. 이는 구식의 손으로 직접 하는 탐구이자, 제가 보고 있던 것을 컴퓨터가 인식하도록 가르치는 일이자, 음악에 맞춰 전체가 살아나는 모습을 지켜보는 일이었습니다.

무엇보다 이 과정에서 저는 AI와 협력적이고 창의적으로 작업하는 방법을 배웠습니다. 그래서 제가 배운 내용을 제 목재 클럽과 AI 클럽 회원들과 공유했습니다(위의 소개 영상을 보세요. 이 영상은 제 AI 클럽 회원이 만든 것이고, 목재 클럽 영상은 여기 video 입니다).

다음 단계는 목재 버전을 만드는 것입니다.




STEP 10. 보너스 플라즈마 모드


보너스 플라즈마 모드


이번 버전에서는 타일을 플라즈마 처리하여 더 흥미로운 흐름 패턴을 만들었습니다. 마음에 드시길 바랍니다.


원문: https://www.instructables.com/Vibe-Coded-an-AI-Design-Tool-and-Brought-It-to-Lif/

좋아요 0
게시판

회사명 공방유니언 주소 각 공방 주소 참조
사업자 등록번호 0000 대표 공방유니언 전화 019-60105846 팩스 0000 이메일 gongbangunion@gmail.com
통신판매업신고번호 0000 개인정보관리책임자 공방유니언
Copyright © 2017 공방유니언. All Rights Reserved.