Ch01_1_UI의 이해

1. interface의 구분

•인터페이스(Interface): 서로 다른 두 시스템이나 장치 또는 소프트웨어 등을 이어주는 접속 장치

•인터페이스는 연결하는 대상에 따라 크게 하드웨어 인터페이스, 소프트웨어 인터페이스, 사용자 인터페이스로 구분

•UI : User interface (사람과 기계의 연결 : Man-Machine Interface)

•HCI : Human  Computer Interaction

 

2. UI의 영역 확장

•시대적 변화에 따라 UI와 UX의 개념과 영역은 점차 확장되거나 변형되고 있다.

•User Interface -> User eXperience

•사용자와 상호작용하는 하드웨어 및 소프트웨어의 변화에 따른 UI  변경

UI의 확장

3. UI의 종류 - 회상 → 인식 → 체화

1.CLI(Command Line Interface):

사용자가 인터페이스에 단일 명령을 입력하면 컴퓨터가 수신하고 같은 방식으로 프롬프트에 응답하는 구조.
CLI는 키보드로 명령어를 기억하고 정확히 입력하여 시스템을 조작하는 방식이다. 인간–컴퓨터의 소통을 텍스트 언어로 환원한 형태이며, 시스템의 개념 구조를 사용자가 문법과 명령 집합으로 학습해야 한다는 점이 특징이다.

높은 회상(recall) 요구, 작업기억 부하가 큼, 문법 오류에 민감하다. 사용자는 “무엇을 할지”를 머릿속에서 계획하고, 구문으로 번역하여 입력한 뒤, 피드백을 해석하는 내적 처리 중심의 인지 전략을 사용한다. 따라서 일관된 명령 체계, 좋은 에러 메시지, 자동 완성·템플릿 제공이 필수이다. 오류 예방보다 오류 복구 비용이 컸기 때문에 신중한 설계가 중요하였다.

2.GUI (Graphic User Interface):

아이콘이나 그림과 같은 그래픽 요소를 배치하고, 마우스 등의 포인팅 장치를 이용해 조작한다.
GUI는 아이콘·창·메뉴·포인터(WIMP)로 대표되는 직접 조작(Direct Manipulation) 패러다임이다. 과업의 대상과 조작 수단을 화면에 눈앞에 배치함으로써 “기억보다 인식 (Recognition over Recall)”을 가능하게 하였다.

- Metaphors 메타포 : 은유에 의존

시각적 인식과 공간 기억을 활용하여 탐색한다. 즉시성 있는 피드백이 행동–결과의 인과를 강화하고, 정신적 모델을 외부 표상(아이콘·레이아웃)으로 외재화함으로써 인지 부하를 줄인다. 따라서 가시성·일관성·피드백이 핵심이다. 목표물 크기·거리(피츠의 법칙), 선택 수(히크–하이먼 법칙), 대비·계층 구조가 성능을 좌우한다. 메타포와 시그니파이어로 조작 가능성을 표지해야 한다.

3.NUI (Natural User Interface):

사람과 컴퓨터의 상호작용을 위한 시스템으로, 사용자의 일상적 행동과 관련된 직관적인 동작을 통해 작동.

NUI는 터치·제스처·시선·음성 등 신체적·자연어적 입력을 채택하여 상호작용을 행동 그 자체에 가깝게 만든다. 모바일·IoT·AI의 확산과 함께 맥락 인식과 개인화가 결합되어 일상적 행위가 곧 입력이 된다.

조작이 암묵적이고 체화(embodied)되어 절차기억과 운동기억을 활용한다. 텍스트·아이콘 해석보다 행동–감각 피드백이 중심이며, 음성 인터페이스에서는 언어 생성 부담과 단기 기억의 선형성이 성능에 영향을 준다. 따라서, 큰 터치 타깃, 오류 관용성, 상태 시각화가 필수이다. 제스처는 명시적 시그니처(힌트, 튜토리얼, 모션 프롬프트)로 드러내고, 음성은 피드포워드(무엇을 말할 수 있는지)와 피드백(무엇을 인식했는지)을 명료히 제공해야 한다.

•멀티터치, 동작 인식, 음성 인식, 뇌파 인식, 시선 추적, 표정 인식, 생체 인식 등

•Sensor를 활용한 UI

•Skinput. EyeTap…

•NUI는 상호작용을 위한 중간 장치에 의존하지만, 고급 NUI는 눈에 잘 띄지 않아 보이지 않는 것처럼 느껴질 수 있다.

 

•제스처 인식 시스템은 사용자의 동작을 추적해 그 동작을 지침으로 변환한다.

 

 

•VUI : Voice User interface -

시스템은 사용자가 말한 단어와 문장을 식별하고 기계가 읽을 수 있는 형식으로 변환한 후 명령을 수행한다.

 

4.OUI : NUI에 새로운 요소가 추가

•OUI(Organic User Interface): 모든 사물을 입출력 장치로 변환할 수 있고, 인터페이스의 모양이나 상태도 자유롭게 변형할 수 있음

NUI는 자연스러운 상호작용을 중점으로 두는 반면, OUI는 실제 물리적 세계를 디지털 세계와 더 가깝게 연결하려는 노력

기능이 형태를 좌우한다.

UI의 진화는 언어적 지시(명령)에서 시각적 표상(직접 조작)을 거쳐 신체적 행위와 맥락(자연스러운 상호작용)으로 이동해 왔으며, 그에 따라 인간은 기억 중심 → 인식 중심 → 체화 중심의 인지 전략으로 변모하였다. 오늘의 설계는 이 세 흐름을 통합하여, 사용자의 상황·능력·선호에 맞춘 다중 경로 인터랙션을 제공하는 것이 최적의 해법이다.

---

UI의 Intend(의도성)과 Affordance(유도성)

UI(User Interface) 디자인에서 중요한 개념 중 하나가 의도성(Intend)과 유도성(Affordance)이다. 두 개념은 사용자가 시스템과 상호작용할 때 무엇을 할 수 있는지, 그리고 어떻게 해야 하는지를 직관적으로 알 수 있도록 돕는 핵심 원리이다. 이는 사용자가 직관적으로 시스템을 사용하고, 특정 작업을 수행하도록 돕기 위한 중요한 개념이다.

의도성(intend)의 주요 특징:

1. 명확한 목적: UI는 사용자가 시스템을 어떻게 사용하길 원하는지를 분명하게 전달해야 한다. 예를 들어, 버튼의 크기나 색상을 통해 클릭을 유도하거나, 단계적인 안내를 통해 사용자가 다음에 무엇을 해야 하는지 알 수 있도록 한다. 예를 들어, 휴지통 아이콘은 “삭제”라는 명확한 의도를 가지고 있으며, 사용자는 아이콘의 모양을 통해 그것이 무엇을 의미하는지 쉽게 이해할 수 있다.
2. 피드백 제공: 사용자가 특정 행동을 수행했을 때, 그에 대한 명확한 피드백을 제공하여 다음 행동을 결정하는 데 도움을 준다. 이는 사용자에게 시스템이 정상적으로 작동하고 있음을 알리고, 계속해서 올바른 경로로 진행할 수 있도록 돕는다.
3. 사용자 경험 최적화: UI의 의도성은 단순히 사용자가 시스템을 사용하는 데 어려움을 겪지 않도록 하는 것을 넘어, 사용자가 즐겁고 만족스러운 경험을 할 수 있도록 돕는 것을 목표로 한다. 이를 위해 다양한 요소들이 복합적으로 작용해 사용자가 자연스럽게 시스템을 탐색하고 이용할 수 있도록 설계한다.

결국, UI에서 의도성은 사용자가 시스템을 사용하는 과정에서 혼란을 최소화하고, 원활하게 목표를 달성할 수 있도록 돕는 핵심적인 디자인 원칙 중 하나이다.

유도성(Affordance)의 주요 특징:

• 인터페이스의 형태나 속성이 사용자가 특정 행동을 하도록 직관적으로 유도하는 성질을 의미한다. 즉, “이것은 이렇게 사용할 수 있다”라는 가능성을 암시해 주는 단서이다.
• 예를 들어, 버튼이 돌출되어 있고 색이 강조되어 있으면 사용자는 자연스럽게 “이것은 눌러야 한다”는 느낌을 받는다. 스크롤 바는 “끌어서 움직일 수 있다”는 행동을 유도한다.
• 핵심 포인트: 유도성은 사용자 스스로 행동을 발견(discoverability)하게 만들며, 별도의 설명 없이도 시스템을 사용할 수 있게 한다.

예를 들어, “저장” 버튼이 디스크 아이콘 모양으로 설계되었다면,

• 설계자의 의도성은 “파일을 저장하라”이다.
• 사용자의 유도성은 디스크 모양과 버튼의 위치, 돌출된 형태 등을 보고 “이것을 눌러 저장할 수 있겠구나”라고 자연스럽게 느끼는 것이다.

---

실습: UI 요소 속 의도성과 유도성 찾기

• UI 디자인에서 의도성과 유도성의 개념을 실제 사례를 통해 이해한다.
• 학생들이 일상적으로 사용하는 앱 속에서 UI 요소가 어떤 기능적 의미(의도성)를 가지며, 어떤 행동 단서(유도성)를 제공하는지 직접 탐구한다.

실습 방법

1. 학생들은 자신이 자주 사용하는 앱(예: 카카오톡, 인스타그램, 네이버, 은행 앱 등)을 열어본다.
2. 앱 화면에서 대표적인 UI 요소 3가지를 선택한다.
   • 버튼(예: 전송 버튼)
   • 아이콘(예: 휴지통 아이콘)
   • 입력창(예: 검색창)
3. 각 요소에 대해 다음을 작성한다.
   • 의도성(Intend): 설계자가 부여한 목적은 무엇인가? (예: “이 버튼을 눌러 메시지를 보낸다”)
   • 유도성(Affordance): 사용자가 어떤 행동을 하도록 직관적으로 유도하는가? (예: “돌출된 파란색 버튼은 ‘눌러야 한다’는 느낌을 준다”)
4. 간단히 스크린샷을 찍고, 요소별로 역할을 한두 문장으로 설명한다.

---

4. UI 평가 기준

우리가 어떤 시스템이나 앱을 사용할 때, '이거 편하다', '불편하다'라고 말하죠? 사실 이게 그냥 개인적인 느낌만이 아니라, 학문적으로도 평가할 수 있는 기준이 있습니다. 대표적으로 제이콥 닐슨(Jakob Nielsen)이라는 사용성 전문가가 정리한 다섯 가지 기준이 있는데요. 이 기준은 지금도 전 세계에서 널리 쓰이고 있습니다.

• 사용성(Usability): 특정 사용자가 지정된 환경에서 효율성(Efficiency)과 만족도(Satisfaction)를 바탕으로 목표를 달성할 수 있도록 제품을 사용할 수 있는 범위를 의미한다.

첫째, 용이성(Learnability)입니다. 처음 만나는 앱이라도 금방 배워서 쓸 수 있어야 합니다. 예를 들어, 우리가 새로 깔은 배달 앱이 있다고 합시다. 메뉴를 찾고, 장바구니에 담고, 결제하는 과정을 처음 해보는데도 어렵지 않고 직관적이라면, 이 앱은 ‘용이성’이 높은 겁니다.

둘째, 효율성(Efficiency)입니다. 이미 사용법을 익힌 사용자라면, 반복적으로 사용할 때 빠르고 효율적으로 원하는 작업을 할 수 있어야 합니다. 예를 들어 매번 로그인 과정이 번거롭거나 결제 단계가 길다면 효율성이 떨어지는 것이죠.

셋째, 기억성(Memorability)입니다. 한동안 안 쓰다가 다시 들어왔을 때도 쉽게 기억해서 쓸 수 있어야 합니다. '아, 이 버튼이 여기 있었지' 하고 바로 찾아낼 수 있다면 좋은 UI인 겁니다.

넷째, 오류(Error)입니다. 사용자가 실수하더라도 그 실수를 쉽게 복구할 수 있어야 합니다. 예를 들어 쇼핑몰에서 주소를 잘못 입력했을 때 자동으로 추천해주거나, '정말 삭제하시겠습니까?' 같은 확인창이 나온다면 오류를 줄이는 좋은 UI라고 볼 수 있습니다.

마지막으로 만족성(Satisfaction)입니다. 단순히 기능만 되는 게 아니라, 쓰면서 즐겁고 편리한 느낌을 주어야 합니다. 요즘 앱들은 심미적인 디자인과 애니메이션 효과까지 신경 쓰는 이유가 바로 사용자 만족도를 높이기 위해서입니다.

---

5. 휴리스틱 평가

이런 기준을 가지고 실제로 UI를 평가하려면 어떻게 할까요?
 
휴리스틱을 간단하게 정의한다면 ‘어림짐작’ 또는 ‘대충 내린 결정’ 정도
인간은 합리적이지 않고 선입견을 가진 존재

 

• 대표성 휴리스틱 : 일부만으로 전체를 판단하는 것
  -  따라서 디자이너는 인터페이스를 설계할 때 사용자가 선입견 때문에 잘못된 선택을 하지 않도록  신경을 쓰야 한다.
  -  암묵적인 UI 약속을 지키자.
  - * 다크 넛지Dark Nudge : 사용자가 어떠한 의도를 가지고 옵션을 선택하지만 의도와는 다른 일이 발생한 것이다. 이는 사용자에게 나쁜 선택을 요구하는 것이다.
• 가용성 휴리스틱 : 자신의 경험, 기억에 의존해 무언가를 더 과장되게 판단하는 것

디자이너는 각 서비스 영역마다 형성된 사용성 패턴을 파악해 인터페이스에 잘 녹일 수 있도록 노력

---

휴리스틱 평가(Heuristic Evaluation)는 사용성 테스트의 일종입니다.
휴리스틱이라는 단어는 '직관적으로 문제를 해결하는' 방식을 의미하는데,
이 평가에서는 일반적으로 사용성에 대한 "베스트 프랙티스" 또는 일종의 '지침'을 사용합니다.
이 지침들을 따라 웹사이트나 앱 등의 사용자 인터페이스가 얼마나 사용하기 쉬운지를
전문가가 평가하는 것입니다.

예를 들어, 한 전문가가 쇼핑 웹사이트의 사용성을 테스트한다고 가정해 봅시다. 이 전문가는 다음과 같은 일반적인 휴리스틱 지침을 가지고 웹사이트를 살펴볼 것입니다:

1. 사용자에게 시스템이 현재 무엇을 하고 있는지 명확하게 보여준다.
2. 단순하고 일관된 디자인을 사용한다.
3. 오류를 방지하거나, 발생한 오류에서 쉽게 복구할 수 있게 한다.
4. 사용자가 원하는 정보나 기능을 쉽게 찾을 수 있게 한다.

전문가는 이런 지침에 따라 웹사이트를 검토하고, 어떤 부분이 잘 되어 있는지, 어떤 부분이 개선이 필요한지를 보고서로 정리합니다. 이런 방식의 장점은 빠르고 비교적 저렴하게 초기 단계에서 큰 문제점을 찾아낼 수 있다는 것입니다. 그러나 이것이 사용자 테스트를 완전히 대체할 수 있는 것은 아니며, 실제 사용자들의 피드백도 함께 고려해야 합니다.

정리하면, 휴리스틱 평가는 빠르고 저렴하게 문제를 찾아낼 수 있다는 장점이 있지만, 전문가 의존성과 사용자 관점 부족, 주관성 같은 단점이 있습니다. 그래서 현업에서는 보통 ‘휴리스틱 평가 + 사용자 테스트’를 함께 사용해서 보완합니다."

---

제이콥 닐슨(Jakob Nielsen)의 휴리스틱 평가

제이콥 닐슨(Jakob Nielsen)은 사용자 인터페이스(UI) 디자인과 사용성에 관한 선도적인 전문가 중 하나입니다. 그는 사용성 평가를 위한 10가지 휴리스틱 원칙을 제시했는데, 이 원칙들은 디자인의 사용성을 빠르게 평가하는데 도움이 됩니다.

1. 시스템 상태의 가시성 (Visibility of System Status)
   • 사용자가 시스템이 현재 무엇을 하고 있는지 쉽게 알 수 있어야 합니다.
   • 로딩바, 스피너(짧은로딩)
2. 시스템과 실제 세계 사이의 일치 (Match between System and the Real World)
   • 전문용어 대신 사용자 언어·현실적 메타포를 사용해야 한다. 시스템이 사용자에게 친숙한 언어와 개념을 사용해야 한다.
      즉, 예: 휴지통 아이콘, “장바구니” 명칭 등이다.
3. 사용자 제어와 자유 (User Control and Freedom)
   • 잘못된 경로에 들어갔을 때 되돌리기/재실행, 취소, 이전 단계로 돌아가기가 쉬워야 한다.
     예: 장바구니 ‘되돌리기’ 스낵바, 다이얼로그의 ‘취소’이다.
4. 일관성과 표준 (Consistency and Standards)
   • 단어, 상황, 액션 등이 일관되게 사용되어야 합니다.( 유사한 요소는 동일하게 보이고 동일하게 작동)
   • 플랫폼 가이드라인(iOS HIG, Material)을 따르는 것이 핵심이다.
5. 오류 예방 (Error Prevention)
   • 시스템이 사용자가 오류를 범할 가능성을 최대한 줄이는 디자인이 필요합니다.
   • 오류 발생 후 복구보다 사전 방지가 낫다.
   • 예: 비밀번호 규칙 실시간 검증, 위험 작업 전 재확인
6. 기억보다는 직관적으로 (Recognition Rather Than Recall)
   • 사용자가 정보를 기억하게 하지 말고, 필요한 정보를 쉽게 인식할 수 있게 해야 합니다.
   • 예: 검색창만 노출하는 대신 추천 키워드 등을 같이 제공, 아이콘과 텍스트를 함께 사용 등).
7. 유연성과 효율성의 극대화 (Flexibility and Efficiency of Use)
   • 초보자와 숙련자 모두 사용하기 쉬워야 하며, 숙련자에게는 단축키 등을 제공할 수 있습니다.
   • 예: 자주 쓰는 메뉴 모음, 단축키, 순서 변경 등.
8. 미학적이고 미니멀 디자인 (Aesthetic and Minimalist Design)
   • 불필요한 정보는 없어야 하며, 필요한 정보만을 제공해야 합니다.( 인지 부하를 줄인다.)
   • 관계없는 요소를 제거
   • 예: 결제 단계의 군더더기 제거.
9. 오류를 도와주기 (Help Users Recognize, Diagnose, and Recover from Errors)
   • 오류 메시지는 명확하고 해결책을 제시해야 합니다.
   • 에러 메시지는 원인·영향·해결 행동을 평이한 언어로 제시
   • 예: “카드 유효기간이 만료되었습니다. 새 유효기간을 입력하세요”이다.
10. 도움말과 문서 (Help and Documentation)
    • 필요한 경우, 사용자가 참조할 수 있는 검색 가능한 도움말·튜토리얼·FAQ 가 제공되어야 합니다.

이러한 휴리스틱 원칙들은 전문가가 어플리케이션 또는 웹사이트를 신속하게 평가하고 문제점을 식별할 수 있게 돕습니다. 단, 이것은 초기 단계의 빠른 검사용이며, 실제 사용자 테스트를 완전히 대체할 수 있는 것은 아닙니다.

휴리스틱 10문항

1. 시스템은 적절한 시간과 피드백으로 사용자에게 진행 사항을 알려주고 있는가?
2. 전문적인 용어 대신 사용자에게 친숙한 단어를 사용하고 있는가?
3. 사용자가 자신의 실수를 금세 바로잡을 수 있는가?
4. 서비스 전체에 일관성과 기준이 느껴지는가?
5. 사용자의 실수로 원치 않은 결과가 나올 때 즉각 인지 할 수 있는가?
6. 기능을 익힐 필요 없이 직관적으로 이해할 수 있는가?
7. 숙련 사용자를 위한 배려가 되어있는가?
8. 심미적이고 미니멀한 디자인인가?
9. 에러 문구는 해결책을 빠르게 제공하고 있는가?
10. 사용자가 문제에 부딪혔을 때 기능에 대한 도움말을 빠르게 찾아볼 수 있는가?

참고:심각도(Severity) 등급 예시

• 0: 문제 아님
• 1(치장 수준): 수정 시 좋음, 긴급 아님
• 2(경미): 사용성에 약한 영향, 수정 권장
• 3(중대): 주요 태스크 방해, 우선 수정 필요
• 4(치명): 작업 수행 불가/심각한 오류, 즉시 조치

평가 시 발생 빈도, 영향도, 지속성을 함께 고려하여 등급을 매긴다.

---

UI 요소들...

• 체크 박스Check Box
• 라디오 버튼Radio Button 
• 드롭다운 목록Dropdown Lis
• 스피너Spinner 
• 텍스트 필드Text Field 
• 검색 필드Search Field 
• 브레드크럼Breadcrumb 웹/앱에서 사용자의 위치를 파악하기 위한 디자인 요소로
• 페이징Pagination 한 페이지에 나오는 콘텐츠 양이 일정량을 넘을 때 분류
• 태그Tags 유사한 콘텐츠를 분류하기 위한 인터페이스로
• 알림Notification 새로운 정보가 도착했다는 것을 알리는 인터페이스
• 진행 바Progress Bar 로딩이 길 때 사용하는 인터페이스.
• 스피너 로딩Spinner Loading 진행 바보다 짧은 로딩에 사용하는 인터페이스로
• 툴팁Tooltip 기능 아이콘에 추가 설명이 필요할 때 마우스 포인트를 얹으면 나타나는 설명 창
• 팝업Pop up 사용자 진행을 돕거나 시스템 오류 같은 공지가 필요할 때 사용한다
• 툴바Tool Bar 주요 기능을 모아 놓은 인터페이스로,
• GNBGlobal Navigation Bar 주로 웹 페이지 상단에 있으며 클릭하면 링크된 페이지로 이동할 수 있다
• 탭바Tab Bar 모바일 앱 하단에 표시되는 아이콘 모음
• 모달 윈도우Modal Window 기존 페이지와 부모-자식 관계의 창이 뜰 때 
• 토스트 팝업Toast Pop-up 진행에 필요한 간단한 피드백을 제공
• 아코디언Accordion 전달할 내용이 많고 항목에 따라 내용이 나뉠 때 사용하는 인터페이
• 빈 화면Empty Data 표시할 데이터가 없을 때 띄우는 화면이다
• 코치 마크Coach Marks : 사용자가 처음 앱을 열었을 때 중요 기능을 미리 알려 주는 인터페이스