UI 디자인은 오랜 시간동안 변화되어 왔습니다.
오늘은 그 변화에 대해 알려드리겠습니다.
1. 애플의 스큐어 모피즘
스큐어 모피즘은 대상을 원래 그대로의 모습으로 사실적으로 표현하는 디자인 기법입니다.
스티브 잡스가 심혈을 기울여서 만들고자 스마트폰에 담고자 했던 디자인 기법인데,
저는 스티브 잡스의 마지막 자존심 (?)이라고 생각합니다.
장점
- 사용자들에게 좀 더 쉽게 이해시킬 수 있습니다.
- 아날로그적 감성을 그대로 느끼게 합니다
- 풀-터치스크린에 적응합니다.
단점
- 과도한 리얼리티적 표현으로 화면을 많이 차지하고 복잡하게 만듭니다.
- 사용성을 무시한 과도한 장식예술로 변질되었다는 지적도 있습니다.
- 아이콘의 통일성이 부족합니다.
2. 마이크로 소프트의 플랫 디자인
사용자들이 모바일 기기에 익숙해지며, 장식(스큐어모피즘)의 필요성이 감소하고 기능에 충실한 플랫 디자인으로 바뀌었습니다.
플랫 디자인은 입체적 요소를 배제한 평면적 디자인입니다.
장점
- 인터페이스가 단순명료합니다.
- 깔끔하고 가독성이 높습니다.
- 개별 디자인 요소의 용량이 작기 때문에 속도가 빠릅니다.
단점
- 입체적이지 않아, 클릭 가능 여부 구분이 모호합니다.
- 스타일이 단순하고 정제되어 매우 유사합니다.
- 과도한 유행때문에 디자이너가 깊은 생각없이 디자인해 가독성이 희생됩니다.
3. 구글의 머티리얼 디자인
구글이 스큐어모피즘과 플랫디자인의 단점을 보완하기 위해 플랫디자인에 입체효과를 추가한 기법을 선보였습니다.
구글은 Material design 가이드라인까지 발표하였는데요,
이유는 안드로이드 파편화와 모바일/웹 간의 흐름이 연관되어 있습니다.
모바일와 웹을 완전 독립적으로 구현하기 보다는 반응형 식으로 이어지는 부분도 많아서, 그 부분을 seamless하게 연결하기 위한 가이드라인이란 측면도 있습니다.
그래서 입체감이 많이 들어갔고요.
머티리얼 디자인은 널리 알려진 디자인 트렌드라기보다는 브랜드 제품에 가깝습니다.
장점
- 높은 직관성울 유지합니다.
- 미니멀리즘한 느낌을 살리며 입체감을 부여해 플랫디자인의 단점을 보완합니다.
- 구글에서 사용하기 때문에 사람들이 이 기법에 익숙해 UX 측면에서 많은 이점이 있습니다.
단점
- 구글 가이드라인에 의해 개발자와 디자이너의 창의성이 제한됩니다.
- 구현이 복잡합니다.
- 머티리얼 디자인을 사용하는 대부분의 서비스나 제품이
동질화될 가능성이 높습니다.
4. 개인 디자이너의 뉴모피즘
뉴모피즘은 드리블(Dribble)의 어느 한 디자이너가 제안하여 새로운 디자인 트렌드로 떠오르기 시작합니다.
객체와 배경을 그림자/빛만으로 구분해 눌러보고 싶게 생긴 부드럽고 입체감있는 디자인을 말하는데요,
이 특유의 디자인으로 하여금 사용자의 클릭을 유도시킵니다.
장점
- 부드러우며 미래적인 느낌을 들게합니다.
- 클릭과 같은 사용자의 행동 유도성을 전달합니다.
- UI가 생동감이 넘치며, 단순 그래픽을 넘어 촉각적으로 다가옵니다.
단점
- 동시다발적으로 쓰일 경우, 전체적 인상이 뿌옇게 되어 가독성이 저하됩니다.
- 구현과정이 복잡해 연산처리해야할 양이 많아져 부하를 줄 수 있습니다.
- 검정색과 흰색을 이용해 효과를 주기 때문에 흰 BG (Background)사용이 불가합니다.
이렇게 디자인 트렌드의 변화에 대해 알아보았습니다.
디자인 트렌드의 새로 뜨고 있는 뉴모피즘의 경우에는 2020~2021년의 트렌드로 주목받고 있는데, 대기업 등이 아닌 개인이 주도하였다는 점에서 새로운 가능성에 대한 흥미를 갖게 되었습니다.
어떤 서비스를 제작하거나 만들때 사용자를 고려하지 않고 시각적인 요소만 화려하다면 사용자는 그 제품, 서비스를 다시는 이용하지는 않을거에요.
그렇기 때문에 UX와 UI가 조화롭게 어울려질때 사용자의 긍정적인 경험과 좋은 디자인을 보여줄수 있답니다.
디자인 트렌드는 변하기 마련인데요, 뉴모피즘의 다음 타자는 어떨지 기대가 됩니다.
'회사생활' 카테고리의 다른 글
기획자의 개발자 이해하기, 프론트엔드와 백엔드의 차이 (4) | 2021.02.14 |
---|---|
코인 보조 지표 보는법 설명 (MACD, EMA, Volume MA, OBV, RSI 지표) (4) | 2021.02.13 |
알아두면 좋은 웹서비스 기획 용어 A to Z 정리 (6) | 2021.02.11 |
비트코인 차트 보는 법 설명 (4) | 2021.02.10 |
업무 시, 직장인에게 유용한 사이트 모음 (4) | 2021.02.09 |