2025. 4. 26. 11:58ㆍUX·UI 디자인
📁 실무에서 진짜 쓰는 말들
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, 슬랙에서 용어 정리 노션 만들어두기
→ 새로 합류한 팀원도 금방 적응할 수 있어요.
✍️ 마무리하며
디자인을 잘하는 것도 중요하지만,
디자인을 잘 설명하고, 잘 전달하는 것도 정말 중요합니다.
용어를 잘 안다는 건,
단순히 ‘단어 하나’를 아는 게 아니라,
팀원과 빠르고 정확하게 협업할 수 있는 언어를 공유한다는 뜻이에요.
오늘 알려드린 용어들, 하나씩 익혀두면
실무에서도 훨씬 자신감 있게 커뮤니케이션하실 수 있을 거예요 😊
'UX·UI 디자인' 카테고리의 다른 글
구글 애널리틱스를 활용한 UX/UI 디자인 (0) | 2025.04.28 |
---|---|
UX/UI 포트폴리오 만들 때 꼭 넣어야 할 것들 (0) | 2025.04.28 |
선택의 심리학: 너무 많은 옵션은 왜 사용자를 혼란스럽게 만들까? (1) | 2025.04.26 |
고령자를 위한 UX 설계 전략 (1) | 2025.04.25 |
UX 디자이너가 주목해야 할 글로벌 디자인 어워드 (0) | 2025.04.25 |