A FIELD GUIDE FOR INTERFACES
다음 화면의 시작점.
배치부터 움직임, 상태와 용어까지. 만드는 순간에 필요한 인터페이스 지식을 만나보세요.
한국어 키워드로 찾고, 영문 원문으로 이어서 읽어요.
하나의 화면, 여러 가지 관점.
목록과 상세를 나란히
항목을 탐색하면서 선택한 내용을 함께 볼 수 있는 두 영역.
list-detail상태에 반응하는 모션
입력의 응답부터 완료까지. 재시도와 중단도 함께 설계합니다.
Motion Interaction Recipes마지막 검색이 먼저 도착한다면
응답 순서가 뒤집혀도 사용자의 최신 의도를 화면에 유지합니다.
Latest Request Wins플레이어의 작업에서 시작하기
HUD부터 인벤토리까지. 선택, 입력, 복구를 화면 구조로 연결합니다.
Game UI Screen Recipes플랫폼의 차이를 비교하기
뒤로 가기, 키보드, 모션 설정을 웹에 적용할 때 확인할 것들.
Platform Compatibility Matrix같은 이름이면 같은 뜻일까
Variable, token, component. 용어를 출처와 함께 비교합니다.
Cross-System Term CasesLayout
정렬, 그리드, 반응형 배치와 스크롤을 위한 작은 HTML·CSS 패턴.
Motion
전환과 피드백, 중단과 재시도까지 생각하는 모션 가이드.
Design Engineering
상태의 주인, 저장 중 편집, 비동기 응답과 복구를 다루는 구현 패턴.
Game UI
HUD, 인벤토리, 메뉴와 오버레이를 작업과 입력의 관점에서 탐색하세요.
Platform Guides
Apple, Android, Windows의 상호작용을 출처와 적용 범위로 비교합니다.
Design Terminology
디자인 용어가 어느 출처에서 어떤 의미로 쓰이는지 함께 읽어보세요.
Layout Planning Guide
Pre-design entry point for choosing and composing StyleGallery Layout patterns.
Motion Vocabulary
Evidence-bounded method and reference for naming observable interface motion.
Interface Craft Decisions
Repository-bounded method for purpose, implementation, review, and evidence decisions at the product layer.
Game UI Classification
Engine-neutral method for classifying game interfaces by player task, presentation, input, state, and motion.
Apple Interaction As A Comparative Reference
Bounded comparison of Apple interaction themes with explicit web-adaptation and provenance limits.
Design Source Kinds
Classification of vocabulary sources into design system, platform guideline, specification, design tool, pattern library, and brand style guide kinds.
center
Center a block while respecting a maximum measure.
Motion Review Workflow
Evidence-first workflow for reviewing product-layer motion without changing Layout policy.
Consumer Migration Readiness
Evidence-bound method for deciding whether a consumer migration preserves its declared behavior.
Game UI Screen Hierarchy
Engine-neutral ownership model for composing game-interface shells, screens, layers, regions, components, and controls.
Platform Adaptation Workflow
Compare a native convention with a target implementation through source, capability, fallback, and evidence records.
Design Source Vocabularies
Freshness-bounded inventory of named vocabulary sources with source kind, vocabulary surface, version boundary, and review status.
가운데에 놓기
Center one region along both axes.
super-centerMotion Practice Reference
Bounded motion mechanics, heuristics, platform notes, and verification requirements.
Design Engineering Reference Profiles
상태의 주인, 저장 중 편집, 비동기 응답과 복구를 다루는 구현 패턴.
Game UI Reference Record
Minimum evidence record for adding a game-interface reference to StyleGallery.
Android Interaction As A Comparative Reference
Source-bounded Android Back and adaptive-window guidance with explicit web translation and failure cases.
Design Concept Families
Classification of design terms into foundation, interface-artifact, guidance, governance, consumption, and tooling-construct concept families.
box
Wrap content with predictable internal spacing.
Motion Decision Tree
Choose a motion responsibility from a user task, state change, and failure case.
Governed Local Reference Profiles
상태의 주인, 저장 중 편집, 비동기 응답과 복구를 다루는 구현 패턴.
Unity UI Architecture
Unity-specific mapping from engine-neutral game UI hierarchy to Scenes, Canvas layers, prefabs, runtime instances, and motion ownership.
Windows Interaction As A Comparative Reference
Source-bounded Windows keyboard, focus, and command guidance with web adaptation cases.
Design Term Relations
Typed semantic relation model between design terms from different named sources, and the term record shape.
clamped-card
Constrain a card to a readable fluid width.
Motion Brief
Author a product-owned transition contract with interruption, preference, and evidence requirements.
External Consumer Adaptation
상태의 주인, 저장 중 편집, 비동기 응답과 복구를 다루는 구현 패턴.
Unity UI Systems
Source-pinned comparison of uGUI, UI Toolkit, and NGUI ownership and responsibilities for Game UI review.
Design Term Comparison Workflow
Resolve source-specific terminology questions with a scoped relation, explicit uncertainty, and a reusable handoff.
읽기 편한 본문 너비
Keep prose width readable inside fluid containers.
content-limiterObserved Choreography Transcription
Transcribe an observed scroll choreography into Scene Composition Contract vocabulary without copying assets or claiming implementation knowledge.
Design Engineering Decision Tree
Route product craft work from the uncertain decision to a contract, example, and appropriate evidence.
Unity CLI Loop
Source-pinned workflow for inspecting and exercising Unity Game UI with unity-cli-loop while preserving UI-stack boundaries.
fluid-styles
Let a region fill available width without exceeding a readable max.
Component Contract
Define product component semantics, states, events, asynchronous ownership, and verification before visual treatment.
Unity Repository Map
Public default-branch snapshot map for locating Unity UI system sources, examples, adjacent references, and historical material.
정렬된 카드 그리드
Align repeating cards in rows and columns.
card-gridDesign Engineering Worked Examples
Apply component contracts to settings, asynchronous search, and destructive list actions with explicit recovery cases.
Unity Organization Compressed Wiki
Independent cluster index over a tracked snapshot of 804 public Unity-Technologies repositories for bounded Game UI source discovery.
columns
Flow long content into balanced text columns.
State Management Decision Tree
Route UI state problems to the smallest ownership or transition contract.
Game UI Decision Tree
Select player-task recipes, ownership boundaries, and engine routes from the screen's purpose.
dense-grid
Fill a compact grid with repeated small items.
State Management
상태의 주인, 저장 중 편집, 비동기 응답과 복구를 다루는 구현 패턴.
Game UI Verification Workflow
Convert a screen recipe into repeatable input, state, hierarchy, and teardown evidence.
grid-wrapper
Center grid tracks while allowing full-width breakout tracks.
원본에서 계산하는 상태
Prevent totals, filtered lists, and dirty flags from drifting away from their inputs.
Derived State From Authoritative Inputsmasonry-approx
Approximate staggered content with columns when exact row alignment is not needed.
편집한 값과 저장한 값
Preserve editable work while distinguishing it from the last acknowledged saved value.
Draft And Persisted Baselinepage-grid
Align page content to margins, gutters, and a central track.
위치 대신 ID로 선택하기
Keep selection attached to an entity while a collection reorders or refreshes.
Selection By Stable Identity공간에 맞춰 바뀌는 그리드
Repeat items into as many useful columns as space allows.
ram-grid다른 항목으로 이동할 때
Prevent temporary state and pending outcomes from leaking across entity or account changes.
Identity Boundary And Resettwelve-span-grid
Provide a twelve-column placement scaffold.
낙관적 갱신과 복구
Show a speculative change while preserving an authoritative base for recovery.
Optimistic Overlay And Recoverybadge-list
Align item labels with trailing counts.
중복 제출 다루기
Apply an explicit policy to repeated activation of one pending operation.
Single Flight And Duplicate Submissionbreadcrumb
Lay out hierarchy links compactly with wrapping.
하나의 값, 하나의 주인
Keep one authoritative value when several controls edit the same setting.
Single Owner And Controlled Inputs자연스럽게 줄바꿈하는 묶음
Keep related items together while allowing wrapping.
cluster저장 중에도 이어지는 편집
Keep later edits dirty when an earlier submitted snapshot finishes saving.
Submitted Snapshot And Save Acknowledgementdeconstructed-pancake
Let equal cards stretch in a row and stack naturally when narrow.
저장하지 않은 변경 지키기
Make leaving an edited screen an explicit decision without losing the current draft.
Unsaved Changes And Navigationpagination
Lay out page controls as a bounded wrapping row.
링크에 담는 화면 상태
Keep shareable screen state consistent across links, refresh, and browser history.
URL State And History가로로 넘기는 목록
Let a row scroll horizontally instead of wrapping.
reel유효한 설정만 복원하기
Restore persisted preferences only when their schema and ownership scope are valid.
Versioned And Scoped State Restoresplit-nav
Separate primary and secondary nav actions in one row.
Deletion And Supported Undo
Remove the intended entity and provide recovery that matches actual backend capabilities.
tab-strip
Keep peer tabs in one stable row that can wrap.
State Management Recipes
상태의 주인, 저장 중 편집, 비동기 응답과 복구를 다루는 구현 패턴.
wrap-row
Wrap controls into rows with stable gaps.
Multi-Step Form With Retained Draft
Retain entered values across steps and guard progression and final submission.
미디어의 비율 지키기
Preserve media aspect ratio in a responsive slot.
frameSearch Filters And Detail Selection
Preserve query context and entity identity across asynchronous search and history navigation.
icon-frame
Keep an icon aligned inside a fixed square slot.
Settings With Explicit Save
Edit and save preferences without losing later input or leaving with unsaved work.
imposter
Place an overlay region over a parent without changing document order.
State Management Brief
Record authority, transitions, effects, lifetime, and acceptance cases before implementation.
overlay-stack
Stack several regions into the same grid cell.
State Management Verification Matrix
Test event ordering, failure recovery, navigation, and identity boundaries separately from UI presentation.
main-with-rail
Keep primary content dominant with a narrow secondary rail.
media-object
Align media and descriptive content as a stable pair.
본문 옆에 보조 영역 두기
Let a narrow sidebar and wider content wrap when space is tight.
sidebarsplit-screen
Split a viewport or region into two balanced panes.
읽는 동안 곁에 머무는 목차
Keep related aside content visible during long reads.
sticky-asidesupporting-pane
Keep supplemental information beside a primary task.
switcher
Switch equal regions from row to stack without a viewport breakpoint.
feed
Stack repeated content items with stable rhythm.
line-up
Keep card footer actions aligned at the bottom.
차곡차곡 쌓기
Create consistent vertical rhythm between direct children.
stackstep-nav
Present sequential steps with consistent vertical rhythm.
cover
Keep a central region balanced between optional header and footer.
내비게이션을 고정한 앱
Keep side navigation stable while main content scrolls.
fixed-sidenav-shellholy-grail
Place header, footer, sidebars, and main content in a resilient shell.
panel-layout
Create predictable main and utility panels.
본문만 스크롤하는 화면
Keep shell regions fixed while only the body scrolls.
scroll-body-shellsticky-footer
Keep footer at the bottom when content is short.
스크롤해도 보이는 헤더
Keep a header visible above a scrolling content region.
sticky-headerArticle Page
Compose readable prose with optional supporting aside content.
Command Surface
Compose a tool-heavy shell with stable command and content regions.
Dashboard
Compose repeated panels and action clusters on a page grid.
Form Flow
Compose sequential form content with constrained width and reachable actions.
Homepage
Compose raw content into a homepage or ordinary webpage before product-level visual styling.
List Detail
Compose an explorable list beside its selected detail region.
Primitive To Recipe Matrix
Matrix that explains which layout primitives each screen recipe uses, why the slot exists, and what risk follows from substitution.
SaaS Settings
Compose a fixed side navigation with a constrained settings flow.
Layout Decision Tree
Question-driven route from screen constraints to StyleGallery Layout patterns and recipes.
Documentation Mode Taxonomy
Primary documentation modes, hybrid decisions, and task routing for StyleGallery.
Layout Brief Template
Questions to answer before selecting a layout pattern stack.
Controlled Vocabulary
Canonical terminology, aliases, deprecated terms, and scannability rules for StyleGallery.
Webpage Generation Workflow
Intake-to-implementation workflow for turning raw content into a homepage or ordinary webpage layout.
아직 맞는 자료를 찾지 못했어요.
검색어를 짧게 바꾸거나, 모든 분야에서 다시 찾아보세요.
필요한 순간에 다시 찾을 수 있도록, 페이지를 저장해 두세요.