디자인 실무에서 많이 쓰는 협업 용어 총정리

 

 

📁 실무에서 진짜 쓰는 말들
UX, UI, 웹 디자인 에이전시에서 실제로 사용하는 디자인 협업 용어

 

UX/UI 혹은 웹 디자인 실무에서
정말 자주 쓰이는 ‘디자인 협업 용어’ 에 대해 이야기해볼게요.

디자인 에이전시나 인하우스 팀에서 일해보신 분들은
“어, 이거 레이아웃만 먼저 따서 전달해줄 수 있어요?”
“지금 컴포넌트로 잡아놓은 상태예요”
“이거는 플로우상 드롭다운으로 가는 게 자연스럽겠네요”
같은 말들을 수도 없이 들어보셨을 텐데요.

문제는...
처음 들었을 땐 무슨 뜻인지 하나도 모르겠다는 거죠 😅
디자인 업계 특유의 ‘실무 용어’는 교과서에 나오지 않아서,
막상 실전에 들어가면 ‘말이 안 통하는 순간’ 이 자주 생기곤 해요.

그래서 오늘은!
📌 실제 에이전시에서 자주 쓰이는 디자인 용어
📌 왜 그렇게 말하는지, 의미와 맥락
📌 상황별 예시와 함께 정리

이렇게 총정리해드립니다.
디자이너 뿐 아니라, 기획자, 개발자, 클라이언트 모두에게 도움 되는 내용이에요 😊

---

🧩 협업 시 자주 쓰는 디자인 용어 20선

---

✅ 1. 와이어프레임 (Wireframe)

기획/초기 디자인 단계에서 가장 먼저 등장하는 용어!

• 뜻: 콘텐츠와 레이아웃을 대략적으로 구성한 화면 뼈대
• 주로 회색 박스, 텍스트 박스 등으로 구성됨
• 디테일보다 정보 구조와 흐름에 집중하는 단계예요.

📌 예시 대화

“와이어프레임 오늘 중으로 나올 수 있을까요?”
→ 시각적인 스타일 말고 구조 설계만 먼저 작업하겠다는 의미

---

✅ 2. 목업(Mockup)

와이어프레임에서 발전된 단계로,
실제 디자인처럼 보이게 만든 시각적 시안이에요.

• UI 요소, 색상, 이미지 등 브랜드 스타일 반영
• 실제 앱/웹처럼 보여주되, 기능은 없음

📌 예시

“이번 시안은 목업이라 기능은 없어요~”
→ 인터랙션 없이 디자인 느낌만 전달한다는 말

---

✅ 3. 하이피델리티 / 로우피델리티 (High/Low Fidelity)

피델리티 = 디테일의 정도를 뜻해요.

• 로우파이(Lo-fi): 스케치 수준, 구조 중심
• 하이파이(Hi-fi): 실제 디자인처럼 완성도 높음

📌 실무 예시

“이건 하이파이로 잡고 피그마 넘겨드릴게요.”
→ 정교한 디자인 시안으로 작업하겠다는 뜻

---

✅ 4. 디자인 시스템 (Design System)

디자인에서 반복적으로 사용하는 요소들을
통일된 규칙으로 묶은 시스템

• 색상, 버튼, 폰트, 카드, 마진 등
• Figma 등 툴에서 컴포넌트로 관리

📌 실무 예시

“이건 디자인 시스템에 등록된 버튼 써주세요.”
→ 이미 만들어진 UI 규칙을 따르자는 의미

---

✅ 5. 컴포넌트(Component)

재사용 가능한 디자인 단위

• 버튼, 입력창, 탭 메뉴 같은 요소
• 수정 시 모든 인스턴스에 자동 반영 가능

📌 실무 예시

“컴포넌트로 묶어놨으니까 수정 한 번만 하면 돼요!”

---

✅ 6. 인스턴스(Instance)

컴포넌트를 복제한 개별 요소
(본체는 아니지만 본체와 연결된 복사본)

📌 실무 예시

“여기 인스턴스 깨져있네요.”
→ 컴포넌트 구조가 끊겼다는 의미 (주의!)

---

✅ 7. 플로우(Flow)

사용자가 이동하는 화면/기능의 흐름

📌 실무 예시

“회원가입 플로우는 총 4단계로 나누려고요.”
→ UX 흐름 기준으로 화면 설계 중이라는 뜻

---

✅ 8. 모달(Modal)

현재 화면 위에 뜨는 임시 창 (팝업창과 유사)

📌 실무 예시

“이건 모달이 아니라 페이지 전환으로 가는 게 좋겠어요.”
→ 사용자 흐름상 별도 페이지가 더 나을 수 있음

---

✅ 9. CTA(Call To Action)

사용자 행동을 유도하는 핵심 버튼

📌 실무 예시

“여기 CTA 버튼 너무 작아서 클릭률 떨어질 수 있어요.”

---

✅ 10. 픽셀 퍼펙트(Pixel Perfect)

디자인 시안과 개발 결과물이 픽셀 단위까지 동일한 상태

📌 실무 예시

“개발 결과물이 픽셀 퍼펙트가 아니에요.”
→ 디자이너가 의도한 UI에서 미세하게 어긋났다는 의미

---

✅ 11. 마진(Margin) / 패딩(Padding)

• 마진: 요소 간 간격
• 패딩: 내부 여백

📌 실무 예시

“텍스트랑 버튼 사이 마진 조금만 더 주세요~”

---

✅ 12. 레이어(Layer)

디자인 파일에서 위아래 쌓이는 구조

📌 실무 예시

“이거 레이어 순서가 잘못돼서 버튼이 안 눌려요.”

---

✅ 13. 드롭다운(Dropdown)

눌렀을 때 아래로 펼쳐지는 선택 메뉴

📌 실무 예시

“이 부분은 라디오 버튼보다 드롭다운이 나을 것 같아요.”

---

✅ 14. 레퍼런스(Reference)

디자인 아이디어나 방향성을 참고할 수 있는 사례

📌 실무 예시

“레퍼런스 몇 개 모아서 공유드릴게요~”

---

✅ 15. 퍼블리싱(Publishing)

디자인을 웹에서 구현하는 HTML/CSS 작업

📌 실무 예시

“디자인은 완료됐고, 이제 퍼블리싱 들어가요.”

---

✅ 16. 브랜드 톤 앤 매너(Tone & Manner)

서비스가 주는 분위기와 커뮤니케이션 스타일

📌 실무 예시

“디자인은 잘했는데, 브랜드 톤 앤 매너랑 좀 안 맞아요.”

---

✅ 17. 반응형 디자인(Responsive Design)

기기 해상도에 따라 레이아웃이 자동 조정되는 설계 방식

📌 실무 예시

“이 시안은 반응형까지 고려돼 있나요?”

---

✅ 18. 휴먼 센터드 디자인(HCD)

사람(사용자)의 입장에서 설계하는 UX 접근법

📌 실무 예시

“기능은 좋은데 휴먼 센터드하게 설계가 안 됐어요.”

---

✅ 19. 디자인 QA (Quality Assurance)

디자인 시안과 실제 결과물 간의 차이를 점검하는 과정

📌 실무 예시

“디자인 QA 체크하고 수정사항 취합해드릴게요.”

---

✅ 20. 스펙(Spec)

디자인 사양서 (폰트, 색상, 크기 등 상세 정보 포함)

📌 실무 예시

“개발팀에 넘길 스펙 정리해주세요~”

---

🧠 실무에선 ‘정확한 용어’가 협업 속도입니다

디자인 실무는 혼자 일하는 게 아니라
기획자, 개발자, 클라이언트와 함께하는 협업이에요.
그만큼 용어를 정확하게 알고 쓰면,

• 커뮤니케이션 속도가 빨라지고
• 피드백도 더 정확하게 오가며
• 디자이너의 신뢰도도 올라가요!

---

💡 디자이너가 꼭 기억해야 할 꿀팁!

✅ 모르는 용어가 나오면 물어보는 걸 두려워하지 마세요.
→ 협업은 결국 ‘이해’에서 시작돼요.

✅ 용어는 팀마다 약간씩 다를 수 있어요.
→ 미리 기준을 맞춰두는 것도 좋아요!

✅ Figma, Notion, 슬랙에서 용어 정리 노션 만들어두기
→ 새로 합류한 팀원도 금방 적응할 수 있어요.

---

✍️ 마무리하며

디자인을 잘하는 것도 중요하지만,
디자인을 잘 설명하고, 잘 전달하는 것도 정말 중요합니다.

용어를 잘 안다는 건,
단순히 ‘단어 하나’를 아는 게 아니라,
팀원과 빠르고 정확하게 협업할 수 있는 언어를 공유한다는 뜻이에요.

오늘 알려드린 용어들, 하나씩 익혀두면
실무에서도 훨씬 자신감 있게 커뮤니케이션하실 수 있을 거예요 😊