Mockup

화면에 무엇이든 올릴 수 있는 기기입니다. 휴대폰, 태블릿, 모니터, 노트북을 그리고 그 위에 시스템의 상태바나 dock, 작업 표시줄을 얹습니다. 화면은 기기의 실제 해상도를 가진 viewport이므로, 안의 내용은 페이지가 아니라 휴대폰을 기준으로 배치됩니다.

import { Mockup } from 'neba';

<Mockup device="mobile" os="ios" width={260}>
  <YourScreen />
</Mockup>;

Props

Prop	타입	기본값	설명
device *	'desktop' | 'tablet' | 'mobile'	—	무엇을 그린 그림인지. 형태와 해상도 사다리, 고를 수 있는 시스템이 여기서 정해집니다
os	'macos' | 'windows' | 'linux' | 'ios' | 'ipados' | 'android'	device's own	화면에 크롬을 그릴 시스템. 데스크톱은 macos·windows·linux, 태블릿은 ipados·android, 휴대폰은 ios·android입니다. 그 기기가 돌리지 않는 값은 기본값으로 되돌아갑니다
hardware	'monitor' | 'laptop'	'monitor'	데스크톱 화면을 받치는 것, 아래의 받침대인지 앞의 키보드인지. 태블릿과 휴대폰에서는 무시됩니다
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	기기의 크기, 기기별 실제 해상도 다섯 단계. Box에서처럼 높이도 타입 스케일도 아닙니다
resolution	{ width: number; height: number }	—	화면의 논리 해상도(CSS 픽셀). 다섯 단계 중 맞는 것이 없을 때 씁니다. 패널의 물리 픽셀 수가 아니라 내용이 배치되는 viewport입니다
orientation	'portrait' | 'landscape'	'portrait'	손에 드는 기기를 돌립니다. 화면과 bezel과 구멍이 함께 돌아갑니다. 데스크톱에서는 무시됩니다
bezel	'none' | 'thin' | 'standard' | 'thick'	'standard'	화면을 둘러싼 하드웨어의 양. none은 얇은 테두리가 아니라 하드웨어 없음이고, thick은 위아래가 넓은 옛날 기기입니다
finish	'graphite' | 'silver' | 'white'	'graphite'	하드웨어의 재질. 테마 토큰이 아니라 고정된 색이므로 dark로 바뀌어도 그대로입니다
notch	'none' | 'notch' | 'dynamic-island' | 'punch-hole'	device's own	카메라 구멍. 크롬이 아니라 하드웨어이므로 systemUi를 꺼도 그려집니다. 기본값은 그 기기가 실제로 가졌을 것입니다
systemUi	boolean	true	시스템 자신의 바, 상태바와 home indicator, 메뉴 바와 dock, 작업 표시줄. 각 바는 내용을 덮지 않고 자기 자리를 차지합니다
scroll	boolean	false	화면보다 긴 내용이 스크롤되는지. 꺼져 있으면 잘리며, 기기의 정지된 사진이 원하는 것이 그것입니다
wallpaper	string	페이지의 surface 색	내용 뒤에 놓이는 것. 색, gradient, url() 등 임의의 CSS background 값
time	string	'9:41'	상태바나 작업 표시줄의 시계이자 크롬이 그리는 유일한 글자. Date가 아니라 문자열입니다. 진짜 시각을 읽으면 서버와 브라우저가 어긋납니다
width	number | string	'100%'	기기가 페이지에 그려지는 너비. 숫자는 픽셀입니다. 화면은 자기 해상도를 유지하고 기기 전체가 여기에 맞춰 축소됩니다
height	number | string	—	그려지는 높이. 혼자 주면 너비가 기기의 비율을 따릅니다
color공통	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	크롬의 강조색, dock이나 작업 표시줄의 첫 아이콘
elevation공통	0 | 1 | 2 | 3	0	기기가 페이지에서 떠 있는 높이. 상자가 아니라 실루엣으로 그려지며 기기와 함께 줄어들지 않습니다
transition공통	NebaTransition	—	mount 시 한 번 실행되는 등장 애니메이션 (transition="fade"). 트리거나 반복이 필요하면 Animate* 컴포넌트로 감싸세요
render	useRender.RenderProp	—	div 대신 다른 요소로 렌더링합니다 (render={<figure />}). Base UI의 render prop 그대로
children	ReactNode	—	화면에 놓이는 것

<div>의 기본 속성은 그대로 전달되며, render로 요소를 바꿀 수 있습니다. 공통 축은 prop 규칙에서 설명합니다.

특정 기기에만 해당하는 prop이 셋 있고, 나머지 기기에서는 무시됩니다. hardware는 데스크톱의 것, orientation은 손에 드는 기기의 것이며, 그 기기가 돌리지 않는 os는 해당 기기의 기본값으로 되돌아갑니다.

예시

device

device는 기본값이 없는 유일한 prop입니다. 형태와 해상도 사다리, 그리고 고를 수 있는 시스템이 여기서 정해집니다. 데스크톱은 macos·windows·linux, 태블릿은 ipados·android, 휴대폰은 ios·android를 돌립니다.

import { Mockup } from 'neba';
import { DesktopScreen, PhoneScreen } from './screen';

export default function MockupDevices() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <Mockup device="desktop" width={380}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="tablet" width={150}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="mobile" width={110}>
        <PhoneScreen />
      </Mockup>
    </div>
  );
}

목업 크기 정하기

width와 height는 기기가 페이지에 그려지는 크기입니다. 픽셀 숫자든 임의의 CSS 길이든 받습니다. 하나만 주면 나머지는 기기의 비율을 따르고, 둘 다 주지 않으면 놓인 자리의 너비를 채웁니다. 어떤 값이 되든 안쪽 화면은 자기 해상도를 유지하며, 기기 전체가 거기에 맞춰 축소됩니다.

<Mockup device="mobile" width={260} />
<Mockup device="desktop" height={320} />
<Mockup device="tablet" width="100%" />

size와 resolution

size는 기기별로 실제 해상도 다섯 단계를 오르내리는 사다리입니다. 휴대폰은 320부터 430 CSS 픽셀까지, 데스크톱은 1024부터 1920까지입니다. resolution은 { width, height } 쌍을 받아 이를 덮어씁니다.

화면은 neba-screen이라는 이름의 container이므로, 안의 내용은 창이 아니라 기기에 container query로 반응할 수 있습니다. 아래 두 목업은 페이지에서 똑같이 300픽셀 너비이고, 다른 것은 그 뒤의 화면뿐입니다.

import { Mockup } from 'neba';

/**
 * Both mockups are drawn the same width on the page. What differs is the screen
 * behind that: 390 CSS pixels on the left and 1440 on the right, which is why
 * the same three cards stack on one and sit in a row on the other.
 */
export default function MockupResolution() {
  return (
    <div className="flex w-full flex-wrap items-start justify-center gap-5">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">390 × 844</span>
        <Mockup device="mobile" bezel="thin" systemUi={false} notch="none" width={230}>
          <Cards />
        </Mockup>
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">1440 × 900</span>
        <Mockup device="desktop" bezel="thin" systemUi={false} width={230}>
          <Cards />
        </Mockup>
      </div>
    </div>
  );
}

/**
 * A container query rather than a media query: the screen is a container named
 * `neba-screen`, so this answers to the device it is on rather than to the
 * window the page is in.
 */
function Cards() {
  return (
    <div className="grid grid-cols-1 gap-3 p-4 @min-[600px]/neba-screen:grid-cols-3">
      {['Requests', 'Error rate', 'Latency'].map((label) => (
        <div
          key={label}
          className="rounded-(--neba-radius-sm) border border-(--neba-border) bg-(--neba-primary-soft) p-4 text-[0.8125rem]"
        >
          {label}
        </div>
      ))}
    </div>
  );
}

os

os는 어떤 바를 어디에 그릴지를 정합니다. 메뉴 바와 떠 있는 dock, 가운데 정렬된 작업 표시줄, 상단 바와 시작 모서리를 따라 내려가는 dock이 그것입니다. 크롬은 복제가 아니라 인상입니다. Neba 자신의 토큰으로 그린 추상적인 도형이고, 글자는 시계 하나뿐입니다.

import { Mockup, type NebaMockupOs } from 'neba';

const SYSTEMS: NebaMockupOs[] = ['macos', 'windows', 'linux'];

export default function MockupOs() {
  return (
    <div className="grid w-full grid-cols-1 gap-5 sm:grid-cols-3">
      {SYSTEMS.map((os) => (
        <div key={os} className="flex flex-col gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{os}</span>
          <Mockup device="desktop" os={os} bezel="thin" wallpaper="var(--neba-panel-hover)" />
        </div>
      ))}
    </div>
  );
}

손에 드는 기기에서는 상태바와 아래쪽 바가 한 쌍입니다. ios와 ipados는 home indicator를, android는 탐색 glyph 셋을 그립니다.

import { Mockup } from 'neba';

/**
 * A phone runs `ios` or `android`, a tablet `ipados` or `android`. The status
 * bar, the bar at the bottom and the cut-out all follow from the pair.
 */
export default function MockupHandhelds() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">ios</span>
        <Mockup device="mobile" os="ios" width={128} />
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">android</span>
        <Mockup device="mobile" os="android" width={128} />
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">ipados</span>
        <Mockup device="tablet" os="ipados" width={168} />
      </div>
    </div>
  );
}

hardware

데스크톱에서 hardware는 화면을 받치는 것입니다. 아래에 받침대가 있거나, 앞에 키보드가 있거나입니다. 태블릿과 휴대폰에서는 무시됩니다.

import { Mockup } from 'neba';
import { DesktopScreen } from './screen';

export default function MockupHardware() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">monitor</span>
        <Mockup device="desktop" hardware="monitor" width={340}>
          <DesktopScreen />
        </Mockup>
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">laptop</span>
        <Mockup device="desktop" hardware="laptop" os="macos" width={340}>
          <DesktopScreen />
        </Mockup>
      </div>
    </div>
  );
}

bezel

bezel은 화면을 둘러싼 하드웨어의 양입니다. none은 더 얇은 테두리가 아니라 하드웨어가 아예 없는 상태, 즉 모서리만 깎인 화면 그 자체입니다. thick은 옛날 기기입니다. 옆은 좁고 위아래가 넓습니다.

import { Mockup, type NebaMockupBezel } from 'neba';

const BEZELS: NebaMockupBezel[] = ['none', 'thin', 'standard', 'thick'];

export default function MockupBezel() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-5">
      {BEZELS.map((bezel) => (
        <div key={bezel} className="flex flex-col items-center gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{bezel}</span>
          {/* `thick` is an older phone rather than a wider frame: narrow sides,
              a forehead and a chin — and no cut-out, because a device with that
              much bezel had nowhere to put one. */}
          <Mockup
            device="mobile"
            bezel={bezel}
            notch={bezel === 'thick' ? 'none' : undefined}
            width={112}
          />
        </div>
      ))}
    </div>
  );
}

finish

finish는 하드웨어의 재질입니다. 셋 모두 테마 토큰이 아니라 고정된 색이므로, graphite 휴대폰은 페이지가 dark로 바뀌어도 graphite 그대로입니다.

import { Mockup, type NebaMockupFinish } from 'neba';

const FINISHES: NebaMockupFinish[] = ['graphite', 'silver', 'white'];

export default function MockupFinish() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-5">
      {FINISHES.map((finish) => (
        <div key={finish} className="flex flex-col items-center gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{finish}</span>
          <Mockup device="mobile" finish={finish} elevation={1} width={112} />
        </div>
      ))}
    </div>
  );
}

notch

notch는 카메라 구멍입니다. dynamic-island, notch, 동그란 punch-hole, 그리고 none이 있습니다. 기본값은 그 기기가 실제로 가진 형태입니다. iOS 휴대폰은 island, Android 휴대폰은 punch hole, 태블릿과 데스크톱은 없음입니다.

크롬이 아니라 하드웨어이므로 systemUi를 껐든 켰든 그려지며, landscape에서는 시작 모서리로 옮겨 갑니다.

import { Mockup, type NebaMockupNotch } from 'neba';

const NOTCHES: NebaMockupNotch[] = ['dynamic-island', 'notch', 'punch-hole', 'none'];

export default function MockupNotch() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-5">
      {NOTCHES.map((notch) => (
        <div key={notch} className="flex flex-col items-center gap-2">
          <span className="text-[0.75rem] text-(--neba-muted-fg)">{notch}</span>
          <Mockup device="mobile" notch={notch} width={112} />
        </div>
      ))}
    </div>
  );
}

orientation

orientation은 손에 드는 기기를 돌립니다. 화면과 bezel과 구멍이 함께 돌아갑니다. 데스크톱은 받침대가 돌지 않으므로 이를 무시합니다.

import { Mockup } from 'neba';
import { DesktopScreen } from './screen';

/** The bezel and the cut-out turn with the screen. */
export default function MockupOrientation() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <Mockup device="tablet" orientation="portrait" width={150}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="tablet" orientation="landscape" width={230}>
        <DesktopScreen />
      </Mockup>
      <Mockup device="mobile" orientation="landscape" notch="notch" width={200} />
    </div>
  );
}

systemUi

모든 바는 내용을 덮는 대신 자기 자리를 차지합니다. 따라서 systemUi={false}는 가려져 있던 무언가를 드러내는 것이 아니라, 화면을 children에게 돌려줍니다.

import { Mockup } from 'neba';
import { PhoneScreen } from './screen';

export default function MockupSystemUi() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">systemUi</span>
        <Mockup device="mobile" width={140}>
          <PhoneScreen />
        </Mockup>
      </div>
      <div className="flex flex-col items-center gap-2">
        <span className="text-[0.75rem] text-(--neba-muted-fg)">systemUi={'{false}'}</span>
        {/* The bars gave their space back rather than uncovering anything — and
            the cut-out stayed, because that one is a hole in the glass. */}
        <Mockup device="mobile" systemUi={false} width={140}>
          <PhoneScreen />
        </Mockup>
      </div>
    </div>
  );
}

scroll

화면보다 긴 내용은 기본적으로 잘립니다. 기기의 정지된 사진이 원하는 것이 그것이기 때문입니다. scroll을 켜면 대신 화면이 스크롤됩니다.

import { Card, Chip, Mockup, Typography } from 'neba';

const SERVICES = [
  'api-gateway',
  'web-storefront',
  'checkout',
  'search-index',
  'image-resizer',
  'mailer',
  'billing',
  'webhooks',
  'auth',
  'analytics',
  'scheduler',
  'notifications',
  'exports',
  'admin'
];

export default function MockupScroll() {
  return (
    <Mockup device="mobile" size="xs" scroll width={150}>
      <div className="flex flex-col gap-2 p-3">
        {SERVICES.map((service, index) => (
          <Card key={service} size="xs">
            <div className="flex items-center justify-between gap-2">
              <Typography level="caption">{service}</Typography>
              <Chip size="xs" variant="text" color={index % 4 === 1 ? 'info' : 'success'}>
                {index % 4 === 1 ? 'Building' : 'Live'}
              </Chip>
            </div>
          </Card>
        ))}
      </div>
    </Mockup>
  );
}

wallpaper

wallpaper는 내용 뒤에 놓이는 것입니다. 색이든 gradient든 url()이든, 임의의 CSS background 값을 받습니다. 기본값은 페이지 자신의 surface 색입니다.

import { Mockup } from 'neba';

export default function MockupWallpaper() {
  return (
    <div className="flex w-full flex-wrap items-end justify-center gap-6">
      <Mockup
        device="mobile"
        width={128}
        wallpaper="linear-gradient(160deg, oklch(62% 0.19 262), oklch(48% 0.16 318))"
      />
      <Mockup
        device="mobile"
        width={128}
        wallpaper="url(/samples/photos/lighthouse-cliff-wildflowers.jpg) center / cover"
      />
      <Mockup
        device="desktop"
        hardware="laptop"
        width={300}
        wallpaper="url(/samples/photos/alpine-lake-dawn.jpg) center / cover"
      />
    </div>
  );
}

elevation

elevation은 기기를 페이지에서 띄웁니다. 그림자는 실루엣으로 그려지므로 이를 감싸는 상자가 아니라 뚜껑과 목과 받침을 따라가며, 기기가 축소되어도 함께 줄어들지 않습니다.

<Mockup device="mobile" elevation={2} width={240} />

접근성

• 기기의 모든 부분(테두리, 바, 구멍)은 aria-hidden입니다. screen reader가 닿는 것은 children뿐이며, 목업이란 곧 실제 내용을 둘러싼 그림이라는 뜻입니다.
• 시계는 장식이며 읽히지 않습니다. 크롬이 그리는 유일한 글자입니다.
• 목업은 스스로 role도 이름도 만들지 않습니다. 그림 자체가 페이지에서 의미를 가진다면 aria-label을 주거나, render로 캡션이 있는 <figure>로 바꾸어 이름을 주십시오.
• 안의 내용은 그대로 조작할 수 있고 focus도 갑니다. 4분의 1로 축소된 기기는 컨트롤도 4분의 1 크기라는 점은, 그 안에 form을 넣기 전에 알아 둘 만합니다.