893 entries, 34 categories.

Timeline sequencing타임라인 시퀀싱

A structure where a single playhead sweeps through several parallel tracks — position, scale, opacity — at once, reading each one's value as it passes, even when the tracks start and end at different points.

Scroll scrub스크롤 스크럽

Binding an animation's progress directly to scroll position, one-to-one, instead of to time — stop scrolling and the animation stops; scroll back up and it plays in reverse.

Pinning피닝

Locking a section in place on screen while the user keeps scrolling, and advancing only the content inside it — the technique behind "stay on one screen while several steps play out" in scrollytelling.

Inertia & momentum관성·모멘텀

Motion that carries the velocity you had at the moment of release, then gradually slows under friction instead of stopping dead — the "it slides as far as you threw it" feel after a flick or scroll release.

◎Interaction

Magnetic buttons, cursor trails, drag — patterns that respond to the user’s touch.

View all (21) →

Magnetic Button마그네틱 버튼

A button that gets pulled toward the cursor as it approaches, like a magnet — it feels responsive before you even click.

Custom Cursor커스텀 커서

Hides the system cursor and replaces it with a shape of your own — a ring, a dot — that itself reacts to interactive elements underneath.

Cursor Trail커서 트레일

A chain of dots that trails behind the cursor, each one lagging slightly — every dot chases the one in front of it.

Tilt Card틸트 카드

A card that tilts in 3D toward the cursor, as if you were holding it — built with CSS perspective and rotateX/rotateY.

▶Motion graphics

Lower thirds, track mattes, speed ramps, logo reveals — the motion vocabulary of video and After Effects.

View all (29) →

Lower third로워 서드

A broadcast graphic placed in the bottom third of the frame to show a name or title — how news and interview footage introduces a person.

Beat-synced type비트 싱크 타이포

Timing text entrances to the exact beat of a soundtrack or the stress of a voiceover, frame by frame — the core skill behind lyric videos and title sequences.

Track matte트랙 매트

A compositing technique where one layer's brightness (luma) or transparency (alpha) becomes the mask through which another layer shows — the trick behind footage playing inside the shape of text.

Motion blur모션 블러

The streaked blur a fast-moving object leaves while a camera's shutter stays open. Editors add this blur artificially so digital motion reads as smooth rather than stroboscopic.

◆Game UI & game feel

HUDs, hit stop, screen shake, cooldowns — how games create “juice”, and what it’s called.

HUD (Heads-Up Display)HUD (헤드업 디스플레이)

The always-on screen-space layer that surfaces health, minimap, and cooldowns without covering the action underneath.

Health Bar (Delayed Ghost Bar)체력바 (고스트 딜레이)

A health bar where the real fill drops instantly on a hit while a lighter "ghost" layer lags behind, visually showing exactly how much damage just landed.

Minimap미니맵

A scaled-down map tucked in a screen corner that keeps showing the player’s position relative to nearby enemies and allies at a glance.

Damage Numbers데미지 숫자

Numbers that pop up from the hit point and float upward as they fade — crits get a bigger size and a different color.

◌Loaders gallery

Dots, rings, bars, pulses, morphs — named loading animations and when to use which.

Three Dots점 세 개 로더

Three dots that light up one after another in a loop — the most common indeterminate loading cue.

Bouncing Dots통통 튀는 점

Dots that jump upward one after another — a more playful, rhythmic take on the waiting cue.

Spinner Ring링 스피너

A ring with one edge colored differently, spun forever — the simplest rotating loader.

Dual Ring이중 링

Two nested rings spinning in opposite directions — more dynamic than a single spinner.

✦Visual effects

Glassmorphism, liquid glass, grain, glow — CSS and SVG effects that give a surface its texture.

View all (62) →

Border beam보더 빔

A short streak of light that continuously travels around a card's border, instead of the whole edge glowing at once.

Spotlight card스포트라이트 카드

A round glow that follows the cursor and lights up a faint grid texture on a card's surface, making a flat card feel alive.

Meteors유성

Several tailed streaks of light shooting diagonally across the background at random positions and intervals, on a loop.

Retro grid레트로 그리드

A perspective-tilted grid floor that scrolls endlessly into the distance — the synthwave-poster background.

◈3D · WebGL

Particles, shaders, bloom, displacement and more — 3D techniques built with three.js.

View all (40) →

Flow-field particles플로우 필드 파티클

Thousands of particles drifting along a noise-driven flow field to trace organic, swirling paths.

GPGPU particle simulationGPGPU 파티클 시뮬레이션

Storing particle positions in a texture and updating them entirely on the GPU, so tens of thousands can move smoothly.

Portal (window into another world)포털(다른 세계로 창)

Rendering one scene to a texture first, then pasting it live onto a door, mirror, or window surface in another scene.

Reflector (mirror) floor리플렉터(거울) 바닥

Turning a flat plane into a live mirror that reflects whatever sits above it in real time.

AaTypography

Kerning, leading, variable fonts, kinetic type — the vocabulary of letters.

View all (39) →

Hangul jamo composition한글의 초성·중성·종성

A Hangul syllable block is composed of an initial consonant, a vowel, and an optional final consonant, combined by a fixed rule — one Unicode encodes directly as arithmetic.

Square-form vs free-form Hangul네모꼴과 탈네모꼴

Most Hangul typefaces draw every syllable inside the same invisible square — "square-form." Experimental designs that break that grid and let jamo flow at freer heights, closer to Latin letters, are called "free-form."

Vertical writing mode세로쓰기

A layout direction where text flows top-to-bottom instead of left-to-right, and lines stack right to left. CSS implements it with `writing-mode: vertical-rl`.

Ruby annotation루비 주석

Small pronunciation or gloss text placed alongside a base character or word — natively supported in HTML via the `<ruby>` element.

◐Color

Complements, tints, contrast, gradients — the words and rules of color.

View all (33) →

Pastel palette파스텔 팔레트

Colors with saturation pulled down and lightness pushed way up — soft and unassuming, never fighting for attention.

Neon palette네온 팔레트

Colors pushed to near-maximum saturation and paired with a dark background — add a glow and they read as if they are actually emitting light.

Earth tones어스 톤

Low-saturation colors lifted from soil, wood, and stone — terracotta, olive, sand, and mustard are the classic examples.

Jewel tones보석 톤

Deep, saturated colors named after gems — emerald, sapphire, ruby — high in saturation but kept low in lightness. They look richest against a dark surface.

❖Design styles

Brutalism, skeuomorphism, Y2K, Bauhaus — visual languages by era and movement.

Web brutalism웹 브루탈리즘

Raw, undecorated HTML on purpose — default fonts, square corners, blue underlined links left exactly as the browser renders them.

Neo-brutalism네오 브루탈리즘

Thick black borders and a hard offset shadow (no blur) on highly saturated near-primary colors — the currently trendy, friendlier cousin of brutalism.

Skeuomorphism스큐어모피즘

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

Flat design플랫 디자인

Strip away shadows, gradients and texture and build purely from flat color shapes and space — popularised by iOS 7 and Windows Metro in 2013.

✎Graphic, brand & print

Wordmarks, negative space, bleed, CMYK — the language of logos and print.

View all (23) →

Bleed도련

Extra artwork printed past the trim line so a slightly off cut never leaves a white sliver at the edge.

CMYK vs RGB

Screens add light to make colour (RGB); print subtracts it with ink (CMYK) — so some of the vivid colours you see on screen simply can't be printed.

Spot color별색

A colour printed with one pre-mixed ink straight from the can, instead of being built from tiny dots of four process inks.

DPI / PPIDPI/PPI

At the same physical print size, fewer pixels packed into it look blocky and more look crisp — a file can look fine on screen and still fall apart in print.

◧Film & photo

Dolly zoom, depth of field, leading lines, golden hour — the names of camera and staging.

Shallow depth of field얕은 심도

Opening the aperture wider (a smaller f-number) blurs everything outside the focal plane faster — the subject stays sharp while the background melts away.

How bokeh forms보케의 원리

Points of light outside the focal plane spread into round (or polygon-shaped) discs that trace the aperture's shape — the farther from focus, the bigger the disc.

Leading lines리딩 라인

Arranging lines in the frame — a road, a railing, a shadow — so they converge on one point, pulling the eye straight to the subject.

Golden hour골든 아워

The short window around sunrise and sunset when the sun sits low on the horizon, casting soft, warm orange-gold light.

∿Generative art

Flow fields, Voronoi, boids, reaction–diffusion — algorithms that draw with rules and randomness.

Flow field플로우 필드

Hundreds of particles drifting along an invisible vector field, leaving trails as they go.

Perlin noise펄린 노이즈

A function that produces natural, cloud-like continuous randomness. Devised by Ken Perlin in 1983 for the film Tron.

Voronoi diagram보로노이 다이어그램

Points on a plane divided into regions by nearest-seed — a mosaic that shows up naturally in giraffe spots, cells and soap bubbles.

Delaunay triangulation델라우네이 삼각분할

A way of connecting points into triangles that avoids slivers. Mathematically the dual of the Voronoi diagram.

⬡Icons & illustration

Keylines, optical correction, duotone icons, isometric — the rules of drawing small pictures.

Icon Keylines아이콘 키라인

The invisible circle, square, and two rectangles inside an icon grid that keep differently shaped icons feeling the same size.

Optical Correction옵티컬 보정

A deliberate size boost for circles and pointed shapes — because at identical height they read smaller than a square, and only overshooting the edge makes them look equal.

Line Icon라인 아이콘

An icon drawn purely as a stroke of consistent weight, with no fill — visually light and comfortable next to text.

Solid Icon솔리드 아이콘

An icon with its whole shape filled and no outline — the fill holds up at small sizes, so it grabs attention firmly.

⬢3D modeling & rendering

Topology, UV unwrapping, normal maps, ambient occlusion — terms you hear daily in 3D tools.

Topology토폴로지

How a mesh’s vertices, edges, and faces are arranged across a surface — especially whether its four-sided faces follow the form’s natural contours.

Polygon mesh폴리곤 메시

The basic way 3D shape is represented: points (vertices) connected by lines (edges) that enclose filled faces.

Subdivision surface서브디비전 서피스

Repeatedly applying a smoothing rule to a coarse control mesh (the “cage”) so it converges on a smooth curved surface.

UV unwrappingUV 언랩핑

Cutting a 3D surface apart along seams and laying it flat on a 2D plane — this decides where a texture lands on the surface.

◑Photo editing

Curves, levels, histograms, dodge & burn — the names and principles behind editing tools.

Histogram (photo editing)히스토그램(사진 보정)

A bar graph of how many pixels sit at each brightness level, from black to white — read straight off the canvas pixels every time it updates.

Levels레벨(레벨 보정)

Remaps the tonal range using three points — black point, white point and gamma — to stretch contrast into the empty space at either end of the histogram.

Curves커브(톤 커브)

Maps input brightness to output brightness along a freeform curve — a far more precise version of levels.

White balance화이트 밸런스

Shifts a photo's overall color temperature warmer or cooler so a surface that should look white actually reads as white.

◐AI image generation

Seed, CFG, inpainting, ControlNet, LoRA — the vocabulary of image-generation models.

Prompt프롬프트

The text description that tells an image model what to draw — the model treats it as a target to steer generation toward.

Negative prompt네거티브 프롬프트

A second piece of text that names what should be pushed away from the result, the opposite direction from the prompt.

Seed시드

The integer that starts a generation’s random number generator. The same seed plus the same settings always produces the same image.

CFG scaleCFG 스케일

A number controlling how strictly generation follows the prompt — low is loose and free, high is strict and exaggerated.

▞Patterns & textiles

Houndstooth, herringbone, tartan, paisley — names of the repeating patterns on fabric and backgrounds.

View all (24) →

Houndstooth하운드투스

A broken check of jagged, four-pointed "teeth" interlocking in black and white — born in Scottish shepherds' woven tweed.

Herringbone헤링본

Named for its resemblance to a herring's skeleton — rows of V-shaped weave, each row offset just enough to interlock with the next.

Chevron셰브론

A symmetric zigzag stripe whose peaks and troughs line up at the same point row after row — the name comes from a triangular charge in heraldry.

Gingham깅엄

A check woven from one colour and white crossing at right angles, where the overlaps blend into a naturally darker third tone.

⌂Interior & spatial design

Zoning, layered lighting, focal points, Japandi — the vocabulary of designing rooms.

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.

Layered lighting레이어드 조명

Lighting a room in three overlapping layers — ambient (overall), task (work) and accent (highlight) — instead of relying on one fixture. Switching a layer on or off changes what the space is for.

Focal point포컬 포인트

The one spot a room's eye lands on first — a fireplace, a window, a large artwork. If a room doesn't already have one, furniture arrangement can create one.

Color blocking (interior)컬러 블로킹(인테리어)

Painting or covering distinct sections of a wall, floor or piece of furniture in flat, unblended colors that meet at a hard edge — the boundary between two colors becomes the design itself.

⚙Product & industrial design

CMF, fillets vs chamfers, ergonomics, Dieter Rams’ ten principles — the language of designing objects.

Colour, material, finish (CMF)컬러·소재·마감(CMF)

The discipline of changing only colour, material, and surface finish on an identical form to create a completely different impression, feel, and price tier.

Fillet vs. chamfer필렛 vs 챔퍼

Two ways to soften a sharp edge — a fillet rounds it with a curve, a chamfer slices it flat at an angle.

Draft angle드래프트 앵글(구배각)

A slight taper deliberately added to a mold's vertical walls so the finished part releases without scraping or sticking.

Parting line파팅라인(형합선)

The faint line on a finished molded or cast part where the two halves of the tool met.

▣UI components

Accordion, toast, skeleton — the exact names and uses of the parts that make up an interface.

View all (53) →

Date picker날짜 선택기

A form control that opens a calendar popup on click and fills the field with the date you pick, then closes.

Calendar view캘린더 뷰

A grid laying out a full month of dates, with dots or labels marking which days have events.

Context menu컨텍스트 메뉴

A list of commands scoped to whatever you clicked, opened at the cursor with a right-click or a long press.

Split button스플릿 버튼

A two-part button — the left side runs a default action immediately, the right-side arrow opens a menu of alternatives.

▦Layout

Bento grid, masonry, 8pt grid — ways to divide and arrange a screen.

View all (36) →

Flexbox alignment플렉스박스 정렬

The two-axis rule for positioning flex items: justify-content on the main axis, align-items on the cross axis.

CSS grid areasCSS 그리드 영역

Name grid cells instead of numbering them (grid-template-areas), so a layout reads like an ASCII picture of itself.

auto-fill vs auto-fit

repeat(auto-fill, …) leaves empty tracks in place; repeat(auto-fit, …) collapses them so the remaining items stretch — the crux of media-query-free responsive grids.

Intrinsic sizing내재적 크기

Three sizing keywords where the content itself — not the container — decides how wide a box should be: min-content, max-content, fit-content().

✧AI interface patterns

Streaming responses, thinking indicators, citations, suggestion chips — UI patterns settling in across generative AI products.

Streaming response스트리밍 응답

Appending each token to the screen as it is generated, instead of waiting for the whole answer to finish.

Typing indicator타이핑 인디케이터

Three bouncing dots signaling the other side is "typing" before any response text has arrived.

Thinking indicator생각 중 인디케이터

A shimmering trace of the model's reasoning before the answer, collapsing into "Thought for N seconds" once done.

Suggestion chips제안 칩

Short pill-shaped buttons under a response that can be tapped to send them as the next message.

▤Data visualization

Sankey, treemap, sparkline, heatmap — chart names and when to reach for each.

View all (41) →

Sunburst chart선버스트

Unrolls a nested hierarchy into concentric rings, where each arc angle shows its share of the parent it sits inside.

Streamgraph스트림그래프

A stacked area chart inflated around a central baseline instead of zero, so several time series read as an organic, river-like flow.

Ridgeline plot리지라인 플롯

Stacks each group’s density curve with a slight overlap, laying distribution shapes out like a mountain range so groups compare at a glance.

Parallel coordinates평행 좌표

Lines up many variables as parallel vertical axes and draws one item’s values across all of them as a single line.

{}Modern CSS & web APIs

:has(), anchor positioning, the Popover API, @starting-style — what browsers now give you for free.

:has() Relational Selector:has() 관계형 선택자

A CSS selector that matches a parent (or itself) based on the state of its descendants or siblings — often called the "parent selector".

Anchor Positioning앵커 포지셔닝

CSS-only positioning that pins one element to another without JS measuring coordinates — replaces tooltip/popover positioning libraries.

Popover API팝오버 API

The native overlay API — one HTML `popover` attribute gives you top-layer rendering, light-dismiss, and Esc-to-close for free.

@starting-style

An at-rule that defines the "before" state for an element appearing from `display:none`, so entry animations work with plain transitions.

▭Landing page patterns

Hero, logo cloud, pricing table, testimonial wall — the sections that make a marketing page.

Hero section히어로 섹션

The top-of-page block that states a product's value in one line and pushes the first action.

Logo cloud로고 클라우드

A row of customer or partner logos that signals "this is already trusted" at a glance.

Feature grid피처 그리드

A section that repeats icon + title + description cards in a uniform grid to list core features.

Bento features벤토 피처 섹션

An asymmetric feature section that sizes one cell large and the rest as supporting tiles.

▯Mobile patterns

Bottom sheets, swipe actions, large titles, safe areas — patterns for the screen in your hand.

Bottom Sheet바텀 시트

A panel that rises from the bottom and covers only part of the screen, snapping between fixed heights — peek, half, full.

Swipe Actions스와이프 액션

Swiping a list row sideways reveals action buttons — archive, delete — hidden behind it. The row itself stays put.

Large Title라지 타이틀

A big page title at the top shrinks as you scroll down, settling into the compact navigation bar.

Tab Bar탭 바

A fixed row of 3–5 icon-plus-label buttons at the bottom of the screen; whichever is selected is also the top-level screen you are looking at.

◫Spatial UI & XR

Depth, gaze hover, volumes, ornaments — interface vocabulary for headsets and spatial computing.

Depth hierarchy뎁스 하이어라키

Instead of a flat UI’s z-index, pushing background, content, and controls to different real Z distances to express what’s in front of what.

Gaze hover게이즈 호버

The element your eyes land on highlights automatically — the eye-tracking equivalent of mouse hover.

Spatial window스페이셜 윈도우

The default unit for showing a regular 2D app as a rectangular glass panel floating in space — the user can freely move and resize it.

Volume볼륨

A bounding-box container that holds 3D content you can walk around and inspect from every side, unlike a flat window.

⌘UX terms & laws

Fitts’s law, affordance, progressive disclosure — UX concepts you hear in meetings, shown by example.

View all (53) →

Tesler's Law테슬러의 법칙

Every process carries a fixed amount of complexity — it can be moved between system and user, but never truly removed.

Postel's Law포스텔의 법칙

Be conservative in what you send, liberal in what you accept — interfaces should tolerate varied input but emit only clean, consistent output.

Pareto Principle파레토 법칙

Roughly 80% of effects come from 20% of causes — an empirical rule first observed by economist Vilfredo Pareto in land-ownership data.

Occam's Razor오컴의 면도날

Among explanations — or designs — that reach the same result, the one with the fewest assumptions should win.

◉Accessibility

Focus rings, skip links, live regions, reduced motion — the vocabulary of building for everyone.

Focus Ring포커스 링

The outline that shows where keyboard focus currently is. Removing it with outline: none strands keyboard users.

Skip Link스킵 링크

A link hidden before the page content that appears on focus, letting keyboard users skip repeated navigation and jump straight to the content.

ARIA Live Region아리아 라이브 리전

An attribute that makes a screen reader automatically announce content that changes on its own — a cart count, a save confirmation.

Screen Reader스크린 리더

Assistive technology that navigates the web by voice — it walks the accessibility tree in DOM order, announcing each element's role and name.

⟳Design process

Wireframes, design tokens, double diamond, usability testing — the vocabulary of how design gets made.

Wireframe와이어프레임

A low-fidelity sketch that shows layout and structure with plain gray boxes — no color, type, or real imagery yet.

Mockup목업

A static screen with real color, type, and imagery — visually finished, but nothing responds when you click it.

Prototype프로토타입

Screens wired together so tapping one actually leads to the next — a fake product built to test behavior, not looks.

Design system디자인 시스템

A living set of components, tokens, and guidelines that lets multiple products and teams build screens from the same parts.

❝UX writing

Microcopy, error messages, button labels — principles for the words on screen.

Microcopy마이크로카피

The short bits of text scattered across a screen — labels, helper lines, button copy. A word or two decides what the user does next.

Error Message에러 메시지

The text that says what went wrong and how to fix it. "An error occurred" isn't an error message — it's an evasion.

Empty-State Copy빈 상태 문구

The text shown when a list has nothing in it. "No data" is a dead end; "create your first one" is a starting line.

Button Label버튼 라벨

"Delete file" instead of "OK" — a verb + object that tells you what happens before you click.

♪Sound & haptic design

Earcons, UI sounds, sonic branding, ADSR — interfaces you hear and feel.

Earcon이어콘

A short, abstract sound crafted to represent a specific action or state — the auditory equivalent of an icon.

UI sound인터페이스 사운드

A short sound tied to a single interaction — a tap, toggle, or swipe — that lets your ears confirm what your finger just did.

Sonic branding소닉 브랜딩

A short musical motif that represents a brand the way a logo does — replayed across touchpoints until it's instantly recognizable.

ADSR envelopeADSR 엔벨로프

A four-stage model — attack, decay, sustain, release — describing how a sound's loudness changes over time.

▣Presentation & slides

Assertion–evidence, one idea per slide, builds — principles for designing talks and decks.

Assertion-Evidence어서션-에비던스 구조

Writing a slide's headline as a full-sentence claim instead of a topic label, then filling the body with a single piece of evidence that backs exactly that claim.

One Idea per Slide슬라이드당 하나의 아이디어

Each slide carries exactly one idea worth remembering — cram in more, and none of them land.

Signal-to-Noise신호 대 잡음

The less decoration unrelated to your message — drop shadows, borders, extra colors — the more clearly the message itself reads.