UI의 9가지 상태

들어가며

UI디자인은 기존의 정적인 디자인과는 다르게 동적으로 변화하는 디자인입니다. 하나의 컴포넌트(화면에 배치되는 U조각)는 상태나 상황에 따라 여러 가지 형태로 변화합니다. 그리고 그 변화에 따라 다른 데이터를 표현해야 하고, 그 내용에 따라 양식(스타일)도 달라져야 합니다. 그래서 UI디자인은 내가 미쳐 생각하지 못한 상황이 있어 더욱 까다롭고 조심스러운 작업입니다. Vince Speelman이 정리한 UI컴포넌트의 9가지 상태에 대해서 알아보겠습니다. 

최근 UI 디자인팀은 화면을 구성하기 전에 컴포넌트(UI조각)을 먼저 디자인합니다. 인터페이스는 그저 잘 구성된 컴포넌트의 모임이라는 것이죠. 이는 사용자를 “불행의 길”로 빠져들게 합니다. 기술 시스템이 아닌 페이지를 만드는 것이기에, 잘못된 디자인의 상태에 대해 노력을 기울여야 하고 컴포넌트를 만들 때는 모든 라이프사이클(생명주기)를 담을 수 있도록 해야 합니다. 

* 이해를 위해 원문의 이미지를 일부 수정하였습니다.

1. 사용 전, Nothing 

컴포넌트에 아무 일도 일어나지 않았을 때. 사용자가 처음 마주하게 되는 상태입니다. 아직 활성화되지 않은 상태일 수도 있고요. 즉, 컴포넌트는 화면 존재하지만 아직 시작되지 않은 상태입니다. 

2. 로딩중, Loading

뭔가 두려운 상태이죠. 서비스가 완벽하게 작동한다면 이 상태를 볼 일이 없을지도 모릅니다. 아, 하지만 우리 앞에 있습니다. 사용자가 불편하지 않도록 교묘하게 가리거나  최소화하는 방법은 많이 있습니다. 아래 그림처럼 페이스북이 잘 하는 일이기도 하지요. 

3. 없음 ,None

컴포넌트가 초기화되었을 때, 그리고 아무 콘텐츠도 담지 않은 빈 상태일 때를 말합니다. 아무런 데이터나 내용이 없지요. 이 때가 사용자에게 무언가 사용하도록 시킬 수 있는 좋은 기회입니다! “클릭하세요”, “더보기” 와 같은 행동 유도 문구나 “참 잘 했어요”와 같은 인사말은 어떨까요? 

4. 하나, One

약간의 데이터가 있습니다. 인풋과 같은 입력 필드에 첫 조작이 발생했습니다. 또는 목록에서 하나의 글만 있는 경우입니다. 

5. 조금, Some 

UI는 구상할 때, 아마 가장 먼저 생각하게 되는 상태가 아닐까요? 우리가 만드는 컴포넌트의 이상적인 상태는 뭘까요? 데이터는 잘 로딩되고, 입력 필드도 있고요. 사용자가 친숙하게 느끼는 그런 화면의 상태입니다.

6. 너무 많은, Too many

“너무 많다”. 사용자가 과장하고 있는지도 모릅니다. 목록에서 너무 많은 글은 페이지네이션으로 처리하기도 하고, 너무 긴 글은 적당히 잘라내고 말줄임표를 붙이기도 합니다. 

7. 틀린, Incorrect

무언가 틀렸을 경우입니다. “에러가 났다”, “오류가 생겼다.”라고 할 수도 있고요. 사용자의 바른 입력을 요구를 하기도 합니다. 

8. 바른, correct

“참 잘 했어요!” 컴포넌트 설정에 만족된 상태입니다. 

9. 끝, Done

사용자의 바른(correct) 입력이 어플리케이션에 잘 전달되었고, 돌아오는 문제도 없습니다. 더 이상 걱정할 것 없는 상태입니다. 

사용성을 위한 배려

위의 상태들은 페이지, 인터렉션, 데이터의 업데이트, 수많은 서비스의 상태 변경 안에서 반복됩니다.  이런 변화를 위한 디자인 고민과 생각이 있어야 사용자에게 좋은 경험을 줄 수 있습니다. 

위 상태 중 많은 부분은 그저 직관적으로 결정되거나, 상태 자체를 잊어 버리거나 쉽게 무되곤합니다.  이는 서비스의 오류이기도 하고, 경쟁자에게 기회를 준 것과 같습니다. 모든 다자인 과정에 9가지 상태 개념을 더해, 서비스 운영과 동시에 사용자와 공감하기 위해 노력해야 합니다. 

마치며

앞서 말한 것과 같이 UI디자인은 당장 눈 앞에 있지 않은 상태, 상황을 고려해야 하기 때문에 어렵고 고된 작업입니다. 또한 다양한 상황을 디자인에 자연스럽게 녹여야 하기 때문에 실수나 오류가 잦은 작업이기도 합니다. 각자의 디자인 스타일과 과정이 있겠지만 UI컴포넌트를 디자인할 때는 함께 살펴 본 ‘9가지 상태’를 가이드라인으로 삼고 가면 어떨까요? 적어도 사용자를 혼란에 빠뜨리는 일은 없을 겁니다. 

참고

- The Nine States of Design 
- UX 신입 디자이너가 알아야 할 UI디테일 용어 1탄

by 북극곰 발자국