트렌드 분석하기

UI/UX 트렌드 분석

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

트렌드(Trend)

• 트렌드의 정의는 학문적으로건 실무적으로건 명확하게 제시되어 있지는 않음
• 사전적 정의는 추세, 경향, 흐름이지만 트렌드라는 용어가 경제트렌드, 부동산트렌드, 패션트렌드, 복고트렌드 등으로 사용될 때 단순히 경제흐름, 부동산흐름, 패션경향, 복고경향으로만 해석되지는 않음
• 트렌드라는 용어에는 특정한 방향으로 향한다. '미래에 이러저러한 상황이 도래할 것이다.' 라는 의미지향성이 강하게 내포되어 있음
• '트렌드'는 사전적 정의와 상관없이 뉘앙스만으로 수식하는 명사에 꿈틀거리는 생동감을 부여함

트렌드라는 용어의 사용층은 패션업계 -> 광고마케팅업계 -> 경영자와 경영 컨설팅업계 -> 저널리스트 -> 사회학자, 역사학자, 문명사학자, 미래 연구자 -> 자영업자와 일반 대중으로 넓혀지는 과정과 맥락을 함께 한 것으로 관찰됨

UI/UX 트렌드의 이해

최근의 UI/UX 트렌드는 인간 중심의 디자인(Human-Centered Design)이 보편화 되면서, 전체 시스템에서 UI(UserInterface)가 가지는 중요성은 점점 더 커져가고, 그 개념 또한 광의의 인터랙션, 서비스를 포함하는 보편적인 가치로 받아들여지고 있다. 또한 다양한 인터랙션 기술의 발전으로 사용자의 경험을 디자인하는 요소들이 더욱 다양해지고 있다. 여기에 예쩐보다 훨씬 다양한 형태의 인문학적 관점이 반영되면서 보다 UI/UX(User Experience)의 디자인 스페이스가 확장되고 있다(권규현. 2013).

• 트렌드 읽기
  • 다양한 트렌드 관련 기사 검색과 연구 기관의 동향 자료
  • 기관의 트렌드 자료를 검색하고 프로젝트에 관련된 자료
  • 신문, 잡지, 책, 보고서, 전시, 세미나에서 소개되는 자료
• 트렌드 주기
  • 사전적 의미의 트렌드는 해당 트렌드가 출현하고 밀려나는 양상에 따라 CrazeFad-Hype-Mania로 세분하여 구분되기도 함 (Guillaume Erner, 2009)
  • 정보기술과 관련한 트렌드는 5~10년의 주기를 갖는 Hype와 특정 제품/서비스/기업에 열광하는 Mania 영역의 트렌드를 대상으로 하는 것이 일반적임
  • 디지털 기술의 급격한 발전으로 인해 급격히 변하고 있으며, UI/UX 디자인에도 직접적인 영향을 주고 있음
  • UI/UX 에 있어서의 트렌드 자료 수집은 다양한 분야의 이해가 필요하고, 항상 트렌드에 관련된 자료를 지속적으로 수집, 조사하는 것이 중요함

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

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

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

1. 플랫 디자인 (Flat Design) - 입체감, 현실감을 주는 디자인이 아니라 평평한 느낌을 주는 단순화되고 심플한 디자인으로 입체적 효과 같은 복잡한 요소를 배제하고, 기본적인 요소들인 레이아웃, 대비, 색상, 폰트 등을 중심으로 디자인하여 깔끔한 인터페이스를 제공 / 심플한 아이콘, 배제된 효과, 타이포그라피, 단순한 컬러, 미니멀리즘이라는 특성을 갖고있다.
2. 고스트 버튼 (Ghost Button) - 웹사이트, 앱 등의 버튼을 뒤의 배경이 비쳐 보이게 제공, 배경 이미지와 조화롭게 보인다는 장점이 있음.
3. 패럴렉스 스크롤링 (Parallax Scrolling) - 화면이 상하좌우로 스크롤될 때, 배경 이미지들과 오브젝트 이미지들 간에 스크롤링 되는 시차가 발생하게 보여주는 기법 / 메뉴화면이 사용자의 조작에 반응해 먼저 움직이고 뒤이어 배경이 움직이는 효과로 조작에 입체감을 부여함
4. 반응형 웹 디자인(Responsive Web Design) - 기기별 해상도 차이, 사용자의 브라우저 창 크기 조절 등에 자동으로 반응하여 최적화된 레이아웃으로 페이지를 보여주는 기법 / 기기, 화면 해상도에 영향을 받지 않고 동일한 사용자 경험을 제공한다는 장점이 있다.
5. 카드 디자인 (Card Design) - 반응형 웹이나 혹은 모바일 웹에서 자주 볼 수 있는 카드들을 화면에 나열한 형태의 디자인 정보를 직관적으로 제공한다는 장점이 있으며, 화면 해상도에 따른 카드 재배치를 적용해 반응형웹을 구현함
6. 풀 이미지/영상 배경(Full Screen Background Image & Videos) - 페이지의 배경 영역 전체를 영상 혹은 이미지로 채우는 디자인

1. 플랫 디자인 예시 (출처 : NCS 학습모듈)