디자인 원칙은 어떻게 쓰일까? 직접 찾아보자

디자인 원칙에 대해서 알아보고 직접 그 사례를 하나하나 찾아보자.

게슈탈트 심리학

1. 유사성의 원리
2. 근접성의 원리
3. 폐쇄성의 원리
4. 연속성의 원리
5. 공통성의 원리

UX 비주얼 디자인 원칙

1. 스케일
2. 시각적 위계
3. 균형
4. 대비

위 원칙들을 온보딩, 로딩, 검색, 회원가입, 리스트와 같은 부분에서 어떻게 쓰였는지 알아보도록 하자.

1. 서핏에서 알아보자

서핏에는 여러 아티클들과 메뉴가 홈에 나열되어 있다. 자칫하면 많은 정보에 의해 사용자가 인지 과부하로 피로감을 느낄 수 있는데 카드별로 묶어 놓아 여러 아티클이 하나의덩어리처럼 느껴지게 잘 정리하였다. 

그리고 수 많은 정보가 있을 때 더 작게 분할할 수 있다. 광고나 공고를 세 개로 나누어 카드와 같은 크기의 박스 안에 정렬해 놓았다. 

카드 하나만을 보면 이미지가 카드의 약 70% 비율로 차지하고 있다. 그만큼 썸네일이 중요하다는 것을 의미한다. 이는 UI/UX의 스케일 원칙을 따랐다. 

검색창과 아직 비어있는 곳은 Opacity를 약하게 하여 시각적 위계를 나누었다.

공통성의 원리를 이용해 카테고리 밑에 하위 카테고리가 나온다는 것을 자연스럽게 알려주고 있다.

검색 영역과 컨텐츠 영역의 대비를 주어 영역이 확실히 구분되어 보이게 하였다.

 

특히 서핏의 이런 부분은 마음에 든다.

서핏의 로딩화면

서핏의 로딩화면이다. 

스피너 로딩화면과 프로그래스 바 로딩화면은 상대적으로 시선이 집중되며 스피너는 같은 작업을 반복적으로 봐야하고 프로그래스 바도 진행정도를 지켜보며 기다려야한다. 심리적으로 로딩시간이 지루하게 느껴질 수 있다. 하지만 위 서핏의 화면은 스켈레톤 로딩 방식을 사용하였다. 앞으로 나올 컨텐츠를 간접적으로 미리 보여주어 작업이 잘 수행되고 있음을 보여주고 어떤 컨텐츠가 나올지 암시를 했기에 사용자가 예측가능한 디자인인 것이다. 
다만, 아쉬운 점은 추가적인 애니메이션이 없다는 것이다. 스켈레톤 UI위에 반짝이는 애니메이션을 넣으면 사용자로 하여금 오류가 아님을 보여줄 수 있기 때문이다. 이 부분은 대비 원칙만을 사용하여 컨텐츠가 들어올 자리를 보여주고 있다. 

 

끝