# user study
💻 얼마나 잘 입력하나요? HCI 유저 스터디 - (3) 결과 분석
대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다. 유저 스터디에 사용한 사이트: https://odd-keyboard.web.app/ 이번 글에서는 유저 스터디 결과 분석 과정 및 결론을 다룹니다. 3줄 요약 유저들은 게으르다. 사람들은 입력하려는 키의 가운데보다 아래쪽을 더 많이 누른다. 유저 스터디는 재밌다.😎 프로젝트 정리 유저 스터디의 목적 모바일 환경에서 유저가 실제로 터치하는 부분의 좌표 분석 구체적인 목표 키보드를 누를 때 손가락이 실제로 화면과 닿는 부분이 어느 영역인지 알아봅니다. 버튼을 누를 때 어느 부분을 주로 터치하는지 파악합니다. 가설: 키보드 버튼과 일반적인 다른 버튼 모두 가운데 부분을 누를 것이다. 실제로 유저로부터 받은 정보 사용자가 웹사이트의 각 페이지에서 터치한 x, y 좌표 구현한 프
💻 얼마나 잘 입력하나요? HCI 유저 스터디 - (2) 실험 상세 설계
대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다. 유저 스터디에 사용한 사이트: https://odd-keyboard.web.app/ 깃허브: https://github.com/broccolism/HCI-where-they-touch 이번 글에서는 상세한 실험 설계 과정을 소개합니다. 가장 고민했던 내용 이번 유저 스터디에서는 사용자가 스마트폰 화면의 어느 부분을 터치했는지 (x, y) 좌표를 기록하기로 했습니다. 처음에는 단순히 유저의 터치 이벤트를 감지하고, 이벤트가 발생했을 때마다 pageX, pageY 값을 받아오면 끝날 것으로 생각했습니다. 하지만 생각해보니... 서로 다른 크기의 스마트폰 이렇게 스마트폰 화면 크기가 천차만별인 것이죠. 이번
💻 얼마나 잘 입력하나요? HCI 유저 스터디 - (1) 기획안 구상
대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다. 유저 스터디에 사용한 사이트: https://odd-keyboard.web.app/ 이번 글에서는 프로젝트의 목표와 웹사이트 기획안을 소개합니다. 발단 버튼 디자인. 어떤 색깔로 어떤 크기의 버튼을 페이지의 어느 부분에 얼만큼의 여백을 두고 넣어야할까? 라는 고민을 항상 했습니다. 디자이너가 있다면 깔끔하게 해결될 문제겠지만 1인 프로젝트를 진행하거나 디자이너조차 잘 모를 경우에는 고민에 빠질 수밖에 없죠. 이렇게 처음에는 단순히 서로 다른 버튼을 몇개 배치하고, 사용자가 어떤 부분을 주로 누르는지 알아보는 실험을 생각했습니다. “저였다면 큰 버튼도 좋지만, 작은 버튼에 대한 연구도 할 것 같아요. 이를테면 키보드 같은?” 아이디어 발표 시간, 교수님으로부터 생각치못한 좋은 조언을 얻었고 방향을 틀었습니다. Where they touch? 새 프로젝트명이 만들어졌습니
🌚 다크모드, 진짜로 눈에 좋을까? HCI 유저 스터디 - (3) 결과 데이터 분석
대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다. 유저 스터디에 사용한 사이트: https://hci-proj-1.web.app/ 이번 글에서는 유저 스터디 결과 분석 과정 및 결론을 다룹니다. 3줄 요약 다크모드 vs 라이트모드의 승자는 없다. 파이어베이스로 데이터 불러오는 과정은 꽤 불편하다. 유저스터디는 재밌다.😇 프로젝트 정리 드디어 결과에 대한 포스팅을 할 차례네요. 약 3주간 이루어진 프로젝트의 목표는 다음과 같습니다. 유저 스터디의 목적: 다크 모드가 실제로 '눈에 좋은'지 확인 구체적인 목표 다크모드를 사용하면 정말로 눈의 피로도가 줄어들까? 다크모드에서 한눈에, 정확하게 글자를 파악할 수 있을까? 코딩을 하면서 어두운 배경에 밝은 글씨 테마를 사용해보며 느낀 점은 '잔상이 너무 잘 남는다' 였습니다. 그래서 처음에는 너도나도 많이 사용하는
🌚 다크모드, 진짜로 눈에 좋을까? HCI 유저 스터디 - (2) 리액트에서 컴포넌트 만들기
대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다. 유저 스터디에 사용한 사이트: https://hci-proj-1.web.app/ 이번 글에서는 해당 사이트를 개발하며 있었던 일 - 리팩토링을 정리합니다. 컴포넌트화의 중요성 보이세요? 제가 만들어낸 수많은 중복 코드가... 컴포넌트? Component의 사전적 의미는 다음과 같습니다. 더 큰 전체 부분, 특히 기계나 차량의 부품 또는 요소 (Oxford Languages) 다른 부분과 결합하여 더 큰 것을 형성하는 부분 (Cambridge Dictionary)</spa
🌚 다크모드, 진짜로 눈에 좋을까? HCI 유저 스터디 - (1) 기획안 구상
대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다. 유저 스터디에 사용한 사이트: https://hci-proj-1.web.app/ 이번 글에서는 해당 사이트를 왜, 어떤 생각으로 개발했는지를 설명합니다. HCI? 유저 스터디? HCI는 Human Computer Interaction의 약자입니다. 인간과 컴퓨터는 다릅니다. 컴퓨터의 행동을 다루는 개발자와 사람의 생각을 다루는 기획자 간 차이만 봐도 알 수 있을거에요. 같은 사람끼리도 이렇게 다른데, 사람과 컴퓨터 사이에는 다른 점이 너무나 많습니다. HCI에서는 컴퓨터를 어떻게 만들어야 사람들이 컴퓨터와 성공적으로 상호작용 할 수 있을지를 고민합니다. 사람을 마음대로 만들거나 바꿀 순 없으니까요. 다른 컴퓨터공학 분야와 다르게 HCI에서는 유저 스터디가 매우 중요합니다. 사람과 컴퓨터의 상호작용을 다루