디자인 용어 사전 155개

타이포그래피, 편집·인쇄, 컬러, UI 설계, UX 리서치, 개발 협업까지 실무에서 자주 쓰는 디자인 용어를 정리했습니다.

검색·필터가 되는 전체 목록 보기 →

타이포그래피 18

• 서체 / 폰트Typeface / Font

  서체는 글자의 디자인(예: Pretendard), 폰트는 그 서체의 특정 굵기·스타일 파일(예: Pretendard Bold). 실무에서는 섞어 씁니다.

• 세리프 / 산세리프Serif / Sans-serif

  획 끝에 돌기(세리프)가 있으면 세리프(명조 계열), 없으면 산세리프(고딕 계열). 본문 인쇄물은 세리프, 화면 UI는 산세리프가 일반적.

• 웨이트Weight

  글자 굵기 단계. Thin(100)부터 Black(900)까지 숫자로 표기하며 UI에서는 보통 Regular·Medium·SemiBold·Bold 4단계 안에서 씁니다.

• 가변 폰트Variable Font

  굵기·너비·기울기 등을 파일 하나에서 연속적으로 조절할 수 있는 폰트. 웹에서 파일 수를 줄이고 미세 조정이 가능합니다.

• 자간Tracking / Letter-spacing

  글자 사이의 전체적인 간격. 제목은 좁히고(-2~-4%), 작은 대문자나 캡션은 넓히는 것이 관례.

• 커닝Kerning

  특정 글자 쌍(AV, To 등) 사이 간격을 개별 조정하는 것. 로고·헤드라인처럼 큰 글자에서 눈에 띕니다.

• 행간Leading / Line-height

  줄과 줄 사이 간격. 본문은 글자 크기의 1.5~1.7배, 제목은 1.1~1.3배가 기준. 한글은 영문보다 조금 넉넉하게.

• 베이스라인Baseline

  글자가 올라앉는 가상의 기준선. 여러 크기의 글자를 정렬할 때는 베이스라인을 맞춥니다.

• 엑스하이트x-height

  소문자 x의 높이. 엑스하이트가 큰 서체는 작은 크기에서도 잘 읽혀 UI 본문에 유리합니다.

• 어센더 / 디센더Ascender / Descender

  엑스하이트 위로 올라가는 부분(b, d, h)과 베이스라인 아래로 내려가는 부분(g, p, y).

• 합자Ligature

  fi, fl처럼 두 글자가 붙어 하나로 디자인된 글리프. 세리프 본문에서 자연스러운 흐름을 만듭니다.

• 위도우 / 오펀Widow / Orphan

  단락 마지막 줄에 한 단어만 남거나(위도우), 단락 첫 줄이 페이지 끝에 홀로 남는 것(오펀). 편집에서 반드시 잡는 오류.

• 리버Rivers

  양끝 정렬에서 단어 간격이 벌어져 세로로 흰 강줄기처럼 보이는 현상. 하이픈이나 자간 조정으로 해결.

• 정렬Alignment

  좌·우·가운데·양끝 정렬. 본문은 좌측 정렬(래그드 라이트)이 가장 읽기 편하고, 가운데 정렬은 짧은 문장에만.

• 타입 스케일Type Scale

  일정 비율(1.2, 1.25, 1.333 등)로 커지는 글자 크기 체계. 12·14·16·20·24·32처럼 미리 정해 두고 씁니다.

• 위계Hierarchy

  크기·굵기·색·간격으로 정보의 중요도 순서를 만드는 것. 한 화면에 3단계 정도면 충분합니다.

• 가독성 / 판독성Readability / Legibility

  판독성은 글자 하나가 구분되는 정도, 가독성은 문장이 편하게 읽히는 정도. 서체 선택은 판독성, 조판은 가독성.

• 옵티컬 사이즈Optical Size

  본문용·제목용으로 크기에 따라 형태가 다르게 설계된 서체 변형. 제목용은 대비가 강하고 자간이 좁습니다.

편집 · 인쇄 22

• 판형Trim Size

  인쇄물의 최종 크기. A4(210×297), 국판(148×210), 신국판(152×225) 등. 판형이 그리드와 여백의 출발점.

• 판면Type Area

  여백을 제외하고 본문이 놓이는 영역. 판면 비율이 책의 인상을 좌우합니다.

• 그리드Grid

  페이지를 컬럼과 행으로 나눈 보이지 않는 틀. 요소를 일관되게 배치하고 리듬을 만드는 기준.

• 컬럼 / 거터Column / Gutter

  컬럼은 그리드의 세로 단, 거터는 컬럼 사이 간격. 웹에서는 12컬럼, 거터 16~24px이 일반적.

• 마진Margin

  페이지 가장자리 여백. 책은 안쪽(제본 쪽) 여백을 더 넓게 잡습니다.

• 블리드 (도련)Bleed

  재단 오차를 대비해 이미지를 재단선 밖으로 3mm 더 빼는 것. 도련 없이 넘기면 흰 테두리가 생깁니다.

• 재단선 / 트림 마크Trim Marks

  인쇄 후 종이를 자를 위치 표시. 인쇄용 PDF 내보낼 때 도련과 함께 포함.

• 세이프 존Safe Area

  재단선 안쪽 3~5mm. 글자나 중요한 요소는 이 안에 두어야 잘리지 않습니다.

• 스프레드 (펼침면)Spread

  마주 보는 두 페이지를 하나의 화면으로 보는 단위. 책·브로슈어는 스프레드 기준으로 디자인.

• 폴리오Folio

  쪽번호. 러닝 헤드(장 제목)와 함께 페이지 상단·하단에 놓입니다.

• 캡션 / 풀아웃Caption / Pull Quote

  캡션은 이미지 설명 글, 풀아웃은 본문에서 뽑아 크게 강조한 인용문.

• CMYK / RGBCMYK / RGB

  인쇄는 잉크 4색 CMYK, 화면은 빛 3색 RGB. RGB의 형광·채도 높은 색은 인쇄하면 탁해지므로 CMYK로 변환해 확인.

• 별색Spot Color (Pantone)

  CMYK 조합이 아니라 미리 조색된 잉크로 찍는 색. 브랜드 컬러·금·형광처럼 정확한 색이 필요할 때.

• DPI / PPIDPI / PPI

  인쇄 해상도. 인쇄물 이미지는 실제 크기 기준 300dpi, 화면은 72~144ppi면 충분.

• 리치 블랙Rich Black

  K100만 쓰면 회색빛이 돌아 C·M·Y를 섞어 만든 진한 검정(예: C60 M40 Y40 K100). 작은 글자는 K100만.

• 오버프린트 / 트래핑Overprint / Trapping

  색판이 어긋나 흰 틈이 생기지 않도록 겹쳐 찍거나(오버프린트) 경계를 살짝 넓히는 것(트래핑). 검정 글자는 보통 오버프린트.

• 후가공Finishing

  인쇄 뒤 더하는 공정. 박(금·은 호일), 형압(눌러 돋움), 부분 UV(광택), 코팅, 오시(접는 선), 타공 등.

• 제본Binding

  중철(스테이플, 얇은 책자), 무선(풀로 붙임, 일반 단행본), 양장(하드커버), 사철(실로 꿰맴, 펼침 좋음).

• 평량Paper Weight (g/㎡)

  종이 두께를 무게로 표시. 명함 300g, 포스터 150~200g, 본문 80~100g 정도.

• 교정쇄 / 프루프Proof

  본 인쇄 전에 색과 오탈자를 확인하는 견본. 색이 중요하면 반드시 실제 종이로 교정쇄를 봅니다.

• 아웃라인 처리Create Outlines

  인쇄소에 넘기기 전 글자를 패스(도형)로 변환해 폰트 누락을 막는 것. 원본은 따로 보관.

• 터잡기Imposition

  접었을 때 순서가 맞도록 한 장의 큰 종이에 페이지를 배치하는 작업. 페이지 수는 보통 4의 배수.

컬러 12

• HEX / RGB / HSLColor Notation

  HEX(#5B5BD6)는 웹에서 가장 흔한 표기, HSL은 색상·채도·명도로 다루기 쉬워 팔레트 조정에 편리.

• 색상 · 채도 · 명도Hue · Saturation · Value

  색상은 빨강·파랑 같은 종류, 채도는 선명한 정도, 명도는 밝은 정도. 세 축을 분리해서 생각하면 조합이 쉬워집니다.

• 보색 / 유사색Complementary / Analogous

  색상환에서 마주 보는 색은 보색(강한 대비), 이웃한 색은 유사색(조화). 강조는 보색, 배경은 유사색.

• 톤온톤 / 톤인톤Tone on Tone / Tone in Tone

  같은 색상의 명도 차이로 구성하면 톤온톤, 비슷한 톤의 다른 색상으로 구성하면 톤인톤.

• 60-30-1060-30-10 Rule

  주조색 60%, 보조색 30%, 강조색 10% 비율로 배분하는 원칙. 색이 많아도 균형이 잡힙니다.

• 명도 대비Contrast Ratio

  글자와 배경의 밝기 차이를 1:1~21:1로 표현. WCAG 기준 본문 4.5:1, 큰 글자 3:1 이상이어야 접근성 통과.

• WCAG AA / AAAWCAG Levels

  웹 접근성 지침의 준수 등급. 대부분의 서비스는 AA(대비 4.5:1)를 목표로 합니다.

• 시맨틱 컬러Semantic Color

  용도에 이름을 붙인 색. primary, success, warning, error처럼 의미로 정의해 두면 다크 모드 전환이 쉬워집니다.

• 컬러 스케일Color Scale

  한 색상을 50~950처럼 10단계 명도로 늘어놓은 것. 디자인 시스템의 기본 단위.

• 색 공간Color Space (sRGB · P3 · OKLCH)

  sRGB가 웹 표준, Display P3는 더 넓은 색역, OKLCH는 사람 눈에 균일한 최신 표기. 최신 CSS는 셋 다 지원.

• 그라디언트Gradient

  색이 점진적으로 변하는 것. 색상환에서 가까운 색끼리 섞어야 중간이 탁해지지 않습니다.

• 컬러 프로파일Color Profile (ICC)

  기기·종이마다 다른 색 재현을 맞추는 설정. 인쇄용 파일은 인쇄소가 지정한 프로파일(예: Japan Color 2001 Coated)로.

그래픽 · 브랜딩 16

• CI / BICorporate / Brand Identity

  CI는 기업 전체의 아이덴티티, BI는 개별 브랜드·제품의 아이덴티티. 로고, 컬러, 서체, 톤을 포함.

• 심볼 / 워드마크 / 로고타입Symbol / Wordmark / Logotype

  심볼은 그림 마크, 워드마크(로고타입)는 글자로 된 로고. 둘을 정해진 규칙으로 조합한 것이 시그니처.

• 브랜드 가이드라인Brand Guidelines

  로고 사용 규칙, 최소 크기, 여백, 금지 사례, 컬러·서체·이미지 톤을 정리한 문서. 외주 시 반드시 요청.

• 키 비주얼Key Visual

  캠페인이나 브랜드를 대표하는 핵심 이미지. 포스터·배너·SNS로 변주되는 원본.

• 무드보드Mood Board

  방향을 잡기 위해 레퍼런스 이미지·색·질감을 모아 놓은 보드. 시안 전에 클라이언트와 합의하는 용도.

• 톤앤매너Tone & Manner

  브랜드가 말하고 보이는 방식의 일관성. 색·서체·사진 스타일·문체를 아우르는 분위기.

• 그래픽 모티프Graphic Motif

  로고에서 파생돼 반복 사용되는 도형·패턴. 로고 없이도 브랜드를 알아보게 하는 장치.

• 시안Draft / Comp

  클라이언트에게 보여 주는 디자인 안. 보통 A·B·C안으로 방향을 나눠 제시하고 하나를 골라 발전.

• 룩앤필Look & Feel

  보이는 인상(룩)과 사용 감각(필). "룩앤필을 맞춰 달라"는 기존 톤과 어긋나지 않게 하라는 뜻.

• 어플리케이션Application

  아이덴티티를 명함·사인·패키지·웹 등 실제 매체에 적용한 결과물.

• 벡터 / 래스터Vector / Raster

  벡터(AI, SVG)는 수식 기반이라 확대해도 깨지지 않고, 래스터(PNG, JPG)는 픽셀 기반. 로고는 반드시 벡터로.

• 베지어 곡선 / 패스Bézier Curve / Path

  앵커 포인트와 핸들로 만드는 곡선. 펜 툴의 기본이며 앵커는 적을수록 매끄럽습니다.

• 클리핑 마스크Clipping Mask

  위 도형의 모양대로 아래 이미지를 잘라 보이게 하는 기능. 원본을 훼손하지 않아 수정이 쉽습니다.

• 블렌딩 모드Blending Mode

  레이어를 겹칠 때 색을 섞는 방식. Multiply(곱하기)는 어둡게, Screen은 밝게, Overlay는 대비를 높입니다.

• 목업 (그래픽)Mockup

  디자인을 실제 제품(명함, 간판, 패키지)에 입혀 보여 주는 합성 이미지. 스마트 오브젝트 PSD로 제작.

• 아트워크Artwork

  인쇄·제작에 넘기는 최종 데이터. "아트워크 넘겨 주세요"는 완성 파일을 달라는 뜻.

UI 설계 42

• 와이어프레임Wireframe

  색·이미지 없이 회색 박스와 선으로 화면 구조와 정보 배치만 잡은 설계도.

• 로파이 / 하이파이Lo-fi / Hi-fi

  완성도 단계. 로파이는 손그림·와이어프레임 수준, 하이파이는 실제와 같은 시각 디자인.

• 목업 (UI)Mockup

  동작하지 않는 하이파이 정적 화면. 여기에 인터랙션을 붙이면 프로토타입.

• 프로토타입Prototype

  클릭·전환이 되는 시뮬레이션. 개발 전에 흐름을 검증하고 사용성 테스트에 씁니다.

• 디자인 시스템Design System

  컬러·타이포·간격·컴포넌트와 사용 규칙을 묶은 재사용 체계. 팀이 커질수록 필수.

• 컴포넌트Component

  버튼·인풋·카드처럼 반복 사용하는 UI 조각. 원본(마스터)을 고치면 모든 인스턴스가 바뀝니다.

• 디자인 토큰Design Token

  색·간격·크기 값을 이름으로 저장한 최소 단위(color-primary, space-4). 디자인과 코드가 같은 값을 공유.

• 아토믹 디자인Atomic Design

  원자(버튼) → 분자(검색창) → 유기체(헤더) → 템플릿 → 페이지로 UI를 쌓는 방법론.

• 8pt 그리드8pt Grid

  간격·크기를 8의 배수(8, 16, 24, 32…)로 통일하는 규칙. 어떤 해상도에서도 깔끔하게 떨어집니다.

• 브레이크포인트Breakpoint

  레이아웃이 바뀌는 화면 폭 기준. 보통 모바일 ~640, 태블릿 ~1024, 데스크톱 1280 이상.

• 반응형 / 적응형Responsive / Adaptive

  반응형은 폭에 따라 유연하게 흐르고, 적응형은 정해진 몇 가지 폭에 맞춘 고정 레이아웃을 골라 보여 줍니다.

• 뷰포트 / 폴드Viewport / Fold

  뷰포트는 화면에 보이는 영역, 폴드는 스크롤 전 보이는 경계. 핵심 메시지와 CTA는 폴드 위에.

• 히어로 섹션Hero Section

  랜딩페이지 최상단의 큰 제목·이미지·CTA 영역. 3초 안에 무엇을 하는 서비스인지 전달.

• CTACall to Action

  "시작하기", "구매하기"처럼 행동을 유도하는 버튼. 화면당 주요 CTA는 하나만 강조.

• GNB / LNBGlobal / Local Navigation

  GNB는 전체 서비스 공통 메뉴(상단), LNB는 현재 섹션 안의 하위 메뉴(왼쪽). 국내 실무 용어.

• 햄버거 메뉴 / 탭 바Hamburger / Tab Bar

  모바일에서 메뉴를 숨기는 ≡ 아이콘과 하단에 항상 노출하는 탭 바. 핵심 기능이 5개 이하면 탭 바가 낫습니다.

• 모달 / 다이얼로그Modal / Dialog

  화면 위에 떠서 다른 조작을 막는 창. 남용하면 피로하니 확인이 꼭 필요한 순간에만.

• 바텀 시트Bottom Sheet

  모바일 화면 아래에서 올라오는 패널. 모달보다 가볍고 엄지로 닿기 좋습니다.

• 토스트 / 스낵바Toast / Snackbar

  "저장되었습니다"처럼 잠깐 떴다 사라지는 알림. 스낵바는 실행 취소 같은 액션이 하나 붙습니다.

• 툴팁 / 팝오버Tooltip / Popover

  호버·클릭 시 나오는 짧은 설명(툴팁)과 조금 더 많은 내용을 담은 작은 창(팝오버).

• 드롭다운 / 셀렉트Dropdown / Select

  눌렀을 때 목록이 펼쳐지는 컨트롤. 선택지가 5개 이하면 라디오·세그먼트가 더 빠릅니다.

• 아코디언Accordion

  제목을 누르면 내용이 펼쳐지고 접히는 목록. FAQ에 주로 사용.

• 카드Card

  이미지·제목·설명을 한 덩어리로 묶은 컨테이너. 격자로 늘어놓기 쉽지만 남발하면 복잡해집니다.

• 스켈레톤 UISkeleton

  로딩 중 콘텐츠 자리에 회색 블록을 먼저 보여 주는 것. 스피너보다 체감 속도가 빠릅니다.

• 엠프티 스테이트Empty State

  데이터가 없을 때의 화면. 빈 화면 대신 다음 행동을 안내해야 합니다.

• 온보딩Onboarding

  첫 사용자가 서비스를 익히는 과정. 튜토리얼, 권한 요청, 초기 설정 화면을 포함.

• 마이크로인터랙션Microinteraction

  버튼 눌림, 좋아요 애니메이션 같은 작은 반응. 피드백을 주고 완성도를 높입니다.

• 어포던스Affordance

  보기만 해도 어떻게 쓰는지 알 수 있는 성질. 버튼은 눌러 보이고 링크는 밑줄이 있어야 합니다.

• 상태States (Hover · Active · Focus · Disabled)

  컴포넌트가 가지는 여러 모습. 기본·호버·눌림·포커스·비활성·로딩·에러를 모두 정의해야 개발 누락이 없습니다.

• 오토 레이아웃Auto Layout

  Figma에서 내용에 따라 크기와 간격이 자동으로 늘어나는 프레임. CSS 플렉스박스와 같은 개념.

• 컨스트레인트Constraints

  프레임 크기가 바뀔 때 요소가 어느 쪽에 붙어 따라갈지 정하는 규칙. 반응형 컴포넌트의 기본.

• 배리언트Variants

  한 컴포넌트의 여러 버전(크기·상태·타입)을 한 세트로 묶은 것. 속성을 바꿔 가며 선택.

• 핸드오프Handoff

  디자인을 개발자에게 넘기는 과정. 스펙(간격·색·폰트), 에셋, 인터랙션 설명이 포함되어야 합니다.

• 레드라인 / 스펙Redline / Spec

  간격·크기를 빨간 선과 숫자로 표기한 문서. 요즘은 Figma Dev Mode가 자동으로 대신합니다.

• 세이프 에어리어Safe Area

  노치·홈 인디케이터 등 기기 UI에 가려지지 않는 영역. 중요한 요소는 이 안에 배치.

• 터치 타깃Touch Target

  손가락으로 누를 수 있는 최소 크기. iOS 44pt, 안드로이드 48dp 이상.

• 플레이스홀더 / 밸리데이션Placeholder / Validation

  입력 전 힌트 텍스트와 입력값 검증. 라벨을 플레이스홀더로 대체하면 입력 중 사라져 불편합니다.

• 브레드크럼Breadcrumb

  홈 > 카테고리 > 상품처럼 현재 위치 경로를 보여 주는 내비게이션.

• 페이지네이션 / 무한 스크롤Pagination / Infinite Scroll

  목록을 페이지로 나누거나 스크롤하면 계속 불러오는 방식. 목적 있는 탐색은 페이지네이션이 낫습니다.

• 배지 / 칩Badge / Chip

  배지는 알림 개수·상태를 표시하는 작은 라벨, 칩은 선택·필터·태그로 쓰는 알약 모양 요소.

• 캐러셀Carousel

  이미지를 옆으로 넘겨 보는 슬라이드. 자동 재생은 사용자가 대부분 무시하므로 신중히.

• 다크 모드Dark Mode

  어두운 배경 테마. 단순 반전이 아니라 순검정 대신 진회색, 채도 낮춘 강조색으로 다시 설계해야 합니다.

UX · 리서치 26

• UX / UIUser Experience / User Interface

  UI는 보이는 화면과 조작 요소, UX는 서비스를 쓰는 전체 경험. 예쁜 UI가 좋은 UX를 보장하지는 않습니다.

• 유저 리서치User Research

  인터뷰·설문·관찰로 사용자의 행동과 니즈를 파악하는 활동. 정성(왜)과 정량(얼마나)으로 나뉩니다.

• 페르소나Persona

  리서치를 바탕으로 만든 대표 가상 사용자. 이름·목표·불편을 붙여 팀이 같은 사람을 떠올리게 합니다.

• 유저 저니 맵User Journey Map

  사용자가 목표를 이루기까지의 단계별 행동·감정·접점을 시간순으로 그린 지도. 불편 구간을 찾는 도구.

• 정보 구조Information Architecture (IA)

  콘텐츠와 기능을 어떻게 나누고 이름 붙이고 연결할지 정하는 설계. 사이트맵이 그 결과물.

• 유저 플로우User Flow

  특정 목표(회원가입, 결제)를 위해 거치는 화면과 분기의 흐름도. 와이어프레임 전에 그립니다.

• 카드 소팅Card Sorting

  사용자에게 항목 카드를 분류하게 해 메뉴 구조를 정하는 리서치 방법.

• 사용성 테스트Usability Test

  실제 사용자에게 과제를 주고 수행 과정을 관찰하는 것. 5명만 해도 주요 문제의 대부분이 드러납니다.

• 휴리스틱 평가Heuristic Evaluation

  전문가가 닐슨의 10가지 원칙 같은 기준으로 UI를 점검하는 방법. 테스트보다 빠르고 저렴.

• A/B 테스트A/B Test

  두 버전을 나눠 보여 주고 지표(클릭·전환)로 우열을 가리는 실험.

• 접근성Accessibility (a11y)

  장애·환경에 관계없이 누구나 쓸 수 있게 만드는 것. 대비, 키보드 조작, 대체 텍스트, 스크린 리더 대응.

• 인지 부하Cognitive Load

  화면을 이해하는 데 드는 정신적 노력. 선택지·정보·장식을 줄일수록 낮아집니다.

• 힉의 법칙Hick's Law

  선택지가 많을수록 결정 시간이 길어진다. 메뉴는 줄이고 단계를 나눕니다.

• 피츠의 법칙Fitts's Law

  목표가 크고 가까울수록 빨리 누를 수 있다. 중요한 버튼은 크게, 엄지 근처에.

• 제이콥의 법칙Jakob's Law

  사용자는 다른 서비스에서 익힌 방식을 기대한다. 관습을 따르는 것이 대개 옳습니다.

• 멘탈 모델Mental Model

  사용자가 머릿속에 가진 "이건 이렇게 동작할 것"이라는 믿음. 여기에 맞추면 설명이 필요 없습니다.

• 다크 패턴Dark Pattern

  해지 버튼 숨기기, 기본 체크된 동의처럼 사용자를 속여 이익을 얻는 설계. 규제 대상이 되고 있습니다.

• 퍼널 / 전환율Funnel / Conversion Rate

  방문 → 가입 → 결제로 좁아지는 단계(퍼널)와 다음 단계로 넘어간 비율(전환율). 이탈 구간을 찾는 기본 지표.

• 리텐션Retention

  사용자가 다시 돌아오는 비율. 신규 유입보다 서비스 건강을 더 잘 보여 줍니다.

• KPI / OKRKPI / OKR

  성과를 재는 핵심 지표(KPI)와 목표·핵심 결과로 정리한 목표 관리 틀(OKR). 디자인 결정의 근거로 쓰입니다.

• MVPMinimum Viable Product

  핵심 가치만 담아 가장 빨리 내놓는 최소 제품. 완성도보다 검증 속도가 목적.

• 디자인 씽킹 / 더블 다이아몬드Design Thinking / Double Diamond

  공감→정의→아이디어→프로토타입→테스트, 또는 발견→정의→개발→전달로 문제를 넓혔다 좁히는 프로세스 모델.

• 애자일 / 스프린트Agile / Sprint

  1~2주 단위(스프린트)로 만들고 배포하고 개선을 반복하는 개발 방식. 디자이너도 스프린트 단위로 일합니다.

• 백로그Backlog

  해야 할 일의 우선순위 목록. 디자인 요청도 백로그에 쌓여 스프린트에 배정됩니다.

• JTBDJobs To Be Done

  사용자가 제품을 "고용"해 해결하려는 일에 집중하는 관점. "드릴이 아니라 구멍을 원한다".

• 히트맵Heatmap

  클릭·스크롤·시선이 몰리는 곳을 색으로 표시한 분석. 폴드 아래 콘텐츠가 얼마나 보이는지 확인.

개발 협업 19

• HTML / CSS / JSHTML / CSS / JavaScript

  HTML은 구조, CSS는 모양, JS는 동작. 디자이너가 CSS를 읽을 수 있으면 핸드오프 대화가 훨씬 정확해집니다.

• px / rem / emCSS Units

  px는 고정, rem은 루트 글자 크기 기준(보통 16px=1rem), em은 부모 기준. 접근성을 위해 글자는 rem 권장.

• 박스 모델Box Model (Margin · Padding · Border)

  요소는 내용 → 패딩(안쪽 여백) → 보더 → 마진(바깥 여백) 순으로 감싸입니다. Figma의 오토 레이아웃 패딩과 같은 개념.

• 플렉스박스 / 그리드Flexbox / CSS Grid

  한 방향 정렬은 플렉스, 행·열 2차원 배치는 그리드. 오토 레이아웃은 플렉스로 번역됩니다.

• 미디어 쿼리Media Query

  화면 폭·다크 모드 등 조건에 따라 다른 CSS를 적용하는 문법. 브레이크포인트가 여기서 구현됩니다.

• SVG / PNG / WebPImage Formats

  아이콘·로고는 SVG, 투명 이미지는 PNG, 사진은 WebP(또는 AVIF)가 가볍습니다. JPG는 점점 WebP로 대체.

• 이징Easing

  애니메이션 속도 곡선. ease-out은 빠르게 시작해 부드럽게 멈춰 UI에 가장 자연스럽습니다. 지속 시간은 150~300ms.

• z-indexz-index

  요소가 겹칠 때 위아래 순서. 모달·툴팁·드롭다운의 층 순서를 디자인 시스템에서 미리 정해 둡니다.

• 시맨틱 마크업Semantic Markup

  버튼은 button, 제목은 h1~h6처럼 의미에 맞는 태그를 쓰는 것. 접근성과 검색 노출의 기본.

• 컴포넌트 라이브러리 / 스토리북Component Library / Storybook

  코드로 구현된 컴포넌트 모음과 그것을 따로 띄워 보는 도구. 디자인 시스템의 개발 쪽 짝.

• CSS 변수CSS Custom Properties

  --color-primary처럼 값을 이름으로 저장하는 CSS 기능. 디자인 토큰이 코드에서 이 형태가 됩니다.

• 웹폰트 / FOUTWeb Font / FOUT

  서버에서 내려받는 폰트와, 로딩 전 대체 폰트가 잠깐 보이는 현상. 서브셋 폰트로 용량을 줄여 완화.

• 레이지 로딩Lazy Loading

  화면에 보일 때 이미지를 불러오는 기법. 긴 페이지의 초기 속도를 크게 개선.

• LCP / CLSCore Web Vitals

  구글의 성능 지표. LCP는 큰 콘텐츠가 뜨는 시간, CLS는 로딩 중 레이아웃이 튀는 정도. 이미지 크기를 지정하면 CLS가 줄어듭니다.

• QAQuality Assurance

  배포 전 오류를 찾는 검수. 디자인 QA는 구현이 시안과 다른 곳(간격, 색, 상태)을 잡아내는 단계.

• 스테이징 / 배포Staging / Deploy

  실제 서비스(프로덕션) 전에 검수하는 테스트 서버가 스테이징. "스테이징에 올렸어요"는 확인해 달라는 뜻.

• Git / PRGit / Pull Request

  코드 변경 이력을 관리하는 도구와, 변경을 합쳐 달라는 요청. 디자인 파일의 브랜치·버전 기능과 같은 개념.

• APIApplication Programming Interface

  프로그램끼리 데이터를 주고받는 약속. "API가 아직 없다"는 화면에 넣을 실제 데이터가 준비되지 않았다는 뜻.

• CMSContent Management System

  개발자 없이 콘텐츠를 올리고 고치는 관리 도구. WordPress, Webflow CMS 등. 템플릿 설계가 디자이너 몫.