IT 프로젝트를 위한 개념집
UI 컴포넌트 용어 정리-입력/선택1
IT 프로젝트를 진행하다 보면 개발자, 디자이너, 서비스 기획자들과 지속적인 커뮤니케이션이 필수이다.
처음 IT 관련 업무를 시작했을 때 화면의 기능을 표현하고 싶었지만 자세하게 표현하기가 어려워 계속 "
이렇게 생기고 화살표 있고 그렇게..." 라는 추상적인 말들로 커뮤니케이션을 진행했던 기억이 있다.
물론 그래도 소통이 되기는 하지만 이 때 사용하는 용어들이나 개념들을 정확히 파악하고 있다면 더 효율적인 커뮤니케이션이 가능하다.
따라서 IT 프로젝트를 사용하면서 많이 보였던 개념들에 대해서 정리해보려고 한다.
사용자와 시스템이 인터랙션을 하기 위한 가장 기본 기능은 입력/선택이다. 현재 개발 중인 시스템에서는 어떤 입력/선택 시스템이 가장 적절할까를 고민하는 것도 프로젝트 참여자 입장에서는 중요한 결정사항이다.
따라서 입력/선택을 위한 UI 컴포넌트 용어에 대해서 알아보자.
스태퍼 (stepper)
주로 숫자 정보를 입력할 때 쓰인다. -/+ 아이콘, 위아래 화살표를 활용하여 값을 변경한다. 작은 범위 숫자 조장이 있을 경우 유용하다.
(⁕주의: 스태퍼는 단계를 표현할 때도 사용하는 말이지만 이 내용은 나중에 또 다루도록 하겠다)
장점
1. 추가 인풋 장치가 필요하지 않고 화면 위에서 간단한 터치로 컨트롤 가능(어떤 디바이스에서든 활용 가능하다)
2. 숫자를 입력하는 직관적인 메타포를 담고 있기 때문에 사용자가 사용 방법을 추가로 고민할 필요가 없다.
3. 작은 숫자 조정이 있을 경우 스태퍼는 조금의 노력으로 입력이 가능하다.
단점
1. 스태퍼의 크기가 작을 경우 사용자의 작업 실수가 늘어날 수 있다.
2. 큰 범위의 조정에는 알맞지 않다. 현재 기획중인 시스템이 50 이상의 수를 조절해야 한다면 스태퍼를 50번 눌러야 하는 일이 생겨버린다�
스태퍼 디자인 가이드라인
-작은 범위의 숫자 조정이 있을 경우만 스태퍼를 사용해라. 만일 조정해야 하는 숫자 범위가 클 수도 있을 경우에는 키패드를 띄워 다른 입력 방법을 유도할 수도 있다.
-가장 자주 사용되는 숫자를 디폴트 숫자로 입력해 놓아라.
-버튼의 크기를 적절하게 디자인해야 한다.(마우스로 조작해야한다고 너무 작게 만들경우 사용성을 저해할 수 있다.)
드롭다운
사용자가 리스트에서 하나의 옵션을 선택할 수 있도록 하는 컴포넌트. 기본적으로 닫힌 상태에서 선택된 값만 보이고, 클릭시 펼쳐져 다양한 옵션을 보여준다.
장점
1. 공간을 절약할 수 있다. 많은 항목을 보여줘야 할 때 적은 UI 공간을 차지한다.(일반적으로 7개 이상의 옵션이 있을 경우 드롭다운 사용이 권장됨)
2. 깔끔한 UI를 유지할 수 있다. 정보노출이 최소화되어 있기 때문에 인터페이스가 깔끔하게 유지될 수 있다.
단점
1. 선택과정이 추가되어 사용자 동선이 하나 추가된다. 사용자가 리스트를 열고 스크롤하고 다시 닫는 과정을 거쳐야 하기 때문에 자주 선택을 변경해야 하는 항목에는 비효율적일 수 있다.
2. 기본적으로 항목이 숨겨져 있기 때문에 선택지를 한눈에 파악하기 어렵다.
3. 모바일 UI 기획시 한계가 있다. 작은 화면에서 드롭다운을 펼치고 조작하는 것은 사용자에게 어려움을 줄 수 있다.
드롭다운 디자인 가이드라인
-상호작용하는 드롭다운은 피해야 한다. 한 드롭다운의 선택에 따라서 다른 드롭다운의 옵션이 바뀌는 구조는 사용자를 혼란하게 만들 수 있다.
-비활성 항목은 삭제가 아닌 회색처리를 하여 전체적인 맥락을 유지하고 회색 처리된 항목에 대해서는 툴팁을 사용하여 왜 비활성화되었는지를 알려주는 방법이 좋다.
-스크롤이 긴 드롭다운은 피해야 한다. 너무 긴 목록은 한눈에 모든 항목을 볼 수 없게 하고 사용자가 드롭다운을 벗어나지 않도록 정밀하게 마우스를 조작해야해서 피로도를 높인다.
-타이핑이 빠를 경우(ex. 국가 입력, 주 입력) 드롭박스 사용을 피해라.
-사용자에게 매우 익숙한 정보(ex. 생년월일)를 입력해야 하는 경우에는 드롭박스 사용을 피해라. 이는 오히려 사용자의 작업에 부하를 줄 수 있다.
-드롭다운 컴포넌트는 마우스뿐만 아니라 키보드 입력도 반드시 지원해야 한다. 이러한 추가 입력 방식은 긴 드롭다운 리스트에 대한 문제를 완화할 수 있고 접근성을 향상할 수 있다.
https://brunch.co.kr/@potatohands/247
https://ahnsisters.tistory.com/52
https://www.nngroup.com/articles/drop-down-menus/
