Ch01_1 디자인이란?
UI/UX 디자인을 학습하기 전에 소프트웨어 개발자로써 디자인의 정의를 한번 내려보도록 하자.
디자인은 특정 목적을 달성하기 위한 계획과 구현의 과정 및 결과물을 의미한다.
전통적 미학 중심의 비주얼 디자인에서 출발하였으나, 오늘날에는 비즈니스‧서비스‧기능의 설계와 사용자 경험 자체의 변화까지 포함하는 종합적 활동으로 확장되었다.
디자인의 역할
- 나쁜것을 좋게, 사용하기 힘든 것을 편리하게, 이해하기 어려운것을 알기 쉽게 만드는 것이 디자인의 역할이다.
- 필요성 : 특히, 널리 사용되는 기능이라며, UI 디자인의 역할과 가치는 더 높아진다. > 모바일 UI 디자인이 그래서 중요하다.
HCI와 UI/UX - UI Design은 어디서 왔는가?
UI 디자인은 HCI 연구의 하나의 분야이다.
1. 유용성 (Usefulness)
- 시스템이 사용자의 실제 목적과 과업에 필요한 기능을 제공하는 정도.
- 예시:
- 온라인 뱅킹 앱이 송금, 계좌 조회, 인증 기능을 갖추고 있음 → 유용성이 높음.
- 화려한 기능은 많지만 실제 업무와 관련 없는 경우 → 유용성이 낮음.
2. 사용성 (Usability)
- 사용자가 시스템을 쉽게 배우고 효율적으로 사용할 수 있는 정도.
- 주요 요소:
- 학습 용이성 (Learnability)
- 효율성 (Efficiency)
- 오류 최소화 및 복구 가능성 (Error tolerance)
- 만족감 (Satisfaction)
- 예시:
- 직관적인 인터페이스를 제공하는 카카오톡은 높은 사용성을 가짐.
- 메뉴가 복잡하고 찾기 어려운 앱은 사용성이 떨어짐.
3. 신뢰성 (Reliability)
- 정의: 시스템이 안정적이고 일관되게 동작하여 사용자가 믿고 의지할 수 있는 정도.
- 관점:
- 기술적 안정성 (오류나 다운타임이 적음)
- 보안성 (데이터와 개인정보가 안전하게 보호됨)
- 일관성 (동일한 상황에서 동일하게 작동함)
- 예시:
- 은행 앱이 거래 중단 없이 작동한다면 신뢰성이 높음.
- 로그인 오류나 서버 다운이 잦으면 신뢰성이 낮음.
HCI 하위 개념: UI(User Interface)
HCI의 핵심 구성 요소 중 하나가 바로 UI(User Interface)이다. UI는 사용자가 시스템과 직접 맞닿게 되는 시각적·기능적 요소를 의미한다. 즉, 사용자가 시스템을 조작하고 반응을 확인하는 접점이 UI라고 할 수 있다. 구체적으로 버튼, 메뉴, 아이콘, 입력창, 화면 배치(Layout)와 같은 요소들이 모두 UI에 해당한다. 사용자가 보는 화면의 구조나 사용 절차, 그리고 실제 조작 방법은 UI 설계의 산물이며, 이 요소들이 직관적으로 설계될수록 사용자는 더욱 원활한 상호작용 경험을 얻을 수 있다.
HCI 설계의 세 가지 측면
HCI 설계는 단순히 시각적인 인터페이스만을 다루지 않는다. 시스템을 전체적으로 바라보면, HCI 설계는 구조적 측면, 행동적 측면, 표면적 측면이라는 세 가지 층위에서 접근할 수 있다.
- 구조적 측면
- 시스템의 아키텍처(Architecture) 설계를 의미한다.
- 이는 시스템의 뼈대를 세우는 과정으로, 정보가 어떻게 배치되고, 어떤 기능이 어떤 경로로 연결되는지를 정의한다.
- 예를 들어, 온라인 쇼핑몰의 경우 상품 카테고리 구조, 검색 기능의 위치, 결제 모듈의 흐름 등이 구조적 설계에 해당한다.
- 행동적 측면
- 사용자의 행동과 시스템 반응을 규정하는 인터랙션(Interaction) 설계이다.
- 사용자가 버튼을 누르면 어떤 피드백이 제공되는지, 스크롤을 내릴 때 어떤 애니메이션이 발생하는지, 음성 명령을 했을 때 어떤 결과가 나타나는지가 모두 행동적 설계의 범주에 속한다.
- 이는 곧 사용자와 시스템 간 상호작용 경험을 직접적으로 형성한다.
- 표면적 측면
- 사용자가 직접 접촉하는 인터페이스 디자인의 영역이다.
- 버튼의 색상, 화면의 레이아웃, 아이콘의 형태, 텍스트의 배치와 같은 시각적 표현이 여기에 포함된다.
- 사용자는 이 표면적 측면을 통해 감각적으로 경험을 얻으며, 디자인의 심미성과 직관성이 사용자 만족도에 큰 영향을 미친다.
따라서 HCI에서 UI는 단순히 ‘겉모습’을 꾸미는 것이 아니라, 구조적 설계–행동적 설계–표면적 설계라는 다층적 맥락 속에서 종합적으로 접근해야 하는 분야이다. 구조적 측면이 탄탄해야 시스템의 흐름이 안정적이고, 행동적 측면이 잘 설계되어야 사용자와의 상호작용이 자연스러우며, 표면적 측면이 직관적이고 심미적이어야 최종적으로 만족스러운 경험이 완성된다.
HCI의 발전과 UI/UX의 변화
HCI(Human–Computer Interaction)는 시대와 기술의 발전에 따라 크게 HCI 1.0, HCI 2.0, HCI 3.0으로 구분할 수 있다. 각 단계는 기술 환경, 사용자 정의, 설계 초점, 대표 가치가 달라지면서 UI/UX 디자인의 관점에도 큰 변화를 가져왔다.
1. HCI 1.0: 인간–컴퓨터 인터페이스 중심- “어떻게 하면 쉽게 조작할 수 있는가?”
초기의 HCI는 단일 사용자와 컴퓨터 간의 상호작용에 초점이 맞추어졌다. 이 시기의 주요 대상은 입력/출력 장치와 인터페이스였으며, 사용 가능성(Usability)이 가장 중요한 가치로 강조되었다.
- 주요 활동: 조작 방식 설계, 효율성·정확성 확보
- 기술 환경: 데스크톱 컴퓨터 중심, GUI 기반
- 사용자 정의: ‘단일 사용자’
- 예시: 마우스 클릭, 메뉴 설계
즉, HCI 1.0은 사용자가 컴퓨터를 빠르고 정확하게 사용할 수 있도록 하는 것이 가장 중요한 목표였다.
2. HCI 2.0: 경험 중심 설계- “어떻게 만족스러운 경험을 줄 수 있는가?”
인터넷과 모바일 환경이 확산되면서 HCI는 사용자와 시스템 간 경험(UX)에 중점을 두는 방향으로 발전하였다. 이 시기를 HCI 2.0이라 하며, 단순히 기능의 효율성을 넘어서 사용자가 어떤 경험을 얻는가에 초점이 맞추어졌다.
- UX, 서비스, 콘텐츠
- 초점: 사용자 경험(User Experience)
- 주요 활동: 감성·맥락·브랜드 경험 설계
- 기술 환경: 모바일·웹 중심, 멀티모달 인터페이스
- 사용자 정의: ‘서비스 사용자’
- 예시: 넷플릭스 추천 화면, 배달 앱의 직관적 UI
- 감성, 몰입, 일관성
즉, HCI 2.0은 기능적 효율성을 넘어 사용자의 감정과 몰입감을 고려하는 경험 디자인으로 확장되었다.
3. HCI 3.0: 인공지능 기반 상호작용- “이 시스템은 인간을 어떻게 이해하고 해석하는가?”
최근의 HCI는 인공지능, IoT, 빅데이터 환경과 함께 사용자 해석(User Meaning-Making)을 중심으로 발전하고 있다. 이를 HCI 3.0이라 부르며, 사용자가 단순히 시스템을 이용하는 것을 넘어 시스템이 사용자를 이해하고 맥락을 해석하는 단계로 나아간 것이 특징이다.
- 지능형 디지털 제품, 행동 데이터, 알고리즘
- 초점: 사용자 해석(User Meaning-Making)
- 주요 활동: 데이터 기반 예측 및 해석, 사회적 가치 반영
- 기술 환경: AI, IoT, 음성 비서, 챗봇, 자동화 시스템
- 사용자 정의: ‘디지털 사회 속의 인간’
- 예시: ChatGPT, 스마트워치 헬스 알림, 자율주행차 인터페이스
- 사회적 책임, 해석력, 개인화
즉, HCI 3.0은 시스템이 사용자를 단순히 지원하는 수준을 넘어, 사용자의 행동과 맥락을 해석하고 개인화된 경험을 제공하는 지능형 상호작용을 지향한다.
또한, UI는 단순히 효율적인 인터페이스를 설계하는 데서 출발했지만, UX는 경험과 감성, 그리고 이제는 해석과 사회적 책임까지 포함하는 더 넓은 영역으로 확장되었다.
HCI가 최종적으로 달성하고자 하는 목표는 단순히 인간과 컴퓨터가 원활하게 상호작용하도록 만드는 데 그치지 않는다. 궁극적으로는 디지털 제품이나 서비스를 이용하는 사람들이 그 과정을 통해 진정한 경험(Real Experience)을 얻을 수 있도록 하는 데 있다. 여기서 말하는 진정한 경험이란, 사용자가 단순히 기능을 수행하는 수준을 넘어, 의미 있고 만족스러운 경험을 체득하는 것을 뜻한다. Dewey와 Martin(1934)은 이미 오래전에 경험을 단순한 사건의 나열이 아니라, 개인이 삶 속에서 가치를 발견하고 학습하며 성장하는 과정으로 정의하였다. HCI 역시 이러한 맥락에서, 사용자가 디지털 환경 속에서 얻게 되는 경험이 실제적이고 가치 있는 경험이 되도록 설계해야 함을 강조한다.
따라서 HCI는 단순한 인터페이스 설계나 기술적 효율성 확보를 넘어, 사용자에게 삶의 맥락 속에서 의미와 가치를 전달할 수 있는 경험을 창출하는 것을 최종적인 지향점으로 삼는다.
UI & UX Design
UI가 서비스와 사용자를 연결하는 접촉에 관한 개념이라면 UX는 사용자 내면에 관한 개념이다.
UI와 UX 관계
- 좋은 UI의 사용은 좋은 UX를 쌓는다.
- 그렇다고 해서 좋은 UI가 근본적인 UX 개선으로 늘 이어지는 것은 아니다.
즉 로그인 화면에서 심플한 로그인 (메일 주소, 비밀번호 사용)의 인터페이스가 아무리 좋아지더라도
개인화가 가능한 스마트폰일 경우, 지문인식 같은 또 다른 접근법이 있다.
따라서 UX의 평가는 UI와는 또 다른 문제이다.
UI 디자인이 다르는 범위
경험은 기억이 되며,
뭔가를 기억하는 것보다 더 어려운 것은
그 기억을 지우는 것이다.
- UI 디자인 : 요소 디자인 - 의도성, 유도성을 가진다.
- UX 디자인 : 서비스와 관련된 지속적인 모든 것의 영향을 미친다. 알게 되었을 때 부터 잊을 때까지의 모든 범위 (서비스의 사용)
1. UI 디자인 (User Interface Design)
UI 디자인은 사용자와 컴퓨터 사이의 상호작용을 위한 요소를 설계하는 활동이다. 여기서 말하는 요소란 버튼, 메뉴, 아이콘, 입력창, 화면 배치와 같은 눈에 보이는 대상들을 의미한다. 즉, 사용자가 실제로 접촉하고 조작하는 물리적·시각적 인터페이스를 설계하는 것이 UI 디자인의 핵심이다.
UI 디자인은 사용자 경험(UX)을 구체적으로 구현하는 핵심 시각적 도구로서, 사용자의 의도를 반영하고 자연스럽게 행동을 유도할 수 있는 기능성을 갖추어야 한다. 또한 시각적으로는 명확성과 일관성을 유지하면서도 직관적으로 이해할 수 있는 구조를 제공해야 한다. 이러한 이유로 UI 디자인은 주로 객관적 성격을 지닌다. 즉, 누구나 동일하게 볼 수 있고 사용할 수 있는 ‘형태’와 ‘기능’이 중심이 된다.
2. UX 디자인 (User Experience Design)
UX 디자인은 UI보다 더 넓은 범주로, 사용자가 시스템이나 서비스를 이용하며 얻게 되는 총체적인 경험을 설계하는 활동이다. 이는 단순히 화면에 보이는 시각적 요소만이 아니라, 서비스의 모든 과정과 맥락, 그리고 사용자 심리까지 포함한다.
UX 디자인은 사용자의 경험을 바탕으로 시스템을 새롭게 변화시키는 방법론이다. 다시 말해, UX는 사용자가 처음 접속해서 목표를 달성하고 서비스를 떠나는 순간까지의 모든 여정을 아우른다. 따라서 UX 디자인은 기능적 측면에 그치지 않고 감정, 만족감, 몰입감과 같은 심리적 요소까지 고려한다. 이 점에서 UX 디자인은 본질적으로 주관적 성격을 지니며, 사용자의 심리와 행동을 깊이 이해하는 과정이 필요하다.
UI 디자인이 주로 ‘보이는 것’과 ‘조작 가능한 것’을 설계하는 활동이라면, UX 디자인은 ‘사용자가 실제로 느끼고 해석하는 것’까지 포함하는 더 확장된 영역이다.
- UI는 수단이고, UX는 목표이다.
- 좋은 UI는 사용자가 시스템을 쉽고 편리하게 사용할 수 있게 하며, 좋은 UX는 그 과정에서 만족스럽고 의미 있는 경험을 제공한다.
따라서 UI와 UX는 별개가 아니라 상호 보완적인 관계이며, 성공적인 디지털 제품과 서비스를 위해서는 두 영역을 유기적으로 통합한 설계가 필요하다.
UX의 시간적 흐름
사용자 경험은 제품을 사용하기 전–사용하는 동안–사용한 이후의 전 과정을 아우른다.
- 사용 전(Pre-use)
- 사용자는 제품이나 서비스를 접하기 전에 이미 기대와 신뢰를 형성한다.
- 예를 들어, 새로운 스마트폰을 구입하기 전 사용자는 광고나 주변 평가를 통해 제품의 성능과 브랜드에 대한 기대감을 가지게 된다.
- 사용 중(During use)
- 실제 사용 과정에서 발생하는 상호작용과 감정이 핵심 경험을 이룬다.
- 예를 들어, 앱의 인터페이스가 직관적이고 반응이 빠르면 사용자는 긍정적인 감정을 경험하지만, 오류가 잦거나 조작이 복잡하면 부정적인 감정을 갖게 된다.
- 사용 이후(Post-use)
- 사용을 마친 뒤 사용자는 만족도와 재사용 의도를 형성한다.
- 긍정적인 경험은 “그거 참 좋은 경험이었어”라는 인상으로 남아, 재사용이나 추천으로 이어진다. 반대로 부정적 경험은 제품을 떠나게 만들거나 부정적 구전으로 확산될 수 있다.
HCI의 최종 목표는 단순히 기능을 수행할 수 있도록 돕는 것이 아니라, 사용자에게 진정한 경험(Real User Experience, RUX)을 제공하는 것이다. Dewey & Martin(1934)이 강조한 바와 같이, 경험은 단순한 사건의 연속이 아니라 개인이 삶 속에서 의미를 발견하고 가치를 체득하는 과정이다. 따라서 UX 디자인은 기술적 상호작용을 넘어 사용자가 긍정적이고 의미 있는 경험을 할 수 있도록 설계되어야 한다.
실습: UI 요소 속 의도성과 유도성 찾기
- UI 디자인에서 의도성과 유도성의 개념을 실제 사례를 통해 이해한다.
- 학생들이 일상적으로 사용하는 앱 속에서 UI 요소가 어떤 기능적 의미(의도성)를 가지며, 어떤 행동 단서(유도성)를 제공하는지 직접 탐구한다.
실습 방법
- 학생들은 자신이 자주 사용하는 앱(예: 카카오톡, 인스타그램, 네이버, 은행 앱 등)을 열어본다.
- 앱 화면에서 대표적인 UI 요소 3가지를 선택한다.
- 버튼(예: 전송 버튼)
- 아이콘(예: 휴지통 아이콘)
- 입력창(예: 검색창)
- 각 요소에 대해 다음을 작성한다.
- 의도성(Intend): 설계자가 부여한 목적은 무엇인가? (예: “이 버튼을 눌러 메시지를 보낸다”)
- 유도성(Affordance): 사용자가 어떤 행동을 하도록 직관적으로 유도하는가? (예: “돌출된 파란색 버튼은 ‘눌러야 한다’는 느낌을 준다”)
- 간단히 스크린샷을 찍고, 요소별로 역할을 한두 문장으로 설명한다.