안녕하세요. 디자인팀 입니다.
이지스토리지 시스템에 인터랙션 개선 작업이 있었습니다. 인터랙션이라는게 사용자한테는 생소할 수 있겠지만 알고보면 웹 사이트 혹은 App에서 쉽게 발견할 수 있습니다. 이지스토리지를 보면 인터랙션에 대한 소통 부재가 많아 하나씩 늘려가는 방향으로 진행하고자 고민을 시작했습니다.
고민 
이지스토리지 시스템에서 사용자가 가장 많이 접하는게 어떤걸까? 하고 하나씩 클릭해봤습니다.
계속 클릭하다보니 버튼에 인터랙션 개선이 필요하다고 확신했습니다.
그렇다면 버튼을 어떻게 개선 해야할까? 어떤 차이를 줘서 사용자에게 변화된 것을 느끼게 해줄 수 있을까? 하며 여러 레퍼런스들을 찾아보고 클릭해보며 자료를 모으기 시작했습니다.
인터랙션(Interaction)?
상호작용, 즉 두 대상 간에 소통하거나 정보를 교류하는 것을 의미합니다.
웹/앱에서 사용자와 시스템 간의 상호작용을 의미하기도 합니다.
인터랙션을 통해 사용자에게 어떤 행동을 해야하는지 명확하게 전달할 수 있습니다.
사용자가 인터랙션에 대해 자세히 뜯어보고 예민하게 반응하지 않을 수 있어 시간을 많이 들이는게 맞나? 망설이며 업무 우선순위에서 뒤로 미뤄왔습니다.
새로운 디자인 영역인 인터랙션이 보다 재미있게 다가와서 다행이라 여기며 피그마에서 여러개의 시안을 만들고 테스트를 진행했습니다.
전/후
변경 전
이전 버튼은 단순하게 액션이 하나였습니다. Hover 했을 때 ezstorage의 메인 컬러를 보여주며 반응하게 적용했습니다. 당시에 많이 사용하던 버튼 Hover 방식으로 시스템 초창기때부터 지금까지 변함없이 사용했습니다.
시스템 전체 디자인이나 작은 요소들을 수 없이 변경했지만 중요하게 생각하지 않았던 버튼을 무방비하게 방치했구나하며 반성하는 시간이었습니다.
변경 후
한동안 휴대폰만 보며 여러 앱들의 버튼을 수도 없이 눌러봤습니다. 그러다가 공통점을 발견했는데 클릭, 누르는 순간의 인터랙션이 집중되어있는 것을 보고 반영했습니다.
알 듯 말 듯~ 물 흘러가 듯~ 클릭되어 자연스럽게 넘어가는 것을 보고 버튼을 강하게 어필하여 보여줄 필요는 없겠구나 싶었습니다. 키보드처럼 누르면 눌린다는 느낌의 당연함을 반영했습니다. 실제처럼 느끼게 해주는게 버튼 인터랙션의 매력이지 않나 싶습니다.
소통
개발팀과 늘 면밀히 소통하며 진행하지만 이번 인터랙션은 더더욱 긴밀하게 소통이 필요했습니다. 화면을 같이 확인하면서 이 방식이 맞나? 서로 물어가며 테스트 했습니다.
확신할 수 있는 지표도 없고, 혼자 판단해야하는 아쉬움이 있었지만 개발팀과 1:1로 붙어 속도와 사이즈를 조절해가며 테스트한 시간이 재미있었습니다.
마무리
인터랙션에 대해 관심이 높아지긴했지만 우선순위에 올라와있지 않아 방치한 버튼이었습니다. 사용자에게 여러 경험을 줄 수 있도록 시간들여 고민해야봐야겠습니다.