Only ideas worth spreading

더 좋은 웹을 위한
우리의 고민

UX UI DESIGN 이란?

WRITE윈드디자인 DATE2017.08.02 CATEGORY웹디자인

안녕하세요. 윈드디자인입니다.

웹이 빠르게 변화하면서 UI UX 중요도가 점점 높아지고 있기에 

웹 디자이너와 App 디자이너, 나아가 모든 디자이너 분들이

UI UX 디자인의 중요성은 높아지고 있는데요.

일반인도 익숙하게 듣는 UI UX 디자인이란 무엇이고
이와 연계되는 디자인 사례는 어떤 것이 있는지 이야기 드리고자 합니다.

웹 디자이너 실무자이자 윈드디자인의 내부 디자이너 KATE가 이야기하는 

UI UX 디자인은 어떤지 살펴볼까요~?

 

UI 디자인이란? (User Interface)

사용자가 목표를 달성할 수 있도록 돕는 것으로,
단순히 아름다운 것을 창조하는 것이 아닌

사용자의 사고방식을 이해하고 기대하는 바를 예측하여
구축하는 것을 의미합니다. 

이는 웹 디자인의 시각적 측면을 포함하며,
다양한 표현과 상호작용을 개발하여 제품에 전반적인 모양과 느낌을 줍니다.

일관성
직관적이며 사용하기 쉬운 디자인을 만드는 것으로
유용성과 신속하게 새로운 것을 배울 수 있는 이점이 있습니다. 

만약 우리가 일관성을 위반하게 된다면,
사용자가 혼란스러워 다음 단계에 좌절감을 느끼게 됩니다.


타이포그래피
해독성은 중요한 측면 중 하나입니다.
읽을 수 있는 텍스트는 사용자가 콘텐츠에서 벗어날 수 있습니다.
반면에, 올바르게 사용하면 가독성으로 인해 사용자는 텍스트의 정보를 효율적으로 읽고

흡수할 수 있습니다.

색상
UI 디자인을 하는데 가장 중요한 것은 색상 구성입니다. 
색상은 최대 3가지 기본색을 고수하면 더 좋은 결과를 얻는 경향이 있습니다.
디자인 프로젝트에 색상을 적용하는 것은 균형을 이루는 데에 많은 도움이 되지만,

많은 색상을 사용하면 더 복잡해집니다.

1. 60-30-10 컬러의 규칙
    색상을 사용할 때에 60%(지배 색상)+30%(보조 색상)+10%(강조 색상) 비율은

    일반적으로 우리에게 시각적으로 심리적으로 편안하게 인식합니다.

    이 비율은 균형감각을 만들고,눈이 한 초점에서 다른 초점으로 편안하게 움직일 수 있기 때문에

    효과가 있습니다.
2. 색상 의미
    색상에는 인간의 감정, 문화, 환경 등 영향을 미치는 힘이 있습니다.

    그래서 심리학자들은 색의 선호도에 대한 테스트를 고안할 정도로 많이 쓰입니다.
    빨강 : 열정, 사랑, 위험, 용기
    흰색 : 순수, 고귀함, 청결    
    블랙 : 신비, 우아함, 단결
    파랑 : 진정, 책임, 신성함
    녹색 : 신선, 희망, 생명
    노랑 : 태양, 조화, 정의
 3. 컬러 선택에 어려움을 느낀다면?
     컬러에 어려움을 느낀다면 주로 자연에서 색을 추출하여 사용하기도 하고, 뮤직비디오나, 
     인테리어 디자인, 패션 등 많은 영감을 얻을 수 있습니다. 
     
     색상 참고 사이트
     1) https://color.adobe.com/ko/      색상 구성표를 한눈에 볼 수 있습니다.
     2) http://designspiration.net/colors/998BFA/      특정 컬러로 이미지를 찾을 수 있습니다.
     3) https://www.pinterest.co.kr     컬러파레트 검색해 보면 많은 레퍼런스를 볼 수 있습니다.


균형
모든 레이아웃은 빈 페이지 또는 빈 공간부터 시작됩니다.
일반적인 웹 레이아웃에서 디자이너는 로고, 텍스트, 사진 또는 그림을 배치해야 합니다.
눈길을 끄는 디자인은 그것이 인쇄물이든 웹상이든 사용자와의 의사소통과 관심을 촉발시킵니다.

콘텐츠
정보 구성하고 계층 구조를 만듦 



*UX 디자인이란? (*User eXperience Design)

UX 디자인은 사용자를 이해하는 것으로 항상 사용자의 관점에서 생각하는 것입니다.
서비스를 가능한 쉽고 사용자 입장에서 분석하여,
가능한 쉽게 고통 없이 경험을 제공하는 것이기 때문에
편의성을 제공하여 도중에 이탈하는 행위를 막습니다. 

프로세스
1. 특정 제품 서비스 사전조사
2. 페르소나 만듦
    -> 사용자 연구(경험했을 때의 행동과 감정 이해하기)
    -> 실제 요구 사항 파악
   (페르소나 : 서비스 사용할 만한 목표 인구 집단 중 대표하는 가상의 인물)
3. 페르소나 분석을 통해 나온 내용을 토대로 시나리오 작성
   사용자가 취할 전체 여행 지도 그리기
    ex) 사이트맵, 로드맵, 서비스 맵, 사용자 흐름, 스토리보드 등
4. 설계, 테스트

체크리스트
1. 우리 디자인의 목적은 무엇인가?
2. 사용자는 어디에 있으며 무엇을 중요하게 생각하는가?
 

해외 UI UX 인터렉션디자인 사례


인터렉션 디자인은 사용자와의 상호 작용을 나타냅니다. 현재 애니메이션 모션으로 하여금 사람들의
시선을 사로잡는 몇 가지 사례를 가져왔습니다.
(제 기준으로 괜찮다 생각되는 디자인을 가지고 왔습니다! 참고로만 봐주세요.!)


 

 

#1. 좋은 UI UX 디자인 NATIONAL GEOGRAPHIC

테마별 갤러리 형태로
주요 정보를 이미지와 함께 보여주면서 등급도 함께 기재되어
UX 측면으로 사용자에게
신뢰성과 직관적인 정보를 제공하였습니다.

UI 측면에서는 그 브랜드와 맞는 컬러를 사용하였고,
균형 있는 디자인으로 사용자에게 편안한 분위기를 전달합니다.
(영상과 인터렉션 움직임도 같이 어우러지네요. :D)

 

​  참조 URL https://dribbble.com/artaks     

 

 

 

 

#2. 좋은 UI UX 디자인인 항공사 앱

UX 측면으로 보고 사용하는 사람들에게
재미있는 경험을 제공하는 디자인입니다.

또한 인포그래픽적 느낌으로 구성되어
사용자에게 높은 접근성으로 정보를 전달합니다.

UI 측면으로는 트렌디한 컬러 색상의 그러데이션 사용의
일관성 있는 디자인입니다.

기다림에 지치는 로딩 화면도
애니메이션으로 재치 있게 표현한 점이 인상 깊었고,
세심함에 놀람을 느끼는 디자인입니다.

 

  참조 URL https://dribbble.com/geneross

 

 

 

#3. 좋은 UI UX 디자인인 arc
다채로운 색상을 사용하지 않고, 그레이 컬러 사용으로
(윈드디자인 웹 사이트도 콘텐츠를 제외하면 그렇습니다!)

UX 측면으로
고급스러움과 편안한 느낌의 경험을 할 수 있습니다.

UI 측면으로는 일관성 된 디자인입니다.
저도 이 사례처럼 사용자 흐름에 맞게 인터렉션 디자인을 적용해 보고 싶네요.

​  참조 URL https://dribbble.com/AntonSKV

 

 

 

#4. 좋은 UI UX 디자인인 arc

페이지 스크롤 할 때마다 예측하지 못한 움직임에 UX 측면으로 새로움을 느꼈던 디자인이었습니다.
또한 단순하고 편집적인 레이아웃에 움직임을 불어넣어 생동감 느끼는 경험이었습니다. 
UI 측면에서는 그레이, 갈색 계열의 컬러 사용과 사진의 톤 보정으로 일관성이 느껴지는
개인적으로 보기 좋아 보이는 디자인이었습니다.
저는 이 사례를 통해 다소 심심할 수 있는 레이아웃임에도 불구하고
생각지 못한 한 끗 차이의 움직임에 다음번 프로젝트에 적용해보고 싶은 디자인이었습니다.  

 


​  참조 URL https://dribbble.com/AntonSKV


 

 

#5. 좋은 UI UX 디자인인 Calendar flow exploration for Intelligent OS
지능형 OS 용 달력 흐름 탐색 앱으로 날짜와 그에 맞는 스케줄표, 간략한 흐름을 시간대별로 
한눈에 볼 수 있어 UX 측면으로 편리함을 느낄 수 있는 장점이 있습니다. 
그에 맞는 흐름을 클릭하면 관련 이미지와 상세 내용을 볼 수 있어 정보 찾기에 좋습니다.
화면 전환하였을 때의 모션이 인상 깊었습니다.
UI 측면으로는 1가지만의 컬러 사용으로 정보를 보는데 시선이 분산되지 않아 집중해서 볼 수 있습니다. 

 


​  참조 URL https://dribbble.com/glebich

 

정리하자면,

UI 와 UX 디자인 모두
최종 사용자에게 탁월한 웹 경험을 제공하는데 중요한 구성 요소입니다.

하지만 동일하지 않으며,
UI 디자인은 사용자가 사용하는 시각적 측면을 포함하고,

UX 디자인은 사용자와의 상호작용에서 제공되는 사용 편의성 및 즐거움을 개선하여
사용자의 만족도를 향상시키는 프로세스입니다.


윈드디자인은 웹을 모바일, 플렛폼(솔루션)을 전문 회사이기에
웹 디자인에 대한 UX UI 디자인을 소개해 드렸는데요.

웹 디자인 영역뿐만 아니라 
서비스 디자인, 제품 디자인, 패키지 디자인 등 적용할 수 있습니다.



UI UX 디자인이란
오랜 기간 디자인 업을 하는 사람이라면
결코 새로운 것이 아닌 당연한 이야기입니다.

다만 작고 다양한 디바이스의 등장으로
집약적으로 표현하게 되면서 강조되었지요.

작지만 강한 힘이 바로 UI UX 디자인이 아닐까요? :D

 

 

사용자의 바람에 고민합니다.
다채로움 속 집중을 통해
더 좋은 웹을 꿈꿉니다.

디자인과 기술이 융화된 디지털 서비스를 만듭니다.


 

 

 

WIND DESIGN Co., Ltd