Mockup#

콘텐츠를 실제 디바이스나 앱 화면처럼 감싸는 목업 프레임 컴포넌트입니다. 문서, 랜딩 페이지, 스크린샷 등 시각적 프레젠테이션에 활용됩니다.

Live Preview#

class MockupPhoneExample extends StatefulComponent {
  const MockupPhoneExample({super.key});

  @override
  State<MockupPhoneExample> createState() => _MockupPhoneExampleState();
}

class _MockupPhoneExampleState extends State<MockupPhoneExample> {
  @override
  Component build(BuildContext context) {
    return MockupPhone(
      child: Text('App Screen').bodyMedium.onSurface,
    );
  }
}

class MockupPhoneExample extends StatefulWidget {
  const MockupPhoneExample({super.key});

  @override
  State<MockupPhoneExample> createState() => _MockupPhoneExampleState();
}

class _MockupPhoneExampleState extends State<MockupPhoneExample> {
  @override
  Widget build(BuildContext context) {
    return MockupPhone(
      child: Text('App Screen').bodyMedium.onSurface,
    );
  }
}

class MockupBrowserExample extends StatefulComponent {
  const MockupBrowserExample({super.key});

  @override
  State<MockupBrowserExample> createState() => _MockupBrowserExampleState();
}

class _MockupBrowserExampleState extends State<MockupBrowserExample> {
  @override
  Component build(BuildContext context) {
    return MockupBrowser(
      addressBar: 'https://coui.dev',
      child: Text('Page content').bodyMedium.onSurface,
    );
  }
}

class MockupBrowserExample extends StatefulWidget {
  const MockupBrowserExample({super.key});

  @override
  State<MockupBrowserExample> createState() => _MockupBrowserExampleState();
}

class _MockupBrowserExampleState extends State<MockupBrowserExample> {
  @override
  Widget build(BuildContext context) {
    return MockupBrowser(
      addressBar: 'https://coui.dev',
      child: Text('Page content').bodyMedium.onSurface,
    );
  }
}

class MockupCodeExample extends StatefulComponent {
  const MockupCodeExample({super.key});

  @override
  State<MockupCodeExample> createState() => _MockupCodeExampleState();
}

class _MockupCodeExampleState extends State<MockupCodeExample> {
  @override
  Component build(BuildContext context) {
    return MockupCode.fromString(
      "void main() {\n  print('Hello!');\n}",
      showLineNumbers: true,
    );
  }
}

class MockupCodeExample extends StatefulWidget {
  const MockupCodeExample({super.key});

  @override
  State<MockupCodeExample> createState() => _MockupCodeExampleState();
}

class _MockupCodeExampleState extends State<MockupCodeExample> {
  @override
  Widget build(BuildContext context) {
    return MockupCode.fromString(
      "void main() {\n  print('Hello!');\n}",
    );
  }
}

class MockupWindowExample extends StatefulComponent {
  const MockupWindowExample({super.key});

  @override
  State<MockupWindowExample> createState() => _MockupWindowExampleState();
}

class _MockupWindowExampleState extends State<MockupWindowExample> {
  @override
  Component build(BuildContext context) {
    return MockupWindow(
      child: Text('Window content').bodyMedium.onSurface,
    );
  }
}

class MockupWindowExample extends StatefulWidget {
  const MockupWindowExample({super.key});

  @override
  State<MockupWindowExample> createState() => _MockupWindowExampleState();
}

class _MockupWindowExampleState extends State<MockupWindowExample> {
  @override
  Widget build(BuildContext context) {
    return MockupWindow(
      child: Text('Window content').bodyMedium.onSurface,
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 랜딩 페이지에서 앱/웹 화면을 디바이스 프레임 안에 표시할 때
• 기술 문서에서 코드 예제를 코드 에디터 스타일로 표시할 때
• 데모나 쇼케이스에서 스크린샷을 실제 기기처럼 보여줄 때

대신 다른 컴포넌트를 사용하세요:

• Card: 단순한 콘텐츠 카드 레이아웃에
• CodeSnippet: 코드 하이라이팅이 필요한 코드 블록에

기본 사용법 (Basic Usage)#

// 브라우저 목업
MockupBrowser(
  addressBar: 'https://coui.cocode.im',
  child: Image.asset('assets/screenshots/dashboard.png'),
)

// 폰 목업
MockupPhone(
  child: Image.asset('assets/screenshots/app_home.png'),
)

// 코드 에디터 목업
MockupCode.fromString('void main() {\n  runApp(const MyApp());\n}')

// 윈도우 목업
MockupWindow(
  child: Text('윈도우 내용'),
)

// 브라우저 목업
MockupBrowser(
  addressBar: 'https://coui.cocode.im',
  child: img(src: 'screenshot.png', alt: 'CoUI 디자인 시스템'),
)

// 폰 목업
MockupPhone(
  child: img(src: 'app-screenshot.png', alt: '앱 화면'),
)

// 코드 목업 (fromString 팩토리 생성자)
MockupCode.fromString(
  'npm i coui\ninstalling...\nDone!',
  showLineNumbers: true,
)

// 윈도우 목업
MockupWindow(
  child: Text('윈도우 내용'),
)

Props / Parameters#

각 목업은 별도의 통일 컴포넌트 (MockupBrowser / MockupPhone / MockupCode / MockupWindow) 로 제공됩니다. chrome / colour / border-radius override 는 모두 각 컴포넌트의 단일 *Style 슬롯으로 흐릅니다 (Epic #1302).

MockupBrowser#

MockupPhone#

MockupCode#

스타일 시스템 (Style System)#

Epic #1302 nested Style API. MockupPhone 과 MockupCode 는 각자 전용 Style 슬롯을 갖습니다. 공유 CoreMockupTheme 의 legacy flat 필드는 백업 fallback 으로 유지됩니다.

CoreMockupPhoneStyle#

CoreMockupCodeStyle#

Resolve chain#

design system default
  → CoreMockupTheme (legacy shared chrome fields)
  → CoreMockupCodeTheme.style / CoreMockupPhoneTheme.style    // 프로젝트 공통
  → parent component slot override
  → widget.mockupCodeStyle / widget.mockupPhoneStyle          // 인스턴스별

MockupWindow#

변형 (Variants)#

Browser#

주소창이 있는 브라우저 프레임입니다.

MockupBrowser(
  addressBar: 'https://example.com/dashboard',
  child: DashboardScreenshot(),
)

Phone#

모바일 기기 외형(카메라 노치 등)을 갖춘 스마트폰 프레임입니다.

MockupPhone(
  child: MobileAppPreview(),
)

Code#

코드 에디터 스타일의 프레임입니다. 선택적으로 줄 번호가 표시됩니다.

MockupCode.fromString(
  'print("Hello, World!");',
  showLineNumbers: true,
)

Window#

데스크탑 앱 윈도우 스타일의 프레임입니다. 트래픽라이트 컨트롤이 포함됩니다.

MockupWindow(
  child: AppContent(),
)

동작 스펙 (Behavior)#

인터랙션#

• 기본적으로 정적 프레임으로 인터랙션 없음
• child에 인터랙션 가능한 위젯을 넣으면 프레임 안에서 동작

상태 전환#

• 정적 컴포넌트로 별도 상태 전환 없음

애니메이션#

• 별도 애니메이션 없음 (자식 위젯의 애니메이션은 그대로 동작)

사용 가이드라인 (Usage Guidelines)#

✅ Do#

MockupPhone(
  child: Image.asset(
    'assets/screenshots/app_home.png',
    fit: BoxFit.cover,
  ),
)

❌ Don't#

// ❌ 성능 문제 야기할 수 있음
MockupPhone(
  child: MaterialApp(
    home: ComplexAppWithManyAnimations(),
  ),
)

✅ Do#

MockupCode.fromString(
  "Button(\n  onPressed: handlePressed,\n  child: const Text('클릭'),\n)",
)

❌ Don't#

// ❌ 실제 앱 UI에 Phone 목업 사용
Scaffold(
  body: MockupPhone( // 실제 앱인데 Phone 프레임?
    child: actualAppContent,
  ),
)

✅ Do#

MockupPhone(
  child: AppScreenPreview(
    // 실제 앱 화면과 유사한 내용
    content: RealisticDemoContent(),
  ),
)

❌ Don't#

// ❌ 실제 앱에서 Mockup을 레이아웃으로 사용
Scaffold(
  body: MockupBrowser(
    addressBar: 'https://example.com',
    child: actualAppContent,  // 실제 콘텐츠
  ),
)

접근성 (Accessibility)#

키보드 인터랙션#

스크린 리더#

• Flutter: Semantics(label: '브라우저 목업: CoUI 문서') 형태로 프레임 설명 추가 권장
• Web: role="img" + aria-label로 목업 프레임을 장식적 요소로 표시; 내부 콘텐츠 접근성은 자식 위젯이 처리

터치 타겟#

• 목업 프레임 자체는 터치 타겟 없음
• 내부 인터랙션 요소는 자식 위젯의 타겟 크기를 따름

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Card: 단순한 콘텐츠 컨테이너가 필요할 때 사용
• CodeSnippet: 코드 하이라이팅이 필요한 코드 블록에 사용

조합 예제#

// 랜딩 페이지 히어로 섹션
Row(
  children: [
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('CoUI로 아름다운 UI 만들기',
            style: Theme.of(context).textTheme.headlineLarge),
          const Gap.md(),
          Text('Flutter와 Web을 동시에 지원하는 디자인 시스템'),
          const Gap.lg(),
          Button(
            onPressed: handleGetStarted,
            child: const Text('시작하기'),
          ),
        ],
      ),
    ),
    const Gap.xl(),
    Expanded(
      child: MockupBrowser(
        addressBar: 'https://coui.cocode.im',
        child: Image.asset('assets/screenshots/landing.png'),
      ),
    ),
  ],
)