트렌드 분석하기

UI/UX 트렌드 분석

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

트렌드(Trend)

• 트렌드의 정의는 학문적으로건 실무적으로건 명확하게 제시되어 있지는 않음
• 사전적 정의는 추세, 경향, 흐름이지만 트렌드라는 용어가 경제트렌드, 부동산트렌드, 패 션트렌드, 복고트렌드 등으로 사용될 때 단순히 경제흐름, 부동산흐름, 패션경향, 복고경 향으로만 해석되지는 않음
• 트렌드라는 용어에는 특정한 방향으로 향한다. ‘미래에 이러저러한 상황이 도래할 것 이다.“ 라는 의미지향성이 강하게 내포되어 있음
• ‘트렌드’는 사전적 정의와 상관없이 뉘앙스만으로 수식하는 명사에 꿈틀거리는 생동 감을 부여함 트렌드라는 용어의 사용층은 패션업계 -> 광고마케팅업계 -> 경영자와 경영 컨설팅업계
• 저널리스트, 사회학자, 역사학자, 문명사학자, 미래 연구자 -> 자영업자와 일반 대중 으로 넓혀지는 과정과 맥락을 함께 한 것으로 관찰됨

UI/UX 트렌드의 이해

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

1. 트렌드 읽기

트렌드는 상당히 빠르게 변화하지만, 트렌드 자체의 의미가 선호도가 높은 대상을 지칭하 기에 이를 반영한 아래와 같은 다양한 자료의 수집이 가능

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

위와 같은 자료들을 공통적으로 관통하는 아이디어를 찾아내고, 그에 맞는 자료를 구성하 는 것이 트렌드를 읽고 정의 하는 과정이다. 페이스 팝콘(Faith Popcorn, 1998)에 따르면 <표 2-1>의 17가지 트렌드 중 4가지 이상이 뒷받침 되는 것이 미래의 상품 성공에 필요한 요소이다. </표>

<표 2-1> 페이스 팝콘(Faith Popcorn)의 17가지 트렌드 테제</표>

트렌드내용

코쿤(누에고치)화	안전을 느낄 수 있는 집에 틀어박히기. 원예업 유망
유유상종	핵가족문제를 보완하는 공동체 추구. 동호인클럽 결성.
환상모험	안전장치 있는 일탈과 이국풍 선호. 퓨전푸드.
반항적 쾌락	금지를 깨뜨리는 즐거움. 쿠바산 시가 클럽 열풍.
작은 사치	주머니 한도 내에서의 퇴폐적 실용성. 몽블랑 만년필 인기.
마음의 안식처	영적인 기쁨 추구. 요가산업 번성.
개성찾기	오직 하나, 나만을 위한 상품. 리바이스 맞춤 청바지.
여성적 사고	위계가 아닌 연대, 친밀성을 강조하는 신경영 대두.
남성해방	멋진 남성은 부드러운 남자. 유니섹스향의 부엌세제 등장
99가지 생활	너무 바빠 돈을 주고 시간을 산다. 도우미산업 번창.
행복찾기 변신	내 취미를 사업으로 만든다. 의사가 제빵기술자로.
건강장수	죽는 날까지 건강하고 싶다. 건강보조제, 대체의학 붐.
젊어지기	40세에 새 인생을 시작한다. 평생교육기관 활성화.
소비자 감시	소비자를 의식하는 비즈니스 대두
우상 파괴	더 이상 신성한 것은 없다. 클린턴 대통령 성추문에 따른 특수.
S.O.S	환경보호산업 붐. 전기자동차 재활용 사업 인기
공포의 기류	세상은 위험덩어리. 항균장난감의 등장

<표 2-2> 김경훈의 20가지 한국인 트렌드 테제</표>

트렌드내용

두손문화의 탄생	완제품 소비에 대한 저항과 내가 만드는 세상이 좋다.
임의접속-굴레 없는 관계 맺기	붙박이 삶은 싫다. 자유로운 접속 문화가 노동의 성격을 바꾼다.
파워풀한 문화소비자페로몬 공동체	공감으로 만든 문화 소비자 집단, 유행의 생산지가 되고 있는 인 터넷 게시판들
머니게임 경주자들의 조기은퇴	돈 중심의 세상에 매여 살고 싶지 않다, 재테크와 전직으로 변신 을 꿈꾼다.
여자들의 우정이 세상 을 바꾼다.	여성들의 감성 네트워크가 움직인다.
노인, 생산적 현역의 시대	노인의 지혜가 새로운 가치를 창출한다. 그림자 인간을 거부하는 생산적 현역의 시대
새로운 시대의 인재상 -멀티태스커	재능과 문화의 경계를 뛰어넘는 멀티태스커의 시대
네버랜드 러시	젊어지고 싶은 욕망
고객 존중을 넘어선 메모리 마케팅	고객의 쓰레기통을 뒤져서라도 고객의 취향을 연구한다.
시간을 팔아 시간을 산다.	시간 절약 상품의 시대, 25시간 활용법은 없을까?
안전벨트를 맨 모험가 들	거친 자연 속으로 모험을 떠난다. 모험이 일상 속으로 들어온다.
24시간 경비 사회	위험한 사회, 내부의 적과 스파이가 판치는 기업
벌거벗고 뛰는 할리우 드식 일등주의	승자독식의 세계를 받아들이는 한국 사람들
충동조절장애 증후군 과 불신사회	권위와 억압의 스트레스를 뚫고 나오는 충동조절장애 사회
나를 꼭 안아주는 체 온 커뮤니티	커뮤니티문화의 확산은 '체온'이 그리워서
금기를 깨고 쾌락하기	바른생활 속 금기를 향한 질주, 금기를 넘는 성과 성문화
10인 10색, 성 르네상 스의 시대	불황없는 산업, 더 이상 어두운 데 있기 싫다
향기로운 남자로 거듭 나기	남성 콤플렉스 벗어 던지기, 화장하는 남자들
신생인류, 호모 유머리 스트	웃고 싶고 웃기고 싶다. 유머를 사고파는 시장의 생성
풍류를 즐기는 안단테, 안단테	느리게 멋있게 살기, 속도 역행하기 상품의 유행

2. 트렌드 주기

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

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

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

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

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

1. 플랫 디자인 (Flat Design)

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

 

2. 고스트 버튼 (Ghost Button)

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

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

화면이 상하좌우로 스크롤될 때, 배경 이미지들과 오브젝트 이미지들 간에 스크롤링 되는 시차가 발생하게 보여주는 기법

메뉴화면이 사용자의 조작에 반응해 먼저 움직이고 뒤이어 배경이 움직이는 효과로 조작 에 입체감을 부여함

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

기기별 해상도 차이, 사용자의 브라우저 창 크기 조절 등에 자동으로 반응하여 최적화된 레이아웃으로 페이지를 보여주는 기법

기기, 화면 해상도에 영향을 받지 않고 동일한 사용자 경험을 제공한다는 장점이 있다.

5. 카드 디자인 (Card Design)

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

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

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