사용자의 눈 건강을 챙기는 다크모드 개발하기
안녕하세요. 아테나스랩 Matthew입니다. 저는 현재 아테나스랩의 클라이언트 챕터 소속으로 Flutter를 이용해 오늘학교 앱 개발하고 있으며, 임팩트 있는 기능을 제공하기 위해 팀원들과 끊임없이 노력하고 있습니다. 저희 아테나스랩에서 운영하는 오늘학교는 누적 110만 명 이상이 사용하고 있는 서비스입니다. 오늘학교의 지속적인 성장을 위해 다양한 기능이 추가됐고, 그 중에서 사용자로부터 강렬한 호응을 얻었던 다크모드 개발 경험을 공유하려고 합니다.
다크모드란?
다크모드는 라이트모드의 반대 개념으로 어두운 배경 화면을 제공하는 기능이라 할 수 있습니다. 화면의 밝기의 양을 줄여주기 때문에 눈의 피로를 감소시켜주는 장점이 있습니다.
개발할 기능은 산더미! 왜 다크모드 기능을 먼저 개발 했을까?
아테나스랩 팀원들은 프로젝트를 진행하기 전에 이 기능이 만들어져야 하는 이유를 모색했습니다. 이 프로젝트를 진행해야 할 타당한 이유가 없다면 다른 긴급한 이슈를 먼저 처리해야 하고, 진행하려고 하는 프로젝트 일정이 계속 지연되기 때문입니다. 이런 잠재적인 위험을 제거하기 위해 프로젝트 진행 전에 “왜 이 기능을 만들어야 할까?’”라는 질문으로 시작했습니다.
“왜 이 기능을 만들어야 할까?”라는 질문에 답을 찾기 위해서 먼저 2가지를 체크했습니다. 첫번째는 사용자의 니즈, 그리고 두번째는 클라이언트 챕터의 리소스입니다. 사용자의 모든 니즈를 수용해서 기능을 제작하고 싶은 마음이었지만 회사의 리소스를 고려하여 임팩트 있는 기능을 만들어야 했기 때문입니다.
사용자의 니즈에 귀 기울이기
오늘학교 앱은 사용자들의 니즈를 적극적으로 반영하기 위해 다양한 소통 채널을 운용하고 있고, 지속적인 모니터링을 하고 있습니다. 다크모드 관련 문의 사항을 모니터링한 결과 VOC 채널과 1:1 문의 사항 채널에서 각각 10건 이상의 다크모드에 관련 문의를 확인할 수 있었습니다. 사용자가 직접 공식 채널에 들어와 문의를 남긴 것인 만큼, 이 문의 수로부터 다크모드에 대한 사용자의 니즈가 상당히 높다는 것을 알 수 있었습니다. 또한 오늘학교가 운영하는 커뮤니티에서는 저녁 시간 이후에도 커뮤니티를 이용하기 위해 다크모드를 원한다는 게시글이 50건 이상, 댓글 200건 이상이 있었습니다.
리소스 꼼꼼하게 체크하기
임팩트 있는 기능을 사용자에게 전달하기 위해서 클라이언트 챕터의 리소스를 꼼꼼하게 점검할 필요가 있었습니다. 해당 기능이 사용자의 니즈를 충족시키더라도 관심도가 떨어진 시점에 제공하면, 사용자에게 주는 임팩트가 떨어질 것으로 판단했기 때문입니다. 그래서 임팩트 있는 기능들의 리소스를 체크한 후, 리소스를 적게 필요로 하는 기능부터 제공하기로 하였습니다.
다크모드 개발은 일반적인 프로젝트와 달리 API 호출이 필요하지 않은 개발이라고 판단했습니다. API 호출이 필요한 경우 서버챕터와 긴밀하게 협업해야 하고, 이 과정에서 예상했던 개발 소요 시간보다 시간이 더 오래 걸릴 수 있습니다. 이 과정을 제외할 수 있었기에 개발 일정이 다른 프로젝트보다 적게 들면서 임팩트 있는 기능을 사용자에게 제공할 수 있을 것으로 예상했습니다.
다크모드 작업 어떻게 진행해야할까?
다크모드 작업은 ThemeData을 사용하여 진행했습니다. ThemeData는 Flutter에서 제공하는 API 중 하나로 앱의 전체 모습을 설정할 수 있습니다. 바텀 네비게이션, 배경 화면 색상, 버튼 색상 등 공통적으로 사용하는 부분을 커스텀할 수 있기 때문에 다크모드에 개발에 드는 시간을 많이 절약할 수 있습니다.
사용자에게 보여줄 라이트모드 테마와 다크모드 테마를 각각 준비한 후, 사용자가 보유하고 있는 테마 상태에 따라 맞는 테마를 보여주도록 설정하였습니다. 사용자가 테마 상태를 변경하면 최상위 트리에서 이를 인식하여 앱 전체 색상이 바뀌도록 설정하였습니다.
다크모드의 완성도를 높이는 시멘틱 컬러 적용하기
테마 상태를 변경하면 배경화면 색상이 라이트모드에서 다크모드로 순조롭게 변경되었습니다. 기능상 문제가 없다고 판단하여 디자인챕터에서 준비한 다크모드 색상들을 모두 앱에 적용하였습니다. 처음에는 문제없어 보였으나 곧 어색한 부분을 찾을 수 있었습니다. 가장 어색했던 부분은 바텀시트였습니다.
다크모드 팔레트는 라이트모드 팔레트와 일대일 대응으로 만들어졌습니다. 라이트모드와 다크모드의 배경색상과 바텀시트의 색상은 동일하지만, 다크모드 환경에서는 위의 이미지처럼 바텀시트와 배경화면이 잘 구분되지 않았습니다. 이 이유는 배경화면과 바텀시트를 구분해주는 딤(라이트모드에서 바텀시트로 인한 오버레이) 효과가 다크모드에서는 잘 구분되지 않았기 때문입니다.
이 문제를 해결하기 위해서는 각 팔레트의 일대일 대응 컬러 이외에도 사용되는 목적에 따라 사용할 수 있는 “시멘틱 컬러” 가 필요했습니다.
시멘틱 컬러란?
시멘틱 컬러는 사용되는 목적에 따라 기존 색상에 의미를 부여하여 만든 컬러입니다. 시멘틱 컬러를 통해 팔레트 관리와 유지보수가 쉬워지게 됩니다.
위의 이미지처럼 시멘틱 컬러를 적용 후에는 다양한 컬러를 표현할 수 있게 되었고 유지보수도 용이해졌습니다. 예를 들어 Modal Color를 사용한다는 것은 라이트 모드에서는 Gray Light 100을 적용하고 다크모드에서는 Gray Dark 200을 적용하겠다는 의미입니다.
처음에는 시멘틱 컬러에 대해 배우는 것에 대한 부담이 조금 있었습니다. 다크모드 기능 개발도 처음으로 진행해보는 상황에서 디자인 영역의 개념까지 배우면서 작업을 진행하는 것이 어렵게 느껴졌습니다. 하지만 디자인챕터에서 시멘틱 컬러에 대한 양질의 글들을 공유해주셨고, 모르는 게 있을 때마다 잘 알려주셔서 시멘틱 컬러에 대해 잘 이해할 수 있게 되었습니다. 시멘틱 컬러의 개념을 파악한 이후로는 디자인챕터의 요구사항을 정확하게 반영할 수 있었고, 일대일 컬러와 시멘틱 컬러를 이용하여 더욱 완성도 높은 다크모드를 구현할 수 있었습니다.
사용자의 환경 속에서 QA하기
다크모드를 개발하면서 생각하지 못했던 부분은 사용자 환경이었습니다. 주변 환경이 밝은 사무실에서 개발했기 때문에 다크모드로 변경해도 색상의 변경만 인지했을 뿐 실제로 어떤 도움이 되는지 잘 몰랐습니다.
하지만 팀원들과 함께 회의실에서 형광등을 끄고 외투를 뒤집어쓰며 QA를 진행한 결과, 밝은 환경에서는 동일하게 보이던 검정 색상도 어두운 곳에서는 차이가 크게 난다는 것을 깨닫게 되었습니다.
특히 어두운 환경에서 흰색 바탕에 검은색 글자를 보는 게 얼마나 눈이 아픈지 이때 깨달았습니다.
이 포인트를 깨닫고 나서는 다크모드 QA는 어두운 환경에서 이루어졌습니다. 완성도 높은 다크모드를 구현하기 위해 디자인챕터와 지속적으로 시멘틱 컬러에 대해 의사소통하여 컬러를 구현하였습니다.
다크모드가 배포되었다! 사용자들은 어떻게 느낄까?
사용자들이 많이 요청했던 다크모드 기능을 출시했습니다. 사용자의 니즈를 개발 전부터 파악하여 진행해왔던 만큼 잘 될 것이라는 기대감도 컸습니다.
배포 출시 후 다크모드의 반응은 사전 조사를 치밀하게 한 만큼 뜨거웠습니다. 이는 저녁 이후 활동 사용자 수가 낮에 이용하는 활동 사용자 수와 비교해도 적지 않음을 파악하고 그들이 원하는 것을 제공했기 때문이라 생각됩니다.
안드로이드 : https://play.google.com/store/apps/details?id=com.athenaslab.academy&hl=ko&gl=US
마치며
다크모드를 개발하기 전에는 개발 작업이 크게 어렵지 않을 것이라고 생각했습니다. 기존 라이트모드의 색상을 다크모드 색상으로 바꿔주면 되고, API 호출을 하지 않기 때문에 다른 프로젝트보다 빨리 끝날 것으로 판단했기 때문입니다. 하지만 세상에 쉬운 일은 없는 것 같습니다. 일대일 대응 컬러로 모든 게 해결될 줄 알았던 생각은 시멘틱 컬러의 개념이 필요해지면서 산산조각이 났고, 컬러의 이름도 기존 색상 이름에 Light, Dark를 붙이는 것으로 끝날 줄 알았지만 시멘틱 컬러가 생기면서 이에 맞는 네이밍을 디자인챕터와 더 심도 있게 고민해야 했습니다.
이렇게 새로운 개념을 배워서 고민하고 논의했던 이유는 결국 이 기능을 사용하는 “사용자” 때문인 것 같습니다. 사용자 관점에서 깊게 고민하지 않았다면, 항상 밝은 환경에 있던 저는 어두운 환경에서 오늘학교를 이용하는 사용자의 마음을 알지 못했을 것입니다. 실제로 다크모드 기능이 배포된 이후 오늘학교 사용자들이 기뻐하는 모습을 보면서 사용자의 니즈를 충족시키는 기능이란 이런 것이구나하고 깨닫게 되었습니다. 이 경험을 바탕으로, 앞으로는 “왜 사용자는 이 기능을 필요로 할까?”를 항상 생각하면서 기능을 만드는 클라이언트 개발자가 되겠습니다.
감사합니다.
저희 아테나스랩과 함께 성장하실 분을 찾고 있습니다! 🕶
좋은 서비스를 만드는 것에 더불어, 저희 아테나스랩과 더 나은 기술을 고민하고 서로 자극이 될 수 있는 조직을 만들며 성장하고 싶은 분들은 아래 채용 중 포지션 페이지를 참고해 주세요 🎉
채용 중 포지션 : https://prompie.com/s/alq3upis/
