S
STONI
AI
Multi-Agent
AWS Bedrock
Claude
Strands
HTML
Prototype

AI 멀티 에이전트로 HTML 프로토타입 자동 생성하기 (1편: 개념과 아키텍처)

AI 멀티 에이전트로 HTML 프로토타입 자동 생성하기

시리즈 소개

이 시리즈에서는 AWS Bedrock Claude 4.5 Sonnet과 Strands Graph 패턴을 활용한 지능형 HTML 프로토타입 생성기를 다룹니다.

  • 1편 (본 글): 프로젝트 개념, 아키텍처, 멀티 에이전트 시스템
  • 2편: 실습 가이드, 활용 방법, 확장 가능성

들어가며: 프로토타이핑의 고민

웹 개발을 하다 보면 프로토타입 제작에 많은 시간을 소비하게 됩니다. "로그인 화면을 만들어야 하는데..."라고 생각하면서 HTML 구조를 짜고, CSS로 스타일링하고, 반응형 디자인을 구현하는 과정은 반복적이고 지루합니다.

단순히 AI에게 "로그인 화면 만들어줘"라고 요청하면 기본적인 HTML은 생성되지만, 실무에서 사용하기에는 부족한 경우가 많습니다:

  • 디자인 시스템이 일관되지 않음
  • 접근성(Accessibility)이 고려되지 않음
  • 반응형 디자인이 미흡함
  • 인터랙티브한 상태(hover, focus 등)가 빠짐

만약 간단한 프롬프트를 입력하면, AI가 알아서 요구사항을 분석하고, 상세 명세를 작성하고, 프로덕션 레디한 HTML을 생성해준다면 어떨까요?

이것이 바로 이 프로젝트가 해결하고자 하는 문제입니다.

프로젝트 개요

핵심 아이디어

HTML Prototype Generator with Strands Graph는 단순한 프롬프트(예: "login screen", "dashboard")를 입력받아, 전문적인 shadcn UI 디자인 패턴을 따르는 프로덕션 레디 HTML 프로토타입을 자동으로 생성하는 도구입니다.

주요 특징

  1. 지능형 프롬프트 확장: 간단한 입력을 300-500단어의 상세 명세로 자동 확장
  2. 멀티 에이전트 아키텍처: Strands Graph 패턴을 활용한 구조화된 워크플로우
  3. Shadcn UI 통합: 전문적인 shadcn UI 디자인 패턴 적용
  4. 시맨틱 파일명: 화면 타입 기반의 의미 있는 파일명 생성 (예: login_20250130_123045.html)
  5. 프로덕션 레디: Tailwind CSS, 반응형 디자인, 접근성 기능 포함
  6. 완전 자동화: 수동 개입 없이 완전 자율적인 생성

왜 멀티 에이전트 시스템인가?

단일 프롬프트의 한계

전통적인 AI 프롬프트 방식의 문제점:

사용자: "로그인 화면 만들어줘"
AI: [기본적인 HTML 생성]

이 방식은:

  • 불충분한 컨텍스트: AI가 모든 요구사항을 추론해야 함
  • 일관성 부족: 매번 다른 스타일과 구조
  • 품질 편차: 디자인 시스템, 접근성 등이 빠질 수 있음

멀티 에이전트의 장점

각 단계를 전문화된 에이전트로 분리하면:

User Prompt → [Analyzer] → [Enhancer] → [Generator] → HTML Output

각 에이전트가 명확한 역할을 가지고:

  • Analyzer: UI/UX 요구사항 추출에 집중
  • Enhancer: 상세 명세 작성에 집중
  • Generator: 고품질 HTML 생성에 집중

이를 통해 각 단계의 품질이 향상되고, 최종 결과물의 일관성과 완성도가 높아집니다.

Strands Graph 패턴이란?

그래프 기반 워크플로우

Strands는 멀티 에이전트 시스템을 구축하기 위한 프레임워크로, Graph 패턴을 통해 구조화된 워크플로우를 제공합니다.

기본 개념

builder = GraphBuilder()

# 노드 추가 (각 에이전트)
builder.add_node(analyzer_agent, "analyzer")
builder.add_node(enhancer_agent, "enhancer")
builder.add_node(generator_agent, "generator")

# 엣지 추가 (의존성 정의)
builder.add_edge("analyzer", "enhancer")
builder.add_edge("enhancer", "generator")

# 진입점 설정
builder.set_entry_point("analyzer")

# 그래프 빌드 및 실행
graph = builder.build()
result = graph(user_prompt)

Graph 패턴의 핵심 기능

  1. 구조화된 워크플로우

    • 명확한 노드(에이전트)와 엣지(의존성) 정의
    • 실행 순서의 명확한 시각화

  2. 자동 입력 전파

    • 각 에이전트는 이전 에이전트의 출력을 자동으로 받음
    • 수동 데이터 전달 불필요

  3. 내장 메트릭

    • 실행 시간 추적
    • 노드 완료 상태 모니터링

  4. 견고한 에러 처리

    • 각 노드의 상태 관리
    • 실패 지점 파악 용이

  5. 타임아웃 제어

    • 설정 가능한 실행 타임아웃 (기본 10분)

3-Stage 워크플로우 상세 분석

Stage 1: Analyzer Agent (분석)

역할: 사용자 프롬프트를 분석하여 핵심 정보 추출

처리 과정

입력: "login screen with social authentication"

분석:
1. 화면 타입 식별: "login"
2. 주요 기능 추출:
   - Email/password 입력
   - Remember me 옵션
   - 소셜 로그인 버튼 (Google, Facebook 등)
3. 인터랙션 파악:
   - 폼 제출
   - Remember me 토글
   - 소셜 로그인 클릭
4. 필요 컴포넌트 매핑:
   - input (이메일, 패스워드)
   - button (로그인, 소셜)
   - checkbox (Remember me)
   - card (전체 컨테이너)

출력 형식

{
    "screen_type": "login",
    "features": [
        "email/password input",
        "remember me option",
        "social authentication buttons",
        "forgot password link"
    ],
    "interactions": [
        "submit form",
        "toggle remember me",
        "click social login",
        "navigate to forgot password"
    ],
    "required_components": [
        "input",
        "button",
        "card",
        "checkbox"
    ]
}

Stage 2: Enhancer Agent (확장)

역할: 분석 결과를 300-500단어의 상세 UI/UX 명세로 확장

확장 요소

  1. 모든 필수 기능 상세화

    • 각 입력 필드의 validation 규칙
    • 에러 메시지 형식
    • 성공/실패 피드백

  2. UI/UX 요구사항 명시

    • 레이아웃: 중앙 정렬, 카드 기반
    • 간격: shadcn spacing 시스템
    • 타이포그래피: 폰트 크기, 굵기
    • 색상: CSS 변수 활용

  3. 상태 관리 명세

    • 폼 검증 (실시간/제출시)
    • 에러 상태 표시
    • 로딩 상태 (제출 중)
    • 성공 상태

  4. 접근성 요구사항

    • ARIA 레이블 추가
    • 키보드 네비게이션
    • 스크린 리더 지원
    • 포커스 관리

  5. 반응형 디자인

    • 모바일 레이아웃 (< 640px)
    • 태블릿 레이아웃 (640px - 1024px)
    • 데스크톱 레이아웃 (> 1024px)

  6. Shadcn UI 패턴 참조

    • 컴포넌트 스타일 가이드
    • 색상 시스템 (CSS 변수)
    • 인터랙티브 상태

확장 예시

입력 (Analyzer 출력): "login screen with email/password"

확장 (300-500 단어):
"Create a professional login screen following shadcn UI design patterns...

Layout & Structure:
- Center-aligned card (max-w-md) with subtle shadow
- Top section: Logo and heading 'Welcome Back'
- Form section with proper spacing (space-y-4)
- Bottom section: Alternative actions (signup link)

Form Fields:
1. Email Input:
   - Label: 'Email Address'
   - Placeholder: 'name@example.com'
   - Validation: Email format, required
   - Error: 'Please enter a valid email address'
   - Styling: shadcn input with border, focus ring

2. Password Input:
   - Label: 'Password'
   - Type: password with toggle visibility
   - Validation: Min 8 characters, required
   - Error: 'Password must be at least 8 characters'
   - Styling: shadcn input with eye icon

[계속...]

Stage 3: Generator Agent (생성)

역할: 상세 명세를 기반으로 완전한 HTML 프로토타입 생성

생성 요구사항

  1. 고정 너비: 1440px 컨테이너 (max-w-[1440px] mx-auto)
  2. Tailwind CSS: CDN을 통한 스타일링
  3. Shadcn 스타일링: shadcn UI 디자인 패턴 및 CSS 변수
  4. 시맨틱 구조: 적절한 HTML5 요소
  5. 반응형: 모바일 우선 접근
  6. 접근성: ARIA 레이블, 시맨틱 HTML
  7. 인터랙티브: 모든 상태 (hover, focus, active) 구현
  8. 완전성: 즉시 사용 가능한 HTML

HTML 구조 예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Prototype</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <style>
        /* Shadcn UI CSS Variables */
        :root {
            --background: 0 0% 100%;
            --foreground: 222.2 84% 4.9%;
            --card: 0 0% 100%;
            --card-foreground: 222.2 84% 4.9%;
            --primary: 222.2 47.4% 11.2%;
            --primary-foreground: 210 40% 98%;
            /* ... 더 많은 변수들 ... */
        }
        
        /* Component Styles */
        .input-field {
            /* shadcn input styling */
        }
        
        .btn-primary {
            /* shadcn button styling */
        }
    </style>
</head>
<body class="min-h-screen bg-background">
    <div class="max-w-[1440px] mx-auto">
        <!-- Login Card -->
        <div class="flex items-center justify-center min-h-screen p-4">
            <!-- 완전한 로그인 폼 구현 -->
        </div>
    </div>
</body>
</html>

시맨틱 파일명 생성

왜 시맨틱 파일명인가?

전통적인 파일명:

  • prototype.html - 무엇을 위한 프로토타입?
  • output_20250130.html - 어떤 화면?

시맨틱 파일명:

  • login_20250130_123045.html - 명확함!
  • dashboard_20250130_140230.html - 한눈에 알 수 있음!

생성 프로세스

# 1. Analyzer 결과에서 screen_type 추출
screen_type = analyzer_data.get("screen_type", "prototype")
screen_type = screen_type.lower().replace(" ", "_")

# 2. 타임스탬프 생성
timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")

# 3. 파일명 조합
filename = f"{screen_type}_{timestamp}.html"
# 예: login_20250130_123045.html

기술 스택

핵심 기술

  1. Strands Framework (>= 0.1.0)

    • 멀티 에이전트 오케스트레이션
    • Graph 패턴 구현
    • 워크플로우 관리

  2. AWS Bedrock

    • Claude 4.5 Sonnet 모델
    • 리전: US East (N. Virginia)
    • 엔드포인트: Bedrock Runtime API

  3. Boto3 (>= 1.34.0)

    • AWS SDK for Python
    • Bedrock API 호출

  4. Anthropic (>= 0.42.0)

    • Claude API 클라이언트
    • 메시지 포맷팅

디자인 시스템

Shadcn UI

  • 모던하고 접근성 높은 UI 컴포넌트
  • CSS 변수 기반 테마 시스템
  • Tailwind CSS와의 완벽한 통합

Tailwind CSS

  • 유틸리티 우선 CSS 프레임워크
  • CDN을 통한 빠른 프로토타이핑
  • 반응형 디자인 지원

성능 특성

실행 시간

평균적인 프로토타입 생성 시간:

  • 프롬프트 분석 (Analyzer): 5-10초
  • 프롬프트 확장 (Enhancer): 10-15초
  • HTML 생성 (Generator): 15-30초
  • 전체 실행 시간: 30-60초

토큰 사용량

프로토타입당 평균:

  • 총 토큰: 8,000-12,000 토큰
  • 입력 토큰: 2,000-3,000 토큰
  • 출력 토큰: 6,000-9,000 토큰

확장성

  • 동시 실행: 각 요청이 독립적으로 실행
  • 병렬 처리: Graph 패턴으로 병렬 노드 추가 가능
  • 리소스 효율: 필요시에만 에이전트 실행

전통적인 방법과의 비교

vs. 수동 HTML 코딩

시간 절약

  • 수동: 2-3시간 (디자인, 코딩, 테스트)
  • 자동: 30-60초 (프롬프트 입력만)
  • 절감: 99% 시간 절약

일관성

  • 수동: 개발자마다 다른 스타일
  • 자동: 항상 동일한 디자인 시스템

품질

  • 수동: 접근성, 반응형 등 놓칠 수 있음
  • 자동: 모든 요구사항 자동 적용

vs. 단순 AI 프롬프트

명세의 완성도

  • 단순: "로그인 화면" → 기본적인 HTML
  • 멀티: "로그인 화면" → 300-500단어 상세 명세 → 프로덕션 레디 HTML

구조화

  • 단순: 단일 프롬프트, 불확실한 결과
  • 멀티: 3단계 워크플로우, 예측 가능한 품질

Shadcn 통합

  • 단순: 일반적인 스타일
  • 멀티: 전문적인 컴포넌트 라이브러리 스타일

vs. 비주얼 빌더

코드 우선 접근

  • 빌더: GUI 기반, 코드 추출 어려움
  • 자동: 직접 HTML/CSS 출력

커스터마이제이션

  • 빌더: 제한적인 옵션
  • 자동: 생성된 코드를 자유롭게 수정

버전 관리

  • 빌더: 바이너리 파일, Git 추적 어려움
  • 자동: 표준 텍스트 파일, Git 친화적

아키텍처의 장점

1. 모듈화

각 에이전트가 독립적:

# 에이전트 별도 정의
from agents import create_analyzer_agent
from agents import create_enhancer_agent
from agents import create_generator_agent

# 필요시 개별 에이전트만 수정

2. 테스트 용이성

각 단계를 독립적으로 테스트:

# Analyzer만 테스트
analyzer = create_analyzer_agent()
result = analyzer("login screen")

# Enhancer만 테스트
enhancer = create_enhancer_agent()
result = enhancer(analyzer_output)

3. 확장 가능성

새로운 에이전트 추가가 쉬움:

# 새로운 리서치 에이전트 추가
builder.add_node(researcher_agent, "researcher")
builder.add_edge("analyzer", "researcher")
builder.add_edge("researcher", "enhancer")

4. 디버깅

각 단계의 출력을 추적:

result = graph(user_prompt)

# 각 노드의 결과 확인
print(result.results["analyzer"])
print(result.results["enhancer"])
print(result.results["generator"])

다음 편에서는...

2편에서는 실제로 이 시스템을 어떻게 설치하고 사용하는지, 그리고 다양한 활용 사례와 확장 방법을 다룰 예정입니다:

  • 설치 및 설정 가이드
  • 다양한 프롬프트 예시
  • 생성된 HTML 커스터마이징
  • 워크플로우 확장하기
  • 조건부 로직 추가
  • 피드백 루프 구현
  • 실무 적용 사례

마치며

멀티 에이전트 시스템은 단순히 여러 AI를 연결하는 것 이상입니다. 각 에이전트가 전문화된 역할을 수행하고, 구조화된 워크플로우를 통해 협력함으로써, 단일 AI로는 달성하기 어려운 높은 품질과 일관성을 얻을 수 있습니다.

Strands Graph 패턴은 이러한 복잡한 워크플로우를 명확하고 관리 가능하게 만들어줍니다. 각 단계가 명확히 정의되고, 자동으로 연결되며, 에러 처리와 모니터링이 내장되어 있어, 개발자는 비즈니스 로직에만 집중할 수 있습니다.

다음 편에서는 이 강력한 도구를 실제로 사용해보며, 여러분의 프로젝트에 어떻게 적용할 수 있는지 구체적으로 알아보겠습니다.

시리즈 계속...

Clickable cat