GoodBarber에서는 코드를 작성하지 않고도 앱을 구축할 수 있습니다. 컴포넌트(components)를 조립하고, 드래그 앤 드롭(drag and drop)하며, 그 아래에서는 디자인 시스템(design system)이 모든 것을 일관성 있게 유지합니다. 최근에 두 번째 방식이 도입되었습니다. 일상적인 언어로 AI에게 설명하여 커스텀 섹션을 얻을 수 있게 된 것입니다. 이제 두 가지 제작 방식이 동일한 백오피스(back office) 내에서 운영되고 있으며, 즉각적인 질문이 뒤따릅니다. 이것이 드래그 앤 드롭(drag & drop)의 종말을 알리는 시작일까요?

아니요. 그리고 그 "아니요"라는 대답은 방어적인 본능이 아니라, 논리적으로 설명 가능한 인터페이스-아키텍처(interface-architecture)의 선택입니다.

모두가 알고 있는 사다리

제작 도구의 역사는 모두가 동일하게 이야기하며, 이는 사실입니다. 바로 추상화의 사다리(ladder of abstraction)입니다. 첫 번째는 코드(code)입니다. 완전한 제어권, 완전한 복잡성을 가집니다. 그다음은 직접 조작(direct manipulation), 즉 드래그 앤 드롭(drag & drop)입니다. 렌더링 자체를 직접 만지는 단계로, 최초의 위대한 민주화였습니다. 그다음은 컴포넌트(components)입니다. 픽셀을 맞추는 것을 멈추고 디자인 시스템(design system)의 통제를 받는 일관된 요소들을 조립하기 시작합니다. 그리고 이제 프롬프트(prompt)입니다. 당신이 설명하면 기계가 생성합니다. 사다리의 각 단을 올라갈수록, 당신은 메커니즘(mechanics)에서 멀어지고 의도(intent)에 가까워집니다.

이 중 어느 것도 새로운 발견은 아닙니다. 하지만 그 사다리 위에 놓인 제품을 실제로 사용할 때 도달하게 되는 결론은 자주 언급되지 않습니다. 새로운 단이 나타날 때마다 예측은 항상 같았습니다. "이것이 기존의 것들을 쓸모없게 만들 것이다." 하지만 그것은 단 한 번도 실현된 적이 없습니다. 프롬프트(prompt) 역시 예외가 아닐 것이며, 그 이유는 다음과 같습니다.

드래그 앤 드롭(drag & drop)이 더 잘하는 것 — 그리고 앞으로도 그럴 것

시각적으로 보여줄 수 있는 모든 것에 대해, 직접 조작(direct manipulation)은 타의 추종을 불허합니다. 이 버튼을 2픽셀 아래로; 이 이미지를 섹션 상단에; 이 메뉴를 이 순서대로. 제스처(gesture) 자체가 곧 설명입니다. AI에게 이를 설명하는 문장은 동작 자체보다 더 깁니다. 또한 시각적 인터페이스(visual interface)는 단순히 명령을 받는 것 이상의 역할을 합니다. 무엇이 가능한지를 보여줍니다. 설정 패널(settings panel)은 제품이 할 수 있는 기능의 지도이며, 비어 있는 프롬프트(prompt) 입력창은 추측을 유도하는 초대장일 뿐입니다.

그렇기 때문에 플랫폼의 노코드 (no-code) 핵심인 컴포넌트 관리 (component management), 화면 (screens), 내비게이션 (navigation), 디자인 (design)은 의도적으로 드래그 앤 드롭 (drag & drop) 방식을 유지합니다. 이것은 우리가 아직 이전하지 못한 구식 인터페이스가 아닙니다. 그것은 가시적이고, 정밀하며, 보여줄 수 있는—그러한 범주의 의도에 적합한 인터페이스입니다.

프롬프트가 허용하는 것 — 시각적 인터페이스가 결코 할 수 없는 것

그렇게 하면 롱테일 (long tail), 즉 어떤 카탈로그로도 커버할 수 없는 구체적이고 단일한 요구사항들이 남습니다. 드래그 앤 드롭을 통해 이 각각의 요구사항을 처리하려면 인터페이스 비용이 발생합니다. 즉, 하나의 패널이 더 추가되고, 더 많은 옵션과 더 많은 특수 사례가 생겨납니다. 그리고 그 비용은 모두가 지불하게 됩니다. 한 명의 고객을 위해 추가된 모든 옵션은 다른 모든 사용자들의 화면을 무겁게 만듭니다. 이 논리를 끝까지 밀어붙이면 그 결과가 어디에 도달할지 알 수 있습니다. 모든 것을 허용하려는 에디터는 너무 조밀해져서, 사용자를 구제해주겠다고 약속했던 바로 그 교육을 필요로 하게 됩니다. 예측 불가능한 것을 그려내는 대가는 비대해진 UI (User Interface)라는 가격으로 돌아옵니다.

프롬프트는 그 관계를 역전시키며, 그것이 프롬프트의 진정한 정당성입니다. 요청이 아무리 복잡하더라도 프롬프트의 표면은 텍스트 필드라는 일정한 형태를 유지합니다. "대출 시뮬레이터: 세 개의 필드, 월 납입금이 자동으로 계산됨, 콜백을 받기 위한 버튼"—어떤 합리적인 설정 패널 (settings panel)도 이를 제공하지 못하지만, 문장 하나는 가능합니다. 프롬프트는 모든 것을 위한 새로운 인터페이스가 아닙니다. 그것은 합리적으로 그려낼 수 없는 것들을 위한 인터페이스입니다. 이 둘은 경쟁하는 것이 아닙니다. 이들은 같은 경기장에서 뛰지 않습니다. 드래그 앤 드롭은 당신이 보여줄 수 있는 의도를 경로로 안내하고, 프롬프트는 당신이 보여줄 수 없는 의도를 경로로 안내합니다.

엔지니어링은 그 경계(seams)에 있다

두 인터페이스가 공존한다면, 엔지니어링 작업의 위치가 이동합니다. 그것은 생성 (generation) 자체에 있는 것이 아니라, 그 경계 (seams)에 있습니다. 즉, 프롬프트의 결과물이 다른 모든 것들과 나란히 떠다니는 대신, 어떻게 하면 다른 모든 것들과 동일한 세계에 안착하게 만들 것인가에 달려 있습니다.

첫 번째 이음새(seam)는 디자인 시스템(design system)입니다. AI가 생성하는 결과물은 디자인 시스템이 다른 모든 곳에서 보장하는 궤도(rails)를 벗어나서는 안 됩니다. 그렇지 않으면 생성된 모든 섹션은 이식된 조직(graft)처럼 보일 것이며, 앱은 전체를 하나로 묶어주던 일관성(coherence)을 잃게 됩니다. 우리는 이 습관을 초기 단계의 작은 사례에 적용했습니다. 우리의 AI 팔레트 생성기(AI palette generator)는 단순히 "어떤 색상들"을 출력하는 것이 아니라, 이미 적용되어 있는 대비 규칙(contrast rules)을 상속받는 디자인 시스템의 4색 의미론적 시스템(four-color semantic system)에 편입되는 팔레트를 출력합니다. AI라는 발판(rung)은 그 아래에 있는 발판에 의지하며, 바로 이것이 AI의 결과물을 검토 없이도 사용할 수 있게 만드는 핵심입니다.

두 번째 이음새는 사다리의 맨 아래에 있습니다. 당신이 어떤 인터페이스를 통해 들어왔든, 모든 것은 결국 동일한 지점, 즉 스토어에 제출되어 3년 후에도 여전히 작동해야 하는 실제 앱(real app)으로 귀결됩니다. 추상화(Abstraction)는 그 복잡성을 숨길 뿐, 제거하지는 못합니다. 누군가는 그 밑바닥에서 지속적으로 그 복잡성을 감당하고 있습니다. 이는 그 자체로 별도의 주제이지만, 이것만은 기억하십시오. 그 어떤 발판도, 심지어 프롬프트(prompt)조차도 그 복잡성을 사라지게 만들지는 못했습니다.

마지막이 아닌, 다음 단계의 발판

프롬프트가 아마도 사다리의 꼭대기는 아닐 것입니다. 다음에 무엇이 올지, 그리고 언제 올지는 알 수 없습니다. 하지만 패턴은 안정적입니다. 새로운 발판이 생길 때마다 아래에 있는 발판들을 잘라내는 것이 아니라, 그 위에 올라타 각 발판에 이전보다 더 날카로운 역할을 부여합니다.

따라서 "AI 기반" 제작 도구를 평가할 때 사용할 수 있는 간단한 테스트가 있습니다. 바로 경로(paths)의 수를 세어보는 것입니다. 그 도구가 당신에게 단 하나의 발판만을 강요하나요? 즉, 제스처(gesture)가 보여줄 수 있는 것까지 포함하여 모든 것을 설명하도록 강요하나요? 아니면 모든 의도(intent)가 각자의 최단 경로를 유지하나요? 정밀한 것을 위한 제스처, 일관된 것을 위한 시스템, 예측 불가능한 것을 위한 문장과 같이 말입니다. 제작 도구는 최신 발판의 높이로 판단하는 것이 아니라, 당신이 그 발판들 사이를 얼마나 자유롭게 이동할 수 있는지로 판단됩니다.

한 단계 더 높이 올라간다고 해서 다른 발판들을 잘라내야 한다는 뜻은 결코 아닙니다.