트렌드 분석하기 | sohinggu๑°⌓°๑

UI/UX 트렌드 분석

학습목표
UI/UX 경쟁 분석을 위하여 국내외 경쟁사의 제품을 분석할 수 있다.

트렌드(Trend)

1. 정의

- 트렌드의 정의는 학문적으로건 실무적으로건 명확하게 제시되어 있지 않음
- 사전적 정의는 추세, 경향, 흐름이지만 단순히 흐름이나 경향이라는 의미로만 해석되지는 않음
- '미래에 어떠한 상황이 도래할 것'이라는 의미지향성이 강하게 내포되어 있음
- 사전적 정의와 상관없이 뉘앙스만으로 수식하는 명사에 생동감을 부여함

UI/UX 트렌드의 이해

인간 중심의 디자인(Human-Centered Design)이 보편화 되면서, 전체 시스템에서 UI가 가지는 중요성은 점점 더 커져가고, 그 개념 또한 광의 의 인터랙션, 서비스를 포함하는 보편적인 가치로 받아들여지고 있다. 또한 다양한 인터랙 션 기술의 발전으로 사용자의 경험을 디자인하는 요소들이 더욱 다양해지고 있다.

1. 트렌드 읽기

트렌드는 상당히 빠르게 변화하지만, 트렌드 자체의 의미가 선호도가 높은 대상을 지칭하기에 이를 반영한 다양한 자료의 수집이 가능하다. 그 자료들을 공통적으로 관통하는 아이디어를 찾아내고, 그에 맞는 자료를 구성하는 것이 트렌드를 읽고 정의 하는 과정이다.

 

• 다양한 트렌드 관련 기사 검색과 연구 기관의 동향 자료
• 기관의 트렌드 자료를 검색하고 프로젝트에 관련된 자료
• 신문, 잡지, 책, 보고서, 전시, 세미나에서 소개되는 자료

 

참고자료

- 페이스 팝콘(Faith Popcorn)의 17가지 트렌드 테제
- 김경훈의 20가지 한국인 트렌드 테제

2. 트렌드 주기

디지털 기술의 급격한 발전으로 인해 급격히 변하고 있으며, UI/UX 디자인에도 직접적인 영향을 주고 있음

 

• 사전적 의미의 트렌드는 해당 트렌드가 출현하고 밀려나는 양상에 따라 Craze-Fad-Hype-Mania로 세분하여 구분되기도 함(Guillaume Erner, 2009)
• 정보기술과 관련한 트렌드는 5~10년의 주기를 갖는 Hype와 특정 제품/서비스/기업에 열광하는 Mania 영역의 트렌드를 대상으로 하는 것이 일반적
• UI/UX 에 있어서의 트렌드 자료 수집은 다양한 분야의 이해가 필요하고, 항상 트렌드에 관련된 자료를 지속적으로 수집, 조사하는 것이 중요

주변 사용자 경험(Ambient User Experience)

1. 정의

사용자를 둘러싼 환경의 연동이 유기적으로 이루어져 하나의 경험을 제공하는 것

 

• 최근 정보기술 기기 사용 행태는 스마트폰 등 모바일 기기와 무선네트워크를 활용해 장소적 제약 없이 정보기술이 적용된 제품/서비스에 접근이 가능하고 여러 종류의 기기를 사용하며 동일한 제품/서비스에 대해 기기들 간에 연속적인경험을 갖는 것이 일반화
• 시간과 공간의 구애받지 않고 서비스가 제공되는 것이 중요
• 다양한 기술과 기기를 통한 경험을 유지시켜야 가치가 높여야함
• 사물인터넷(IoT) 센서를 포함한 기기, 자동차, 사물, 공장 등이 서로 연결 되어 그 전반으로 이어지는 경험을 제공해야 함

UI/UX 시각적 디자인 요소와 관련된 최근 트렌드

1.플랫 디자인(Flat Design)

출처: https://brunch.co.kr/@flatdesign/5

- 입체감, 현실감을 주는 디자인이 아니라 평평한 느낌을 주는 단순화되고 심플한 디자인
- 입체효과 같은 복잡한 요소를 배제하고, 기본적인 요소(레이아웃, 대비, 색상, 폰트 등)를 중심으로 디자인
- 깔끔한 인터페이스 제공
- 심플한 아이콘, 배제된 효과, 타이포그라피, 단순한 컬러, 미니멀리즘

2. 고스트 버튼 (Ghost Button)

- 웹사이트, 앱 등의 버튼을 뒤의 배경이 비쳐 보이게 제공
- 배경 이미지와 조화롭게 보임

출처: http://www.webmaking.co.kr/2010/gb/bbs/board.php?bo_table=portfolio&wr_id=340

3. 패럴렉스 스크롤링 (Parallax Scrolling)

- 화면이 상하좌우로 스크롤될 때, 배경 이미지와 오브젝트 이미지 간에 스크롤링 되는 시차가 발생하게 보여주는 기법
- 메뉴화면이 사용자의 조작에 반응해 먼저 움직이고 뒤이어 배경이 움직이는 효과로 조작에 입체감을 부여

4. 반응형 웹 디자인(Responsive Web Design)

- 기기별 해상도 차이, 브라우저 창 크기 조절 등에 자동으로 반응하여 최적화된 레이아웃으로 페이지를 보여주는 기법
- 기기, 화면 해상도에 영향을 받지 않고 동일한 사용자 경험을 제공

출처: https://blog.helloweb.co.kr/hello-web-ecommerce-responsive-web/

5. 카드 디자인 (Card Design)

- 반응형 웹이나 혹은 모바일 웹에서 자주 볼 수 있는 카드들을 화면에 나열한 형태의 디자인
- 정보를 직관적으로 제공
- 화면 해상도에 따른 카드 재배치를 적용해 반응형웹을 구현함

https://kmong.com/gig/128658

6. 풀 이미지/영상 배경(Full Screen Background Image & Videos)

- 페이지의 배경 영역 전체를 영상 혹은 이미지로 채우는 디자인

출처: http://www.seoilfilm.com/#seoil