붉은거위 노트 (redgoose note)

Modal 사용에 대한 생각

Nest
Concept
Category
UI
Hit
159
Star
0

https://x.com/_a6g_/status/1796674396607906132

이 글을 읽고 이리저리 생각하게 되었다.
모달 컨텐츠 작업하고 있는중에 읽고있다보니 글 내용이 더 눈에 들어가는거 같다.

링크 포스트에 대한 나의 생각은 모달을 사용하지 말자는 의견은 동의하지 못하고 용도에 잘 맞게 사용하자 라는 점이다.

모달(modal)이라는 UI 요소는 팝업 윈도우가 화면 속으로 들어간 레이어팝업같은 모습이다.
요즘은 정말 흔하게 사용되고 어쩌면 과도하게 사용될 지경으로 많이 보인다. 공해 수준일 정도다. ㅎㅎ
만들기 쉽고(모듈의 분리), 쉽게 UX를 풀어나갈 수 있기도 하여 많이 사용되어 온다.

중대한 행위

확실히 모달을 사용하는 이유는 중대한 이유는 맞다고 생각한다.

행동을 돌이키기 힘들거나 쉽게 수정할 수 없는 강력한 선택을 요구할때 개인적으로는 반드시 모달을 띄어야 한다고 생각하며 시야의 집중을 이끌어 메시지를 읽고 선택할 수 있기 때문이다.
상당히 많이 편하다는 이유로 삭제하는 행위에 그런 경고도 없거나 툴팁같은 형태로 물어보는건 좋은 방법이라고 생각할 수 없다. (데이터가 삭제되거나 수정된다면..)
하지만 업데이트 전이거나 작은 항목이 수정되는 행위라면 좋은 방법이라고 생각한다.

시각적인 전환

그리고 모달을 사용해야하는 이유중 다른 하나는 UI 초기화고 생각한다.
현재의 화면에서 컨텐츠가 추가된 양만큼 복잡하게 구성이 되면서 사용자의 집중이 분산될수밖에 없다. 화면의 복잡성에 의해 어떻게 사용해야할지에 대하여 빠른 학습을 유도하기 힘들어진다. (화면이 복잡하기 때문에 햇갈리기 때문)
무언가 하는 행동이 연결되어 있지 않고 새로 집중해야 할 필요가 있다면 모달이 오히려 좋은 선택일 수 있다고 생각한다.

모달은 사용자에게 집중 시켜주고 해야할 일을 명확하게 만들어주는 역할을 한다고 할 수 있다.

백드롭 닫기에 대한 아이디어

배드롭을 누르면 닫히는 행위는 정말 양날의 검이라고 생각되며 있으면 실수를 유발시키기 쉽고 없으면 대단히 불편하다.
닫기 버튼이라는 것이 항상 쉽게 찾거나 누를 수 있는 요소가 아니라서 백드롭을 눌러 닫는일은 편리하고 많이 사용한다.

백드롭 닫기는 주로 원치 않는데도 닫는 문제때문에 배드패턴으로 보이겠지만 그래도 일단은 편리해서 포기할수도 없다.
그래서 조금 트릭을 넣어보는것도 좋을거라 생각된다.

  • 더블클릭: 백드롭을 클릭하면 실수가 일어나기 쉬우므로 의도적으로 닫게 만들 수 있다. 이 트릭을 알아야만 사용할 수 있으니깐..
    구현은 간단하지만 이런 작동을 알고있는 사람이 없는게 일반적이라서 학습 시켜줘야 한다.
  • 롱터치: 백드롭을 클릭하고 있는 상태에서 일정시간이 지나면 닫게 할 수 있다. 실수로 잠깐 클릭하는 현상은 막을 수 있다.
    이 방법은 요즘 주로 콘솔 게임에서 무언가를 선택할때 버튼을 누르고 있으면 선택 아이콘 주변으로 게이지가 올라가면서 길게 누르라고 유도한다. 이것은 주로 중대한 선택을 요구할때 사용된다.
    이 방식을 이용하면 상당히 완성도높은 닫기 인터랙션을 만들 수 있을것이다.

롱터치 예시때문에 게임화면 녹화해서 애니메이션으로 만들이 귀찮은데 나중에 생각나면 만들어 올려봐야겠다.