대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다.
유저 스터디에 사용한 사이트: https://odd-keyboard.web.app/
이번 글에서는 프로젝트의 목표와 웹사이트 기획안을 소개합니다.

발단

버튼 디자인. 어떤 색깔로 어떤 크기의 버튼을 페이지의 어느 부분에 얼만큼의 여백을 두고 넣어야할까? 라는 고민을 항상 했습니다. 디자이너가 있다면 깔끔하게 해결될 문제겠지만 1인 프로젝트를 진행하거나 디자이너조차 잘 모를 경우에는 고민에 빠질 수밖에 없죠.
이렇게 처음에는 단순히 서로 다른 버튼을 몇개 배치하고, 사용자가 어떤 부분을 주로 누르는지 알아보는 실험을 생각했습니다.

“저였다면 큰 버튼도 좋지만, 작은 버튼에 대한 연구도 할 것 같아요. 이를테면 키보드 같은?”

아이디어 발표 시간, 교수님으로부터 생각치못한 좋은 조언을 얻었고 방향을 틀었습니다.

Where they touch?

새 프로젝트명이 만들어졌습니다.
이번 프로젝트에서 알아보고 싶은건 다음과 같습니다:

모바일 환경에서
1. 사용자가 키보드를 누를 때 정확히 어떤 지점을 터치하는가
2. 키보드의 어떤 요소가 사용감에 영향을 미치는가
3. 사용자는 버튼을 누르기 위해 정확히 어떤 지점을 터치하는가

즉, 사용자가 실제로 터치하는 부분이 어딘지를 알고 싶었습니다. 이걸 알면, 다음 서비스를 만들 때에는 더이상 “이 버튼이 여기 이런 크기로 들어가는게 과연 맞을까…”하는 의구심이 들지 않을테니까요. 실제 서비스를 제작할 때 키보드 크기를 조절할 수는 없겠지만 이건 그냥, 궁금했습니다.

실험의 종류

키보드 실험과 버튼 실험, 2가지 실험을 생각했습니다.

1. 키보드 실험

• 키 버튼 1개 (‘ㄱ’, ‘ㄴ’과 같은 자모 하나)의 크기
  • 클 때, 작을 때 2가지로 구분
• 키 버튼이 아닌 부분, 즉 여백을 터치했을 때에도 입력한 것으로 생각할지에 대한 여부
  • 만약 여백 터치를 허용하지 않는 경우, ‘ㄱ’을 입력하기 위해서는 정확히 ‘ㄱ’ 키 영역을 터치해야 입력으로 인정

2. 버튼 실험

• 버튼 유형별로 어느 부분을 터치하는지
  • 라디오버튼, 글자만 있는 버튼, 배경색이 있는 버튼 등

추가적인 고려사항

실험의 결과물로 사용자가 터치한 부분의 x, y좌표를 받아와서 웹사이트 화면에 표시하려고 했습니다. 하지만 조금만 잘 생각해보면 사람들마다 사용하는 휴대폰 기기 종류가 다를 것이고 그에 따라 screen size 역시 달라질 것이기 때문에 여러 사이즈에 대한 핸들링이 필요했습니다.
다음 포스팅에서는 이 문제를 해결한 과정을 중점적으로 다루려 합니다.