버리기 아까웠던

인터랙션 아이디어들

인터랙션 디자인으로도 문제를 해결할 수 있어요

당신에게 인터랙션 디자인이란 어떤 의미인가요? 누군가에겐 단순히 화면과 화면 사이를 이어주는 징검다리일 수도 있고, 누군가에겐 화면을 더 예쁘게 만드는 심미적인 역할일 수도 있겠죠.

하지만 인터랙션은 어떻게 활용하냐에 따라 그 자체로 문제 해결을 위한 기능으로서 쓰일 수 있어요. 모바일은 작은 화면 크기와 조작 방식의 제약으로 인해, 새롭거나 창의적인 UI를 만들어내기 어려운 부분이 있어요. 이미 학습된 사용성 또한 무시할 수 없기 때문에 기존의 익숙한 형상에서 벗어나기 어렵죠. 이러한 UI 디자인의 한계를 극복하는 데에 인터랙션 디자인이 분명히 역할을 할 수 있다고 생각했어요.

실제로 UI를 설계하며 ‘이런 부분에 이런 인터랙션을 활용하면 좋을 것 같은데?’라고 떠올렸던 아이디어들이 많았어요. 하지만 당장 해야 할 바쁜 일들을 하다 보면 떠올렸던 아이디어들을 산출물로 만들지 못하고 넘어갔던 적이 많죠. 하지만 아이디어로 남기기엔 아까운 것들이 많았어요. 그래서 아이디어가 휘발되지 않도록 한번 정리하고 고도화해 보자고 생각했어요.

피싱 문자의 악성 링크를 실수로 누르는 일을 막을 순 없을까?

스팸 문자는 받기 싫어도 자꾸만 오는데요. 그중 피싱 문자는 교묘한 사칭 수법으로 문자에 포함된 링크를 나도 모르게 누르게 만드는 경우가 많아요. 이렇게 나도 모르게 링크를 누르게 되는 경우를 막고 싶었어요.

1) 먼저 모르는 번호를 통해 처음 받는 문자의 경우, 링크가 포함되어 있으면 링크를 숨김 처리했어요. 숨김 처리를 해제하고 링크를 누르더라도 정말 안전한 링크인지 한 번 더 경고해 주도록 했어요.

2) 그리고 ‘링크 열기’ 버튼은 바로 보여주지 않고 의도적인 로딩 애니메이션을 넣었어요. ‘정말 안전한 링크가 맞아?’라고 한 번 더 생각할 수 있는 여유를 두기 위해서요. 이를 통해 사용자가 의식하지 못하고 악성 링크를 누르는 일이 발생하지 않도록 했어요.

업무 문자는 지인 간 대화와 섞이지 않게 따로 모아둘 순 없을까?

메신저를 열면 지인 간 대화 사이에 업무 문자나 기업에서 보낸 알림 문자가 지저분하게 섞여 있지 않나요? 가까운 지인 간 대화는 인스타 DM이나 페이스북 메신저를 선호하는 이유기도 한데요. 이런 문제를 해결하기 위해 특정 집단 간 대화를 폴더 안에 모아둘 수 있는 ‘대화방 모아두기’ 기능을 만들고 싶었어요. 마치 카톡의 조용한 대화방처럼요.

자동차 딜러처럼 다수의 고객을 상대하는 사용자의 경우, 여러 고객의 대화방을 한 곳에 모아 관리할 수 있어요.

설정 등에서 ‘추가하기’ 버튼을 눌러 모아둘 대화방을 선택하면 모아둘 수 있어요. 하지만 진짜 폴더처럼 ‘드래그 앤 드롭’ 방식으로도 대화를 모아둘 수 있게 하고 싶었어요. 좋은 아이디어였지만 드래그 앤 드롭으로 대화방을 모아둘 수 있다는 사실을 사용자에게 어떻게 인지시킬지가 문제였는데요. 코치 마크 같은 뻔한 방식은 쓰고 싶지 않았어요.

그래서 몇 가지 아이디어를 더했어요. 먼저 모아두면 좋을 만한 대화를 추천해 주도록 했어요. 예를 들면 연락처명에 공통된 형식으로 저장된 사람들이 있을 때 (가령 ‘회사명 + 이름’ 형식으로 저장한 연락처들), 이를 모아보라고 추천해 주는 거죠.

‘대화방 모아보기’를 누르면 추천 대화방이 마치 ‘드래그 앤 드롭’처럼 모이는 애니메이션을 재생시켜, 드래그 앤 드롭을 통해 대화방을 모아둘 수 있다는 것을 자연스럽게 인지할 수 있도록 했어요.

요금제별로 다른 인터넷 속도를 어떻게 이해시킬 수 있을까?

100 Mbps, 500 Mbps, 1 Gbps 등, 인터넷 속도에 대해 차이를 정확하게 알고 인터넷 요금제에 가입하는 사람이 얼마나 될까요? 아마 많지 않을 텐데요. 그 이유는 “대용량 파일 업&다운로드를 끊김 없이 쓰고 싶다”처럼 추상적인 텍스트로만 설명하고 있기 때문이에요. 인터넷 속도는 결국 인터넷 설치가 되고 파일을 다운로드해 볼 때에서야 체감해 볼 수 있죠.

그래서 떠올린 아이디어는 ‘실제로 파일을 다운로드하는 것 같은 시뮬레이션을 보여주자!’ 였어요. 인터넷 속도별로 달라지는 다운로드 프로그레스 바의 시각적인 속도감으로 인터넷 속도를 체감시키는 것이죠.

화면에서 인터넷 속도를 조절하면 그에 따른 다운로드 속도와 남은 시간을 보여줘요. 인터넷 속도가 높아질수록 다운로드 속도는 빨라지고 남은 시간은 줄어들어요. (프로그레스 바의 진행 속도 또한 빨라져요.) 이를 통해 사용자가 인터넷 속도 별 차이를 명확하게 인지하고, 필요한 속도의 요금제에 가입할 수 있도록 했어요.

낯선 대출 과정, 설명 없이도 쉽게 따라오게 하기

보험 계약의 해약환급금을 담보로 하는 ‘보험계약대출’은 신청 방식이 두 가지로 나뉘었는데요. 하나는 계약별로 대출금을 설정하는 ‘계약별 대출’. 나머지 하나는 금리가 낮은 계약 순으로 대출받는 ‘일괄 대출’이었어요. 하지만 대출을 처음 받는 사용자에게 계약별 대출과 일괄 대출이라는 개념은 너무 어렵게 느껴질 것 같았어요. 그래서 저는 두 신청 방식을 하나로 합치고 싶었어요.

1) 먼저 필요한 대출 금액을 입력하면 금리 낮은 순으로 계약별 금액을 계산해 주도록 했어요.

2) 그리고 필요한 경우 계약별 금액을 수정할 수 있게 했어요. 쉽게 말해 ‘일괄 대출’을 신청 방식의 기본값으로 두고, ‘계약별 대출’ 또한 가능하게 만든 것이었어요.

문제는 기존 대출 방식에 익숙한 사용자였어요. 바뀐 대출 과정이 낯설게 느껴지는 것을 막고 바뀐 과정을 자연스럽게 이용할 수 있게 하고 싶었어요. 이를 위해 사용자가 입력/선택한 금액이 다음 화면으로 자연스럽게 이어지는 인터랙션을 추가했어요. 대출 과정이 자연스럽게 이어지도록 하여 사용자가 고민 없이 따라오기만 해도 대출 실행까지 이어지도록 했죠.

사용자가 직접 계산해야 하는 수고로움 덜어주기

변액보험은 보험료 중 일부를 펀드에 투자하여 수익률을 기대하는 보험이에요. 그래서 시장 상황에 따른 주기적인 펀드 비율 변경이 필요해요. 이 펀드 비율 변경 과정을 개선하고 싶었어요.

변액보험은 보험료 중 일부를 펀드에 투자하여 수익률을 기대하는 보험이에요. 그래서 시장 상황에 따른 주기적인 펀드 비율 변경이 필요해요. 이 펀드 비율 변경 과정을 개선하고 싶었어요.

1) 먼저 슬라이더를 통해 가볍게 비율 조정이 가능하게 바꿨어요. 처음부터 바꿀 비율을 1% 단위로 정확히 정하고 들어오는 사용자 보다, 비율을 다양하게 조정하며 맞춰가는 사용자가 더 많을 거라 생각했기 때문이에요.

2) 그리고 슬라이더 조절을 통한 비율 조정 시, 영향을 받는 항목에 대한 즉각적인 피드백을 제공하도록 했어요. 펀드 비율을 조정하면 아래의 세 가지가 함께 바뀌어요.

  • 변경되는 보험료
  • 포트폴리오 그래프
  • 100%를 맞추기 위한 잔여/초과 비율

포트폴리오 그래프를 실시간으로 노출하여 비율 변경으로 인해 바뀌는 포트폴리오를 시각적으로 확인할 수 있게 했어요. 또한 현재 합계 비율이 72%인 경우 100 - 72를 머릿속으로 떠올리고 28%를 계산하는 과정 없이도, “28%가 더 필요해요”라고 미리 알려주도록 했어요.

이를 통해 사용자가 직접 계산해야 하는 수고로움은 줄이고, 오로지 비율을 조정하는 행위에만 집중할 수 있게 했어요.

인터랙션 디자인은 문제를 풀어내는 새로운 해결 방식이 될 수 있어요.

틀에 갇힌 UI 디자인에 한계를 느끼고 있나요? 인터랙션 디자인을 통한 동적인 UI로 새롭게 접근해 보는 건 어떨까요? 어쩌면 문제를 해결하는 새로운 UI의 기준이 만들어질 수도 있어요.

Ideation

Prototyping

Written by

조현승

UX Consultant

What we do

Work

Insights

Contact

버리기 아까웠던

인터랙션 아이디어들

인터랙션 디자인으로도 문제를 해결할 수 있어요

당신에게 인터랙션 디자인이란 어떤 의미인가요? 누군가에겐 단순히 화면과 화면 사이를 이어주는 징검다리일 수도 있고, 누군가에겐 화면을 더 예쁘게 만드는 심미적인 역할일 수도 있겠죠.

하지만 인터랙션은 어떻게 활용하냐에 따라 그 자체로 문제 해결을 위한 기능으로서 쓰일 수 있어요. 모바일은 작은 화면 크기와 조작 방식의 제약으로 인해, 새롭거나 창의적인 UI를 만들어내기 어려운 부분이 있어요. 이미 학습된 사용성 또한 무시할 수 없기 때문에 기존의 익숙한 형상에서 벗어나기 어렵죠. 이러한 UI 디자인의 한계를 극복하는 데에 인터랙션 디자인이 분명히 역할을 할 수 있다고 생각했어요.

실제로 UI를 설계하며 ‘이런 부분에 이런 인터랙션을 활용하면 좋을 것 같은데?’라고 떠올렸던 아이디어들이 많았어요. 하지만 당장 해야 할 바쁜 일들을 하다 보면 떠올렸던 아이디어들을 산출물로 만들지 못하고 넘어갔던 적이 많죠. 하지만 아이디어로 남기기엔 아까운 것들이 많았어요. 그래서 아이디어가 휘발되지 않도록 한번 정리하고 고도화해 보자고 생각했어요.

피싱 문자의 악성 링크를 실수로 누르는 일을 막을 순

없을까?

스팸 문자는 받기 싫어도 자꾸만 오는데요. 그중 피싱 문자는 교묘한 사칭 수법으로 문자에 포함된 링크를 나도 모르게 누르게 만드는 경우가 많아요. 이렇게 나도 모르게 링크를 누르게 되는 경우를 막고 싶었어요.

1) 먼저 모르는 번호를 통해 처음 받는 문자의 경우, 링크가 포함되어 있으면 링크를 숨김 처리했어요. 숨김 처리를 해제하고 링크를 누르더라도 정말 안전한 링크인지 한 번 더 경고해 주도록 했어요.

2) 그리고 ‘링크 열기’ 버튼은 바로 보여주지 않고 의도적인 로딩 애니메이션을 넣었어요. ‘정말 안전한 링크가 맞아?’라고 한 번 더 생각할 수 있는 여유를 두기 위해서요. 이를 통해 사용자가 의식하지 못하고 악성 링크를 누르는 일이 발생하지 않도록 했어요.

업무 문자는 지인 간 대화와 섞이지 않게 따로 모아둘 순

없을까?

메신저를 열면 지인 간 대화 사이에 업무 문자나 기업에서 보낸 알림 문자가 지저분하게 섞여 있지 않나요? 가까운 지인 간 대화는 인스타 DM이나 페이스북 메신저를 선호하는 이유기도 한데요. 이런 문제를 해결하기 위해 특정 집단 간 대화를 폴더 안에 모아둘 수 있는 ‘대화방 모아두기’ 기능을 만들고 싶었어요. 마치 카톡의 조용한 대화방처럼요.

자동차 딜러처럼 다수의 고객을 상대하는 사용자의 경우, 여러 고객의 대화방을 한 곳에 모아 관리할 수 있어요.

설정 등에서 ‘추가하기’ 버튼을 눌러 모아둘 대화방을 선택하면 모아둘 수 있어요. 하지만 진짜 폴더처럼 ‘드래그 앤 드롭’ 방식으로도 대화를 모아둘 수 있게 하고 싶었어요. 좋은 아이디어였지만 드래그 앤 드롭으로 대화방을 모아둘 수 있다는 사실을 사용자에게 어떻게 인지시킬지가 문제였는데요. 코치 마크 같은 뻔한 방식은 쓰고 싶지 않았어요.

그래서 몇 가지 아이디어를 더했어요. 먼저 모아두면 좋을 만한 대화를 추천해 주도록 했어요. 예를 들면 연락처명에 공통된 형식으로 저장된 사람들이 있을 때 (가령 ‘회사명 + 이름’ 형식으로 저장한 연락처들), 이를 모아보라고 추천해 주는 거죠.

‘대화방 모아보기’를 누르면 추천 대화방이 마치 ‘드래그 앤 드롭’처럼 모이는 애니메이션을 재생시켜, 드래그 앤 드롭을 통해 대화방을 모아둘 수 있다는 것을 자연스럽게 인지할 수 있도록 했어요.

요금제별로 다른 인터넷 속도를 어떻게 이해시킬 수 있을까?

100 Mbps, 500 Mbps, 1 Gbps 등, 인터넷 속도에 대해 차이를 정확하게 알고 인터넷 요금제에 가입하는 사람이 얼마나 될까요? 아마 많지 않을 텐데요. 그 이유는 “대용량 파일 업&다운로드를 끊김 없이 쓰고 싶다”처럼 추상적인 텍스트로만 설명하고 있기 때문이에요. 인터넷 속도는 결국 인터넷 설치가 되고 파일을 다운로드해 볼 때에서야 체감해 볼 수 있죠.

그래서 떠올린 아이디어는 ‘실제로 파일을 다운로드하는 것 같은 시뮬레이션을 보여주자!’ 였어요. 인터넷 속도별로 달라지는 다운로드 프로그레스 바의 시각적인 속도감으로 인터넷 속도를 체감시키는 것이죠.

화면에서 인터넷 속도를 조절하면 그에 따른 다운로드 속도와 남은 시간을 보여줘요. 인터넷 속도가 높아질수록 다운로드 속도는 빨라지고 남은 시간은 줄어들어요. (프로그레스 바의 진행 속도 또한 빨라져요.) 이를 통해 사용자가 인터넷 속도 별 차이를 명확하게 인지하고, 필요한 속도의 요금제에 가입할 수 있도록 했어요.

낯선 대출 과정, 설명 없이도 쉽게 따라오게 하기

보험 계약의 해약환급금을 담보로 하는 ‘보험계약대출’은 신청 방식이 두 가지로 나뉘었는데요. 하나는 계약별로 대출금을 설정하는 ‘계약별 대출’. 나머지 하나는 금리가 낮은 계약 순으로 대출받는 ‘일괄 대출’이었어요. 하지만 대출을 처음 받는 사용자에게 계약별 대출과 일괄 대출이라는 개념은 너무 어렵게 느껴질 것 같았어요. 그래서 저는 두 신청 방식을 하나로 합치고 싶었어요.

1) 먼저 필요한 대출 금액을 입력하면 금리 낮은 순으로 계약별 금액을 계산해 주도록 했어요.

2) 그리고 필요한 경우 계약별 금액을 수정할 수 있게 했어요. 쉽게 말해 ‘일괄 대출’을 신청 방식의 기본값으로 두고, ‘계약별 대출’ 또한 가능하게 만든 것이었어요.

문제는 기존 대출 방식에 익숙한 사용자였어요. 바뀐 대출 과정이 낯설게 느껴지는 것을 막고 바뀐 과정을 자연스럽게 이용할 수 있게 하고 싶었어요. 이를 위해 사용자가 입력/선택한 금액이 다음 화면으로 자연스럽게 이어지는 인터랙션을 추가했어요. 대출 과정이 자연스럽게 이어지도록 하여 사용자가 고민 없이 따라오기만 해도 대출 실행까지 이어지도록 했죠.

사용자가 직접 계산해야 하는 수고로움 덜어주기

변액보험은 보험료 중 일부를 펀드에 투자하여 수익률을 기대하는 보험이에요. 그래서 시장 상황에 따른 주기적인 펀드 비율 변경이 필요해요. 이 펀드 비율 변경 과정을 개선하고 싶었어요.

변액보험은 보험료 중 일부를 펀드에 투자하여 수익률을 기대하는 보험이에요. 그래서 시장 상황에 따른 주기적인 펀드 비율 변경이 필요해요. 이 펀드 비율 변경 과정을 개선하고 싶었어요.

1) 먼저 슬라이더를 통해 가볍게 비율 조정이 가능하게 바꿨어요. 처음부터 바꿀 비율을 1% 단위로 정확히 정하고 들어오는 사용자 보다, 비율을 다양하게 조정하며 맞춰가는 사용자가 더 많을 거라 생각했기 때문이에요.

2) 그리고 슬라이더 조절을 통한 비율 조정 시, 영향을 받는 항목에 대한 즉각적인 피드백을 제공하도록 했어요. 펀드 비율을 조정하면 아래의 세 가지가 함께 바뀌어요.

  • 변경되는 보험료
  • 포트폴리오 그래프
  • 100%를 맞추기 위한 잔여/초과 비율

포트폴리오 그래프를 실시간으로 노출하여 비율 변경으로 인해 바뀌는 포트폴리오를 시각적으로 확인할 수 있게 했어요. 또한 현재 합계 비율이 72%인 경우 100 - 72를 머릿속으로 떠올리고 28%를 계산하는 과정 없이도, “28%가 더 필요해요”라고 미리 알려주도록 했어요.

이를 통해 사용자가 직접 계산해야 하는 수고로움은 줄이고, 오로지 비율을 조정하는 행위에만 집중할 수 있게 했어요.

인터랙션 디자인은 문제를 풀어내는 새로운 해결 방식이 될 수 있어요.

틀에 갇힌 UI 디자인에 한계를 느끼고 있나요? 인터랙션 디자인을 통한 동적인 UI로 새롭게 접근해 보는 건 어떨까요? 어쩌면 문제를 해결하는 새로운 UI의 기준이 만들어질 수도 있어요.

Ideation

Prototyping

Written by

조현승

UX Consultant