Design Atlas
한국어
⟳ Design process

Prototype

프로토타입

Screens wired together so tapping one actually leads to the next — a fake product built to test behavior, not looks.

Also known as: 클릭 가능한 프로토타입Clickable prototype
···
html
<div class="stage">
  <div class="phone">
    <div class="screen a" id="scrA">
      <div class="hd">Inbox</div>
      <div class="row"></div>
      <div class="row hl" id="rowHl"></div>
      <div class="row"></div>
    </div>
    <div class="screen b" id="scrB">
      <div class="hd"><span class="back" id="backBtn">&#8592;</span> Detail</div>
      <div class="body-ln w1"></div>
      <div class="body-ln w2"></div>
      <div class="body-ln w3"></div>
    </div>
    <div class="cur" id="cur">&#10148;</div>
  </div>
</div>
css
.stage{width:76%;height:92%;max-width:300px}
.phone{position:relative;width:100%;height:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;gap:8%;padding:9% 8%;box-sizing:border-box;
  background:var(--surface);transition:transform .5s ease}
.hd{font:700 12px/1 sans-serif;color:var(--fg);display:flex;align-items:center;gap:6px;box-shadow:inset 0 -1px 0 var(--line);padding-bottom:8%}
.back{color:var(--accent);font-weight:700}
.row{height:16%;border-radius:8px;background:var(--line)}
.row.hl{background:color-mix(in srgb, var(--accent) 25%, var(--surface));border:1px solid var(--accent)}
.body-ln{height:10%;border-radius:3px;background:var(--line)}
.body-ln.w1{width:100%}.body-ln.w2{width:85%}.body-ln.w3{width:60%}
.screen.b{transform:translateX(100%)}
.cur{position:absolute;font-size:16px;color:var(--fg);transform:rotate(-45deg);z-index:5;left:10%;top:90%}
.cur.tap{filter:brightness(1.4)}
js
const b = document.getElementById('scrB');
const cur = document.getElementById('cur');
function wait(ms) { return new Promise((r) => setTimeout(r, ms)); }
function moveTo(x, y, ms) {
  cur.style.transition = 'left ' + ms + 'ms ease, top ' + ms + 'ms ease';
  cur.style.left = x + '%';
  cur.style.top = y + '%';
  return wait(ms);
}
async function tap() {
  cur.classList.add('tap');
  await wait(150);
  cur.classList.remove('tap');
}
async function loop() {
  for (;;) {
    b.style.transform = 'translateX(100%)';
    cur.style.transition = 'none';
    cur.style.left = '10%';
    cur.style.top = '90%';
    await wait(500);
    await moveTo(50, 40, 700);
    await tap();
    b.style.transform = 'translateX(0)';
    await wait(1300);
    await moveTo(13, 16, 600);
    await tap();
    b.style.transform = 'translateX(100%)';
    await wait(1200);
  }
}
loop();

A prototype is a mockup with interaction wired on top. Tapping a button moves to the next screen, a tab actually switches content, back actually goes back. It doesn't need to be as polished as a mockup — you can build a working prototype out of gray boxes — but the flow has to hang together the way a real product would.

The point isn't "does this look good" but "does this flow make sense." Hand a participant a task and let them work through a prototype in a usability test, and confusion that a flat screen spec would never reveal — not knowing where to tap, too many steps to get anywhere — surfaces immediately.

Fidelity depends on purpose. A paper prototype is flipped by hand to test the flow alone; one with real screen transitions is for stakeholder demos or one last check before developer handoff.

When to use

Once structure and visuals are settled enough, use it to check whether people can actually get through the flow. Usability tests almost always run on a prototype, not a static mockup.