893 개 항목, 34 개 분야.

타임라인 시퀀싱Timeline sequencing

위치·스케일·투명도 같은 여러 트랙을 하나의 재생 헤드(playhead)가 동시에 관통하며 값을 읽어내는 구조. 트랙마다 구간이 달라도 하나의 시간 축으로 동기화됩니다.

스크롤 스크럽Scroll scrub

애니메이션의 진행률을 시간이 아니라 스크롤 위치 그 자체에 1:1로 묶는 기법. 스크롤을 멈추면 애니메이션도 멈추고, 위로 되돌리면 애니메이션도 거꾸로 재생됩니다.

피닝Pinning

한 섹션을 화면에 고정해두고, 사용자가 계속 스크롤하는 동안 그 안의 콘텐츠만 진행시키는 기법. 스크롤텔링에서 "한 화면에 머물며 여러 단계를 보여줄 때" 씁니다.

관성·모멘텀Inertia & momentum

손을 떼는 순간의 속도를 그대로 이어받아 움직이다가, 마찰로 서서히 느려지며 멈추는 동작. 스크롤·드래그를 놓았을 때 뚝 멈추지 않고 "던진 만큼" 미끄러지는 느낌을 만듭니다.

◎인터랙션

마그네틱 버튼, 커서 트레일, 드래그 — 사용자의 손끝에 반응하는 패턴.

전체 보기 (21) →

마그네틱 버튼Magnetic Button

커서가 가까이 오면 버튼이 자석처럼 그쪽으로 살짝 끌려가는 인터랙션. 클릭하기도 전에 반응한다는 느낌을 줍니다.

커스텀 커서Custom Cursor

시스템 커서를 숨기고 그 자리를 브랜드에 맞는 도형(링·점)으로 대신하는 기법. 인터랙티브 요소 위에서 커서 자체가 반응합니다.

커서 트레일Cursor Trail

커서가 지나간 자리에 점들이 조금씩 지연되며 줄줄이 따라오는 효과. 각 점이 앞 점을 쫓아가며 자연스러운 잔상을 만듭니다.

틸트 카드Tilt Card

커서 위치에 따라 카드가 마치 손에 쥔 것처럼 살짝 기우는 3D 효과. CSS perspective와 rotateX/rotateY로 만듭니다.

▶모션 그래픽

로어서드, 트랙 매트, 스피드 램프, 로고 리빌 — 영상·애프터이펙트에서 쓰는 모션 용어.

전체 보기 (29) →

로워 서드Lower third

화면 아래쪽 1/3 지점에 이름·직함을 얹는 방송 그래픽. 인터뷰·뉴스 영상에서 인물을 소개할 때 씁니다.

비트 싱크 타이포Beat-synced type

텍스트가 등장하는 타이밍을 음악의 비트나 보이스오버의 강세에 프레임 단위로 맞추는 영상 타이포그래피 작업. 가사 비디오·타이틀 시퀀스의 핵심 기술입니다.

트랙 매트Track matte

한 레이어의 밝기(루마)나 투명도(알파)를 마스크로 써서 다른 레이어가 그 모양대로만 보이게 하는 합성 기법. 텍스트 안에 영상이 흐르는 연출의 원리입니다.

모션 블러Motion blur

빠르게 움직이는 물체가 카메라 셔터가 열려 있는 동안 잔상을 남겨 흐릿하게 찍히는 현상. 편집에서는 이 흐림을 인위적으로 더해 움직임을 부드럽게 보이게 합니다.

◆게임 UI·게임 필

HUD, 히트 스톱, 화면 흔들림, 쿨다운 — 게임이 손맛을 만드는 방법과 그 이름.

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

체력·미니맵·쿨타임 같은 핵심 정보를 화면 위에 항상 고정된 레이어로 보여주는 게임 UI의 기본 골격.

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

피격 시 실제 체력은 즉시 줄고, 옅은 색 "고스트" 막대가 한 박자 늦게 따라 줄어들며 얼마나 깎였는지 보여주는 체력바.

미니맵Minimap

화면 한쪽 구석에 축소된 지도로 플레이어와 주변 적·아군의 상대 위치를 계속 보여주는 UI.

데미지 숫자Damage Numbers

맞은 자리에서 숫자가 튀어 올라 위로 떠오르며 사라지는 연출. 크리티컬은 더 크고 다른 색으로 강조된다.

◌로더·로딩 갤러리

점 세 개, 링, 바, 펄스, 모핑 — 이름이 붙은 로딩 애니메이션 모음과 언제 무엇을 쓰는지.

점 세 개 로더Three Dots

점 세 개가 순서대로 밝아졌다 사라지길 반복하는, 가장 흔한 비확정적 대기 표시.

통통 튀는 점Bouncing Dots

점들이 순서대로 위로 튀어 올랐다 내려오는, 리듬감을 강조한 대기 표시.

링 스피너Spinner Ring

원의 한쪽 테두리만 다른 색으로 칠해 계속 돌리는, 가장 단순한 회전형 로더.

이중 링Dual Ring

서로 반대 방향으로 도는 두 겹의 링으로, 홑겹 스피너보다 역동적인 인상을 주는 로더.

✦시각 효과

글래스모피즘, 리퀴드 글래스, 그레인, 글로우 — 화면의 질감을 만드는 CSS·SVG 효과.

전체 보기 (62) →

보더 빔Border beam

테두리 전체가 아니라 짧은 빛줄기 하나가 카드 테두리를 따라 계속 도는 효과.

스포트라이트 카드Spotlight card

커서를 따라다니는 둥근 빛이 카드 표면의 격자 텍스처를 비추는 효과. 카드가 살아있다는 느낌을 줍니다.

유성Meteors

대각선으로 빠르게 지나가는 꼬리 달린 빛줄기 여러 개가 무작위 위치·간격으로 반복해서 떨어지는 배경 효과.

레트로 그리드Retro grid

원근감 있게 기울어진 격자 바닥이 화면 안쪽으로 끝없이 흘러가는 신스웨이브풍 배경.

◈3D · WebGL

three.js로 만드는 파티클, 셰이더, 블룸, 디스플레이스먼트 등 3D 그래픽 기법.

전체 보기 (40) →

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

노이즈로 만든 흐름장을 따라 수천 개의 입자가 움직이며 자연스러운 소용돌이를 그리는 기법.

GPGPU 파티클 시뮬레이션GPGPU particle simulation

파티클 위치를 CPU가 아니라 텍스처에 저장하고 GPU 셰이더로 갱신해서 수만 개를 매끄럽게 굴리는 기법.

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

한 장면을 미리 텍스처로 찍어서 다른 장면의 문·거울·창 표면에 실시간으로 붙이는 기법.

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

평면 하나를 거울처럼 만들어, 그 위에 있는 물체를 실시간으로 비춰 보여주는 기법.

Aa타이포그래피

커닝, 행간, 가변 폰트, 키네틱 타이포 — 글자를 다루는 용어.

전체 보기 (39) →

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

한글 음절 하나는 초성(첫자음)·중성(모음)·종성(받침, 선택)이 정해진 규칙으로 합쳐진 결과물입니다. 유니코드도 이 규칙을 그대로 산술식으로 담고 있습니다.

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

대부분의 한글 글꼴은 음절마다 똑같은 네모 틀 안에 맞춰 그리는 "네모꼴"입니다. 이 틀을 깨고 자모를 라틴 알파벳처럼 자유로운 높이·위치로 흘려보내는 실험을 "탈네모꼴"이라 부릅니다.

세로쓰기Vertical writing mode

문장을 왼쪽→오른쪽이 아니라 위→아래로 흘리고, 줄은 오른쪽에서 왼쪽으로 쌓는 조판 방향. CSS `writing-mode: vertical-rl`로 구현합니다.

루비 주석Ruby annotation

한자나 어려운 단어 위에 작은 발음·설명 텍스트를 나란히 붙이는 표기 방식. HTML `<ruby>` 요소가 브라우저 기본 기능으로 지원합니다.

◐색채

보색, 톤, 명도 대비, 그라데이션 — 색을 설명하는 말과 규칙.

전체 보기 (33) →

파스텔 팔레트Pastel palette

채도를 낮추고 명도를 한껏 올린 색들의 모음. 은은하고 부드러워서 시선을 압도하지 않습니다.

네온 팔레트Neon palette

채도를 최대로 올리고 어두운 배경과 짝지어 쓰는 색. 글로우(빛 번짐)를 더하면 실제로 빛나는 것처럼 보입니다.

어스 톤Earth tones

흙·나무·돌처럼 자연의 재료에서 따온 채도 낮은 색들. 테라코타·올리브·샌드·머스터드가 대표적입니다.

보석 톤Jewel tones

에메랄드·사파이어·루비처럼 채도는 높지만 명도는 낮춰 깊고 진한 색들. 어두운 배경 위에서 가장 화려하게 보입니다.

❖디자인 스타일

브루탈리즘, 스큐어모피즘, Y2K, 바우하우스 — 시대와 사조별 시각 언어.

웹 브루탈리즘Web brutalism

꾸미지 않은 HTML 그대로의 모습 — 기본 폰트, 각진 모서리, 파란 밑줄 링크를 일부러 그대로 드러내는 반(反)디자인.

네오 브루탈리즘Neo-brutalism

두꺼운 검은 테두리와 그림자 없는 "하드 섀도"(오프셋만 있는 그림자), 원색에 가까운 채도 높은 색을 쓰는 요즘 유행하는 브루탈리즘.

스큐어모피즘Skeuomorphism

가죽 질감, 유리 광택, 종이 그림자처럼 화면 속 UI가 실제 물건을 흉내 내던 스타일. 초기 iOS(2007~2012)가 대표적입니다.

플랫 디자인Flat design

그림자·그라데이션·질감을 걷어내고 단색 도형과 여백만으로 만드는 2차원적 디자인. 2013년 iOS 7과 Windows Metro가 대중화했습니다.

✎그래픽·브랜딩·인쇄

워드마크, 네거티브 스페이스, 재단 여백(블리드), CMYK — 로고와 인쇄물의 용어.

전체 보기 (23) →

도련Bleed

재단선 밖으로 이미지를 여유 있게 더 그려두는 인쇄 여백. 칼선이 살짝 밀려도 흰 여백이 생기지 않습니다.

CMYK vs RGB

화면은 빛을 더해 색을 만들고(RGB), 인쇄는 잉크를 섞어 색을 뺍니다(CMYK) — 그래서 화면의 쨍한 색 일부는 인쇄로 옮겨지지 않습니다.

별색Spot color

4가지 잉크(CMYK)를 점으로 섞어 만드는 대신, 이미 섞여 있는 단일 잉크 한 통으로 인쇄하는 색.

DPI/PPIDPI / PPI

같은 물리적 크기로 인쇄할 때, 담긴 점(픽셀)이 적으면 뭉개지고 많으면 선명합니다 — 화면에서 멀쩡해 보여도 인쇄에서 깨질 수 있습니다.

◧영상·사진 기법

돌리 줌, 심도, 리딩 라인, 골든 아워 — 카메라와 연출의 이름들.

얕은 심도Shallow depth of field

조리개를 크게 열수록(f값이 작을수록) 초점 앞뒤가 더 빠르게 흐려지는 효과. 피사체만 선명하게 남기고 배경을 지웁니다.

보케의 원리How bokeh forms

초점 밖의 빛이 렌즈 조리개 모양을 따라 둥근(또는 다각형) 원반으로 퍼지는 현상. 초점에서 멀수록 원반이 커집니다.

리딩 라인Leading lines

화면 속 선(길, 난간, 그림자 등)이 한 점으로 모이게 배치해 보는 사람의 시선을 피사체까지 끌고 가는 구도 기법.

골든 아워Golden hour

해가 지평선 가까이 낮게 떠 있어 빛이 부드럽고 따뜻한 색(주황·금색)을 띠는 일출·일몰 전후 짧은 시간대.

∿제너러티브 아트

플로우 필드, 보로노이, 보이드, 반응-확산 — 규칙과 난수로 그림을 만드는 알고리즘.

플로우 필드Flow field

화면 위에 깔린 보이지 않는 벡터 장(field)을 따라 수백 개의 입자가 흘러가며 남기는 궤적.

펄린 노이즈Perlin noise

구름처럼 자연스럽게 이어지는 난수를 만드는 함수. Ken Perlin이 1983년 영화 트론의 CG를 위해 고안했습니다.

보로노이 다이어그램Voronoi diagram

평면 위의 씨앗점 여러 개를 "가장 가까운 점" 기준으로 영역을 나눈 모자이크. 기린 무늬, 세포, 비눗방울에서 자연히 나타나는 패턴입니다.

델라우네이 삼각분할Delaunay triangulation

점들을 "가장 뭉툭하지 않은" 삼각형들로 이어붙이는 방법. 보로노이 다이어그램과 수학적으로 쌍을 이룹니다.

⬡아이콘·일러스트

키라인, 광학 보정, 듀오톤 아이콘, 아이소메트릭 — 작은 그림을 그리는 규칙.

아이콘 키라인Icon Keylines

아이콘을 그릴 때 크기를 맞추는 기준이 되는 원·정사각형·세로장방형·가로장방형 네 가지 보이지 않는 틀.

옵티컬 보정Optical Correction

수치상 같은 크기인데도 원이나 삼각형이 정사각형보다 작아 보이는 착시를 없애려고, 곡선·뾰족 도형을 일부러 살짝 더 크게 그리는 보정.

라인 아이콘Line Icon

면을 채우지 않고 일정한 굵기의 선(스트로크)만으로 형태를 그린 아이콘 — 가볍고 텍스트와 잘 어울린다.

솔리드 아이콘Solid Icon

윤곽선 없이 면 전체를 색으로 채운 아이콘 — 작은 크기에서도 형태가 뭉개지지 않아 눈에 잘 띈다.

⬢3D 모델링·렌더링

토폴로지, UV 전개, 노멀 맵, 앰비언트 오클루전 — 3D 툴에서 매일 듣는 용어.

토폴로지Topology

메시의 정점·모서리·면이 형태 위에 어떻게 배치되는지 — 특히 사각면(쿼드)이 표면의 굴곡을 따라 흐르는지를 뜻합니다.

폴리곤 메시Polygon mesh

점(정점)을 선(모서리)으로 잇고 그 선으로 둘러싸인 면을 채워서 3D 형태를 표현하는 가장 기본적인 방식.

서브디비전 서피스Subdivision surface

거친 저해상도 제어 메시(케이지)에 규칙을 반복 적용해 매끄러운 곡면으로 수렴시키는 기법.

UV 언랩핑UV unwrapping

3D 표면을 이음매(심)를 따라 가위질해서 평평한 2D 평면 위에 펼치는 과정. 텍스처가 표면 어디에 붙을지를 정합니다.

◑사진 보정·이미지 편집

커브, 레벨, 히스토그램, 닷지 앤 번 — 보정 툴의 이름과 원리.

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

사진의 밝기 값이 어둠부터 밝음까지 몇 픽셀씩 분포하는지 막대로 보여주는 그래프. 캔버스 픽셀을 직접 읽어 그때그때 계산합니다.

레벨(레벨 보정)Levels

검정점·흰점·감마 세 지점으로 톤 범위를 다시 매핑하는 도구. 히스토그램 양끝의 빈 공간을 채워 대비를 만듭니다.

커브(톤 커브)Curves

밝기의 입력-출력 관계를 곡선 하나로 표현해 레벨보다 훨씬 세밀하게 톤을 조절하는 도구.

화이트 밸런스White balance

빛의 색 온도에 맞춰 사진 전체 색조를 데우거나 식혀서, 흰색이어야 할 부분이 실제로 희게 보이도록 맞추는 보정.

◐AI 이미지 생성

시드, CFG, 인페인팅, 컨트롤넷, LoRA — 이미지 생성 모델을 다룰 때 쓰는 말.

프롬프트Prompt

이미지 생성 모델에게 무엇을 그릴지 알려주는 텍스트 설명. 모델은 이 문장을 이미지가 향해야 할 목표로 해석합니다.

네거티브 프롬프트Negative prompt

생성 결과에서 빼고 싶은 개념을 지정하는, 프롬프트와 반대 방향으로 작동하는 텍스트.

시드Seed

생성 시작점의 난수 발생기에 주는 정수 하나. 같은 시드 + 같은 설정이면 언제나 같은 이미지가 나옵니다.

CFG 스케일CFG scale

프롬프트를 얼마나 고지식하게 따를지 정하는 숫자. 낮으면 느슨하고 자유롭게, 높으면 엄격하고 과장되게 반영합니다.

▞패턴·텍스타일

하운드투스, 헤링본, 타탄, 페이즐리 — 옷감과 배경에서 보는 반복 무늬의 이름.

전체 보기 (24) →

하운드투스Houndstooth

검정과 흰색이 어긋난 4각의 뾰족한 이빨 모양으로 맞물리는 체크 무늬. 스코틀랜드 양치기 트위드에서 시작됐습니다.

헤링본Herringbone

청어 뼈 가시를 닮았다고 붙은 이름. V자 줄무늬가 줄마다 살짝 어긋나며 이어지는 능직 무늬입니다.

셰브론Chevron

봉우리와 골이 줄마다 정확히 같은 위치에서 맞물리는 대칭 지그재그 줄무늬. 문장(紋章)의 삼각형 표식에서 왔습니다.

깅엄Gingham

한 가지 색과 흰색 줄무늬가 직각으로 겹쳐, 겹치는 자리마다 더 짙은 세 번째 톤이 저절로 생기는 체크.

⌂인테리어·공간 디자인

조닝, 레이어드 조명, 포컬 포인트, 재팬디 — 공간을 설계하는 말.

조닝Zoning

하나의 열린 공간을 활동 목적에 따라 몇 개의 구역으로 나눠 배치하는 계획 기법. 벽을 세우지 않고도 러그·조명·가구 배치만으로 경계를 만듭니다.

레이어드 조명Layered lighting

하나의 조명에 의존하지 않고 앰비언트(전체)·태스크(작업)·액센트(강조) 세 층을 겹쳐 쓰는 조명 계획. 층마다 켜고 끄면 공간의 쓰임이 달라집니다.

포컬 포인트Focal point

방에 들어섰을 때 시선이 가장 먼저 머무는 하나의 지점. 벽난로·창문·큰 그림처럼 자연히 있는 것을 살리거나, 없으면 가구 배치로 새로 만듭니다.

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

벽·가구·바닥을 명확한 경계선으로 나눠 서로 다른 단색을 붙여넣는 배색 기법. 그러데이션 없이 색과 색이 맞닿는 경계 자체가 디자인이 됩니다.

⚙제품·산업 디자인

CMF, 필렛과 챔퍼, 인체공학, 디터 람스의 10원칙 — 물건을 만드는 디자인의 용어.

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

똑같은 형태의 제품에 색·소재·표면 처리만 바꿔서 완전히 다른 인상과 촉감, 다른 가격대를 만드는 디자인 영역.

필렛 vs 챔퍼Fillet vs. chamfer

날카로운 모서리를 처리하는 두 방법 — 필렛은 곡선으로 둥글리고, 챔퍼는 평평하게 각을 잘라낸다.

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

사출·주조 금형에서 완성된 부품이 벽에 걸리지 않고 빠져나오도록 수직면에 미리 주는 약간의 기울기.

파팅라인(형합선)Parting line

사출·주조 금형의 두 짝이 맞물리는 경계가 완성된 부품 표면에 남기는 가느다란 자국.

▣UI 컴포넌트

아코디언, 토스트, 스켈레톤 — 인터페이스를 이루는 부품의 정확한 이름과 쓰임.

전체 보기 (53) →

날짜 선택기Date picker

입력창을 누르면 달력이 팝업으로 열리고, 날짜 하나를 고르면 값이 채워지며 닫히는 폼 컨트롤.

캘린더 뷰Calendar view

한 달치 날짜를 격자로 펼쳐두고, 날짜마다 있는 일정을 점이나 라벨로 보여주는 화면.

컨텍스트 메뉴Context menu

마우스 오른쪽 버튼(또는 길게 누르기)으로 커서 위치에 여는, 지금 클릭한 대상에 한정된 명령 목록.

스플릿 버튼Split button

왼쪽은 즉시 실행되는 기본 동작, 오른쪽은 대안 동작 목록을 펼치는 화살표로 나뉜 두 부분짜리 버튼.

▦레이아웃

벤토 그리드, 메이슨리, 8pt 그리드 — 화면을 나누고 배치하는 방식.

전체 보기 (36) →

플렉스박스 정렬Flexbox alignment

`justify-content`(주축)와 `align-items`(교차축)로 플렉스 아이템을 정렬하는 두 축의 규칙.

CSS 그리드 영역CSS grid areas

칸에 좌표 대신 이름을 붙여(`grid-template-areas`) 레이아웃을 "그림처럼" 배치하는 CSS Grid 기능.

auto-fill vs auto-fit

`repeat(auto-fill, …)`은 빈 칸을 남겨두고, `repeat(auto-fit, …)`은 빈 칸을 접어 남은 아이템을 늘립니다 — 미디어 쿼리 없는 반응형 그리드의 핵심 차이.

내재적 크기Intrinsic sizing

컨테이너가 아니라 내용물 자체가 "얼마나 넓어야 하는지"를 정하는 크기 키워드 3종 — `min-content`·`max-content`·`fit-content()`.

✧AI 인터페이스

스트리밍 응답, 추론 표시, 인용, 제안 칩 — 생성형 AI 제품에서 굳어지고 있는 UI 패턴.

스트리밍 응답Streaming response

답변 전체가 준비될 때까지 기다리지 않고, 토큰(글자 조각) 단위로 생성되는 즉시 화면에 이어 붙이는 방식.

타이핑 인디케이터Typing indicator

응답이 아직 시작되지 않았을 때, 상대가 "입력 중"임을 알리는 통통 튀는 점 세 개.

생각 중 인디케이터Thinking indicator

모델이 답을 내기 전 추론 과정을 샤머링 텍스트로 흘려 보여주고, 끝나면 "N초간 생각함"으로 접히는 영역.

제안 칩Suggestion chips

응답 아래 나타나는, 눌러서 바로 다음 질문으로 쓸 수 있는 짧은 알약 모양 버튼들.

▤데이터 시각화

생키, 트리맵, 스파크라인, 히트맵 — 차트의 정확한 이름과 언제 무엇을 쓰는지.

전체 보기 (41) →

선버스트Sunburst chart

중첩된 계층 구조를 도넛처럼 겹친 고리로 펼쳐서, 조각의 각도로 상위 항목 대비 비중을 보여주는 차트.

스트림그래프Streamgraph

누적 영역 차트를 중심선 기준 위아래로 부풀려, 강물처럼 흐르는 여러 시계열의 상대적 크기를 보여주는 차트.

리지라인 플롯Ridgeline plot

여러 그룹의 분포 곡선을 살짝 겹치게 위아래로 쌓아, 그룹 사이 분포 모양의 차이를 산맥처럼 늘어놓는 차트.

평행 좌표Parallel coordinates

여러 변수를 나란한 수직 축으로 늘어놓고, 한 항목의 값들을 축을 가로지르는 하나의 꺾은선으로 잇는 차트.

{}최신 CSS·웹 기능

:has(), 앵커 포지셔닝, Popover API, @starting-style — 최근 브라우저가 기본으로 주는 기능들.

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

자식이나 형제의 상태를 보고 부모(또는 자기 자신)를 선택하는 CSS 선택자. "부모 선택자"라 불리기도 합니다.

앵커 포지셔닝Anchor Positioning

JS로 좌표를 재지 않고, CSS만으로 한 요소를 다른 요소에 붙여 배치하는 기능. 툴팁·팝오버 위치 계산 라이브러리를 대체합니다.

팝오버 APIPopover API

HTML `popover` 속성 하나로 top layer 렌더링, 라이트 디스미스, Esc 닫기를 공짜로 주는 네이티브 오버레이 API.

@starting-style

요소가 `display:none`에서 나타나는 첫 프레임의 스타일을 정의해서, 등장 애니메이션을 트랜지션만으로 만드는 규칙.

▭랜딩 페이지 패턴

히어로, 로고 클라우드, 가격표, 후기 월 — 마케팅 페이지를 이루는 섹션의 이름.

히어로 섹션Hero section

페이지 최상단에서 제품의 핵심 가치를 한 문장으로 전달하고 첫 행동을 유도하는 영역.

로고 클라우드Logo cloud

고객사·파트너 로고를 나란히 배치해 "이미 이만큼 쓰인다"는 신뢰를 짧게 전달하는 줄.

피처 그리드Feature grid

아이콘·제목·설명 한 세트를 균일한 칸에 반복 배치해 제품의 핵심 기능들을 나열하는 섹션.

벤토 피처 섹션Bento features

칸 크기를 다르게 줘서 기능 하나는 크게, 나머지는 보조로 보여주는 비대칭 기능 섹션.

▯모바일 패턴

바텀 시트, 스와이프 액션, 라지 타이틀, 세이프 에어리어 — 손안의 화면을 위한 패턴.

바텀 시트Bottom Sheet

화면 아래에서 올라와 일부만 덮는 패널. peek·half·full 같은 정해진 높이(디텐트) 사이를 드래그로 오갑니다.

스와이프 액션Swipe Actions

리스트 행을 옆으로 밀면 그 아래 숨어있던 보관·삭제 같은 버튼이 드러나는 패턴. 행 자체는 사라지지 않습니다.

라지 타이틀Large Title

화면 맨 위에 크게 떠 있던 제목이 아래로 스크롤할수록 작아지며 상단 내비게이션 바 안으로 들어가는 패턴.

탭 바Tab Bar

화면 맨 아래 고정된 3~5개의 아이콘·레이블 버튼으로, 눌린 항목이 곧 지금 보고 있는 최상위 화면을 나타냅니다.

◫공간 UI·XR

깊이, 시선 호버, 볼륨, 오너먼트 — 헤드셋과 공간 컴퓨팅의 인터페이스 용어.

뎁스 하이어라키Depth hierarchy

평면 UI의 z-index 대신, 배경·콘텐츠·컨트롤을 실제 거리(Z 위치)로 떨어뜨려 앞뒤 관계를 표현하는 방식.

게이즈 호버Gaze hover

눈이 향한 곳의 요소가 자동으로 하이라이트되는 상태 — 마우스 올림(hover)의 시선 버전.

스페이셜 윈도우Spatial window

기존 2D 앱을 공간 안에 떠 있는 직사각형 유리 패널로 보여주는 기본 단위. 크기·위치는 사용자가 자유롭게 옮긴다.

볼륨Volume

평평한 창과 달리 3D 콘텐츠를 사방에서 돌려볼 수 있게 담는 부피(bounding box) 컨테이너.

⌘UX 용어·법칙

피츠의 법칙, 어포던스, 점진적 공개 — 회의에서 자주 나오는 UX 개념을 예시와 함께.

전체 보기 (53) →

테슬러의 법칙Tesler's Law

복잡성은 없앨 수 없고 시스템과 사용자 사이에서 옮길 수만 있다는 법칙. 시스템이 떠안지 않으면 사용자가 떠안습니다.

포스텔의 법칙Postel's Law

보낼 때는 엄격하게, 받을 때는 관대하게 — 인터페이스는 다양한 입력을 받아들이고 정돈된 결과만 내보내야 한다는 원칙.

파레토 법칙Pareto Principle

결과의 80%는 원인의 20%에서 나온다는 경험칙. 이탈리아 경제학자 빌프레도 파레토의 토지 분포 관찰에서 시작됐습니다.

오컴의 면도날Occam's Razor

같은 결과에 도달한다면 가정이 가장 적은 단순한 설명(또는 설계)을 골라야 한다는 원칙.

◉접근성

포커스 링, 스킵 링크, 라이브 리전, 모션 줄이기 — 모두가 쓸 수 있게 만드는 용어.

포커스 링Focus Ring

키보드로 포커스를 옮길 때 지금 어디 있는지 보여주는 테두리. outline: none으로 지우면 키보드 사용자가 위치를 잃습니다.

스킵 링크Skip Link

본문 앞에 숨어 있다가 포커스를 받으면 나타나는 링크. 키보드 사용자가 반복되는 내비게이션을 건너뛰고 본문으로 바로 갈 수 있게 합니다.

아리아 라이브 리전ARIA Live Region

화면이 스스로 바뀌었을 때(장바구니 개수, 저장 완료 등) 스크린 리더가 그 변화를 알아서 읽어주게 만드는 속성.

스크린 리더Screen Reader

화면을 보지 않고 음성으로 웹을 탐색하는 보조 기술. 접근성 트리를 DOM 순서대로 훑으며 요소의 역할과 이름을 읽어줍니다.

⟳디자인 프로세스

와이어프레임, 디자인 토큰, 더블 다이아몬드, 사용성 테스트 — 디자인이 만들어지는 과정의 용어.

와이어프레임Wireframe

레이아웃과 정보 구조만 회색 상자로 표현한 저충실도 초안. 색·타이포·이미지는 아직 정하지 않습니다.

목업Mockup

실제 색·타이포·이미지를 입힌 정지 화면. 눌러도 반응하지 않는, "그림"으로서 완성된 디자인입니다.

프로토타입Prototype

화면과 화면을 실제로 연결해 눌렀을 때 흐름이 이어지는, 동작을 검증하기 위한 가짜 제품.

디자인 시스템Design system

컴포넌트·토큰·가이드라인을 한 곳에 모아 여러 제품·팀이 같은 부품으로 화면을 짜게 하는 살아있는 규격.

❝UX 라이팅

마이크로카피, 오류 메시지, 버튼 레이블 — 화면 속 글을 다루는 원칙.

마이크로카피Microcopy

버튼·라벨·헬퍼 텍스트처럼 화면 곳곳에 흩어진 짧은 문구. 한두 단어가 사용자의 다음 행동을 결정합니다.

에러 메시지Error Message

무엇이 잘못됐고 어떻게 고치는지를 말해주는 문구. "오류가 발생했습니다"는 에러 메시지가 아니라 회피입니다.

빈 상태 문구Empty-State Copy

목록이 비었을 때 화면에 뜨는 문구. "데이터 없음"은 끝이지만 "첫 항목을 만들어보세요"는 시작입니다.

버튼 라벨Button Label

"확인" 대신 "삭제하기" — 동사 + 대상으로 눌렀을 때 무슨 일이 일어나는지 미리 말해주는 버튼 문구.

♪사운드·햅틱 디자인

이어콘, UI 사운드, 소닉 브랜딩, ADSR — 들리고 느껴지는 인터페이스.

이어콘Earcon

특정 동작이나 상태를 나타내기 위해 설계된 짧고 추상적인 소리 신호. 아이콘의 청각 버전입니다.

인터페이스 사운드UI sound

버튼 클릭·토글·스와이프 같은 조작 하나하나에 붙는 짧은 소리. 손끝의 촉감을 귀로 확인시켜 줍니다.

소닉 브랜딩Sonic branding

로고처럼 브랜드를 대표하는 짧은 소리·음악 모티프. 여러 접점에서 반복 노출되며 브랜드를 각인시킵니다.

ADSR 엔벨로프ADSR envelope

소리의 크기가 시간에 따라 어떻게 변하는지를 어택·디케이·서스테인·릴리즈 4단계로 나눈 모델입니다.

▣프레젠테이션·슬라이드

어서션-에비던스, 한 장 한 메시지, 빌드 애니메이션 — 발표 자료를 설계하는 원칙.

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

슬라이드 제목을 주제어가 아니라 완전한 문장(주장)으로 쓰고, 본문은 그 주장을 뒷받침하는 근거 하나로 채우는 구조입니다.

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

슬라이드 하나에는 청중이 기억해야 할 생각을 딱 하나만 담습니다. 여러 아이디어를 욱여넣으면 전부 흐려집니다.

신호 대 잡음Signal-to-Noise

슬라이드에서 실제 메시지(신호)와 무관한 장식(잡음) — 그림자, 테두리, 여분의 색 — 을 줄일수록 메시지가 더 잘 읽힙니다.