💻 얼마나 잘 입력하나요? HCI 유저 스터디 - (2) 실험 상세 설계

대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다.
유저 스터디에 사용한 사이트: https://odd-keyboard.web.app/
깃허브: https://github.com/broccolism/HCI-where-they-touch
이번 글에서는 상세한 실험 설계 과정을 소개합니다.

가장 고민했던 내용

이번 유저 스터디에서는 사용자가 스마트폰 화면의 어느 부분을 터치했는지 (x, y) 좌표를 기록하기로 했습니다. 처음에는 단순히 유저의 터치 이벤트를 감지하고, 이벤트가 발생했을 때마다 pageX, pageY 값을 받아오면 끝날 것으로 생각했습니다. 하지만 생각해보니...

이렇게 스마트폰 화면 크기가 천차만별인 것이죠. 이번에도 평화로운 코딩 시간은 물건너갔다는걸 직감했습니다.

생각의 흐름

📱 기종별로 가로, 세로 크기가 다르니까 터치할 수 있는 픽셀 영역의 최댓값이 달라짐

가운데 정렬하지 말고 무조건 왼쪽 정렬을 사용하자!
그러면 누구나 모든 컴포넌트가 `pageX = 0` 부터 시작하니까 괜찮을듯.

📏 왼쪽 정렬을 해도 가로로 길이가 긴 컴포넌트라면 똑같은 문제 발생

그러면 사용자별로 휴대폰 화면의 width값을 받아서 저장해놓자.

😇 근데 그거 저장해서 뭐 어떻게 할건데??

...
...
크기와 위치 모두 퍼센트면 기준 화면에 맞춰 scaling을 해서 옮길 수 있겠구나!

🔍 그렇게 하면 화면이 큰 사람일수록 키보드 사이즈가 커질텐데?

그럼 안되지.. 키보드 사이즈는 통제변인이다.
...
그렇다면 기준 가로 폭을 정한 다음 나머지 좌우 공간은 까맣게 여백으로 남기자.
이후 기록에서 사용자 화면에 따른 왼쪽 여백 길이만 빼주면 됨!

🥳 드디어 결론: 기준 가로 폭을 정한 다음, 나머지 공간은 여백으로 처리
그래서 이런 화면이 나왔습니다.

가운데 영역은 가로 350px로, 거의 대부분의 스마트폰 가로 크기보다 작습니다. 따라서 모든 사용자가 여백 부분을 제외하고 같은 모습을 보고 같은 위치에 터치할 수 있습니다.

그 다음으로 고민했던 내용

교수님 피드백을 받은 후 이런 고민거리도 생겼습니다.

1. 버튼 업/다운 중 어느 시점의 좌표를 기록할 것인지
2. 관심 영역(region of interest)을 어떻게 설정할 것인지
3. 사용자가 키보드의 키 부분이 아닌 여백 부분을 터치하면 어떻게 처리할 것인지

1. 버튼 업/다운

✅ 버튼 업 시점의 좌표를 기록합니다.

스마트폰 키보드에서 이렇게 키를 누르면 어떤 키를 눌렀는지 볼 수 있게 확대해주는 기능이 있습니다. 이 기능을 사용하다보면, 처음에는 A를 눌렀다가 손가락을 떼지 않고 D로 이동하면 확대해주는 키 역시 D가 되는 것을 알 수 있죠. 즉, 처음 키를 누르는 순간 입력으로 받아들이지 않고 손가락을 화면에서 뗐을 때 입력으로 받아들이는겁니다. 따라서 이번 유저스터디에서도 버튼 업 시점의 좌표를 기록하기로 했습니다.

2. 관심 영역 설정

✅ 키 사이 여백도 ROI로 설정합니다.

관심 영역 (ROI, Region Of Interest) 이란 전체 데이터셋에서 특정 목적으로 선별된 데이터를 말합니다. 이번 실험에서의 ROI는 '사용자가 스크린을 터치한 영역'이 되겠네요. 그런데 키보드에는 누를 수 있는 키만 있는게 아니라, 키 사이사이의 빈 공간도 있습니다. 이 영역까지 ROI로 넣기로 결정했습니다.

3. 여백 부분 터치 핸들링

✅ 테스트의 절반은 여백을 터치했을 때 입력으로 간주하고,
   나머지는 여백을 터치해도 입력되지 않게 설정합니다.

ROI에 여백도 포함된 이유가 여기에 있습니다. 과연 키보드 사이 여백의 터치를 허용(= 입력으로 간주)할 때와 그렇지 않을 때 사용감 차이가 얼마나 날지 비교해보고 싶었습니다. 실험 결과를 분석하면서 이 부분이 가장 비교가 잘 되었다고 느꼈습니다.

다음 글에서는 이 내용을 바탕으로 프로젝트 구현하는 과정을 적어보도록 하겠습니다.