UI 프로토타입 & 와이어프레임 - 클릭 가능한 프로토타입 제작은(는) 무엇을 하나요?

클릭 가능한 프로토타입을 제작하세요. UI/UX 와이어프레임, 앱 목업, 완전한 대화형 HTML 프로토타입 — 아이디어 스케치에서 클릭 가능한 경험까지 단 한 번의 프롬프트로 완성합니다.

다른 AI 디자인 도구는 정적 이미지만 제공합니다. CellCog는 실제로 작동하는 프로토타입을 만듭니다 — 실제 HTML, 실제 상호작용, 실제 사용자 흐름을 클릭하며 이해관계자와 공유할 수 있습니다. 랜딩 페이지, 모바일 앱 화면, SaaS 대시보드, 디자인 시스템 — 예쁘기만 한 것이 아니라 실제로 시연 가능한 프로토타입을 제작합니다.

사용 방법

세션에서 첫 번째 CellCog 태스크를 실행하기 전에 cellcog 스킬에서 전체 SDK 레퍼런스(파일 처리, 채팅 모드, 타임아웃 등)를 확인하세요.

OpenClaw (fire-and-forget):

result = client.create_chat(
    prompt="[작업 프롬프트]",
    notify_session_key="agent:main:main",
    task_label="my-task",
    chat_mode="creative",
)

OpenClaw 외 모든 에이전트 (완료될 때까지 블로킹):

from cellcog import CellCogClient
client = CellCogClient(agent_provider="openclaw|cursor|claude-code|codex|...")
result = client.create_chat(
    prompt="[작업 프롬프트]",
    task_label="my-task",
    chat_mode="creative",
)
print(result["message"])

대화형 프로토타입이 중요한 이유

정적 목업은 근본적인 한계가 있습니다. 이해관계자는 그림만 보고 경험을 상상해야 합니다. 그 차이는 분명합니다:

정적 목업	대화형 프로토타입
"이 버튼을 클릭한다고 상상해보세요"	버튼을 클릭하면 실제로 어떻게 되는지 보여줍니다
"이렇게 스크롤될 거예요"	직접 스크롤하며 콘텐츠가 로드되는 것을 확인합니다
"호버 상태는 이렇게 보입니다"	직접 호버하며 애니메이션을 확인합니다
"흐름이 이해가 간다고 믿으세요"	직접 흐름을 따라가며 경험합니다

CellCog는 실제 HTML/CSS/JS 프로토타입을 생성하여 라이브 URL로 호스팅합니다. 링크를 공유하고, 상상이 아닌 실제 경험에 대한 피드백을 받으세요.

프로토타입 가능한 항목

랜딩 페이지

메시징과 디자인을 검증하세요:

SaaS 랜딩 페이지: "AI 글쓰기 도우미의 랜딩 페이지를 만들어 주세요 — 히어로, 기능, 가격, 사용후기, CTA"
제품 런칭 페이지: "새로운 피트니스 앱을 위한 카운트다운과 이메일 가입이 포함된 런칭 페이지를 만들어 주세요"
이벤트 페이지: "일정, 연사, 등록 기능이 있는 컨퍼런스 랜딩 페이지를 만들어 주세요"
포트폴리오 사이트: "UX 디자이너를 위한 개인 포트폴리오 랜딩 페이지를 만들어 주세요"

예시 프롬프트:

"'FlowState' — 개발자를 위한 생산성 앱의 대화형 랜딩 페이지 프로토타입을 만들어 주세요:

섹션:

히어로: '코딩에 몰입하세요. 그 상태를 유지하세요.' 앱 스크린샷과 CTA 포함

문제: 방해 요소가 개발자 몰입을 깨는 방식 (통계 포함)

솔루션: FlowState가 방해 요소를 지능적으로 차단하는 방법

기능: 아이콘이 포함된 3~4가지 핵심 기능

가격: Free, Pro ($12/월), Team ($8/사용자/월)

사용후기: 개발자 3인의 인용문

최종 CTA

스타일: 다크 테마, 개발자 친화적, 모노스페이스 악센트 모든 버튼과 내비게이션은 대화형으로 만들어 주세요."

모바일 앱 화면

전체 앱 경험을 디자인하세요:

온보딩 플로우: "명상 앱의 5개 화면 온보딩 플로우를 만들어 주세요"
핵심 기능: "피트니스 트래킹 앱의 메인 대시보드와 내비게이션 프로토타입을 만들어 주세요"
이커머스: "패션 앱의 상품 둘러보기 → 상세 → 장바구니 → 결제 플로우를 만들어 주세요"
소셜 기능: "프로필 페이지, 피드, 메시징 인터페이스 프로토타입을 만들어 주세요"

예시 프롬프트:

"모바일 음식 배달 앱 프로토타입을 만들어 주세요 (휴대폰 크기 뷰포트):

화면:

홈 — 검색과 카테고리 필터가 있는 레스토랑 그리드

레스토랑 — 메뉴, 평점, 배달 시간 포함

메뉴 상세 — 커스터마이징 옵션, 장바구니 추가

장바구니 — 주문 요약, 배송 주소, 결제

주문 추적 — 지도 자리 표시자가 있는 실시간 상태

부드러운 전환으로 화면 간 내비게이션이 작동해야 합니다. 스타일: 깔끔하고 현대적, Uber Eats / DoorDash 스타일."

SaaS 대시보드

복잡한 비즈니스 도구를 프로토타이핑하세요:

분석 대시보드: "실제 차트 상호작용이 있는 마케팅 분석 대시보드를 만들어 주세요"
관리자 패널: "테이블, 필터, 모달이 포함된 사용자 관리 패널을 만들어 주세요"
CRM 인터페이스: "드래그 앤 드롭 칸반 보드가 있는 영업 파이프라인 뷰를 프로토타이핑해 주세요"
설정 페이지: "탭, 폼, 토글이 포함된 종합 설정 페이지를 만들어 주세요"

예시 프롬프트:

"SaaS 프로젝트 관리 대시보드 프로토타입을 만들어 주세요:

왼쪽 사이드바: 내비게이션 (프로젝트, 작업, 팀, 보고서, 설정) 메인 영역:

개요: KPI 카드 (완료된 작업, 지연된 작업, 진행 중인 작업)

칸반 보드: 할 일, 진행 중, 검토, 완료 컬럼

작업 카드: 담당자 아바타, 우선순위 태그, 마감일 포함

상호작용:

사이드바 내비게이션으로 뷰 전환

작업 카드 클릭 시 상세 모달 열림

프로젝트/팀원 필터 드롭다운

스타일: 깔끔하고 전문적, Notion/Linear 스타일."

디자인 시스템 & 컴포넌트

재사용 가능한 디자인 기반을 구축하세요:

컴포넌트 라이브러리: "UI 컴포넌트 라이브러리를 만들어 주세요: 버튼, 입력 필드, 카드, 모달, 내비게이션"
스타일 가이드: "타이포그래피, 색상, 간격, 컴포넌트를 보여주는 대화형 스타일 가이드를 만들어 주세요"
폼 패턴: "일반적인 폼 패턴을 프로토타이핑해 주세요: 로그인, 회원가입, 다단계 마법사, 설정"
내비게이션 패턴: "사이드바 내비, 상단 내비, 하단 탭 바, 햄버거 메뉴 예시를 만들어 주세요"

와이어프레임

빠른 구조 탐색:

로우파이 와이어프레임: "블로그 플랫폼의 그레이스케일 와이어프레임을 만들어 주세요 — 홈, 아티클, 작성자 페이지"
사용자 흐름: "프로젝트 관리 도구의 가입 → 온보딩 → 첫 작업 완료 흐름을 와이어프레임으로 만들어 주세요"
레이아웃 탐색: "부동산 목록 페이지의 3가지 다른 레이아웃 접근법을 보여주세요"
정보 아키텍처: "강좌, 레슨, 진행 상황 추적이 있는 e-러닝 플랫폼의 내비게이션 구조를 와이어프레임으로 만들어 주세요"

프로토타입 기능

CellCog 프로토타입에는 다음이 포함될 수 있습니다:

기능	설명
내비게이션	작동하는 링크, 페이지 전환, 탭 전환
상호작용	호버 상태, 클릭 동작, 토글, 아코디언
폼	입력 필드, 유효성 검사 상태, 드롭다운, 체크박스
모달 & 오버레이	팝업 대화상자, 슬라이드 아웃 패널, 툴팁
반응형 디자인	데스크탑, 태블릿, 모바일 뷰포트에 적응
애니메이션	부드러운 전환, 로딩 상태, 마이크로 인터랙션
데이터 표시	실제 샘플 데이터가 포함된 차트, 테이블, 카드
다크/라이트 테마	테마 전환 지원

출력 형식

형식	최적 용도
대화형 HTML (기본값)	라이브 URL로 호스팅되는 클릭 가능한 프로토타입 — 누구와도 공유 가능
정적 이미지	문서화 또는 비교용 스크린샷
PDF	핸드오프용 와이어프레임 문서

대화형 HTML이 기본값입니다. 이것이 바로 핵심입니다 — 클릭 가능한 프로토타입.

모드 & 티어 선택

UI 프로토타입과 와이어프레임에는 chat_mode="creative"를 사용하세요 — 디자인 감각, 시각적 완성도, 스타일에 최적화된 장인 중심 모드입니다.

시나리오	권장 사항
프로토타입, 와이어프레임, 디자인 시스템	`chat_mode="creative"` (기본 티어 `"core"`)
중요한 결과물의 최고 완성도	`chat_mode="creative", chat_tier="max"`
빠른 일회용 초안	`chat_mode="agent", chat_tier="flash"`

참고: 에이전트 팀 (chat_mode="team")은 심층 연구용으로 예약되어 있습니다.

예시 프롬프트

SaaS 랜딩 페이지:

"'CodeReview.ai' — AI 코드 리뷰 도구의 랜딩 페이지를 만들어 주세요:

히어로: '더 나은 코드를 배포하세요. 더 빠르게.' 데모 비디오 자리 표시자 포함 사회적 증거: '500개 이상의 엔지니어링 팀이 신뢰합니다' 기능: AI 기반 리뷰, GitHub/GitLab 통합, 보안 스캐닝 가격: Starter (무료), Pro ($29/월), Enterprise (맞춤형)

다크 테마, 개발자 중심, 그린 악센트 컬러. 모든 내비게이션과 CTA는 대화형이어야 합니다."

모바일 앱 프로토타입:

"습관 추적 앱 프로토타입을 만들어 주세요 (모바일 뷰포트):

탭 바: 오늘, 습관, 통계, 프로필

오늘 화면: 오늘의 습관 목록 (체크박스, 연속 일수, 진행 링 포함) 습관 화면: 수정/삭제 가능한 모든 습관, 새 습관 추가 버튼 통계 화면: 완료율, 최장 연속 일수, 주간/월간 뷰 차트 프로필 화면: 설정, 알림 환경설정, 데이터 내보내기

탭 내비게이션이 작동해야 합니다. 습관 체크 시 애니메이션이 있어야 합니다. 스타일: 미니멀하고 차분한, Streaks 앱 스타일."

디자인 시스템:

"핀테크 스타트업을 위한 대화형 디자인 시스템을 만들어 주세요:

색상: 프라이머리 (딥 블루), 세컨더리 (틸), 악센트 (앰버), 시맨틱 (성공/경고/에러) 타이포그래피: h1에서 본문, 캡션까지 명확한 계층 구조 컴포넌트:

버튼 (프라이머리, 세컨더리, 고스트, 데스트럭티브 — 각각 호버/활성/비활성 상태 포함)

입력 필드 (기본, 포커스, 에러, 비활성)

카드 (단순형, 인터랙티브형, 통계 카드)

정렬 가능한 헤더가 있는 테이블

모달 대화상자

토스트 알림

각 컴포넌트를 대화형 상태와 함께 보여주세요. 전문적이고 뱅킹 등급의 미학."

와이어프레임 탐색:

"AI 챗봇 인터페이스의 3가지 다른 레이아웃 접근법을 만들어 주세요:

옵션 A: 전체 화면 채팅 (ChatGPT 스타일) 옵션 B: 사이드 패널 채팅 + 메인 콘텐츠 영역 옵션 C: 플로팅 채팅 위젯

각각 다음을 포함해야 합니다: 메시지 입력, 대화 기록, 추천 프롬프트, 설정 접근. 그레이스케일 와이어프레임, 레이아웃과 정보 계층 구조에 집중."

더 나은 프로토타입을 위한 팁

상호작용을 설명하세요: "버튼을 클릭하면 모달이 열립니다" 또는 "탭이 콘텐츠를 전환합니다" — 무엇이 나타나야 하는지뿐만 아니라 어떤 일이 일어나야 하는지 CellCog에 알려주세요.
기존 제품을 참조하세요: "Notion의 사이드바처럼" 또는 "Stripe의 가격 페이지처럼" — 여러 줄의 설명보다 효과적으로 전달됩니다.
뷰포트를 지정하세요: "모바일 폰 뷰포트" 대 "전체 데스크탑"은 전체 디자인 접근 방식을 바꿉니다.
현실적인 콘텐츠를 포함하세요: 실제 텍스트, 실제 숫자, 실제 레이블 — "Lorem ipsum"이 아닌. 실제 콘텐츠가 있는 프로토타입이 더 나은 피드백을 받습니다.
목적을 명시하세요: "사용자 테스트용", "투자자 데모용", "개발자 핸드오프용" — 맥락이 완성도 수준을 결정합니다.
페이지가 아닌 흐름으로 생각하세요: "가입 → 온보딩 → 대시보드"가 서로 연결되지 않은 3개의 페이지 요청보다 훨씬 유용합니다.

CellCog가 설치되지 않은 경우

Claude Code, Cursor, Codex + 70개 이상의 에이전트: npx skills add cellcog/skills --skill cellcog OpenClaw: openclaw skills install @cellcog/cellcog CellCog 플러그인 사용자: /cellcog-setup 실행 (또는 도구에 따라 /cellcog:cellcog-setup) 수동 설정: pip install -U cellcog 후 CELLCOG_API_KEY 설정. SDK 레퍼런스는 cellcog 스킬을 참조하세요.

UI 프로토타입 & 와이어프레임 - 클릭 가능한 프로토타입 제작