Style Gallery.

Awwwards 사례 연구

숲속 건축과 직접 선택하는 작품 묶음

섹션 · MIT

섹션 더 보기
CASE STUDY
숲속 건축과 직접 선택하는 작품 묶음 정적 미리보기

갤러리 안에서는 화면을 벗어나거나 움직임을 멈추면 예제도 닫힙니다. 다시 재생할 때는 처음부터 시작해요.

큰 화면으로 보기 새 탭실행 HTML 저장

저장한 HTML에서는 갤러리의 재생 설정이 적용되지 않아요.

SOURCE FILES

독립 예제 코드 읽기

5개 파일

사례의 구도나 문서의 원리를 바탕으로 새로 만든 예제입니다. 아래 코드를 복사해 직접 응용할 수 있습니다. 실행 HTML에는 미리보기를 위한 실행 환경이 들어 있습니다.

index.html독립 구현
파일 저장 

<!doctype html>
<html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data:; media-src data:; font-src data:; connect-src 'none'; base-uri 'none'; form-action 'none'"><title>숲속 건축과 직접 선택하는 작품 묶음 · 독립 장면 연구</title><style>/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.

MIT License

Copyright (c) 2026 StyleGallery contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
 */

*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{background:var(--bg,#f5f2eb);color:var(--fg,#181818)}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#ef6b3f);outline-offset:4px}button{color:inherit}button:disabled{cursor:default;opacity:.45}svg{display:block;max-width:100%}a{color:inherit}.stage{isolation:isolate;min-height:100vh;overflow:hidden;padding:26px;position:relative}.art{pointer-events:none}.eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.topline{align-items:center;display:flex;gap:14px;justify-content:space-between;position:relative;z-index:5}.topline strong{font-size:13px;letter-spacing:-.04em}.topline nav{display:flex;gap:12px}h1,h2,p{margin:0}h1{font-size:clamp(42px,9vw,116px);font-weight:600;letter-spacing:-.065em;line-height:.94}h2{font-size:clamp(24px,4vw,44px);letter-spacing:-.04em;line-height:1.05}.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}.copy{font-size:13px;line-height:1.55;max-width:31em}.pill{align-items:center;background:var(--fg,#181818);border:1px solid transparent;border-radius:99px;color:var(--bg,#f5f2eb);display:inline-flex;gap:18px;justify-content:center;min-height:40px;padding:10px 19px;text-decoration:none}.ghost{background:transparent;border-color:currentColor;color:inherit}.small{font-size:11px}.huge{font-size:clamp(68px,18vw,220px);line-height:.8}.caption{font:10px/1.4 ui-monospace,monospace}.controls{align-items:center;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:6}.controls button{background:transparent;border:1px solid currentColor;border-radius:999px;font-size:11px;min-height:34px;padding:7px 12px}.controls button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.bottomline{align-items:end;display:flex;gap:20px;justify-content:space-between;position:relative;z-index:4}.stack{display:grid;gap:18px}.row{align-items:center;display:flex;gap:16px}.visually-hidden{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.feedback{font-size:12px;min-height:18px}.surface{background:var(--panel,#fff);border:1px solid #8883;border-radius:16px;padding:24px}.scene-footer{bottom:13px;left:26px;position:absolute;right:26px}.artfill{height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.artfill svg{height:100%;width:100%}.line{border-top:1px solid currentColor;opacity:.4}input,select{border:1px solid #8887;border-radius:7px;min-height:38px;min-width:0;padding:8px 10px;width:100%}input[type=range]{accent-color:var(--accent,#ed6447);min-height:28px;padding:0}details>summary{cursor:pointer;list-style:none}details>summary::-webkit-details-marker{display:none}[hidden]{display:none!important}.flow{display:grid;gap:24px}dialog{background:var(--panel,#fff);border:0;border-radius:12px;color:#171717;max-width:calc(100vw - 34px);padding:28px;width:430px}dialog::backdrop{background:#111a;backdrop-filter:blur(5px)}dialog form{display:grid;gap:15px}dialog .close{background:transparent;border:0;float:right;font-size:25px}body[data-preview-status=error]::after{background:#781b21;color:white;content:'Preview error';padding:8px;position:fixed;right:0;top:0}.motion{animation-play-state:paused!important}.stage[data-playing=true] .motion{animation-play-state:running!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(max-width:480px){.stage{padding:18px}.topline nav{gap:8px}.eyebrow{font-size:9px}.scene-footer{left:18px;right:18px}.copy{font-size:12px}.topline{gap:8px}.topline strong{font-size:12px}.surface{padding:17px}}

.stage{min-height:620px}.stage h1,.stage h2{overflow-wrap:anywhere}.topline{flex-wrap:wrap}button{max-width:100%}@media(max-width:480px){.stage{min-height:640px}}:root{--bg:#354a38;--fg:#fcf8eb}.forest-frames,.forest-slide{inset:0;position:absolute;z-index:-1}.forest-slide svg{height:100%;width:100%}.forest-frames::after{background:linear-gradient(#132c2255,transparent 35%,#0b211aeb);content:'';inset:0;position:absolute}.forest-nav{align-items:center;display:flex;flex-wrap:wrap;font-size:10px;gap:18px;justify-content:space-between;position:relative;z-index:4}.forest-nav strong{font-size:13px}.forest-nav>span{font-size:8px;letter-spacing:.1em}.forest-nav summary{background:#1e2923;padding:12px 17px}.forest-nav details{position:relative}.forest-nav details p{background:#1e2923;line-height:1.6;min-width:220px;padding:20px;position:absolute;right:0;top:30px}.forest-caption{bottom:30px;left:26px;position:absolute;right:26px}.forest-progress{align-items:center;display:flex;gap:20px;margin-bottom:28px}.forest-progress .controls:first-child{flex:1;max-width:290px}.forest-progress .controls:first-child button{border:0;border-radius:0;border-top:2px solid #d0daca66;flex:1;font-size:9px;min-height:26px;padding:7px 0;text-align:left}.forest-progress .controls:first-child button[aria-pressed=true]{background:none;border-color:white;color:#fff}.forest-progress .controls:last-child button{border-color:#cedbca88;min-height:28px;padding:3px 12px}.forest-caption h1{font:400 clamp(32px,4.8vw,51px)/1 Georgia;margin:16px 0 24px}.forest-description{align-items:start;display:flex;gap:30px;justify-content:space-between}.forest-description>p{font-size:12px;max-width:240px}.forest-description details{max-width:320px;width:48%}.forest-description summary{background:#f4f4e9;color:#314334;font-size:11px;padding:15px 21px}.forest-description details p{background:#283f30;font-size:11px;line-height:1.6;padding:20px}@media(max-width:480px){.forest-nav>span{display:none}.forest-nav strong{font-size:11px}.forest-caption{bottom:25px;left:18px;right:18px}.forest-description{flex-direction:column;gap:18px}.forest-description details{width:100%}.forest-caption h1{font-size:35px}.forest-slide svg{max-width:none;transform:translateX(-23%);width:170%}}</style></head><body><main id="root"><section class="stage" aria-label="숲속 건축과 직접 선택하는 작품 묶음">
  <div class="forest-frames art"><div class="forest-slide" data-forest-slide="0" ><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" aria-hidden="true"><rect width="800" height="500" fill="#b2ba9c"/><path d="M-20 275V35" stroke="#465d46" stroke-width="10"/><path d="M-56 90L-20 -3 17 90Z" fill="#607555"/><path d="M-64 140L-20 40 25 140Z" fill="#506749"/><path d="M27 312V72" stroke="#334b3c" stroke-width="11"/><path d="M-9 127L27 34 64 127Z" fill="#476149"/><path d="M-17 177L27 77 72 177Z" fill="#506749"/><path d="M74 349V109" stroke="#465d46" stroke-width="12"/><path d="M38 164L74 71 111 164Z" fill="#607555"/><path d="M30 214L74 114 119 214Z" fill="#506749"/><path d="M121 286V46" stroke="#334b3c" stroke-width="13"/><path d="M85 101L121 8 158 101Z" fill="#476149"/><path d="M77 151L121 51 166 151Z" fill="#506749"/><path d="M168 323V83" stroke="#465d46" stroke-width="14"/><path d="M132 138L168 45 205 138Z" fill="#607555"/><path d="M124 188L168 88 213 188Z" fill="#506749"/><path d="M215 360V120" stroke="#334b3c" stroke-width="15"/><path d="M179 175L215 82 252 175Z" fill="#476149"/><path d="M171 225L215 125 260 225Z" fill="#506749"/><path d="M262 297V57" stroke="#465d46" stroke-width="16"/><path d="M226 112L262 19 299 112Z" fill="#607555"/><path d="M218 162L262 62 307 162Z" fill="#506749"/><path d="M309 334V94" stroke="#334b3c" stroke-width="17"/><path d="M273 149L309 56 346 149Z" fill="#476149"/><path d="M265 199L309 99 354 199Z" fill="#506749"/><path d="M356 371V131" stroke="#465d46" stroke-width="10"/><path d="M320 186L356 93 393 186Z" fill="#607555"/><path d="M312 236L356 136 401 236Z" fill="#506749"/><path d="M403 308V68" stroke="#334b3c" stroke-width="11"/><path d="M367 123L403 30 440 123Z" fill="#476149"/><path d="M359 173L403 73 448 173Z" fill="#506749"/><path d="M450 345V105" stroke="#465d46" stroke-width="12"/><path d="M414 160L450 67 487 160Z" fill="#607555"/><path d="M406 210L450 110 495 210Z" fill="#506749"/><path d="M497 282V42" stroke="#334b3c" stroke-width="13"/><path d="M461 97L497 4 534 97Z" fill="#476149"/><path d="M453 147L497 47 542 147Z" fill="#506749"/><path d="M544 319V79" stroke="#465d46" stroke-width="14"/><path d="M508 134L544 41 581 134Z" fill="#607555"/><path d="M500 184L544 84 589 184Z" fill="#506749"/><path d="M591 356V116" stroke="#334b3c" stroke-width="15"/><path d="M555 171L591 78 628 171Z" fill="#476149"/><path d="M547 221L591 121 636 221Z" fill="#506749"/><path d="M638 293V53" stroke="#465d46" stroke-width="16"/><path d="M602 108L638 15 675 108Z" fill="#607555"/><path d="M594 158L638 58 683 158Z" fill="#506749"/><path d="M685 330V90" stroke="#334b3c" stroke-width="17"/><path d="M649 145L685 52 722 145Z" fill="#476149"/><path d="M641 195L685 95 730 195Z" fill="#506749"/><path d="M732 367V127" stroke="#465d46" stroke-width="10"/><path d="M696 182L732 89 769 182Z" fill="#607555"/><path d="M688 232L732 132 777 232Z" fill="#506749"/><path d="M779 304V64" stroke="#334b3c" stroke-width="11"/><path d="M743 119L779 26 816 119Z" fill="#476149"/><path d="M735 169L779 69 824 169Z" fill="#506749"/><path d="M826 341V101" stroke="#465d46" stroke-width="12"/><path d="M790 156L826 63 863 156Z" fill="#607555"/><path d="M782 206L826 106 871 206Z" fill="#506749"/><path d="M0 350Q225 260 470 330T800 308V500H0" fill="#485c40"/><path d="M205 222H618V370H205Z" fill="#a9987b"/><path d="M185 223L286 158 642 196 625 223Z" fill="#333b35"/><path d="M248 246H573V349H248Z" fill="#c2b89b"/><g fill="#344b46"><rect x="255" y="250" width="51" height="94"/><rect x="317" y="250" width="51" height="94"/><rect x="379" y="250" width="51" height="94"/><rect x="441" y="250" width="51" height="94"/><rect x="503" y="250" width="51" height="94"/></g><path d="M270 262L290 337M400 262L420 337M520 262L540 337" stroke="#d4c9a2" stroke-width="7" opacity=".35"/><path d="M176 370H660L704 398H149Z" fill="#8b9276"/><path d="M225 392L365 405 422 500H288Z" fill="#b1ac8c"/><path d="M0 440Q160 377 302 500H0M525 500Q719 339 800 417V500Z" fill="#283e30"/></svg></div><div class="forest-slide" data-forest-slide="1" hidden><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" aria-hidden="true"><rect width="800" height="500" fill="#bac2ad"/><path d="M-20 294V54" stroke="#465d46" stroke-width="10"/><path d="M-56 109L-20 16 17 109Z" fill="#607555"/><path d="M-64 159L-20 59 25 159Z" fill="#506749"/><path d="M27 331V91" stroke="#334b3c" stroke-width="11"/><path d="M-9 146L27 53 64 146Z" fill="#476149"/><path d="M-17 196L27 96 72 196Z" fill="#506749"/><path d="M74 368V128" stroke="#465d46" stroke-width="12"/><path d="M38 183L74 90 111 183Z" fill="#607555"/><path d="M30 233L74 133 119 233Z" fill="#506749"/><path d="M121 305V65" stroke="#334b3c" stroke-width="13"/><path d="M85 120L121 27 158 120Z" fill="#476149"/><path d="M77 170L121 70 166 170Z" fill="#506749"/><path d="M168 342V102" stroke="#465d46" stroke-width="14"/><path d="M132 157L168 64 205 157Z" fill="#607555"/><path d="M124 207L168 107 213 207Z" fill="#506749"/><path d="M215 279V39" stroke="#334b3c" stroke-width="15"/><path d="M179 94L215 1 252 94Z" fill="#476149"/><path d="M171 144L215 44 260 144Z" fill="#506749"/><path d="M262 316V76" stroke="#465d46" stroke-width="16"/><path d="M226 131L262 38 299 131Z" fill="#607555"/><path d="M218 181L262 81 307 181Z" fill="#506749"/><path d="M309 353V113" stroke="#334b3c" stroke-width="17"/><path d="M273 168L309 75 346 168Z" fill="#476149"/><path d="M265 218L309 118 354 218Z" fill="#506749"/><path d="M356 290V50" stroke="#465d46" stroke-width="10"/><path d="M320 105L356 12 393 105Z" fill="#607555"/><path d="M312 155L356 55 401 155Z" fill="#506749"/><path d="M403 327V87" stroke="#334b3c" stroke-width="11"/><path d="M367 142L403 49 440 142Z" fill="#476149"/><path d="M359 192L403 92 448 192Z" fill="#506749"/><path d="M450 364V124" stroke="#465d46" stroke-width="12"/><path d="M414 179L450 86 487 179Z" fill="#607555"/><path d="M406 229L450 129 495 229Z" fill="#506749"/><path d="M497 301V61" stroke="#334b3c" stroke-width="13"/><path d="M461 116L497 23 534 116Z" fill="#476149"/><path d="M453 166L497 66 542 166Z" fill="#506749"/><path d="M544 338V98" stroke="#465d46" stroke-width="14"/><path d="M508 153L544 60 581 153Z" fill="#607555"/><path d="M500 203L544 103 589 203Z" fill="#506749"/><path d="M591 275V35" stroke="#334b3c" stroke-width="15"/><path d="M555 90L591 -3 628 90Z" fill="#476149"/><path d="M547 140L591 40 636 140Z" fill="#506749"/><path d="M638 312V72" stroke="#465d46" stroke-width="16"/><path d="M602 127L638 34 675 127Z" fill="#607555"/><path d="M594 177L638 77 683 177Z" fill="#506749"/><path d="M685 349V109" stroke="#334b3c" stroke-width="17"/><path d="M649 164L685 71 722 164Z" fill="#476149"/><path d="M641 214L685 114 730 214Z" fill="#506749"/><path d="M732 286V46" stroke="#465d46" stroke-width="10"/><path d="M696 101L732 8 769 101Z" fill="#607555"/><path d="M688 151L732 51 777 151Z" fill="#506749"/><path d="M779 323V83" stroke="#334b3c" stroke-width="11"/><path d="M743 138L779 45 816 138Z" fill="#476149"/><path d="M735 188L779 88 824 188Z" fill="#506749"/><path d="M826 360V120" stroke="#465d46" stroke-width="12"/><path d="M790 175L826 82 863 175Z" fill="#607555"/><path d="M782 225L826 125 871 225Z" fill="#506749"/><path d="M0 350Q225 260 470 330T800 308V500H0" fill="#485c40"/><path d="M205 222H618V370H205Z" fill="#8b968a"/><path d="M185 223L286 158 642 196 625 223Z" fill="#333b35"/><path d="M248 246H573V349H248Z" fill="#c2b89b"/><g fill="#344b46"><rect x="255" y="250" width="51" height="94"/><rect x="317" y="250" width="51" height="94"/><rect x="379" y="250" width="51" height="94"/><rect x="441" y="250" width="51" height="94"/><rect x="503" y="250" width="51" height="94"/></g><path d="M270 262L290 337M400 262L420 337M520 262L540 337" stroke="#d4c9a2" stroke-width="7" opacity=".35"/><path d="M176 370H660L704 398H149Z" fill="#8b9276"/><path d="M225 392L365 405 422 500H288Z" fill="#b1ac8c"/><path d="M0 440Q160 377 302 500H0M525 500Q719 339 800 417V500Z" fill="#283e30"/></svg></div><div class="forest-slide" data-forest-slide="2" hidden><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" aria-hidden="true"><rect width="800" height="500" fill="#9fa8a0"/><path d="M-20 313V73" stroke="#465d46" stroke-width="10"/><path d="M-56 128L-20 35 17 128Z" fill="#607555"/><path d="M-64 178L-20 78 25 178Z" fill="#506749"/><path d="M27 350V110" stroke="#334b3c" stroke-width="11"/><path d="M-9 165L27 72 64 165Z" fill="#476149"/><path d="M-17 215L27 115 72 215Z" fill="#506749"/><path d="M74 287V47" stroke="#465d46" stroke-width="12"/><path d="M38 102L74 9 111 102Z" fill="#607555"/><path d="M30 152L74 52 119 152Z" fill="#506749"/><path d="M121 324V84" stroke="#334b3c" stroke-width="13"/><path d="M85 139L121 46 158 139Z" fill="#476149"/><path d="M77 189L121 89 166 189Z" fill="#506749"/><path d="M168 361V121" stroke="#465d46" stroke-width="14"/><path d="M132 176L168 83 205 176Z" fill="#607555"/><path d="M124 226L168 126 213 226Z" fill="#506749"/><path d="M215 298V58" stroke="#334b3c" stroke-width="15"/><path d="M179 113L215 20 252 113Z" fill="#476149"/><path d="M171 163L215 63 260 163Z" fill="#506749"/><path d="M262 335V95" stroke="#465d46" stroke-width="16"/><path d="M226 150L262 57 299 150Z" fill="#607555"/><path d="M218 200L262 100 307 200Z" fill="#506749"/><path d="M309 372V132" stroke="#334b3c" stroke-width="17"/><path d="M273 187L309 94 346 187Z" fill="#476149"/><path d="M265 237L309 137 354 237Z" fill="#506749"/><path d="M356 309V69" stroke="#465d46" stroke-width="10"/><path d="M320 124L356 31 393 124Z" fill="#607555"/><path d="M312 174L356 74 401 174Z" fill="#506749"/><path d="M403 346V106" stroke="#334b3c" stroke-width="11"/><path d="M367 161L403 68 440 161Z" fill="#476149"/><path d="M359 211L403 111 448 211Z" fill="#506749"/><path d="M450 283V43" stroke="#465d46" stroke-width="12"/><path d="M414 98L450 5 487 98Z" fill="#607555"/><path d="M406 148L450 48 495 148Z" fill="#506749"/><path d="M497 320V80" stroke="#334b3c" stroke-width="13"/><path d="M461 135L497 42 534 135Z" fill="#476149"/><path d="M453 185L497 85 542 185Z" fill="#506749"/><path d="M544 357V117" stroke="#465d46" stroke-width="14"/><path d="M508 172L544 79 581 172Z" fill="#607555"/><path d="M500 222L544 122 589 222Z" fill="#506749"/><path d="M591 294V54" stroke="#334b3c" stroke-width="15"/><path d="M555 109L591 16 628 109Z" fill="#476149"/><path d="M547 159L591 59 636 159Z" fill="#506749"/><path d="M638 331V91" stroke="#465d46" stroke-width="16"/><path d="M602 146L638 53 675 146Z" fill="#607555"/><path d="M594 196L638 96 683 196Z" fill="#506749"/><path d="M685 368V128" stroke="#334b3c" stroke-width="17"/><path d="M649 183L685 90 722 183Z" fill="#476149"/><path d="M641 233L685 133 730 233Z" fill="#506749"/><path d="M732 305V65" stroke="#465d46" stroke-width="10"/><path d="M696 120L732 27 769 120Z" fill="#607555"/><path d="M688 170L732 70 777 170Z" fill="#506749"/><path d="M779 342V102" stroke="#334b3c" stroke-width="11"/><path d="M743 157L779 64 816 157Z" fill="#476149"/><path d="M735 207L779 107 824 207Z" fill="#506749"/><path d="M826 279V39" stroke="#465d46" stroke-width="12"/><path d="M790 94L826 1 863 94Z" fill="#607555"/><path d="M782 144L826 44 871 144Z" fill="#506749"/><path d="M0 350Q225 260 470 330T800 308V500H0" fill="#485c40"/><path d="M205 222H618V370H205Z" fill="#b7a088"/><path d="M185 223L286 158 642 196 625 223Z" fill="#333b35"/><path d="M248 246H573V349H248Z" fill="#c2b89b"/><g fill="#344b46"><rect x="255" y="250" width="51" height="94"/><rect x="317" y="250" width="51" height="94"/><rect x="379" y="250" width="51" height="94"/><rect x="441" y="250" width="51" height="94"/><rect x="503" y="250" width="51" height="94"/></g><path d="M270 262L290 337M400 262L420 337M520 262L540 337" stroke="#d4c9a2" stroke-width="7" opacity=".35"/><path d="M176 370H660L704 398H149Z" fill="#8b9276"/><path d="M225 392L365 405 422 500H288Z" fill="#b1ac8c"/><path d="M0 440Q160 377 302 500H0M525 500Q719 339 800 417V500Z" fill="#283e30"/></svg></div></div>
  <header class="forest-nav"><strong>EDGE / ARCHITECTS</strong><span>PLACES FOR EVERYDAY LIFE</span><details><summary>연락 안내 ↗</summary><p>독립 건축 그림 실습입니다. 실제 사무소 연락 기능은 없습니다.</p></details></header>
  <div class="forest-caption"><div class="forest-progress"><div class="controls" aria-label="보기 선택"><button data-choice-group="forest" data-choice="0" aria-pressed="true">01</button><button data-choice-group="forest" data-choice="1" aria-pressed="false">02</button><button data-choice-group="forest" data-choice="2" aria-pressed="false">03</button></div><div class="controls"><button data-forest-prev aria-label="이전 작품">←</button><button data-forest-next aria-label="다음 작품">→</button></div></div><p class="eyebrow">A FICTIONAL PROJECT IN THREE VIEWS</p><h1 data-house-name>Among the trees.</h1><div class="forest-description"><p class="copy" data-feedback role="status">01 · 길의 끝에서 만나는 작은 집</p><details><summary>작품 설명 보기 ↗</summary><p>나무 사이에 놓인 직사각형 공간을 세 가지 재료의 색으로 기록합니다. 동일한 구도에서 창과 주변 숲의 관계를 살펴봅니다.</p></details></div></div></section></main><script>/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.

MIT License

Copyright (c) 2026 StyleGallery contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
 */
(() => {
  'use strict';
  const id="awwwards-3e21119fd452";
  const stage=document.querySelector('.stage');
  const state=window.__STYLEGALLERY_PREVIEW__={id,status:'loading',errors:[]};
  const report=(error)=>{const message=error instanceof Error?error.message:String(error);if(!state.errors.includes(message))state.errors.push(message);state.status='error';document.body.dataset.previewStatus='error';parent.postMessage({type:'sg-preview-error',id,message},'*');};
  addEventListener('error',event=>report(event.error||event.message));
  addEventListener('unhandledrejection',event=>report(event.reason));
  const query=new URLSearchParams(location.search);
  document.documentElement.dataset.theme=query.get('theme')==='dark'?'dark':'light';
  const reduced=matchMedia('(prefers-reduced-motion: reduce)');
  stage.dataset.playing='false';
  const setChoice=(group,value)=>{stage.setAttribute('data-'+group,value);stage.querySelectorAll('[data-choice-group="'+group+'"]').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.choice===value)));};
  const announce=(message)=>{const output=stage.querySelector('[data-feedback]');if(output)output.textContent=message;};
  stage.querySelectorAll('[data-choice-group]').forEach(button=>button.addEventListener('click',()=>setChoice(button.dataset.choiceGroup,button.dataset.choice)));
  stage.querySelectorAll('[data-choice-group][aria-pressed="true"]').forEach(button=>setChoice(button.dataset.choiceGroup,button.dataset.choice));
  stage.querySelectorAll('[data-range]').forEach(input=>input.addEventListener('input',()=>{stage.style.setProperty('--'+input.dataset.range,input.value);const output=stage.querySelector('[data-output="'+input.dataset.range+'"]');if(output)output.textContent=input.value;}));
  stage.querySelectorAll('[data-play]').forEach(button=>button.addEventListener('click',()=>{const play=stage.dataset.playing!=='true'&&!reduced.matches;stage.dataset.playing=String(play);button.setAttribute('aria-pressed',String(play));button.textContent=play?'움직임 정지':reduced.matches?'움직임 줄이기 적용 중':'움직임 시작';}));
  reduced.addEventListener('change',()=>{if(reduced.matches){stage.dataset.playing='false';stage.querySelectorAll('[data-play]').forEach(button=>{button.setAttribute('aria-pressed','false');button.textContent='움직임 줄이기 적용 중';});}});
  const observe=()=>{const root=document.getElementById('root'),elements=[...root.querySelectorAll('*')],rect=root.getBoundingClientRect();parent.postMessage({type:'sg-preview-observation',id,diagnostics:{textLength:root.textContent.trim().length,elementCount:elements.length,visibleElementCount:elements.filter(element=>{const r=element.getBoundingClientRect(),s=getComputedStyle(element);return r.width>0&&r.height>0&&s.display!=='none'&&s.visibility!=='hidden'&&Number(s.opacity)!==0;}).length,images:[],canvases:[],rootRect:{width:rect.width,height:rect.height},documentWidth:document.documentElement.scrollWidth,viewportWidth:innerWidth}},'*');};
  try{let currentHouse=0;const names=['Among the trees.','Room for the light.','A quieter outline.'];const notes=['01 · 길의 끝에서 만나는 작은 집','02 · 창 너머 숲을 바라보는 공간','03 · 재료의 색이 바꾸는 풍경'];const selectHouse=index=>{currentHouse=(index+3)%3;setChoice('forest',String(currentHouse));stage.querySelectorAll('[data-forest-slide]').forEach(el=>el.hidden=Number(el.dataset.forestSlide)!==currentHouse);stage.querySelector('[data-house-name]').textContent=names[currentHouse];announce(notes[currentHouse]);};stage.querySelectorAll('[data-choice-group="forest"]').forEach(button=>button.addEventListener('click',()=>selectHouse(Number(button.dataset.choice))));stage.querySelector('[data-forest-prev]').addEventListener('click',()=>selectHouse(currentHouse-1));stage.querySelector('[data-forest-next]').addEventListener('click',()=>selectHouse(currentHouse+1));
}catch(error){report(error);}
  requestAnimationFrame(()=>requestAnimationFrame(()=>{if(state.status!=='error'){state.status='mounted';document.body.dataset.previewStatus='mounted';parent.postMessage({type:'sg-preview-ready',id},'*');observe();setTimeout(observe,700);}}));
})();</script></body></html>
styles.css독립 구현
파일 저장 

/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.

MIT License

Copyright (c) 2026 StyleGallery contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
 */

*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif}body{background:var(--bg,#f5f2eb);color:var(--fg,#181818)}button,input,select{font:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--focus,#ef6b3f);outline-offset:4px}button{color:inherit}button:disabled{cursor:default;opacity:.45}svg{display:block;max-width:100%}a{color:inherit}.stage{isolation:isolate;min-height:100vh;overflow:hidden;padding:26px;position:relative}.art{pointer-events:none}.eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase}.topline{align-items:center;display:flex;gap:14px;justify-content:space-between;position:relative;z-index:5}.topline strong{font-size:13px;letter-spacing:-.04em}.topline nav{display:flex;gap:12px}h1,h2,p{margin:0}h1{font-size:clamp(42px,9vw,116px);font-weight:600;letter-spacing:-.065em;line-height:.94}h2{font-size:clamp(24px,4vw,44px);letter-spacing:-.04em;line-height:1.05}.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400}.copy{font-size:13px;line-height:1.55;max-width:31em}.pill{align-items:center;background:var(--fg,#181818);border:1px solid transparent;border-radius:99px;color:var(--bg,#f5f2eb);display:inline-flex;gap:18px;justify-content:center;min-height:40px;padding:10px 19px;text-decoration:none}.ghost{background:transparent;border-color:currentColor;color:inherit}.small{font-size:11px}.huge{font-size:clamp(68px,18vw,220px);line-height:.8}.caption{font:10px/1.4 ui-monospace,monospace}.controls{align-items:center;display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:6}.controls button{background:transparent;border:1px solid currentColor;border-radius:999px;font-size:11px;min-height:34px;padding:7px 12px}.controls button[aria-pressed=true]{background:var(--fg);color:var(--bg)}.bottomline{align-items:end;display:flex;gap:20px;justify-content:space-between;position:relative;z-index:4}.stack{display:grid;gap:18px}.row{align-items:center;display:flex;gap:16px}.visually-hidden{clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}.feedback{font-size:12px;min-height:18px}.surface{background:var(--panel,#fff);border:1px solid #8883;border-radius:16px;padding:24px}.scene-footer{bottom:13px;left:26px;position:absolute;right:26px}.artfill{height:100%;left:0;position:absolute;top:0;width:100%;z-index:-1}.artfill svg{height:100%;width:100%}.line{border-top:1px solid currentColor;opacity:.4}input,select{border:1px solid #8887;border-radius:7px;min-height:38px;min-width:0;padding:8px 10px;width:100%}input[type=range]{accent-color:var(--accent,#ed6447);min-height:28px;padding:0}details>summary{cursor:pointer;list-style:none}details>summary::-webkit-details-marker{display:none}[hidden]{display:none!important}.flow{display:grid;gap:24px}dialog{background:var(--panel,#fff);border:0;border-radius:12px;color:#171717;max-width:calc(100vw - 34px);padding:28px;width:430px}dialog::backdrop{background:#111a;backdrop-filter:blur(5px)}dialog form{display:grid;gap:15px}dialog .close{background:transparent;border:0;float:right;font-size:25px}body[data-preview-status=error]::after{background:#781b21;color:white;content:'Preview error';padding:8px;position:fixed;right:0;top:0}.motion{animation-play-state:paused!important}.stage[data-playing=true] .motion{animation-play-state:running!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}@media(max-width:480px){.stage{padding:18px}.topline nav{gap:8px}.eyebrow{font-size:9px}.scene-footer{left:18px;right:18px}.copy{font-size:12px}.topline{gap:8px}.topline strong{font-size:12px}.surface{padding:17px}}

.stage{min-height:620px}.stage h1,.stage h2{overflow-wrap:anywhere}.topline{flex-wrap:wrap}button{max-width:100%}@media(max-width:480px){.stage{min-height:640px}}:root{--bg:#354a38;--fg:#fcf8eb}.forest-frames,.forest-slide{inset:0;position:absolute;z-index:-1}.forest-slide svg{height:100%;width:100%}.forest-frames::after{background:linear-gradient(#132c2255,transparent 35%,#0b211aeb);content:'';inset:0;position:absolute}.forest-nav{align-items:center;display:flex;flex-wrap:wrap;font-size:10px;gap:18px;justify-content:space-between;position:relative;z-index:4}.forest-nav strong{font-size:13px}.forest-nav>span{font-size:8px;letter-spacing:.1em}.forest-nav summary{background:#1e2923;padding:12px 17px}.forest-nav details{position:relative}.forest-nav details p{background:#1e2923;line-height:1.6;min-width:220px;padding:20px;position:absolute;right:0;top:30px}.forest-caption{bottom:30px;left:26px;position:absolute;right:26px}.forest-progress{align-items:center;display:flex;gap:20px;margin-bottom:28px}.forest-progress .controls:first-child{flex:1;max-width:290px}.forest-progress .controls:first-child button{border:0;border-radius:0;border-top:2px solid #d0daca66;flex:1;font-size:9px;min-height:26px;padding:7px 0;text-align:left}.forest-progress .controls:first-child button[aria-pressed=true]{background:none;border-color:white;color:#fff}.forest-progress .controls:last-child button{border-color:#cedbca88;min-height:28px;padding:3px 12px}.forest-caption h1{font:400 clamp(32px,4.8vw,51px)/1 Georgia;margin:16px 0 24px}.forest-description{align-items:start;display:flex;gap:30px;justify-content:space-between}.forest-description>p{font-size:12px;max-width:240px}.forest-description details{max-width:320px;width:48%}.forest-description summary{background:#f4f4e9;color:#314334;font-size:11px;padding:15px 21px}.forest-description details p{background:#283f30;font-size:11px;line-height:1.6;padding:20px}@media(max-width:480px){.forest-nav>span{display:none}.forest-nav strong{font-size:11px}.forest-caption{bottom:25px;left:18px;right:18px}.forest-description{flex-direction:column;gap:18px}.forest-description details{width:100%}.forest-caption h1{font-size:35px}.forest-slide svg{max-width:none;transform:translateX(-23%);width:170%}}
함께 쓰는 파일 3개 보기
script.js독립 구현
파일 저장 

/* Generated by scripts/build-awwwards-studies.mjs from vendor/awwwards-studies/scenes*.mjs and runtime.mjs. Edit those authoring modules for repository changes.

MIT License

Copyright (c) 2026 StyleGallery contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
 */
(() => {
  'use strict';
  const id="awwwards-3e21119fd452";
  const stage=document.querySelector('.stage');
  const state=window.__STYLEGALLERY_PREVIEW__={id,status:'loading',errors:[]};
  const report=(error)=>{const message=error instanceof Error?error.message:String(error);if(!state.errors.includes(message))state.errors.push(message);state.status='error';document.body.dataset.previewStatus='error';parent.postMessage({type:'sg-preview-error',id,message},'*');};
  addEventListener('error',event=>report(event.error||event.message));
  addEventListener('unhandledrejection',event=>report(event.reason));
  const query=new URLSearchParams(location.search);
  document.documentElement.dataset.theme=query.get('theme')==='dark'?'dark':'light';
  const reduced=matchMedia('(prefers-reduced-motion: reduce)');
  stage.dataset.playing='false';
  const setChoice=(group,value)=>{stage.setAttribute('data-'+group,value);stage.querySelectorAll('[data-choice-group="'+group+'"]').forEach(button=>button.setAttribute('aria-pressed',String(button.dataset.choice===value)));};
  const announce=(message)=>{const output=stage.querySelector('[data-feedback]');if(output)output.textContent=message;};
  stage.querySelectorAll('[data-choice-group]').forEach(button=>button.addEventListener('click',()=>setChoice(button.dataset.choiceGroup,button.dataset.choice)));
  stage.querySelectorAll('[data-choice-group][aria-pressed="true"]').forEach(button=>setChoice(button.dataset.choiceGroup,button.dataset.choice));
  stage.querySelectorAll('[data-range]').forEach(input=>input.addEventListener('input',()=>{stage.style.setProperty('--'+input.dataset.range,input.value);const output=stage.querySelector('[data-output="'+input.dataset.range+'"]');if(output)output.textContent=input.value;}));
  stage.querySelectorAll('[data-play]').forEach(button=>button.addEventListener('click',()=>{const play=stage.dataset.playing!=='true'&&!reduced.matches;stage.dataset.playing=String(play);button.setAttribute('aria-pressed',String(play));button.textContent=play?'움직임 정지':reduced.matches?'움직임 줄이기 적용 중':'움직임 시작';}));
  reduced.addEventListener('change',()=>{if(reduced.matches){stage.dataset.playing='false';stage.querySelectorAll('[data-play]').forEach(button=>{button.setAttribute('aria-pressed','false');button.textContent='움직임 줄이기 적용 중';});}});
  const observe=()=>{const root=document.getElementById('root'),elements=[...root.querySelectorAll('*')],rect=root.getBoundingClientRect();parent.postMessage({type:'sg-preview-observation',id,diagnostics:{textLength:root.textContent.trim().length,elementCount:elements.length,visibleElementCount:elements.filter(element=>{const r=element.getBoundingClientRect(),s=getComputedStyle(element);return r.width>0&&r.height>0&&s.display!=='none'&&s.visibility!=='hidden'&&Number(s.opacity)!==0;}).length,images:[],canvases:[],rootRect:{width:rect.width,height:rect.height},documentWidth:document.documentElement.scrollWidth,viewportWidth:innerWidth}},'*');};
  try{let currentHouse=0;const names=['Among the trees.','Room for the light.','A quieter outline.'];const notes=['01 · 길의 끝에서 만나는 작은 집','02 · 창 너머 숲을 바라보는 공간','03 · 재료의 색이 바꾸는 풍경'];const selectHouse=index=>{currentHouse=(index+3)%3;setChoice('forest',String(currentHouse));stage.querySelectorAll('[data-forest-slide]').forEach(el=>el.hidden=Number(el.dataset.forestSlide)!==currentHouse);stage.querySelector('[data-house-name]').textContent=names[currentHouse];announce(notes[currentHouse]);};stage.querySelectorAll('[data-choice-group="forest"]').forEach(button=>button.addEventListener('click',()=>selectHouse(Number(button.dataset.choice))));stage.querySelector('[data-forest-prev]').addEventListener('click',()=>selectHouse(currentHouse-1));stage.querySelector('[data-forest-next]').addEventListener('click',()=>selectHouse(currentHouse+1));
}catch(error){report(error);}
  requestAnimationFrame(()=>requestAnimationFrame(()=>{if(state.status!=='error'){state.status='mounted';document.body.dataset.previewStatus='mounted';parent.postMessage({type:'sg-preview-ready',id},'*');observe();setTimeout(observe,700);}}));
})();
LICENSE독립 구현
파일 저장 

MIT License

Copyright (c) 2026 StyleGallery contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Scope: Newly authored HTML, CSS, JavaScript and SVG study only. This grant does not cover any referenced website, brand, article, photograph, screenshot or original asset. None is included in this package.
NOTES.md독립 구현
파일 저장 

# 숲속 건축과 직접 선택하는 작품 묶음

사례를 연구한 독립 예제입니다. 관찰된 구성을 출발점으로 새 문구·코드·SVG를 작성했습니다. 원본 구현, 자산, 상표, 문구를 재배포하지 않습니다.

세 장의 자체 건축 그림을 번호·이전·다음 버튼으로 직접 선택합니다. 진행선은 현재 선택만 표시하며 한 프레임으로 확인되지 않은 자동재생을 주장하지 않습니다.

## 실행과 수정

index.html을 브라우저에서 열면 단독으로 실행됩니다. 수정할 때도 이 파일 안의 style과 script를 편집하세요. styles.css와 script.js는 읽기·복사용 사본이며 index.html에서 불러오는 파일이 아닙니다. 이 사본만 수정해도 실행 화면이 달라지지는 않습니다.

저장소 유지보수자는 vendor/awwwards-studies/scenes*.mjs와 runtime.mjs를 수정하고 node scripts/build-awwwards-studies.mjs로 모든 사본을 다시 생성합니다. 이 내부 재빌드에는 비공개 캡처 입력이 필요합니다. 다운로드한 HTML의 실행과 수정에는 캡처 입력이 필요하지 않습니다.

## 관찰과 검증

프레임 관찰 범위: observed. 원본의 시간 변화나 사용자 입력 결과를 이 예제로 입증하지 않습니다. 비공개 관찰 근거는 artifacts/full-import/awwwards/captures/awwwards-3e21119fd452/frames/scene-00-f0-y0.png 및 visual-reviews.json의 같은 id 행입니다. 프레임과 행의 결합 해시는 912ac5f196bf5ebdd101d6adb9103133d0f16bf2ac8de66fef12bad817d3ece4입니다. 해당 캡처는 다운로드에 포함하지 않으며, 검토에는 저장소의 비공개 아티팩트 접근이 필요합니다.

이 패키지는 네트워크 없이 실행되며 실제 구독, 예약, 결제 또는 원격 작업을 수행하지 않습니다. ready 신호는 마운트 진단이며 브라우저 검증을 뜻하지 않습니다. 움직임은 명시적으로 시작해야 하며 시스템의 움직임 줄이기 선호가 우선합니다. 시각 팔레트는 각 사례의 독립 구성에 속합니다.

consumer_reference: consumer-reference/agent-native/registry.json

BEHIND THE EXAMPLE

이 장면을 만드는 원리