Design Atlas
한국어
❖ Design styles

Skeuomorphism

스큐어모피즘

UI that imitates real-world materials — leather grain, glossy glass, paper shadows. Early iOS (2007–2012) is the defining example.

Also known as: Skeuomorphic design
···
html
<div class="pad">
  <div class="switch" id="switch">
    <div class="knob"></div>
  </div>
  <span class="caption">POWER</span>
</div>
css
body{background:#3a3128}
.pad{width:min(70%,220px);aspect-ratio:1.5;border-radius:20px;display:grid;place-items:center;gap:10px;
  background:linear-gradient(160deg,#5a4a38,#2e241a);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.12),inset 0 -6px 14px rgba(0,0,0,.5),0 14px 26px rgba(0,0,0,.4);
  border:1px solid #1c150e}
.switch{width:56%;aspect-ratio:2.2;border-radius:999px;position:relative;cursor:pointer;
  background:linear-gradient(180deg,#171310,#3a322a);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.7),inset 0 -1px 1px rgba(255,255,255,.15)}
.knob{position:absolute;top:8%;left:4%;width:44%;height:84%;border-radius:999px;
  background:linear-gradient(180deg,#e8dcc8,#a99872);
  box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.6);
  transition:left .5s cubic-bezier(.34,1.4,.64,1)}
.switch.on .knob{left:52%;background:linear-gradient(180deg,#fff3d6,#e2c98c)}
.switch.on{box-shadow:inset 0 3px 6px rgba(0,0,0,.7),0 0 14px rgba(255,200,90,.5)}
.caption{font:700 11px/1 Georgia,serif;letter-spacing:.24em;color:#cbb896}
js
const sw = document.getElementById('switch');
setInterval(() => sw.classList.toggle('on'), 1500);

When touchscreens were still an unfamiliar object, a button that looked pressable like a real button, or a camera icon that looked like an actual camera, let people intuit what a thing did without being taught. Skeuomorphism existed to cut that learning cost.

Visually it means gradients standing in for metal or glass gloss, inset/outset shadows for depth, leather- or wood-grain textures, and animations that mimic real paper curling or turning. iOS's Notes app (yellow legal pad), Game Center (green felt) and iBooks (wooden shelf) are the textbook examples.

It receded sharply when iOS 7 switched to flat design in 2013, but it never fully disappeared — instrument-emulator apps and casino games, where feeling "real" is the entire point, still lean on it.

When to use

Use it locally where mimicking a real object is the point — instruments, card games, calculators. Applying it across a whole UI adds weight and maintenance cost for little benefit.