💡 10분 안에 이런 걸 알려드려요!

• UX/UI 디자인의 기본 개념 정리
• 실무에서 자주 쓰이는 UX 용어 총정리
• 웹/앱 화면을 구성하는 핵심 UI 요소 살펴보기

안녕하세요, (주)인바이즈 디자이너 손주완입니다. 

UX/UI 디자인을 배우고 실무에 적용하다 보면 어떤 용어는 직관적으로 이해되지만, 어떤 용어는 아리송할 때가 있죠. 디자인 경력 몇 년 차라도 가끔 멘붕 오는 UX/UI 용어들! 이번 기회에 짚고 넘어가 보려고 해요. 자주 헷갈리는 개념부터 실무 용어, 화면을 구성하는 UI 요소까지 쉽고 간단하게 정리해 봤습니다. UX 디자이너라면 꼭 알아두어야 할 필수 용어, 같이 살펴볼까요?

UX/UI 디자인의 기본 개념

UX(User Experience) 디자인

사용자가 서비스나 제품을 이용하면서 겪게 되는 총체적 경험을 설계하는 것이 바로 UX 디자인이에요. 단순히 화면의 디자인뿐 아니라 사용자 리서치, 인터랙션 설계 등 넓은 범위를 아우르죠.

UI(User Interface) 디자인

UX 디자인이 사용자 경험 전반을 다룬다면, UI 디자인은 그중에서도 사용자가 직접 마주하게 되는 화면을 디자인하는 영역이라 할 수 있어요. 메뉴, 버튼, 아이콘, 슬라이더 등 다양한 시각적 요소를 다루게 되죠.

반응형 웹 (Responsive Web)

다양한 기기의 화면 크기에 맞게 웹페이지의 레이아웃이 자동으로 최적화되는 것을 반응형 웹이라고 해요. 요즘엔 반응형 웹이 거의 기본이 되어 가고 있죠.

프로토타입 (Prototype)

프로토타입은 디자인 과정에서 시제품처럼 만들어 보는 모형이에요. 와이어프레임처럼 간단한 선 그림일 수도 있고, 실제 서비스처럼 인터랙션이 가능한 고퀄리티 모형일 수도 있죠.
 

IA (Information Architecture)

IA는 정보 구조라는 뜻이에요. 웹이나 앱에 있는 정보를 어떻게 구조화하고 배치할 것인지를 고민하는 영역이죠.

자, 이렇게 기본 개념은 간단히 정리해 봤는데요. 조금 익숙해지셨나요? 그럼 이제부터 실무에서 자주 접하게 될 UX 관련 용어들을 살펴볼게요!
 

실무에서 만나는 UX 용어 총정리

A/B 테스팅

두 가지 버전의 디자인을 비교하여 더 나은 성과를 내는 쪽을 고르는 방법이에요. 사용성에 대한 가설을 검증하기에 아주 유용한 방법이죠.
 

접근성 (Accessibility)

접근성은 연령, 장애 여부와 관계없이 누구나 서비스를 이용할 수 있게 하는 것을 말해요. UI의 크기, 색상, 대체 텍스트 등을 고려하게 되죠.
 

에자일 (Agile), 스크럼 (Scrum)

에자일과 스크럼은 개발 방법론인데요, 짧은 주기로 반복하며 점진적으로 개발해 나가는 것이 특징이에요. UX 디자이너도 이 프로세스에 맞춰 일하는 경우가 많죠.

유스케이스 (Use Case)

유스케이스는 사용자가 서비스를 통해 달성하려는 목표를 말해요. 사용자의 니즈를 파악하고 경험을 설계할 때 중요한 기준이 되죠.

페르소나 (Persona)

페소나는 사용자 리서치 결과를 바탕으로 만들어낸 가상의 인물이에요. 주요 사용자 그룹의 특성과 니즈를 대표하는 캐릭터라고 볼 수 있죠.
 

사용성 테스트 (Usability Test)

실제 사용자를 대상으로 우리가 만든 서비스의 사용성을 평가하는 것이 사용성 테스트예요. 이를 통해 문제점을 발견하고 개선해 나갈 수 있죠.

휴리스틱 평가 (Heuristic Evaluation)

전문가가 휴리스틱(경험에 의한 법칙)을 기준으로 인터페이스를 분석하고 문제점을 찾아내는 것이 휴리스틱 평가예요.

자, 실무에서 자주 접하게 될 주요 UX 용어들, 한 번 훑어보셨나요? 이 외에도 정말 다양한 개념과 용어들이 있는데요. 외우려 하기보다는 프로젝트를 하면서 필요할 때마다 찾아보는 것도 좋은 방법 같아요.

UI를 구성하는 핵심 요소들

UX 디자이너로서 UI를 설계할 때 꼭 알아두면 좋은 UI 구성 요소들도 살펴볼게요.

• GNB : Global Navigation Bar의 약자로 사이트의 주요 메뉴를 보여주는 영역이에요.
• LNB : Local Navigation Bar의 약자로 GNB의 하위 메뉴를 의미해요.
• 푸터 : 웹페이지 맨 아래에 위치한 영역으로 주로 부가 정보를 제공하죠.
• 탭 : 콘텐츠를 구분할 때 사용하는 요소예요.
• 배너, 슬라이더 : 주로 홍보나 이벤트 목적으로 사용되는 시각적 요소들이에요.
• 브레드크럼 : 사용자의 현재 위치를 표시해주는 내비게이션 요소예요.

이 외에도 버튼, 폼, 테이블 등 정말 다양한 UI 요소들이 있죠. 디자인 가이드라인에 이런 요소들의 활용 기준을 잘 정의해 두는 것이 중요해요.
 

글을 마무리하며

UX/UI 디자인의 기본 개념부터 실무 용어, UI 구성 요소까지 가볍게 살펴봤는데요. 어떠셨나요? 생소한 용어들이 조금은 익숙해지셨길 바라요.

디자인 용어가 중요한 이유는 동료들과 커뮤니케이션할 때 명확하게 전달할 수 있어야 하기 때문이에요. 모호한 표현으로 인해 소통이 어려웠던 경험, 다들 있으시죠?

전문 용어를 알고 적재적소에 활용한다면 훨씬 더 스무스한 협업이 가능할 거예요.

이런 고민들을 해결해 주는 서비스가 있다면 정말 편리하겠죠? Optain은 바로 그런 고민에서 출발한 서비스예요. UX 디자이너의 업무 상황을 인지하고 맥락에 맞는 개념과 가이드를 바로 제안해 준답니다. 덕분에 용어 검색하고 문서 찾아보는 수고를 덜 수 있게 되죠. Optain과 함께라면 언제 어디서든 스마트한 디자이너로 거듭날 수 있을 거예요.

2, 3편에서는 또 어떤 용어들이 기다리고 있을까요? 다음 편도 기대해 주세요! 디자인 용어 마스터하고 멋진 UX 디자이너로 성장하시길 응원할게요! 화이팅! 😄
 

Optain - 당신만을 위한 AI 디자인 어시스턴트 👉 https://www.invaiz.com/optain