트렌드 분석하기

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 시각적 디자인 요소와 관련한 최근의 트렌드

다음은 화면상에 배치된 UI/UX요소 및 이의 동작방식 등에 대한 최근의 대표적인 트렌드 사례들이다.

플랫 디자인 (Flat Design)

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

고스트 버튼 (Ghost Button)

웹사이트, 앱 등의 버튼을 뒤의 배경이 비쳐 보이게 제공, 배경 이미지와 조화롭게 보인다는 장점이 있음.

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

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

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

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

카드 디자인 (Card Design)

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

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

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