[UXUI 디자인 입문] Ch1: UX/UI, UX/UI 디자이너, UX/UI의 역사와 트렌드

2025. 7. 14. 17:42

 

1-2) UX/UI란?
  • UX/UI, UX/UI 디자이너
  • 알아두면 좋은 용어

 

UX/UI란?

  • UI는 목적을 달성하기 위한 행동을 할 때 무언가와 상호 작용을 하는 것을 도와주는 수단이다. 
    예시: 사용자가 배를 채우기 위해 시리얼을 먹는 도구로
  • UX는 경험하는 모든 것이다. 
  • UI 디자인: User Interface 의 약자로, 제품과 사용자 사이에서 소통을 할 수 있도록 하는 실체적인 수단이나 매개체를 뜻한다. 
    주로 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 것을 말한다. 
    • 시각적인 요소: 레이아웃, 색상, 크기와 정렬, 컴포넌트라고 부르는 버튼, 아이콘 이미지 등
  • UX 디자인: User eXperience 의 약자로 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험이다. 
    주로 제품에서 어떤 감정을 불러일으키거나 특정한 경험을 할 수 있도록 이끄는 것을 말한다. 
    • 넓은 의미: 제품 뿐만 아니라 무형의 서비스나 브랜드를 이용할 때 느끼는 모든 경험을 다 UX 로 볼 수 있다. 

 

함께 알아두면 좋은 용어

  • HCI(Human Computer Interaction):
    인간과 컴퓨터 간 상호작용에 대해 연구하는 분야다.
    대학원에서는 주로 UX/UI 보다 HCI라는 용어들 더 많이 사용한다. 
    연구 주된 목적 ▶️ 사람이 컴퓨터를 더 쉽게 사용하고, 더 잘 활용할 수 있도록 개선하는 것이다. 
  • CX(Customer Experience):
    브랜드를 처음 만나는 순간 ~ 제품을 사용하는 고객 여정의 모든 측면에서 고객이 경험하는 느낌이나 인상을 말한다. 
    UX와 구분되는 특징 ▶️ 느낌, 인상에 더 집중한다. 
    CX에는 고객 서비스(CS)가 포함된다. 
  • BX(Brand Experience):
    고객이 브랜드와 상호작용할 때 갖는 전반적인 인식과, 브랜드를 생각했을 때 떠오르는 감정을 말한다. 
    큰 범위에서 CX, UX가 모두 BX에 포함된다고 볼 수 있다. 
    예시 ▶️ 나이키라면? 스우시 로고, Just Do it 슬로건, 조던 등이 BX 라고 할 수 있다.  
1-3) UX/UI 디자이너의 역할
  • UX/UI 디자이너는 무슨 일을 하는 지?
  • UI 디자이너,  UX 디자이너, 프로덕트 디자이너

 

UI 디자이너

  • 시각적인 요소를 활용하여 화면 간의 관계와 인터페이스의 구성을 디자인하는 것에 집중한다. 
  • 주업무 ▶️ 레이아웃, 색상, 크기과 정렬, 컴포넌트라고 부르는 버튼, 아이콘, 이미지 등을 디자인
  • 회사에 따라 GUI 디자이너라고 부르기도 한다. 
💡 화면의 전체적인 구조와 시각적인 요소들을 디자인하는 사람!

 

 

UX 디자이너

  • 사용자를 분석한 데이터를 토대로 편리한 경험을 이끌어내기 위한 일에 집중한다. 
  • 주업무 ▶️ 유저 리서치와 테스트, 정보 구조 설계, 페르소나와 유저 시나리오 작성 등
  • UI 디자이너보다 업무에서 조사와 분석의 비중이 크다. 
💡 사용자가 어떤 제품이나 서비스를 이용하면서 느끼는 총체적인 경험을 디자인하는 사람!

 

 

프로덕트 디자이너 

  • 요새는 다수의 기업, 특히 스타트업에서 UX/UI 디자이너를 아울러 프로덕트 디자이너로 부르고 있다. 
  • 제품의 특정 부분이 아니라 사용자가 경험하는 제품의 시작과 끝 모두를 담당하며, 반복적인 개선을 통해 제품을 고도화하는 일에 집중한다. 
  • 주업무 ▶️ 문제 정의, 가설 설정, 솔루션 도출, 테스트 등
💡 UI와 UX를 포함하여 제품 전반의 경험을 디자인하는 사람!

 

 

기업 JD 분석을 통해 보는 UX/UI 디자이너의 업무

  • JD 는 회사마다 올려놓은 채용 공고를 의미한다. 
  • 회사에 따라 UX/UI 디자이너를 부르는 이름이 다르고, 규모나 조직 구성에 따라 맡게 되는 업무도 다양하다. 
💡 채공 공고에는 역할, 기대 역량이 자세히 쓰여 있다. 어떤 직무를 선택하는 지 잘 모르겠다면 채용 중인 회사의 공고를 잘 살펴보자!

 

  • 당근과 토스의 Product Designer 채용 공고:
    • 스타트업의 대표적인 예시로, 보통 프로덕트 디자이너가 전반적인 UX/UI를 모두 담당한다. 
    • 정성적, 정량적 데이터를 적극적으로 활용할 수 있어야 한다. 
    • 주로 다양한 직군이 모여 한 팀으로 일한다. 
  • 현대자동차와 현대오토에버의 UI Designer, UX Designer 채용 공고:
    • 대기업은 비즈니스 규모가 크기에, UX디자이너와 UI 디자이너를 나누고 역할도 구분되어 있다. 
    • UI 디자이너: 시각적인 UI 설계, 심미성 개선 담당
    • UX 디자이너: 리서치와 사용성 테스트, 통계적 분석 및 결론 도출이 주된 역할
1-4) 애플의 Human Interface Guidelines, 구글의 Material Design 
  • 디자인 가이드 라인
  • 애플의 Human Interface Guidelines
  • 구글의 Material Design

 

디자인 가이드라인이란?

💡  일반적으로 브랜드의 디자인 원칙과 컴포넌트별 규칙을 정의한 것을 말한다. 
  • 일관된 디자인을 하기 위한 지침서로서, 디자인할 때 지켜야 할 원칙과 규칙을 제안한다.
    • 컬러, 버튼, 폰트, 컴포넌트 디자인의 스타일부터 브랜드 철학이나 디자인 원칙까지 다양한 것이 포함될 수 있다. 
  • 기업에 따라 디자인 가이드라인을 디자인 시스템이나 스타일 가이드로 나눠 부르기도 한다. 용어는 다르지만 반복되는 디자인 요소들의 원칙을 정해둔 것이라는 점에서 기본적인 개념은 같다. 
  • 규모가 있는 기업은 대부분 디자인 가이드 라인을 만들고 오픈소스로 웹사이트에 공개해두고 있다. 그 중에도 애플과 구글이 가장 대표적이다. 

 

디자인 가이드라인의 장점

  • 기업:
    • 브랜드 아이덴티티를 강력하게 유지 가능
    • 디자이너 간 결과물 수준 상향 평준화 가능
  • 디자이너:
    • 미리 정의된 컴포넌트를 재사용하면서 불필요하게 반복되는 업무 줄이고 효율적으로 일하기 가능
  • 사용자:
    • 원칙에 따라 디자인된 화면을 통해 일관된 사용자 경험 얻기 가능(~에서 어떻게 넘어갈 수 있겠구나 예측 가능)

 

왜 디자인 가이드라인을 읽어야 할까?

💡 애플과 구글을 추천하는 이유는 이 두 가이드라인이 UX/UI의 근간이 되기 때문!
  • 애플과 구글은 전세계 OS 시장의 99%를 차지하고 있으며, 대부분의 앱은 이 두 OS 위에서 동작한다. 
  • OS의 규칙이 디자인에도 영향을 준다. 
  • 일반적으로 한 화면을 디자인해  IOS와 안드로이드 모두 동일하게 적용하지만, 일부 특정 스타일은 OS 이슈로 똑같이 적용할 수 없는 경우가 생기기도 한다. ▶️ 따라서, UX/UI 디자이너라면 애플의 Human Interface Guidelines, 구글의 Material Design을 꼭 숙지하는 것이 좋다. 

 

두 디자인 가이드라인을 읽으며 얻을 수 있는 것

  • 사용자 경험을 위해 인터페이스를 설계하는 기본 원칙을 배울 수 있다. 
  • 애플과 구글의 서로 다른 UX/UI 지침을 비교할 수 있다. 
  • 애플/구글에서 제공하는 리소스를 다운받아 살펴보고 디자인에 활용할 수 있다. 

🔘 애플의 Human Interface Guidelines

  • 줄여서 HIG 라고도 부르며, 애플 생태계 내에서 플랫폼 간의 흐름이 끊김 없이 이어질 수 있는 경험을 제공할 수 있도록 지원하기 위해 만들어졌다. 
  • 앱 인터페이스를 더 일관되고 직관적으로 만들어 사용자 경험을 향상시키는 역할을 한다. 
  • 앱스토어에 등록하는 모든 애플리케이션은 심사를 받는다: HIG를 지키지 않으면 앱 등록을 거부당할 수 있다. 
 

Human Interface Guidelines | Apple Developer Documentation

The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

developer.apple.com

  • 좌측의 네비게이션 메뉴
    • Platforms: 기기별로 달라지는 특성과 UX 패턴
    • Foundations: 색상, 다크모드, 타이포그래피 등 디자인 기초가 되는 요소
    • Patterns: 로딩, 알림, 피드백 등 UX 패턴
    • Components: 실제 애플 OS 화면에 사용되는 구체적인 컴포넌트들
    • Inputs: 사용자가 기기에 데이터를 입력하는 데 사용하는 방법
    • Technologies: 앱이나 게임에 사용할 수 있는 기술

 

HIG 살펴보면 좋은 페이지

  • App Icon:
    • 앱을 앱스토어에 등록할 때 항상 아이콘 이미지를 함께 등록해야 한다.
    • 앱 아이콘을 만들 때 기기와 OS에 맞는 규격을 확인할 수 있다. 
  • Buttons: 
    • 버튼은 사용자의 행동에 따라 적절하게 디자인이 바뀌며 상호작용해야 한다. 
  • Modality: 
    • iOS 에서 주로 사용하는 특징적인 컴포넌트 중 하나다. 
    • 사용자에게 임시로 콘텐츠를 보여주고, 특정 작업을 수행하게 할 때 사용한다. 
    • 페이지 이동과는 다르다. 

🔘 구글의 Material Design

  • 머티리얼 디자인은 다양한 안드로이드 기기에서 공통으로 적용할 수 있는 일관된 디자인 가이드를 만들기 위해 생겼다. 
  • 애플과 달리 구글은 안드로이드의 OS를 오픈 소스로 제공하다 보니 기기의 사양도 다양하며, 머티리얼 디자인 UI를 통해 동일한 유저 경험을 만들 수 있도록 하는 역할을 한다. 
 

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

m3.material.io

 

  • 좌측의 네비게이션 메뉴
    • Foundations: 접근성 표준, 레이아웃, 인터렉션 등 머티리얼 디자인의 기초 요소
    • Styles: 색상, 아이콘, 모션 등 시각적인 측면
    • Component: 버튼, 체크박스, 텍스트 필드 등 화면에서 인터페이스를 구성하는 구체적인 컴포넌트
    • Blog: 머티리얼 디자인과 관련한 새로운 소식

 

머티리얼 살펴보면 좋은 페이지

  • Accessibility:
    • 접근성: 장애나 불편함을 가진 사람 모두가 제품을 잘 사용할 수 있도록 사용성을 높이는 원칙
    • 구글은 문서에서 첫 번째 순서로 접근성을 두고 머티리얼 디자인의 기본 가치라고 소개한다. ▶️ 누구에게나 평등하면서 높은 사용성을 가진 제품을 만들기 위해 읽어보는 걸 추천!!, 컴포넌트 만들기 실습할 때 꼭 읽어보기..
  • Layout: 
    • 반응형 레이아웃으로 다양한 디바이스를 대응할 수 있다. 
    • 구글은 OS를 오픈소스로 개방해 다양한 HW 회사들이 활용하고 있는데, 그만큼 다양한 스크린 크기를 가진 기기들이 있다. ▶️ 머티리얼 디자인에서는 다양한 기기에서 흐름이 끊김 없이 자연스럽게 이어질 수 있도록 반응형 레이아웃 가이드를 잘 정의하고 있다. 
  • Elevation: 
    • 레이어 간의 높이를 사용해 컴포넌트를 구분하는 elevation은 머티리얼 디자인의 대표적인 특징이다. 
    • 플랫 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용해 입체감을 살리기 위한 목적이다. 
    • 높이에 따라 컬러와 그림자로 달라지는 스타일의 특성
1-5) UX/UI의 역사와 트렌드
  • UX/UI 변천사
  • 리얼 메타포
  • 스큐어모피즘
  • 플랫디자인
  • 뉴모피즘

 

UX/UI 디자인 변천사

UXUI 디자인 입문(챕터1-5)

  • 리얼 메타포: 1990년대, IBM HCI 디자인 팀에서 초보자들도 컴퓨터를 쉽게 이용할 수 있도록 실제 물건을 모방해 디자인한 것이 시초다. 
  • 스큐어모피즘: 아이폰과 함께 등장한 양식이다. 
  • 플랫디자인: 2013년 애플이 iOS7에서 처음 선보인 GUI 양식이다. 
  • 뉴모피즘: 2020년부터 스큐어모피즘과 플랫디자인의 장점을 결합한 디자인 트렌드로 떠오르고 있는 양식 중 하나다. 
1-6) 내가 자주 쓰는 서비스 뜯어보기
  • 사례 조사할 때 참고할 사이트 
  • UX/UI 관점에서 화면 분석하기

사례 조사할 때 참고할 만한 사이트

  • Pinterest
    원하는 사례 찾으려면 검색할 단어 끝에 UI 붙여보기(모바일, 웹 스크린 위주로 찾을 수 있음)
    ▶️ 검색창 디자인: input UI
    ▶️ 카드 형태 레이아웃: card UI
    ▶️ 지도를 활용한 디자인 : map UI
    ++ 많은 정보를 얻고 싶다면 영어로 검색 필수!
  • mobbin
    모바일과 웹 기반 서비스들의 화면을 모아놓은 해외 사이트다. 
    참고할 화면을 찾기 위해 일일히 앱을 다운받거나 스크린샷 찍지 않아도 되서 편리하지만, 유로 서비스다. 
  • wwit
    국내에서 서비스하는 모바일 기반의 앱 화면을 모아놓은 사이트다. 
    카테고리, 패턴, 컴포넌트로 구분해서 원하는 화면을 찾을 수 있어 편리하다. 
    모빈 만큼 양이 많지 않지만, 국내 서비스를 찾을 때 이용하기 좋다. 
  • UX pattern Archive(UPA)
    윗과 마찬가지로 국내에서 서비스하는 앱 화면을 모아서 볼 수 있는 서비스다
    UX 패턴과 그 설명이 자세히 적혀 있어 자주 사용되는 UX 패턴을 익히기 좋다. 
    산업군, UX 요소별로도 필터를 적용해볼 수 있어서 편리하다. 
저작자표시 (새창열림)

티스토리툴바