#01tip:[PM 실무워크플로우 & 협업] 디자인팀과 소통할 때 오해를 줄여주는 필수 IT 테크 용어 50선 (10년 차 IT PM 실무 가이드)

IT 프로젝트 현장에서 PM과 디자이너의 소통이 어긋나는 가장 큰 이유는 ‘화면에 보이는 예쁨’의 영역과 ‘실제 코드로 구현되는 시스템 스펙’ 사이의 용어 맥락 차이 때문입니다.
50여 개 대형 프로젝트 현장에서 UI/UX 디자이너 및 브랜드 디자이너들과 합을 맞추며 검증한 디자인 팀과 소통할 때 오해를 줄여주는 필수 IT 테크 용어 50선을 실무 활용 맥락과 함께 정리합니다.

1. UI/UX & 레이아웃 영역 (01 ~ 10)

번호	용어	핵심 의미	PM 실무 활용 맥락
01	Breakpoint	반응형 웹에서 화면 크기에 따라 레이아웃이 바뀌는 기준 너비	“모바일 Breakpoint 기준을 375px로 맞추어 디자인 작업 진행해 주세요.”
02	Grid System	칼럼(Column) 기반으로 화면 요소의 정렬과 여백을 맞추는 가이드라인	“개발팀 구현 오차를 줄이기 위해 12컬럼 그리드 시스템을 적용했습니다.”
03	Gutter	그리드 컬럼과 컬럼 사이의 여백 공간	“모바일 화면에서는 여백 확 확보를 위해 Gutter 값을 16px로 줄여주세요.”
04	Safe Area	스마트폰 노치나 하단 홈 바 등에 디자인이 가리지 않는 안전 영역	“아이폰 15 디스플레이 하단 홈 바 영역과 Safe Area 간격 확인 필요합니다.”
05	Above the Fold	유저가 스크롤을 내리지 않고 화면 진입 시 가장 먼저 보는 최상단 영역	“이벤트 페이지의 CTA 버튼은 Above the Fold에 배치해 주세요.”
06	Affordance	요소의 형태만 보고도 ‘클릭 가능하다’는 것을 직관적으로 느끼게 하는 성질	“버튼에 입체감을 주어 유저의 클릭 행동 유도성(Affordance)을 높였습니다.”
07	Wireframe vs Prototype	선 중심의 정적 기획안(와이어프레임) vs 실제 클릭 동작이 구현된 모형(프로토타입)	“이번 C-Level 보고에는 와이어프레임 대신 피그마 프로토타입을 씁니다.”
08	Microcopy	버튼 문구, 에러 안내문 등 유저의 행동을 돕는 짧고 직관적인 텍스트	“결제 이탈률을 낮추기 위해 에러 메시지 마이크로카피를 수정했습니다.”
09	Heuristic Evaluation	사용성 원칙에 의거해 전문가 관점에서 UI/UX 문제점을 진단하는 기법	“신규 개편안에 대해 10가지 사용성 평가 원칙 기반의 자가 진단을 마쳤습니다.”
10	Dark Mode / Theme	어두운 배경에 맞추어 요소 간 대비를 재조정한 인터페이스 모드	“다크 모드 적용 시 브랜드 메인 컬러의 가독성 대비율(Contrast)을 점검하세요.”

2. 디자인 시스템 & 컴포넌트 영역 (11 ~ 20)

번호	용어	핵심 의미	PM 실무 활용 맥락
11	Design System	재사용 가능한 컴포넌트, 가이드라인, 코드를 하나로 묶은 설계 체계	“앱 전체의 디자인 일관성을 위해 디자인 시스템 구축이 시급합니다.”
12	Design Token	컬러, 폰트, 여백 등 디자인 최소 단위를 코드화(변수화)한 형태	“디자인 토큰을 사용하면 피그마에서 색상을 바꿨을 때 개발 코드에 자동 반영됩니다.”
13	Component	버튼, 입력창 등 재사용 가능하도록 모듈화된 최소 UI 단위	“공통 GNB 컴포넌트를 수정하면 연결된 모든 페이지에 일괄 적용됩니다.”
14	Variant	하나의 컴포넌트 안에서 크기, 상태별 변형 옵션을 그룹화한 속성	“피그마 컴포넌트 내에 Primary/Secondary 버튼 Variant를 구성해 주세요.”
15	Auto Layout	텍스트 길이나 내부 요소 크기에 따라 여백이 자동으로 조절되는 피그마 기능	“텍스트 변경 시 레이아웃이 깨지지 않도록 오토 레이아웃을 걸어두었습니다.”
16	Atomic Design	원자(Atom) $\rightarrow$ 분자 $\rightarrow$ 유기체 단계로 UI를 확장 설계하는 방법론	“아토믹 디자인 구조로 작업하여 신규 페이지 제작 공수를 50% 단축했습니다.”
17	State	유저 반응(Hover, Active, Disabled 등)에 따라 컴포넌트가 변화하는 상태	“입력창의 Disabled State 디자인이 누락되어 추가 작성을 요청했습니다.”
18	UI Kit	자주 쓰이는 UI 컴포넌트와 그래픽 요소를 모아둔 라이브러리 파일	“외주 협력사와의 신속한 협업을 위해 UI 키트를 전달했습니다.”
19	Iconography	통일된 선 두께, 비율, 규칙으로 제작된 브랜드 전용 아이콘 체계	“앱 내 아이콘 도께가 제각각이라 아이콘그래피 규격화 작업이 필요합니다.”
20	Style Guide	폰트 체계, 서체 크기, 컬러 팔레트 등 기본 규격을 명시한 문서	“텍스트 스타일 가이드에 지정되지 않은 폰트 크기 사용은 지양해 주세요.”

3. 인터랙션 & UX 요소 영역 (21 ~ 30)

번호	용어	핵심 의미	PM 실무 활용 맥락
21	Micro-interaction	‘좋아요’ 하트 클릭 시 퍼지는 피드백처럼 유저에게 기쁨을 주는 세심한 반응	“상품 담기 완료 시 소소한 마이크로 인터랙션을 넣어 유저 경험을 개선했습니다.”
22	Skeleton UI	콘텐츠 로딩 중 레이아웃의 뼈대를 미리 보여주어 체감 대기시간을 줄이는 UI	“목록 진입 시 체감 속도를 높이기 위해 스켈레톤 UI를 도입했습니다.”
23	Modal vs Bottom Sheet vs Toast	화면을 덮는 팝업(모달) vs 밑에서 올라오는 창(바텀시트) vs 스쳐가는 알림(토스트)	“단순 안내 메시지는 모달 대신 바텀시트나 토스트로 가볍게 처리해 주세요.”
24	Infinite Scroll vs Pagination	스크롤 시 무한 로딩(무한스크롤) vs 1, 2, 3 페이지 번호 이동(페이지네이션)	“상품 탐색형 페이지는 무한스크롤이, 구매 내역은 페이지네이션이 적합합니다.”
25	Parallax Scrolling	스크롤 시 배경과 전경의 이동 속도를 다르게 주어 입체감을 내는 효과	“브랜드 랜딩 페이지에 패럴랙스 스크롤링 기법을 반영했습니다.”
26	Splash Screen	앱 실행 시 로딩 동안 브랜드 로고와 함께 잠시 노출되는 대기 화면	“스플래시 스크린 노출 시간이 2초를 넘지 않도록 최적화해야 합니다.”
27	Accordion	메뉴나 FAQ처럼 접혔다 펼쳐지며 내용을 보여주는 UI 패턴	“FAQ 항목이 길어 가독성을 위해 아코디언 UI 형태로 변경했습니다.”
28	Stepper	회원가입, 결제 등 여러 단계를 거칠 때 현재 진행 위치를 보여주는 가이드 UI	“주문 결제 플로우 상단에 Stepper를 넣어 이탈률을 낮췄습니다.”
29	Lottie	애프터이펙트 애니메이션을 용량이 가벼운 JSON 코드로 변환한 파일	“앱 용량을 줄이기 위해 그래픽 애니메이션을 Lottie 파일로 수령했습니다.”
30	Haptic Feedback	버튼 터치 시 손끝으로 전해지는 정교한 진동 피드백	“스위치 버튼을 켤 때 촉각적인 햅틱 피드백을 추가하여 몰입감을 높였습니다.”

4. 디자인 핸드오프 & 엔지니어링 소통 영역 (31 ~ 40)

번호	용어	핵심 의미	PM 실무 활용 맥락
31	Design Handoff	완성된 디자인 자산과 가이드라인을 개발팀에 공식 이전하는 절차	“스프린트 시작 전 피그마를 통해 개발팀과 디자인 핸드오프 미팅을 진행합니다.”
32	Vector vs Raster (SVG vs PNG)	벡터(SVG, 해상도 손실 없음) vs 비트맵(PNG/WebP, 해상도 깨짐 발생 가능)	“아이콘 및 로고 자산은 깨짐 방지를 위해 반드시 SVG 파일로 전달해 주세요.”
33	Pixel Density / DP / PT	안드로이드(dp) 및 iOS(pt)에서 기기 해상도에 독립적으로 작용하는 단위	“iOS와 안드로이드 개발자의 공수 계산을 위해 pt와 dp 단위를 맞추어 표기했습니다.”
34	Aspect Ratio	이미지나 배너 컴포넌트의 가로 세로 비율 (예: 16:9, 1:1)	“카드 뉴스 배너 디자인 시 1:1 종횡비(Aspect Ratio)를 유지해 주세요.”
35	Asset Export	개발에 사용할 이미지, 아이콘을 1x, 2x, 3x 배수별 포맷으로 추출하는 작업	“개발자가 즉시 쓸 수 있도록 피그마 에셋 익스포트 설정을 미리 완료했습니다.”
36	Figma Component Property	피그마 내에서 텍스트 변경, 토글 켜기 등을 원클릭 제어하게 만든 속성	“컴포넌트 프로퍼티를 잘 잡아두어 기획 변경 시 디자인 수정이 빨라졌습니다.”
37	Viewport	유저가 현재 디스플레이를 통해 보고 있는 웹페이지의 실제 가시 영역	“모바일 뷰포트 높이(vh)에 맞추어 하단 CTA 버튼이 가리지 않게 조정했습니다.”
38	Web Accessibility (WA)	장애인 및 고령자도 불편 없이 이용 가능하게 하는 웹 접근성 가이드라인	“시각 장애인을 위해 이미지 에셋에 대체 텍스트(Alt Text) 지침을 포함시켰습니다.”
39	Redline / Spec Sheet	요소 간 여백, 폰트 규격, 컬러 값을 눈금선으로 명시한 디자인 스펙	“피그마 검수 도구를 통해 별도 레드라인 문서 작성 공수를 줄였습니다.”
40	CSS Flexbox / Grid	프론트엔드가 UI 디자인을 코드로 구현할 때 사용하는 레이아웃 배치 구조	“개발자가 Flexbox 구조로 쉽게 짜도록 디자인 요소 정렬을 그룹화했습니다.”

5. 유저 리서치 & 데이터 기반 디자인 영역 (41 ~ 50)

번호	용어	핵심 의미	PM 실무 활용 맥락
41	Information Architecture (IA)	서비스 내부 정보의 계층 구조와 메뉴 흐름을 체계화한 도면	“신규 서비스 기획 시 디자인 작업에 앞서 IA 구조도 완성을 선행합니다.”
42	User Journey Map	유저가 목표 달성을 위해 거치는 경험 전체를 시각화한 지도	“구매 여정 맵을 그려 유저가 가장 큰 페인 포인트를 느끼는 구간을 찾았습니다.”
43	Persona	타겟 유저층을 대표하는 가상의 인물 프로필 모델	“20대 대학생 페르소나의 라이프스타일에 맞추어 UI 톤앤매너를 설정했습니다.”
44	Pain Point	유저가 서비스를 이용하면서 느끼는 핵심 불편 및 장애 요소	“장바구니 진입 후 결제까지의 Pain Point를 해소하는 UX 개편을 진행합니다.”
45	Usability Testing (UT)	실제 유저에게 과업을 주고 UI/UX 수행 과정을 직접 관찰·개선하는 평가	“프로토타입 기반의 UT를 통해 메뉴 위치의 직관성 문제를 발굴했습니다.”
46	Heatmap	유저의 시선, 클릭, 스크롤 위치를 색상의 온도로 시각화한 데이터	“히트맵 분석 결과, 유저들이 하단 배너를 거의 클릭하지 않는 것을 확인했습니다.”
47	F-Pattern / Z-Pattern	웹/앱 화면을 훑어볼 때 형성되는 유저 시선의 이동 규칙	“텍스트 위주의 아티클 페이지는 F-Pattern 시선 이동을 고려해 배치했습니다.”
48	Card Sorting	유저가 카드를 직접 그룹화하게 하여 메뉴 IA의 직관성을 검증하는 조사	“카테고리 메뉴 재구성 시 카드 소팅 결과를 기반으로 라벨링을 확정했습니다.”
49	A/B Testing Design	기존 디자인(A)과 신규 디자인(B)을 동시 노출하여 지표 상승을 검증하는 실험	“메인 홈 배너 A/B 테스트 결과, B안의 클릭률(CTR)이 18% 높았습니다.”
50	Design Debt	빠른 배포를 위해 타협한 무질서함이 추후 시스템 일관성을 저해하는 현상	“누적된 디자인 부채를 청산하기 위해 이번 분기 디자인 시스템 정비를 단행합니다.”

[7tipbox 요약]
디자인 팀과의 성공적인 커뮤니케이션은 PM이 디자인 툴을 화려하게 다루는 데 있지 않습니다.
‘상황에 맞는 핵심 UI/UX 및 디자인 핸드오프 용어 50선의 맥락을 정확히 파악하고, 이를 개발 구현 가능성(Technical Feasibility) 및 비즈니스 KPI와 연계하여 리스크 없이 완수해 내는 시스템적인 소통 역량’이 50개 이상의 대형 프로젝트 현장에서 디자이너들의 자발적 몰입과 최상 수준의 제품 품질을 끌어낸 10년 차 IT PM의 핵심 실무 노하우입니다.