랜딩 페이지 스크린샷을 업로드하면 AI 에이전트 팀이 자동으로 디자인을 분석하고, 개선 전략을 수립하며, 향상된 버전까지 생성해주는 시스템을 Google ADK와 Gemini 2.5 Flash로 직접 구축해보세요. 이 글은 The Unwind AI의 실전 튜토리얼을 기반으로 작성되었습니다.

핵심 포인트:

• 3개 전문 에이전트의 협업: UI Critic이 디자인을 분석하면 Design Strategist가 개선 계획을 수립하고, Visual Implementer가 실제 디자인을 생성하는 파이프라인 구조
• Gemini 2.5 Flash의 네이티브 비전 기능: 별도의 이미지 처리 도구 없이 AI가 직접 이미지를 보고 분석하며 편집까지 수행
• 반복 개선 가능한 Design Editor: 생성된 디자인에 대해 “CTA 버튼을 더 크게” 같은 구체적 피드백을 주면 즉시 반영된 새 버전 생성

Google ADK가 멀티 에이전트 개발을 쉽게 만드는 이유

Google의 Agent Development Kit는 여러 AI 에이전트가 협업하는 시스템을 구축할 때 필요한 복잡한 로직을 간단하게 처리합니다. Coordinator/Dispatcher 패턴, Sequential Pipeline, Parallel Agents 같은 고급 패턴을 기본 제공하죠.

특히 Gemini 2.5 Flash와 결합하면 강력합니다. 이미지를 분석하고 편집하는 작업을 별도의 도구 호출 없이 AI가 직접 수행할 수 있거든요. 랜딩 페이지 스크린샷을 보고 “헤더의 타이포그래피가 약하다”고 분석하는 것부터 “이렇게 개선하자”는 전략 수립, 실제로 개선된 이미지를 생성하는 것까지 모두 자동화됩니다.

어떻게 작동하는가: 에이전트 팀의 역할 분담

시스템의 핵심은 각자 전문 분야를 가진 에이전트들의 협업입니다.

Root Coordinator가 사용자 요청을 받으면 상황에 따라 적절한 에이전트로 라우팅합니다. 이미지가 업로드되면 Analysis Pipeline으로, 기존 디자인 수정 요청은 Design Editor로, 일반적인 질문은 Info Agent로 보내는 식이죠.

Analysis Pipeline은 세 개의 전문 에이전트가 순차적으로 작업하는 구조입니다. UI Critic이 먼저 레이아웃, 타이포그래피, 컬러, UX 패턴을 분석합니다. 시각적 계층 구조가 명확한지, WCAG 접근성 기준을 충족하는지, 전환율을 높일 수 있는 요소는 무엇인지 평가하죠.

Design Strategist는 이 분석을 바탕으로 구체적인 개선 계획을 세웁니다. “CTA 버튼을 #FF6B35 색상으로 변경하고 크기를 20% 키운다”, “헤더 폰트를 Inter Bold 48px로 교체한다” 같은 명확한 지시사항을 만듭니다.

Visual Implementer가 마지막 단계입니다. 앞선 분석과 전략을 모두 반영해서 실제로 개선된 랜딩 페이지 디자인을 생성합니다. 대화 기록을 읽어 원본 이미지와 모든 권장사항을 파악한 뒤, 극도로 상세한 프롬프트를 만들어 새 디자인을 만들어내죠.

Design Editor는 별도로 존재하며 반복 개선을 담당합니다. 생성된 디자인이 마음에 들지 않거나 추가 수정이 필요할 때 사용됩니다. 대화 기록에서 가장 최근 디자인을 자동으로 찾아 수정사항을 적용합니다.

실제로 만들어보기: 핵심 구현 단계

필요한 준비물은 간단합니다. Python 3.10 이상, Gemini API 키, 그리고 코드 에디터만 있으면 됩니다.

에이전트 정의하기

먼저 각 에이전트를 정의합니다. UI Critic부터 시작하죠.

from google.adk.agents import LlmAgent, SequentialAgent
from google.adk.tools import google_search

ui_critic = LlmAgent(
    name="UICritic",
    model="gemini-2.5-flash",
    description="Landing page design analyzer",
    instruction="""
    Analyze landing page screenshots comprehensively:
    - Visual hierarchy and layout structure
    - Typography choices and readability
    - Color scheme and brand consistency
    - Call-to-action prominence and placement
    - WCAG accessibility compliance
    - Conversion optimization opportunities

    Provide specific, actionable feedback.
    """,
    tools=[AgentTool(agent=search_agent)]
)

UI Critic은 랜딩 페이지를 보고 시각적 계층, 타이포그래피, 컬러, CTA 배치, 접근성까지 종합적으로 분석합니다. 필요하면 Search Agent를 호출해 최신 UI/UX 트렌드나 WCAG 가이드라인도 찾아봅니다.

Design Strategist는 분석 결과를 받아 구체적인 개선 계획을 수립합니다.

design_strategist = LlmAgent(
    name="DesignStrategist",
    model="gemini-2.5-flash",
    description="Creates detailed improvement plans",
    instruction="""
    Based on UI Critic's analysis, create a detailed improvement strategy.
    Be EXTREMELY SPECIFIC:
    - Exact colors with hex codes (#FF6B35)
    - Precise typography specs (Inter Bold, 48px, line-height 1.2)
    - Detailed layout adjustments with measurements
    - Specific CTA improvements

    Organize by priority: Critical, High Impact, Nice-to-Have.
    """
)

여기서 중요한 건 “극도로 구체적”이어야 한다는 점입니다. “색을 바꾸자”가 아니라 “#FF6B35로 변경”, “폰트를 키우자”가 아니라 “Inter Bold 48px, line-height 1.2″처럼 명확한 수치를 제시해야 Visual Implementer가 정확하게 구현할 수 있습니다.

Visual Implementer는 모든 정보를 종합해 실제 디자인을 생성합니다.

visual_implementer = LlmAgent(
    name="VisualImplementer",
    model="gemini-2.5-flash",
    description="Generates improved design",
    instruction="""
    Create improved landing page incorporating all recommendations.

    Read conversation history to extract:
    - UI Critic's complete analysis
    - Design Strategist's detailed plan
    - Original image (visible through vision)

    Build EXTREMELY DETAILED prompt with:
    - Exact hex color codes for all elements
    - Complete typography specifications
    - Precise layout structure and spacing
    - Detailed CTA design (size, color, position, text)
    - Whitespace and breathing room improvements

    Use generate_improved_landing_page tool.
    """,
    tools=[generate_improved_landing_page]
)

이미지 생성 도구 만들기

에이전트가 실제로 디자인을 생성하려면 도구가 필요합니다. tools.py에 이미지 생성 함수를 만듭니다.

from google import genai
from google.genai import types
from google.adk.tools import ToolContext
from pydantic import BaseModel, Field

class GenerateImprovedLandingPageInput(BaseModel):
    prompt: str = Field(..., description="Detailed design specifications")
    asset_name: str = Field(default="improved_landing_page", 
                           description="Name for the generated asset")

async def generate_improved_landing_page(
    tool_context: ToolContext, 
    inputs: GenerateImprovedLandingPageInput
) -> str:
    client = genai.Client()

    # 이전 분석 내용을 대화 기록에서 가져오기
    conversation_history = tool_context.state.get("conversation_history", [])
    latest_analysis = ""
    for msg in reversed(conversation_history):
        if "UICritic" in msg or "DesignStrategist" in msg:
            latest_analysis += msg + "\n"

    # 강화된 프롬프트 생성
    enhancement_prompt = f"""
    Create a professional, conversion-optimized landing page design:
    {inputs.prompt}

    Based on previous analysis:
    {latest_analysis}

    Requirements:
    - Modern, clean aesthetic with clear visual hierarchy
    - Prominent, high-contrast CTAs
    - WCAG AA accessible (4.5:1 contrast minimum)
    - Professional typography and spacing
    - Mobile-responsive layout considerations
    """

    # 이미지 생성
    for chunk in client.models.generate_content_stream(
        model="gemini-2.5-flash-image",
        contents=[types.Part.from_text(text=enhancement_prompt)],
        config=types.GenerateContentConfig(
            response_modalities=["IMAGE", "TEXT"]
        )
    ):
        if chunk.candidates[0].content.parts:
            for part in chunk.candidates[0].content.parts:
                if part.inline_data:
                    # 버전 관리를 위한 파일명 생성
                    version = get_next_version_number(
                        tool_context, inputs.asset_name
                    )
                    filename = create_versioned_filename(
                        inputs.asset_name, version
                    )

                    # 아티팩트로 저장
                    await tool_context.save_artifact(
                        filename=filename, 
                        artifact=part
                    )

                    return f"Generated improved design: {filename}"

이 함수는 Gemini 2.5 Flash의 이미지 생성 기능을 활용합니다. 중요한 건 대화 기록에서 이전 분석 내용을 모두 찾아 프롬프트에 반영한다는 점입니다. UI Critic과 Design Strategist가 제시한 모든 권장사항이 최종 디자인에 녹아들게 됩니다.

파이프라인 구성과 Root Coordinator

이제 에이전트들을 순차적으로 연결하는 파이프라인을 만듭니다.

analysis_pipeline = SequentialAgent(
    name="AnalysisPipeline",
    description="Complete UI/UX analysis and improvement pipeline",
    sub_agents=[
        ui_critic,
        design_strategist,
        visual_implementer
    ]
)

SequentialAgent는 sub_agents를 순서대로 실행합니다. UI Critic의 분석 → Design Strategist의 계획 수립 → Visual Implementer의 디자인 생성 순서로 진행되죠.

마지막으로 전체를 조율하는 Root Coordinator를 만듭니다.

# 일반 질문 처리용 Info Agent
info_agent = LlmAgent(
    name="InfoAgent",
    model="gemini-2.5-flash",
    description="Handles general questions",
    instruction="""
    Explain AI UI/UX Feedback Team capabilities briefly (2-4 sentences).
    Guide users to upload landing page screenshots for analysis.
    """
)

# 디자인 수정용 Design Editor
design_editor = LlmAgent(
    name="DesignEditor",
    model="gemini-2.5-flash",
    description="Edits existing designs",
    instruction="""
    Find the most recent design from conversation history.
    Apply specific UI/UX improvements using edit_landing_page_image tool.
    Be SPECIFIC: exact colors, sizes, placements.
    """,
    tools=[edit_landing_page_image]
)

# Root Coordinator
root_agent = LlmAgent(
    name="UIUXFeedbackTeam",
    model="gemini-2.5-flash",
    description="Intelligent coordinator for UI/UX feedback",
    instruction="""
    Route requests intelligently:

    1. Image visible → IMMEDIATELY transfer to AnalysisPipeline
    2. Edit existing design → transfer to DesignEditor  
    3. General questions → transfer to InfoAgent

    CRITICAL: If you SEE an image → route to AnalysisPipeline
    """,
    sub_agents=[info_agent, design_editor, analysis_pipeline]
)

Root Coordinator는 상황 판단이 핵심입니다. 이미지가 보이면 즉시 Analysis Pipeline으로, “CTA를 더 크게 만들어줘” 같은 수정 요청은 Design Editor로, “이 시스템이 뭐 하는 거야?” 같은 질문은 Info Agent로 보냅니다.

실행하고 사용하기

모든 코드가 준비됐다면 ADK Web을 실행합니다.

cd your_project_directory
adk web

브라우저에서 http://localhost:8000을 열고 앱을 선택하면 인터페이스가 나타납니다.

랜딩 페이지 스크린샷을 업로드하면 자동으로 분석이 시작됩니다. UI Critic이 “헤더 타이포그래피가 약하고, CTA 버튼의 대비가 부족하며, 시각적 계층이 불분명하다”고 지적하면, Design Strategist가 “헤더를 Inter Bold 52px로 변경하고, CTA를 #FF6B35 색상에 16px 패딩을 추가하자”는 구체적 계획을 세웁니다. 마지막으로 Visual Implementer가 이 모든 권장사항을 반영한 개선된 디자인을 생성하죠.

생성된 디자인이 거의 마음에 드는데 조금만 더 수정하고 싶다면 “CTA 버튼을 20% 더 크게 만들어줘”라고 말하면 됩니다. Design Editor가 대화 기록에서 최신 디자인을 찾아 수정사항을 적용한 새 버전을 만들어줍니다.

더 발전시키려면

이 시스템은 여러 방향으로 확장 가능합니다. 브랜드 일관성 체크나 경쟁사 분석 같은 차원을 추가할 수 있고, A/B 테스트용 여러 버전을 자동 생성하는 기능도 만들 수 있습니다. 승인된 디자인을 HTML/CSS 코드로 변환하거나 Figma 같은 디자인 툴과 연동하는 것도 가능하죠.

중요한 건 각 에이전트에게 명확한 역할과 구체적인 지시사항을 주는 것입니다. “색을 바꿔”가 아니라 “hex 코드로 정확히 지정해”, “크기를 키워”가 아니라 “px 단위로 명시해”처럼 구체적일수록 결과물의 품질이 높아집니다.

---

참고자료:

• Build an AI UI/UX Feedback Agent Team with Nano Banana
• Google Agent Development Kit – Official Documentation
• LLM Agents – Agent Development Kit

Like?