🌚 다크모드, 진짜로 눈에 좋을까? HCI 유저 스터디 - (3) 결과 데이터 분석

대학교 2021년 1학기 인간컴퓨터상호작용(HCI) 학부 과목을 수강하며 진행한 프로젝트입니다.
유저 스터디에 사용한 사이트: https://hci-proj-1.web.app/
이번 글에서는 유저 스터디 결과 분석 과정 및 결론을 다룹니다.

3줄 요약

1. 다크모드 vs 라이트모드의 승자는 없다.
2. 파이어베이스로 데이터 불러오는 과정은 꽤 불편하다.
3. 유저스터디는 재밌다.😇

프로젝트 정리

드디어 결과에 대한 포스팅을 할 차례네요. 약 3주간 이루어진 프로젝트의 목표는 다음과 같습니다.

• 유저 스터디의 목적: 다크 모드가 실제로 '눈에 좋은'지 확인
• 구체적인 목표
  0. 다크모드를 사용하면 정말로 눈의 피로도가 줄어들까?
  1. 다크모드에서 한눈에, 정확하게 글자를 파악할 수 있을까?

가설: 다크모드를 사용해도 피로도나 글자를 파악하는 정확도는 크게 달라지지 않을 것이다.

코딩을 하면서 어두운 배경에 밝은 글씨 테마를 사용해보며 느낀 점은 '잔상이 너무 잘 남는다' 였습니다. 그래서 처음에는 너도나도 많이 사용하는 다크모드 테마를 썼다가, 얼마 못 가 라이트모드 테마로 다시 바꾸었죠. 그 때의 경험 때문에 위와 같은 가설을 세웠습니다. 특히 한 눈에 글자를 정확히 파악하는 정도는 잔상 때문에 더 떨어질 것으로 예상했습니다.

실제로 유저로부터 받은 정보

목표	받은 정보
피로도 측정을 위해	- 다크모드에서 짧은 글을 읽으며 유저가 조절한 글자 색 - 다크모드에서 짧은 글을 읽으며 유저가 찾은 단어의 개수 - 라이트모드에서 짧은 글을 읽으며 유저가 찾은 단어의 개수
정확도 측정을 위해	- 다크모드에서 빠르게 지나가는 단어를 보고 입력한 글자 - 라이트모드에서 빠르게 지나가는 단어를 보고 입력한 글자
기타	- 다크모드, 라이트모드 각각에 대한 주관적 피로도 및 정확도

결과 분석

응답자: 총 81명

• 대부분 20대 초반. 최소 19세 ~ 최대 46세
• 93%가 여자 응답자 (친구들 트위터로 링크 홍보를 해서 그런것 같네요.)
• 평소에 2시간 이상 스마트폰 화면으로 텍스트를 읽는 사람이 74%
  - 3시간 이상이라고 응답한 사람은 58%
• 주관적 선호도
  - 짤막한 글을 읽을 때: 59%가 다크모드 선호
  - 빠르게 지나가는 단어를 식별할 때: 64%가 라이트모드 선호

실험 1) 짧은 글 읽기 실험

사용자는 아래와 같은 화면을 다크모드, 라이트모드 각각 4번씩 접하게 됩니다. 이들에게 주어진 가짜 목표는 '짧은 글 안에서 특정 단어가 나오는 횟수 세기' 였습니다.

50% 사용자는 밝기 조정 버튼을 누르지 않았습니다. 그래서 밝기 조절을 한 사람과 하지 않은 사람으로 나누어 따로 통계를 낸 결과...

구분	밝기 조절을 한 사람	밝기 조절하지 않은 사람	합계
다크모드에서 눈이 편안함	30	18	48
라이트모드에서 눈이 편안함	10	23	33
합계	40	41	81

다크모드에서 눈이 편안하다고 느낀 사람의 수가 많았습니다.

얼핏 보면 밝기 조절을 한 사람은 다크모드, 밝기 조절을 하지 않은 사람은 라이트모드를 선호한다고 볼 수 있겠지만 여기에는 함정이 있습니다. 위의 사진처럼 다크모드에서 글자 색의 초기값이 무척 어둡기 때문에 글을 읽기가 힘듭니다.
만약 누군가가 글자 밝기 조절을 전혀 사용하지 않았다면 다크모드에서는 내내 이렇게 어두운 상태로 글을 읽게 된 것이죠. 이렇게 보면 밝기 조절을 하지 않은 사람들은 이미 스마트폰 화면 밝기가 충분히 밝아서, 저 글자를 읽을 수 있을 정도였을 것이라는 가설을 세울 수 있습니다. 모든 사람이 같은 밝기로 스마트폰 화면을 보고 있었다면 결과가 좀 더 달라졌을 것 같네요.

실험 2) 빨리 지나가는 단어 파악하기 실험

화면에 단어가 나타나고 0.5초가 지나면 곧바로 사라집니다. 사용자는 이 단어가 무엇이였는지 적게 됩니다. 다크모드, 라이트모드 각 4번 반복합니다.

이번 실험 분석은 조금 까다로웠습니다. 위와 같이 너무 긴 글을 주면 가독성 테스트가 아니라 기억럭 테스트가 되어버렸기 때문이죠. 그래서 나름의 기준을 세워 분석하였으나 정확도가 상대적으로 떨어질 수 있습니다. 또한 다크모드와 라이트모드 각각에서 주어지는 단어의 난이도 조절이 쉽지 않았습니다. 따라서 이번 실험에서 유의미한 결과는 객관적인 정확도보다는 유저의 주관적인 만족도라고 볼 수 있습니다.

구분	다크모드	라이트모드
정확도	79% 유저가 정답을 맞힘	65% 유저가 정답을 맞힘
글자를 더 알아보기 쉬운 모드	28명이 선호	52명이 선호

평소에 다크모드를 쓰고 있었나요?

이 때, 이미 다크모드에 익숙해진 사람이라면 각 실험에서 항상 다크모드를 선호할 수 있을 것 같다는 생각이 들어 확인해봤습니다.

확실히, 각 실험에서 다크모드와 라이트모드의 선호가 갈리고 있습니다.

결론

다크모드와 라이트모드 모두 장단점이 있습니다.

• 다크모드: 글을 읽을 때 눈의 피로도가 덜함
• 라이트모드: 단어를 한번에 정확하게 식별하기 편함

교수님 피드백에서도, 보통 이런 비교 실험을 하면 한쪽이 우세하게 이기는 경우는 잘 없다고 하셨습니다. (그래서 그런지 'It depends' 라는 말을 좋아하십니다.)

번외 1) 🎨 다크모드에서 유저가 선호하는 글자의 명도

배경색을 완전 검은색(#000)으로 하고, 사용자가 직접 글자의 명도를 단계별로 바꿀 수 있도록 했습니다.

번외 2) 🧹 전처리

파이어스토어에서는 자체적으로 데이터 export 기능을 제공하지 않습니다. 그래서 이렇게 변환 과정을 거친 후, 빈 값이나 잘못된 값이 들어온 행을 삭제하고 사용했습니다.

• 파이어스토어 ⇨ snapshot ⇨ JSON file ⇨ .csv file

이런 엑셀 데이터를 얻어내기까지 생각보다 많은 시간이 걸렸습니다. JSON 파일을 csv 형식으로 바꾸는데 가장 오랜 시간이 걸렸죠. 처음에는 파이썬을 사용해서 값을 모두 파싱하려는 시도를 했지만 JSON 구조가 복잡해서 에러가 마구 터졌습니다. 이대로 가다간 데이터 분석이고 뭐고 파싱하는데서 시간을 다 써버리겠다, 싶어서 누군가가 만들어놓은 웹사이트의 도움을 받았습니다. JSON to csv라고 검색하면 여러 사이트가 나오는데, 그 중 가장 멀쩡한 형태로 바꿔주는 사이트였습니다.

사실 여기까지 했다면 결과 분석은 거의 다 한거나 마찬가지입니다. 이제 남은 일은 엑셀의 도움을 받아 유의미한 그래프를 뽑아내는 것입니다. 물론 이 과정도 파이썬 코드로 진행했다면 좀 더 멋있어 보였겠지만.. 주어진 시간이 많지 않았고 이번 수업의 목표 중 하나가 프로젝트를 'on time, within budget'하게 끝내는 것이었기 때문에 툴의 도움을 받았습니다. 😇