아일랜드 아키텍처는 페이지의 큰 부분을 정적 HTML로 제공하고, 검색창이나 장바구니 같은 작은 영역만 독립적으로 하이드레이션합니다. 모든 콘텐츠에 같은 JavaScript를 보내지 않아도 됩니다.
섬 사이에 공유 상태가 많으면 경계가 복잡해질 수 있습니다. 어떤 부분이 정말 상호작용해야 하는지 먼저 나눕니다.
언제 쓰나
콘텐츠 중심 페이지에 소수의 대화형 위젯만 있을 때 적합합니다.
아일랜드 아키텍처
Island architecture
정적 페이지 위에서 필요한 위젯만 별도 클라이언트 코드로 활성화합니다.
···
<section class="stage"><div class="heading">ISLANDS <span class="hint">static sea + live widgets</span></div><div class="sea"><div class="mast"></div><div class="textline"></div><div class="textline short"></div><div class="island search">SEARCH</div><div class="island cart">CART</div><div class="textline"></div></div><div class="caption">Only the outlined islands load interaction code</div></section>.stage{width:min(94vw,780px);height:min(88vh,322px);padding:clamp(12px,3vmin,20px);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 36px #0001;display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:500 clamp(12px,3.5vmin,17px)/1.3 var(--font-sans,system-ui,sans-serif);overflow:hidden}.heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:750;color:var(--accent)}.hint{color:var(--muted);font-size:clamp(12px,3.2vmin,14px);font-weight:500}.caption{margin-top:auto;color:var(--muted);font-size:clamp(12px,3.2vmin,14px)}.row{display:flex;gap:clamp(5px,1.5vmin,12px);align-items:center}.tile{padding:clamp(6px,1.8vmin,13px);border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center;min-width:0}.arrow{color:var(--accent);font-weight:800}.stage [data-on]{transition:background .3s,border-color .3s,opacity .3s,transform .3s}.stage .on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.sea{position:relative;flex:1;min-height:75px;border:1px solid var(--line);border-radius:9px;background:repeating-linear-gradient(0deg,var(--bg),var(--bg) 20px,var(--surface) 21px);padding:10px}.mast{width:47%;height:12px;background:var(--accent-2);border-radius:6px;margin-bottom:8px}.textline{width:80%;height:7px;background:var(--line);border-radius:7px;margin:7px 0}.textline.short{width:58%}.island{position:absolute;right:10%;padding:7px;border:2px solid var(--line);background:var(--surface);border-radius:8px;font-weight:750;transition:border-color .3s,box-shadow .3s}.search{top:12%}.cart{bottom:10%}.stage[data-step="1"] .search,.stage[data-step="2"] .search,.stage[data-step="2"] .cart{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 17%,transparent)}.stage small,.stage button,.stage .cards b,.stage .phase b,.stage .pair b,.stage .tree-mini b{font-size:clamp(12px,3.2vmin,14px)!important}const stage=document.querySelector(".stage");let step=0;function tick(){stage.dataset.step=String(step);step=(step+1)%3}tick();let timer=setInterval(tick,980);stage.addEventListener("pointerdown",()=>{clearInterval(timer);tick()})