개발 동기
HCI(Human Computer Intergration) 수업을 듣는 중 팀프로젝트 과제가 생겼다. HCI 주제들 중에서 자유롭게 선정해서, User Exprience를 개선할 수 있는 사례를 분석하는 것이다. 무엇을 주제로 정해야 하나 고민하고 찾아보던 중에 한 velog 글을 발견했다.
이 글을 보는데, 이거로 해야겠다 싶었다. 다크모드를 즐겨 사용하는 나로써는 다른 주제들 보다 현실에 맞닿아 있고 개발로서 검증할 수 있는(일부) 이 주제가 HCI 팀프로젝트로 진행하기 적합하다고 판단했다. 그리고 후의 개발과 검증 과정에서 위 velog 글을 참고한 부분이 있다. 그리고 더 나은 검증방법이 떠올라서 검증과정에서 그 방법과 측정하는 데이터를 몇가지 추가하였다.
다크모드는 2020년부터 많은 서비스들이 지원하기 시작했고 이제는 꽤나 당연해져 버린 UX 개선 방안이다. 지금 작성하고 있는 velog 2022년(올해) 도입했다.
Notion, VSEditor, GitHub, Velog 등 많은 서비스들이 다크모드를 지원함
다크모드는 더 좋은 사용자 경험을 위해 지원하는 것이고 대단한 서비스들이 이것을 도입하는 것에는 이유가 있을 것이다. 가장 큰 이유는 아무래도...
나는 다크모드가 눈이 더 편해 !
물론 나와는 다르게 다크모드가 더 불편하다는 사람들도 있다. 그래서 간단한 웹페에지를 만들어서 사용자들(아마도 주위사람들..)에게 테스트하려고 한다. 몇가지 항목으로 분류해서 다크모드와 라이트모드 중 어느 것이 수치적으로 더 뛰어난지 확인해서 다크모드의 효과를 직접 검증해 보려고 한다. 정량적으로 측정하려고하는 수치는 다음과 같다.
- 얼마나 빠르게 글자를 구분하고 읽을 수 있는지
- 얼마나 정확하게 글자를 구분하고 읽을 수 있는지
그리고 측정 과정에서 다크모드와 라이트모드 중 어느것이 더 눈이 편했는지 설문을 통해 확인하려고 한다.
화면 기획
- 시작화면
- 테스트 - 긴 글에서 특정 단어 개수 구하기(라이트 모드)
- 테스트 - 긴 글에서 특정 단어 개수 구하기(다크 모드)
- 테스트 - 빠르게 한번 깜빡이는 단어 맞추기(라이트 모드)
- 테스트 - 빠르게 한번 깜빡이는 단어 맞추기(다크 모드)
- 다크모드 / 라이트모드 전환가능한 페이지. 사용자는 둘 중 편한 화면을 제출
- 본인 테스트의 결과화면
- 전체 사용자 통계
데이터 관리
2번 3번 페이지의 테스트에서는
- 정답을 제출하는 데 걸린 시간
- 정답이 맞는지 틀렸는지
2가지를 DB에 저장한다, 4번 5번 페이지의 테스트에서는
- 정답이 맞는지 틀렸는지
를 DB에 저장한다. 6번 페이지에서는 설문 결과를 저장한다.
2,3,4,5 페이지의 정량적 데이터와 6페이지의 정성적 데이터를 통해서 다크모드가 정말로 효과가 있는지 검증하려고 한다.
개발 세팅
React 웹 페이지로 개발하려고 한다. 추가로 typescript, react-router, Redux, SCSS 등등 사용할 계획. 일단 CRA --template typescript로 리액트 프로젝트 생성한 단계이다.
