Zoning

조닝

Dividing one open space into activity-based zones without building walls — a rug, a light fixture or a furniture arrangement alone can mark where one zone ends and another begins.

Also known as: Space zoningFunctional zoning
···
html
<div class="plan">
<svg viewBox="0 0 400 250">
  <rect x="16" y="16" width="368" height="218" rx="6" fill="var(--surface)" stroke="var(--line)" stroke-width="3"/>
  <rect class="zoneA" x="22" y="22" width="168" height="128"/>
  <rect class="zoneB" x="196" y="22" width="182" height="128"/>
  <rect class="zoneC" x="22" y="156" width="356" height="76"/>
  <rect class="hl a" x="22" y="22" width="168" height="128" rx="2"/>
  <rect class="hl b" x="196" y="22" width="182" height="128" rx="2"/>
  <rect class="hl c" x="22" y="156" width="356" height="76" rx="2"/>
  <rect class="fur" x="42" y="46" width="108" height="32" rx="8"/>
  <circle class="fur" cx="96" cy="108" r="16"/>
  <rect class="fur" x="252" y="60" width="96" height="52" rx="6"/>
  <rect class="fur" x="288" y="42" width="16" height="14" rx="3"/>
  <rect class="fur" x="288" y="116" width="16" height="14" rx="3"/>
  <rect class="fur" x="238" y="78" width="14" height="16" rx="3"/>
  <rect class="fur" x="348" y="78" width="14" height="16" rx="3"/>
  <rect class="fur" x="50" y="176" width="88" height="32" rx="4"/>
  <rect class="fur" x="82" y="214" width="22" height="14" rx="3"/>
</svg>
</div>
css
.plan{width:min(92%,460px);aspect-ratio:400/250}
.plan svg{width:100%;height:100%;display:block}
.zoneA{fill:color-mix(in oklab,var(--accent) 22%,var(--surface))}
.zoneB{fill:color-mix(in oklab,var(--accent-2) 22%,var(--surface))}
.zoneC{fill:color-mix(in oklab,var(--accent-3) 22%,var(--surface))}
.hl{fill:none;stroke-width:3;opacity:0}
.hl.a{stroke:var(--accent);animation:hl 3.6s ease-in-out infinite}
.hl.b{stroke:var(--accent-2);animation:hl 3.6s ease-in-out infinite 1.2s}
.hl.c{stroke:var(--accent-3);animation:hl 3.6s ease-in-out infinite 2.4s}
@keyframes hl{0%,27%,100%{opacity:0}8%,20%{opacity:1}}
.fur{fill:var(--fg);opacity:.55}

Planning a wide studio or an open-plan living room without dividing walls starts with zoning: deciding what each area is for, then grouping the furniture, rugs and lighting that belong to it. Cluster a sofa, a rug and a coffee table and that alone signals "living zone" — put a dining table and a pendant light nearby and it reads as a separate "dining zone" with no wall required.

The tools that make a boundary aren't walls but a change in flooring, the edge of a rug, the reach of a ceiling light, or which way a piece of furniture faces. Placing a bookshelf or console with its back to a walkway, for instance, turns that back panel into a natural visual divider.

Keep enough distance between zones that circulation isn't blocked, and let neighbouring zones share at least one color or material — otherwise the space reads as several unrelated rooms rather than one open plan.

When to use

Use it for studios or open living-kitchen spaces that need to hold several functions without walls. If it's still unclear where one zone ends after all the furniture is placed, check the rugs and lighting first — that's usually where the boundary got lost.