Visual-to-Code 브리지

Visual-to-Code 브리지는 개발자가 AI 코딩 어시스턴트와 상호작용하는 방식을 혁신하는 Hatcher의 핵심 기능입니다. 텍스트로 변경사항을 설명하는 대신 애플리케이션의 시각적 인터페이스를 직접 조작하면, Hatcher가 사용자의 행동을 정확한 코드 수정으로 변환합니다.

작동 방식

기존 문제점

graph LR
    A[개발자 의도] --> B[텍스트 설명]
    B --> C[AI 해석]
    C --> D[코드 생성]
    D --> E[종종 잘못된 결과]
    E --> F[수동 수정]
    F --> B

좌절스러운 사이클의 예:

• 개발자: "헤더를 파란색으로 만들고 중앙 정렬해줘"
• AI: 잘못된 요소를 파란색으로 만드는 CSS 생성
• 개발자: "아니야, 사이드바 헤더가 아니라 메인 헤더"
• AI: 잘못된 파란색 색조로 만듦
• 개발자: "#3B82F6으로 만들고 폰트 크기도 늘려줘"
• ... 이런 식으로 계속됨

Hatcher의 Visual-to-Code 접근법

graph LR
    A[시각적 선택] --> B[직접 조작]
    B --> C[정확한 의도 캡처]
    C --> D[상황별 코드 생성]
    D --> E[정확한 결과]

실제 작동 방식:

1. 클릭 및 선택: 변경하고 싶은 요소를 가리킴
2. 시각적 조작: 드래그, 크기 조정 또는 속성을 시각적으로 수정
3. 의도 인식: Hatcher가 정확히 무엇이 변경되었는지 이해
4. 코드 생성: AI가 필요한 정확한 코드를 생성
5. 완벽한 결과: 변경사항이 시각적 의도와 정확히 일치

핵심 기능

1. 요소 선택

스마트 선택 시스템

• 모든 요소를 클릭하여 선택
• 호버하여 선택 경계 미리 보기
• 배치 작업을 위한 다중 요소 선택
• 계층 선택 (자식, 부모, 형제)

// 예제: 버튼 선택
const selection = {
  element: 'button.submit-btn',
  properties: {
    position: { x: 120, y: 45 },
    dimensions: { width: 100, height: 36 },
    styles: {
      backgroundColor: '#3B82F6',
      borderRadius: '6px',
      fontSize: '14px',
    },
  },
  context: {
    parent: 'form.checkout-form',
    siblings: ['input.email', 'input.password'],
    framework: 'Vue 3',
    component: 'SubmitButton.vue',
  },
}

2. 시각적 조작

직접 속성 편집

• 요소를 새 위치로 드래그
• 모서리를 드래그하여 크기 조정
• 배경과 텍스트용 색상 선택기
• 타이포그래피 컨트롤 (폰트, 크기, 두께)
• 간격 컨트롤 (여백, 패딩)

실시간 미리보기

• 애플리케이션에서 변경사항을 즉시 확인
• 새로고침이나 리빌드 불필요
• 핫 모듈 교체 통합
• 실시간 CSS 업데이트

3. 의도 인식

Hatcher는 시각적 변경사항을 분석하고 다음을 이해합니다:

레이아웃 변경

• 위치 수정 (absolute, relative, flex)
• 크기 조정 (width, height, responsive)
• 정렬 변경 (center, flex, grid)

스타일 변경

• 색상 수정 (hex, RGB, HSL, CSS 변수)
• 타이포그래피 업데이트 (font family, size, weight, line height)
• 시각 효과 (shadows, borders, gradients)

컴포넌트 변경

• Props 수정
• 상태 업데이트
• 이벤트 핸들러 추가

4. 코드 생성

시각적 의도를 바탕으로 Hatcher가 생성하는 것:

프레임워크별 코드

<!-- Vue 3 예제 -->
<template>
  <button
    class="submit-btn"
    :style="{
      transform: `translate(${position.x}px, ${position.y}px)`,
      backgroundColor: '#3B82F6',
    }"
    @click="handleSubmit"
  >
    제출
  </button>
</template>

CSS 업데이트

.submit-btn {
  position: absolute;
  left: 120px;
  top: 45px;
  background-color: #3b82f6;
  width: 100px;
  height: 36px;
  border-radius: 6px;
  font-size: 14px;
}

TypeScript 통합

interface ButtonProps {
  position: { x: number; y: number }
  variant: 'primary' | 'secondary'
  size: 'sm' | 'md' | 'lg'
}

고급 기능

1. 반응형 디자인

멀티 브레이크포인트 편집

• 다양한 화면 크기 동시 편집
• 반응형 CSS 자동 생성
• 기기 간 디자인 일관성 유지

/* 생성된 반응형 코드 */
.submit-btn {
  /* 모바일 */
  width: 100%;
  margin: 0 16px;
}

@media (min-width: 768px) {
  /* 태블릿 */
  .submit-btn {
    width: 200px;
    margin: 0 auto;
  }
}

@media (min-width: 1024px) {
  /* 데스크톱 */
  .submit-btn {
    width: 150px;
    position: absolute;
    left: 120px;
  }
}

2. 컴포넌트 인식 변경

스마트 컴포넌트 감지

• Vue, React, Svelte 컴포넌트 인식
• 컴포넌트 props와 상태 이해
• 컴포넌트 경계 유지

예제: Vue 컴포넌트 수정

<!-- 수정 전 -->
<UserCard :user="currentUser" size="medium" />

<!-- 시각적 수정 후 -->
<UserCard
  :user="currentUser"
  size="large"
  :style="{ marginTop: '24px' }"
  show-avatar
/>

3. 디자인 시스템 통합

자동 토큰 사용

• 디자인 시스템 토큰 인식
• 적절한 값 제안
• 일관성 유지

/* 임의 값 대신 */
color: #3b82f6;
padding: 12px;

/* 디자인 토큰 사용 */
color: var(--color-primary-500);
padding: var(--spacing-3);

워크플로우 예제

예제 1: 레이아웃 조정

목표: 사이드바를 왼쪽에서 오른쪽으로 이동

1. 선택: 사이드바 컴포넌트 클릭
2. 드래그: 화면 오른쪽으로 드래그
3. 검토: 생성된 flex/grid 변경사항 확인
4. 적용: CSS 수정사항 승인

생성된 코드:

.layout-container {
  display: flex;
  flex-direction: row; /* row-reverse에서 변경 */
}

.sidebar {
  order: 2; /* 1에서 변경 */
  margin-left: auto; /* 추가됨 */
}

예제 2: 컴포넌트 스타일링

목표: 디자인에 맞게 버튼 모양 변경

1. 선택: 버튼 클릭
2. 스타일: 색상 선택기 사용, 크기 조정, 테두리 수정
3. 미리보기: 애플리케이션에서 실시간으로 변경사항 확인
4. 생성: 컴포넌트 prop 업데이트 획득

생성된 코드:

<script setup>
const buttonStyle = {
  variant: 'primary',
  size: 'lg',
  rounded: true,
}
</script>

<template>
  <AppButton v-bind="buttonStyle"> 주문 제출 </AppButton>
</template>

예제 3: 반응형 조정

목표: 그리드를 반응형으로 만들기

1. 선택: 그리드 컨테이너 선택
2. 크기 조정: 다양한 브레이크포인트에 대해 열 조정
3. 테스트: 모바일/태블릿/데스크톱에서 미리보기
4. 적용: 반응형 CSS Grid 생성

생성된 코드:

.product-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* 모바일 */
}

@media (min-width: 640px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr); /* 태블릿 */
  }
}

@media (min-width: 1024px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr); /* 데스크톱 */
  }
}

AI 엔진과의 통합

Visual-to-Code 브리지는 지원되는 AI 엔진과 원활하게 작동합니다:

Claude Code 통합

const visualIntent = captureVisualChange(selection, modification)
const codeChange = await claudeCode.generateChange({
  intent: visualIntent,
  context: projectContext,
  playbook: teamPlaybook,
})

Gemini CLI 통합

const prompt = buildVisualPrompt(visualIntent, codeContext)
const suggestion = await geminiCLI.complete(prompt)
const refinedCode = refineWithPlaybook(suggestion)

모범 사례

1. 작게 시작하기

• 점진적인 시각적 변경 실시
• 다음 수정으로 넘어가기 전에 각 수정사항 테스트
• 작은 단계를 통해 복잡한 변경사항 구축

2. Playbooks 사용

• playbooks에서 컴포넌트 패턴 정의
• 일관된 스타일링 규칙 수립
• 일반적인 디자인 패턴 문서화

3. 생성된 코드 검토

• 적용하기 전에 항상 코드 차이점 검토
• 생성된 코드가 표준을 따르는지 확인
• 더 나은 결과를 위해 필요시 프롬프트 개선

4. 철저한 테스트

• 자동화된 테스트를 사용하여 변경사항 검증
• 반응형 동작 확인
• 접근성 준수 검증

---

Visual-to-Code 브리지는 개발을 위한 AI와의 상호작용 방식에서 근본적인 변화를 나타냅니다. 의도와 구현 사이의 번역 계층을 제거함으로써 더욱 직관적이고 정확하며 효율적인 개발 경험을 만들어냅니다.