인터페이스를 디자인할 때 종종 개발자 분께서 ‘앗 그것도 정의해주셔야 해요’라고 말씀하실 때가 많죠? 그래픽 디자인 툴을 이용해 정지된 화면을 만들다보면 다양한 경우의 수를 예측하기가 어려울 때가 많습니다. 정교하게 만든 디자인 시스템을 이용해 프로토타이핑을 해도 놓치는 부분이 생길 수 있습니다.

디자이너는 현재 사용자 상태, 사용자가 시스템에 주는 정보, 시스템이 사용자에게 주는 정보 등을 꼼꼼하게 살펴 사용자의 경로를 설계합니다. 가장 최고의 상태부터 가장 최악의 상태까지 촘촘하게 사용자 층을 나눠 누구나 목적을 쉽게 달성할 수 있게 돕는 길을 만드는 것이 중요합니다. 이번 글에서는 다양한 경우의 수에 대응할 수 있는 디자인을 만들기 위해 꼭 확인해야 하는 인터페이스의 20가지 속성에 대해 정리했습니다.

정보 입력

쉽게 보면 사용자가 버튼을 누르거나 글자를 입력하는 것을 입력이라 합니다. 사용자가 시스템에 정보를 보내는 행동에 대한 정의입니다.

1. Default: 최초 상태입니다.
2. Inactive: 조건에 따라 입력할 수 없는 상태입니다.
3. Active: 입력할 수 있는 상태입니다.
4. Touch Area: 상호 작용할 수 있는 범위의 크기입니다.
5. Type: 입력하는 정보의 종류입니다.
6. Action: 정보를 제출하는 행동입니다.

정보 출력

버튼을 누르면 다른 화면으로 이동하거나, 텍스트를 입력했을 때 잘못되었다고 표시하는 것들을 출력이라합니다. 사용자가 보낸 정보에 대한 시스템의 대답입니다.

1. Loading: 시스템으로부터 정보를 기다리는 상태입니다.
2. Incorrect: 정보가 틀린 상태입니다.
3. Correct: 정보가 맞은 상태입니다.
4. Fail: 진행하던 것이 실패한 상태입니다.
5. Success: 진행하던 것이 성공한 상태입니다.
6. Save: 정보를 저장하는 시점에 대한 정의입니다.
7. Refersh: 정보를 다시 불러오는 시점에 대한 정의입니다.

정보의 량

카드 리스트, 필터 리스트 등 여러 개의 정보를 불러올 때 상태에 대한 정의입니다. 리스트처럼 동일한 요소를 불러오는 것 뿐만 아니라 상품 카드처럼 다양한 요소가 덩어리로 묶인 경우에도 량에 대해 고려해야 합니다.

1. None: 정보가 없는 상태입니다.
2. Min: 1개 혹은 최소 단위의 정보가 나온 상태입니다.
3. Some: 약간 있는 상태입니다.
4. Many: 많이 있는 상태입니다.
5. Max: 꽉 찬 상태입니다.
6. Overflow: 넘친 상태입니다.