UX/UI 책 스터디 <사용자를 사로잡는 UX/UI 실전가이드> -3

1-3 모바일 디자인 트렌드의 변화

• 스큐어모픽 디자인 - 사물을 사실적으로 표현하는 디자인 기법 (애플 iOS). 2012년까지 스큐어모피즘이었던 iOS (스마트폰이 세사에 막 나왔을 때라 추상적인 인터페이스가 아직 낯설었기 때문), Bitmap비트맵 (하나의 디자인에 하나의 해상도만 최적화 가능)
• 플랫 디자인 - 현실성 사라지고, 평평한 형태로 디자인. 구성과 색상을 직관적으로 표현하는 2D 디자인 기법, 벡터 Vector (하나의 디자인으로 다양한 디바이스에 대처가능 - 시각적 일관성 유지하기가 스큐어모픽 보다 유리)
• 머티리얼 디자인 - 플랫 디자인에 그림자 같은 현실적 요소를 더함 (구글), 그리드 기반의 레이아웃, 계획적인 색상 설계, 의도적인 여백
• 메트로 UI (Flat) - 사각형 타일을 기반으로, 과감한 색면과 아이콘 등을 조합한 것이 특징. 각 타일을 클릭하면 해당하는 프로그램이 실행되는데, 새 창이 아닌 화면 전체를 채우는 방식으로 작동.
• 뉴모피즘 - 빛과 그림자로 사실적이면서도 미래적. 빛과 그림자로 요소와 배경을 구분하여 부드러운 첫인상. 촉각적. 찰흙을 보면 말랑함이 느껴지고 이내 만지고 싶은 욕구가 든다. 이와 유사하게 뉴모피즘은 스타일링만으로 각 요소의 어포던스(행동 유도성)가 높게 설정된다. (but,  화면 전체에 어포던스가 높아지는 것은 아님. 모든 요소가 강조되면 위계질서가 약해짐). 음각 형태 효과는 착시를 주기도 해서 사용자의 예측 가능성을 떨어뜨려 멘탈 모델에 영향을 줄 수도 있는 등 여러 가지 한계가 있음.

 

2-1 해상도 이해하기

• 픽셀 : Picture Element의 준말. 화면 또는 이미지에 쓰인 최소 단위.(화소도 픽셀과 동의어)
• 비트맵 : 비트맵 방식으로 디자인하기 위해서는 점묘화 처럼 무수히 많은 픽셀이 필요. (BMF, JPG, GIF, PNG)
• 벡터 : 이미지 파일 형식. 수학적 연산으로 선분과 면을 만들기 때문에 확대해도 깨지지 않고, 확대해도 용량이 변하지 않음. 이미지 손실이 없어야 하는 로고, 캐릭터, UI 디자인 등에 많이 활용됨. (AI, EPS, SVG)

목적에 맞는 해상도 설정
디지털을 다루는 디자이너에게 해상도란 출판 편집 디자이너의 종이 규격과도 같음. 보편적으로 사용하는 해상도가 존재. 실무에서 이를 파악하기 위해 *스탯카운터 statcounter라는 웹 트래픽 분석 사이트를 이용함.

해상도의 기준은 서비스를 이용할 사용자가 되어야 한다. 사용자를 고려하지 않고 '요즘 많이 쓰인다.'는 이유로 해상도를 결정한다면 문제가 발생한다. 예) 새로운 기기 보급률이 상대적으로 낮은, 중장년 또는 노년층을 대상으로 한 서비스의 해상도에 최신 기기만 고려하면 문제가 될 수 있음.