🌟 디테일의 간격 시리즈! [✏️ 드롭다운과 스크롤 디자인] (👀간단 요약) ✓ 웹과 모바일 환경은 '모니터의 크기'에 제약 ✓ 캐러셀이나 드롭다운, 스크롤 등 다양한 UI 고려 필요 ✓ 화면의 고정된 면적 안에서 정보를 더 보여주는 장치인 드롭다운과 스크롤 역시 중요 📌 드롭다운, 그리고 드롭다운의 화살표 ✓ 드롭다운에는 선택된 값, 펼침 및 닫힘을 조작해서 정보를 확인하거나 닫을 수 있는 화살표 아이콘 필요 ✓ 화살표 아이콘은 숨겨져 있는 정보를 보여주는 중요한 역할 📌 우리가 드롭다운 디자인을 한다면? ✓ 드롭다운에는 두 가지 모양의 화살표를 활용할 수 있음 ✓ 드롭다운이 열려있으니 현재 상태를 알려주기 위해 '∨ 화살표'를 넣는 것 ✓ 드롭다운을 다시 접을 수 있으니 미래에 할 수 있는 액션을 알려주기 위해 '∧ 화살표'를 넣는 것 ✓ 다만 많은 서비스들의 드롭다운의 화살표 자리에는 '∨ 화살표'와 '∧ 화살표'가 혼용 ✓ 대부분의 메이저 서비스들은 '∧ 화살표(닫을 수 있음)'를 주로 사용 ✓ 현재 상태를 알려주는 것보다 '∧ 화살표(닫을 수 있음)'를 통해 위로 말아 올릴 수 있다는 메시지를 주는 것 📌 어포던스로서의 드롭다운 화살표 ✓ UX를 잘하는 서비스들에서 드롭다운에 존재하는 화살표는 미래에 일어날 일을 알려주는 역할 ✓ 화살표는 원래 시작점(현재의 위치)과 끝 점(미래의 방향)이 혼합된 기호 ✓ 화살표를 보면 현재 내가 어디 있고, 앞으로 어디로 가야 하는지 알 수 있다는 것 ✓ 요즘 온라인 환경에서는 화살표 시작점 꼬리 부분 생략, 끝점인 방향성만 남기는 방향이 많음 ✓ 끝점(▲,▼,∧,∨)만 남은 화살표는 주로 드롭다운이 추후 이동하는 방향에 대한 어포던스 역할을 하게 되는 것 ✓ 드롭다운이 사용되는 콘텍스트가 다양해지면서, 드롭다운을 통해 다른 콘텐츠로 연결 되거나 정보를 더 전달하기 위한 정보성 메시지들을 담는 경우도 많아졌기 때문에 현재 위치가 아닌 미래의 액션을 알려주는 것이 더 중요해짐 📌 어포던스로서의 화살표와 현재 드롭다운이 열려있는 상태 함께 표현하기 ✓ 현재 상태가 아닌 어포던스로서의 화살표(혹은 미래 액션)를 넣고 활성화(ON 된 상태)를 함께 표시해주면 드롭다운이 펼쳐져 있다는 메시지를 미래에 할 수 있는 액션과 함께 표현이 가능 ✓ 두 가지 표현을 한꺼번에 해주면 메시지를 전달하는데 확장성이 생기고 유저들도 상황을 더 여러 측면에서 이해할 수 있게 됨 📌 요즘의 드롭다운 디자인은? ✓ 요즘엔 드롭다운은 화살표를 아예 없애버리고 바로 선택 값을 보여주는 것이 트렌드 ✓ 디자인 또한 쉐도우를 강화해 오히려 모달에 가까운 느낌으로 설계 ✓ 화살표를 없애고 모달과 같이 접근하면 닫을 수 있다는 화살표가 없어도 아무 데나 눌러서 끌 수 있다는 것을 유추 가능 📌 화살표를 없애는 것에는 여러 장점이 존재 ✓ 드롭다운의 선택항목 출력 부분이 고정될 필요가 없다. ✓ 드롭다운 항목을 확인하기 위해 스크롤할 필요가 없다. ✓ 콘텍스트를 통한 정보 선택이 가능하다. 📌 요즘의 스크롤 디자인은? ✓ 텍스트로 이루어진 탑 스크롤 버튼 ✓ 화살표, 내비게이션 등을 같이 사용할 것 ✓ 재미있는 효과를 쓰는 것 (👋중요한 이유가 뭔가요?) 아직도 혼용되어 쓰이는 경우가 많은 것 같아요. 내용이 펼쳐지는 방향으로 화살표를 쓰는지, 아니면 반대로 이해하고 쓰는지로 말이죠. 드롭다운은 우리에게 꽤 익숙한 표현 방식이 되었지만, 맥락에 따라 자세히 뜯어보고 분석한 글은 쉽게 만나 볼 수 없었기에 더 흥미롭게 읽은 글이었습니다. 두 가지 관점에서 글을 읽어보면 좋을 것 같아요. 우리(나)는 드롭다운을 어떻게 이해하고 있는지가 첫 번째, 익숙하다고 생각한 대상에서 발견한 불편함을 어떻게 풀어낼 수 있을지가 두 번째!