UI/UX 차이 개념부터 사용자 중심 사고까지 완벽 정리

 

안녕하세요 찐망고입니다~

이번달 말에 오랜만에 피그마만 수업을 해요 신남.

피그마 전자책 쓰다말고 개념 포스팅 하러 옴

 

구인공고보면 UI/UX디자이너를 구한다고 많이들 그러는데

UI와 UX는 정확히 뭘까요?

UI는 User Interface, 사용자 인터페이스라 불립니다.

사용자가 제품이나 서비스를 사용할 때 눈에 보이고 손으로 조작할 수 있는 모든 화면? 이죠

예를 들어 버튼이나 슬라이더, 화면구성요소, 색상, 타이포그래피 등등이요

아이폰과 아이패트 UI화면

 

UX는 User Experience, 사용자 경험을 뜻합니다.

사용자가 제품이나 서비스를 사용하는 전체과정에서 느끼는 경험을 뜻합니다.

어떤 앱을 실행했을 때 내가 원하는 정보를 빠르게 찾았는지,

사용하면서 불편하거나 복잡하진 않았는지, 

감정적으로 만족스러웠는지 등등을 말이죠

 

참고로 UX 설계 평가기준이 있는데 이 평가기준은 국제표준, 실무, 리서치에서 다양하게 활용되고

대표적으로 3가지 프레임워크를 많이 사용합니다.

 

1. ISO 9241-11: 사용성(Usability)의 3요소
2. Nielsen의 10가지 휴리스틱 평가 기준 (Heuristic Evaluation)
3. HEART 프레임워크 (Google UX팀)

 

ISO 9241-11: 사용성(Usability)의 3요소

국제 표준인 ISO 9241-11에서는 UX 평가 기준을 다음 세 가지로 정의합니다

전세계 UX리서치에서 표준 처럼 사용됩니다. 모든 UX 평가의 기준이죠.

평가 기준	설명
Effectiveness (효과성)	사용자가 목표를 얼마나 정확하게 달성했는가
Efficiency (효율성)	목표 달성에 소요된 시간, 노력, 자원이 얼마나 최적화되었는가
Satisfaction (만족도)	시스템 사용에 대한 주관적인 만족감

 

Nielsen의 10가지 휴리스틱 평가 기준 (Heuristic Evaluation)

UX리뷰회의나 컨설팅 시 가장 많이 쓰이는 체크리스트입니다.

Jakob Nielsen이 제안한 사용성 평가 원칙입니다.

아래 10가지는 UI설계뿐 아니라 전체 UX흐름을 평가하는데 사용됩니다.

기준	설명
1. 시스템 상태 가시성	사용자가 지금 어떤 상태인지 알 수 있도록 피드백 제공
2. 실제 세계와의 일치	시스템 언어가 사용자의 일상 언어와 유사해야 함
3. 사용자 통제와 자유	실수했을 때 되돌리기, 취소가 쉬워야 함
4. 일관성과 표준	동일한 단어, 버튼, 행동은 항상 같은 결과를 보여야 함
5. 오류 예방	발생 가능한 실수를 미리 방지해야 함
6. 인식보다 기억에 의존하지 않게	기억보다는 화면에서 보이도록 설계
7. 유연성과 효율성	초보자와 전문가 모두를 위한 설계 (예: 단축키)
8. 미니멀한 디자인	꼭 필요한 정보만 보여주기
9. 오류 인식 및 복구	오류 메시지가 이해 가능하고 해결책을 제시해야 함
10. 도움말과 문서	사용 중 막혔을 때 찾기 쉬운 도움말이 있어야 함

 

Google HEART 프레임워크

Google, Meta, Amazon 등 실리콘밸리 테크기업에서 기본적으로 사용합니다.

특히 지속적인 A/B 테스트, 기능 출시 후 사용자 반응 추적에 적합합니다.

UX 팀의 KPI 설정에 지금도 많이 활용됩니다.

항목	설명
Happiness	만족도, 감정적 반응 (설문, 피드백 등)
Engagement	얼마나 자주, 얼마나 오래 사용하는가
Adoption	신규 사용자 수, 기능 도입률
Retention	얼마나 오래 지속적으로 사용하는가
Task Success	사용자가 원하는 행동을 얼마나 잘 해냈는가 (정확도, 속도 등)

 

 

 

자 이, 

UI와 UX의 차이점이 느껴지시나요?

구분	UI	UX
초점	'보이는 것'과 '조작하는 것'	'느끼는 것'과 '경험하는 흐름'
목표	보기 좋고 사용하기 쉽게 만드는 것	사용자가 문제 없이 목적을 달성하게 돕는 것
예시	예쁜 버튼 디자인, 시각적 일관성	회원가입이 10초 안에 끝나서 만족한 경험

 

요약해보면, UI는 UX의 일부입니다. UX가 숲이라면 UI는 그 안에 하나의 나무일뿐..

글주제와 상관없는데 제 MBTI중 하나가 극 S거든요.. 숲을 못봄..극S는 그래서 경험이 아주 중요합니다.

 

 

UI라는 개념은 컴퓨터 등장 초기부터 있었는데요.

초기의 UI는 커맨드 라인(명령어 입력)에서 시작해, 그래픽 유저 인터페이스(GUI)로 발전했죠.

UX는 비교적 늦게 대중화된 개념이고,

1990년대, 애플에서 일하던 돈 노먼(Don Norman)이 

사용자 경험(User Experience)이라는 말을 처음 사용하며 개념화했어요.

 

참고로 이쯤에서 GUI는 뭐냐고 물어보는 분 계실텐데

GUI는 윈도우 창, 버튼, 드래그 아이콘 등등 UI의 하위 개념중 하나입니다. 

UI는 사용자와 시스템간의 모든 접점을 뜻하고 GUI는 UI중에서도 그래픽 기반의 인터페이스를 뜻하죠.

90~2000년대 GUI중심 PC시대에 폭발적으로 발전해서 플래시라는 프로그램이 찰떡이던 시절이있었는데

그이야긴 나중에 포스팅을..

 

다시 돌아와서 우리는 압니다.

진짜 UX는 아이폰의 전과 후로 나뉜다는 걸 

이쪽 포스팅도 나중에 할게요! 꼭 할게요! 

 

 

자 다시 본론으로 돌아와서, 

아래 예시 이미지로 보이는 Apple의 Face ID로 화면 잠금을 푸는 과정 자체가 대표적인 UX요소인데요.

이 짧은 과정안에 담긴 UX들을 풀어보면

1. 아무것도 누르지 않아도 화면을 보는것만으로 잠금해제 (학습없이 쓸수있는 경험)

2. 비밀번호 입력보다 빠르고 반복사용에도 피로도 없음

3. 인식중이라는 시각적 애니메이션, 인식 성공 시 초록 체크 화면(상황인지 설계)

4. 얼굴 인식이라는 고급기술로 편리하면서 안전함 (등록된 얼굴로만 잠금해제)

 

물론, 얼굴 아이콘이나 애니메이션, 체크 마크, 위치, 색상, 움직임등은 모두 UI죠

 

애플의 Face ID 화

 

Face ID라는 이 직관적인 기능을 3가지 UX평가프레임워크에 맞춰 분석 해볼까요?

 

ISO 9241-11: 효과성 · 효율성 · 만족도

항목	Face ID 적용 사례
효과성 (Effectiveness)	사용자가 정확하게 잠금 해제를 완료함.얼굴 인식에 실패하는 경우가 거의 없고, 동작이 확실함.
효율성 (Efficiency)	화면을 보는 것만으로 비밀번호 입력 없이 빠르게 접근 가능.비슷한 반복 작업에서 시간과 동작 수 최소화.
만족도 (Satisfaction)	물리적인 조작 없이 직관적이고 편리한 경험 제공.아무 것도 누르지 않아도 잠금이 풀리는 감정적 만족도가 높음.

 

결론:  Face ID는 명확하고 빠르며, 사용자에게 편안한 경험을 제공하므로 ISO기준에서 모두 👍👍👍

 

Nielsen의 10가지 휴리스틱으로 본 Face ID

휴리스틱 원칙	적용 방식
1. 시스템 상태 가시성	인식 중에는 애니메이션 아이콘, 완료 후에는 체크 마크로 상태 피드백을 제공.
2. 실제 세계와의 일치	얼굴을 보고 인식하는 동작은 현실과 직관적으로 일치함.
3. 사용자 통제와 자유	인식 실패 시 다른 방법(비밀번호 입력)으로 전환 가능함.
4. 일관성과 표준	모든 앱/기기에서 동일한 Face ID 플로우 제공.
5. 오류 예방	설정된 얼굴 외에는 인식하지 않음 → 보안성 유지
6. 인식보다 화면에 표시	현재 진행 중인 상태가 시각적 피드백으로 표현됨.
7. 유연성과 효율성	자주 사용하는 사람은 손도 안 대고 잠금 해제 → 전문 사용자 친화적
8. 미니멀한 디자인	불필요한 정보 없이 아이콘 하나로 기능 설명 완성.
9. 오류 진단 및 복구	인식 실패 시 메시지나 대체 입력 유도됨.
10. 도움말과 문서	설정 앱 내 Face ID 안내와 도움말 제공.

 

결론: Face ID는 거의 모든 휴리스틱 기준에 부합하는 이상적인 UX 구현 예

 

Google HEART 프레임워크로 본 Face ID

항목	Face ID 적용 사례
Happiness (만족도)	손도 안 대고 잠금 해제되는 쾌적한 경험 → 사용자 감정 만족도 매우 높음
Engagement (활용도)	매일 수십 번 기기를 여는 과정에서 Face ID를 반복 사용함
Adoption (도입률)	초기 설정 이후 거의 모든 사용자들이 지속적으로 사용
Retention (재사용률)	기능을 끄지 않고 계속 유지하며 사용하는 비율이 높음
Task Success (과업 성공률)	잠금 해제, 앱 인증, 결제 등에서 정확도 높고 실패율 낮음

 

결론: Face ID는 HEART 프레임워크 전 영역에서 성공적인 사용자 경험 사례로 평가

 

이런 방식으로 하나의 기능에 3가지 프레임 워크를 적용해서 분석을 해보는것도 추천해봅니다.

 

대표적인 사용자 경험들 있잖아요

구글 검색창 자동완성기능이나

카카오톡 읽음 표시, 

넷플릭스 자동재생이나

애플페이나 삼성페이 같은 결제 플로우나

에어비엔비 예약과정이나

핀터레스트 무한스크롤 피드 같은 것들이요. 

 

다들 알고는 있었던 UI, UX개념에 대해서 좀 정리가 되었을까요?

 

실제로 UI없이 UX는 존재할 수 없고, UX없이 UI는 무의미 합니다.

화면이 아무리 예뻐도 사용자가 답답하면 그건 실패한 UI이며,

기능이 아무리 좋아도 불친절한 인터페이스는 나쁜 UX에요.

 

결국 UX는 디자이너의 시선이 아니라 사용자의 입장에서 문제를 푸는 사고방식입니다.

UI를 잘 만든다는건 예쁘게 만드는걸 넘어서, 사용자가 고민하지 않아도 되는 흐름을 설계하는 것이죠

 

당신의 서비스는 예쁘기만 한가요? 

아니면 쓰는 사람을 진심으로 생각하나요?