In my ongoing series exploring the intersection of AI and architectural design, I’ve embarked on my most complex test yet. The challenge I set for myself was this: could I use an AI collaborator, in this case Google’s Gemini, to recreate a parametric pavilion I had previously designed and perfected in Rhino and Grasshopper?
The goal was to move beyond simple prompts and see if AI could assist in translating a complex, visually-scripted Grasshopper definition into clean, functional JavaScript for the web.
AI와 건축 디자인의 교차점을 탐구하는 나의 연재 시리즈에서, 나는 지금까지 가장 복잡한 실험에 도전했다. 나 스스로에게 던진 질문은 이것이었다. 내가 Rhino와 Grasshopper에서 설계하고 완성했던 파라메트릭 파빌리온을, AI 협업자—이번엔 Google의 Gemini—와 함께 JavaScript로 재구성할 수 있을까?
목표는 단순한 프롬프트 응답을 넘어서, 시각적으로 구성된 복잡한 Grasshopper 정의를 웹 환경에서 작동하는 깔끔하고 기능적인 JavaScript 코드로 변환하는 과정에 AI가 얼마나 도움을 줄 수 있는지 확인하는 것이었다.
The Challenge: Translating Grasshopper Logic to Code
For anyone who works in computational design, Grasshopper is a powerful and intuitive tool. Its visual, node-based interface allows for rapid geometric exploration. My original pavilion design relied on this environment to define its twisting arches and interlocking structural grid.
The new challenge was to deconstruct that visual logic and rebuild it line by line in code. I wanted to create a standalone, interactive web application that wasn’t dependent on any specific CAD software. This meant translating the inherent logic of Grasshopper components into pure mathematical and procedural JavaScript, a task I undertook with Gemini as my coding partner.
도전: Grasshopper 로직을 코드로 옮기기
컴퓨테이셔널 디자인에 익숙한 사람이라면, Grasshopper가 얼마나 직관적이고 강력한 툴인지 잘 알 것이다. 노드 기반의 시각적 인터페이스 덕분에 복잡한 기하학적 실험이 빠르게 가능하다. 내 기존 파빌리온 설계는 이러한 환경을 바탕으로, 비틀린 아치와 맞물린 구조 그리드를 정의하여 완성되었다.
이번 도전은 그 시각적 로직을 해체하고, 자바스크립트 코드로 한 줄씩 다시 조립하는 작업이었다. CAD 소프트웨어에 의존하지 않고 작동하는 독립형 웹 애플리케이션을 만드는 것이 목표였으며, 따라서 Grasshopper 컴포넌트의 개념을 수학적이고 절차적인 JavaScript로 재해석해야 했다. 이 과정을 나는 Gemini와 함께 시작했다.
The Process: A Dialogue of Translation and Refinement
As the video chronicles, this was far from a simple “copy-paste” process. It was an iterative dialogue focused on translation and problem-solving.
- Lost in Translation – Early Hurdles: The initial attempts to define the core geometry were fraught with challenges. Concepts that are simple to manage in Grasshopper, like ensuring arcs remain perfectly circular and untwisted as they are arrayed, became complex logical problems in code. Early versions resulted in tangled geometry that didn’t hold its form.
- Finding Common Ground: The breakthrough came from methodically breaking down the problem, much like building a Grasshopper definition. We focused first on establishing the base circular arcs, then on the logic for trimming them at the ground plane, and finally on generating the vertical and horizontal supports. Each step required guiding the AI with the geometric principles I already knew from my original design.
- Controlling Parameters: With the core geometric engine built, the final step was to explore the parametric controls. We developed a user interface with sliders that mirrored the inputs of my Grasshopper script, controlling everything from the radii and height to the density of the structural members.
과정: 번역과 정제의 대화
영상에서 확인할 수 있듯이, 이 작업은 단순한 ‘복사-붙여넣기’로 해결되는 일이 아니었다. 끊임없는 번역과 문제 해결의 대화가 중심이었다.
- 초기의 혼란: Grasshopper에선 간단한 개념이 코드에선 복잡해졌다. 예를 들어, 원호를 완벽하게 원형으로 유지하면서 비틀림 없이 배열하는 작업은 Grasshopper에선 간단하지만, 코드로 구현하려면 복잡한 수학적 논리가 필요했다. 초기 버전에서는 형태가 엉키고 구조가 유지되지 않았다.
- 공통의 언어를 찾다: 문제의 단계적 해체: 전환점은 문제를 단계별로 분해하는 접근이었다. Grasshopper 정의를 짜는 것처럼, 우리는 먼저 원형 아치의 기본 구조를 설정하고, 지면에서의 트리밍 로직을 정리한 뒤, 수직 및 수평 지지 구조를 생성했다. 이 모든 과정에서 나는 원래 디자인에서 알고 있던 기하학적 원리를 AI에게 전달하며 안내해야 했다.
- 파라미터 제어: 상호작용 가능한 인터페이스: 기본 기하학 엔진이 완성되자, 우리는 파라메트릭 컨트롤을 구현했다. UI에는 슬라이더를 통해 Grasshopper의 입력값과 유사한 조작이 가능하게 했다. 반지름, 높이, 구조 밀도 등을 조절할 수 있도록 구성했다.
Reflections: Grasshopper vs. AI-Powered JavaScript
Having already built this model in Grasshopper, I can say with certainty that the visual scripting environment is faster for pure geometric ideation. However, that wasn’t the point of this experiment.
The true power of this AI-assisted workflow is the final product: a platform-independent, highly accessible web tool.
This process solidified a key insight: my expertise in Grasshopper was the single most critical factor for success. I wasn’t asking the AI to “design a pavilion.” I was using my knowledge of the required geometric steps to direct the AI in writing the code. It affirmed that for complex tasks, AI functions best as an incredibly powerful amplifier for existing domain knowledge, not a replacement for it.
This experiment proves that we can leverage AI to translate our design intelligence into new, more accessible and interactive mediums. I’m excited to see where this workflow leads next.
평가: Grasshopper vs. AI 기반 JavaScript
이미 Grasshopper에서 이 모델을 만든 경험이 있는 나로서는, 순수한 기하학적 아이디어를 빠르게 실현하는 데는 Grasshopper가 더 빠르다는 점을 다시 한 번 확인했다. 그러나 이번 실험의 목적은 그것이 아니었다.
이 AI 협업 워크플로의 진짜 강점은 최종 결과물에 있다. CAD에 의존하지 않고, 플랫폼에 구애받지 않는 웹 기반 도구를 완성했다는 점이다.
이 경험을 통해 내가 얻은 가장 중요한 통찰은, 내가 이미 알고 있는 Grasshopper 지식이야말로 성공의 핵심이었다는 것이다. 나는 AI에게 “파빌리온을 디자인해줘”라고 말한 것이 아니라, 내가 알고 있는 기하학적 단계를 토대로 AI가 코드를 작성하도록 디렉션을 준 것이다. 이 과정은 AI가 기존 도메인 지식을 대체하는 것이 아니라, 강력하게 증폭하는 역할을 한다는 사실을 보여주었다.이번 실험은, 우리가 AI를 활용해 기존 디자인 지식을 보다 접근 가능하고 상호작용 가능한 미디어로 확장할 수 있다는 것을 입증한다. 앞으로 이 워크플로가 어디까지 확장될 수 있을지, 무척 기대된다.
Keywords: AI architectural design, parametric pavilion, AI design collaboration, Rhino pavilion modeling, architecture meets AI
키워드: AI 건축 디자인, 파라메트릭 파빌리온, 인공지능 설계 협업, Rhino 파빌리온 모델링, 건축과 AI 융합
Leave a Reply