새벽 3시, 나를 잠 못 들게 한 한 가지 생각에서 시작되었습니다. 만약 Figma 변수(variables)의 변경 사항이 브라우저 DevTools에서 CSS 변수를 조정하는 것처럼 실행 중인 웹 앱에서 즉각적으로 보인다면 어떨까? 몇 년 전 실시간 애플리케이션을 구축했던 경험 덕분에, 내 머릿속은 즉시 그 아키텍처로 향했습니다. 실시간 동기화 레이어(real-time sync layer)를 CSS 변수 및 Figma와 직접 결합하면 어떤 일이 벌어질까? 그날 오전 늦게, 나는 자리에 앉아 약 8시간 만에 작동하는 개념 증명(proof of concept)을 만들어냈습니다.

하지만 시간이 조금 흐른 뒤, 나는 스스로에게 솔직한 질문을 던져야 했습니다. 요즘 실제로 이런 기능이 필요한 사람이 누구일까?

결국, Figma는 이미 Code Connect, MCP 서버, 그리고 Code Layers를 제공하고 있습니다. 디자인은 그 어느 때보다 빠르게 생성되고 있으며, 코드(code)로 그 어느 때보다 빠르게 변환되고 있습니다. 디자인과 개발이 점점 하나의 AI 주도 워크플로우(AI-driven workflow)로 통합되고 있다면, 왜 누군가가 여전히 런타임(runtime)에 토큰을 주입해야 할까요?

문제점: AI 디자인 드리프트(Design Drift)와 정적 파이프라인(Static Pipelines)

그 후 몇 주, 몇 달 동안 나는 AI가 소프트웨어 개발을 어떻게 변화시키고 있는지에 대해 계속 고민했습니다. 레이아웃 코드(layout code)는 LLM에 의해 몇 초 만에 생성되지만, AI 모델은 실행 중인 애플리케이션에 대한 시각적 인지(visual awareness)가 부족합니다. 그 결과 디자인 드리프트(design drift)가 발생합니다. 패딩(paddings)이 어긋나고, 컬러 모드(color modes)가 깨지며, 테마 경계가 모호해집니다.

동시에, 전통적인 토큰 파이프라인(token pipelines)은 팀들이 사소한 시각적 수정을 검증하기 위해 빌드 프로세스(build processes)를 기다리도록 강요합니다.

나는 새로운 접근 방식을 테스트하기 시작했습니다. 만약 우리가 라이브 런타임(live runtime)에서 먼저 디자인 결정을 내린다면 어떨까? 디자이너, 개발자, 그리고 AI 에이전트(AI agents)가 저장소(repository)나 단일 진실 공급원(single source of truth)에 무엇인가를 커밋하기 전에 실행 중인 앱에서 시각적 변경 사항을 라이브로 테스트할 수 있다면 어떨까? AI 코드를 한 줄씩 감사(auditing)하는 대신, 런타임 우선(runtime-first) 접근 방식은 AI가 생성한 UI를 위한 라이브 안전 경계(live safety boundary) 역할을 할 수 있습니다.

TokenIgnite는 이러한 워크플로우를 탐구하기 위한 나의 시도입니다.

런타임 우선 검증(Runtime-First Validation)의 작동 방식

토큰 업데이트를 위해 전통적인 빌드 파이프라인 (build pipelines)에만 의존하는 대신, TokenIgnite는 지속적 주입 (continuous injection) 방식을 사용합니다. Figma 변수 (variables)를 로컬 개발 환경이나 폐쇄형 스테이징 서버 (staging servers)로 거의 실시간으로 스트리밍합니다.

• 코드 변경 없는 테스트: 저장소 (repository) 파일은 내보낼 준비가 될 때까지 건드리지 않은 상태에서, 브라우저에 업데이트를 실시간으로 적용할 수 있습니다.
• AI를 위한 실시간 안전 경계 (Live Safety Boundary): TokenIgnite는 Figma에서 코드 구문 (syntax)을 직접 읽습니다. 만약 사용자 정의 속성 (custom properties)이 누락되어 있다면, 이를 동적으로 생성하여 Figma 파일의 코드 구문에 다시 기록합니다. Figma MCP 서버 (MCP Server)에 연결된 LLM (Large Language Model)이 UI 코드를 생성할 때, 해당 속성들을 MCP 서버를 통해 직접 전달받습니다. 사용자는 프롬프트 (prompt)를 통해 AI가 해당 속성들을 컴포넌트 범위 (component scope) 내에서 엄격히 사용하도록 지시하기만 하면 됩니다. 그러면 TokenIgnite는 해당 속성들을 실행 중인 앱의 루트 (root) 및 테마 범위 (theme scope)에 직접 주입합니다. 이를 통해 TokenIgnite는 AI 코드 생성의 기반이자 런타임 (runtime)에서의 최종 검증 레이어 (validation layer) 역할을 동시에 수행합니다.

• 단축된 피드백 루프 (Short-Circuit Feedback Loops): 탐색 과정에서 빌드 파이프라인의 경계를 건너뜁니다. 하나의 변수 업데이트가 전 세계의 연결된 로컬 및 스테이징 환경으로 스트리밍되므로, 디자이너, 개발자, 그리고 AI 에이전트 (AI agents)가 실시간으로 공동 반복 (co-iterate)할 수 있습니다.
• 깔끔한 네이티브 CSS 내보내기: 준비가 되면 Figma 변수는 깔끔한 CSS 사용자 정의 속성 (CSS custom properties)으로 직접 컴파일됩니다.
• 제로 프로덕션 풋프린트 (Zero Production Footprint): 프로덕션 빌드에는 전혀 영향을 주지 않는 순수 개발 전용 의존성 (npm i -D tokenignite)으로 작동합니다.

베타 버전의 뒷이야기: 4개월간의 1인 개발

늦은 밤의 아이디어에서 시작해 기능적인 SaaS 플랫폼으로 TokenIgnite를 구축하는 데 약 4개월간의 1인 제품 개발 기간이 소요되었습니다. 그 규모에 대해 간략히 비하인드 스토리를 들려드리자면 다음과 같습니다:

• 소유권 (Ownership): 엔드 투 엔드(end to end) 단독 소유 (아이디어, 컨셉, 비주얼 아이덴티티, UX/UI, 엔지니어링, 인프라 및 비전).
• 코드베이스 (Codebase): 약 1,000개의 Git 커밋에 걸친 TypeScript/JavaScript 및 CSS 기반의 약 61K 라인의 코드 (약 85%가 TypeScript).
• 아키텍처 (Architecture): Figma 플러그인, npm SDK + CLI, Express/Firebase 백엔드, Next.js 웹사이트 및 문서를 포함하는 모노레포 (Monorepo) 아키텍처.
• 인프라 (Infrastructure): Firebase를 통한 실시간 라이브 동기화, 워크스페이스 관리, 로컬/스테이징/프로덕션 환경, GitHub Actions CI, Vercel, Railway 및 자동화된 릴리스.

직접 체험해보고 피드백을 공유해 주세요

다른 개발자, 디자인 시스템 엔지니어, 그리고 디자이너들이 실제 일상적인 워크플로우에서 이러한 런타임 우선 (runtime-first) 접근 방식이 유용한지 확인하기 위해 퍼블릭 베타 (Public Beta)를 출시합니다.

여러분의 실제 사용 경험과 솔직한 피드백은 TokenIgnite가 어떻게, 그리고 어떤 방향으로 진화할지를 결정하는 가장 중요한 벤치마크 (benchmark)입니다.

• 웹사이트: tokenignite.live
• 스토리: tokenignite.live/the-story
• Figma 플러그인: TokenIgnite on Figma Community
• npm 패키지: TokenIgnite on npm

설정 단계

1. Figma 플러그인과 npm 패키지 (npm i -D tokenignite)를 설치합니다.
2. tokenignite.config.json 파일에 TokenIgnite 파일 ID를 연결합니다.
3. 루트 요소(root element)에 활성 디자인 컨텍스트(예: data-ti-context="color-modes:dark-mode")를 설정합니다.
4. Figma 또는 Figma의 디자인 에이전트 (Design Agent)를 통해 변수(variables)를 업데이트하면, 연결된 클라이언트 전반에서 앱이 반응하는 것을 확인할 수 있습니다.

데모 및 문서

• 빠른 설정 가이드
• 디자이너 문서 (Designer Documentation)
• 개발자 문서 (Developer Documentation)

버그를 발견하거나 피드백이 있다면 언제든지 연락해 주세요 (bugs@tokenignite.live / feedback@tokenignite.live).

여러분의 팀은 현재 환경 간의 변수 동기화 (variable sync)를 어떻게 처리하고 계신가요? 그리고 런타임 우선 검증 레이어 (runtime-first validation layer)가 가치가 있다고 생각하시나요? 여러분의 생각과 솔직한 피드백을 기다리겠습니다.