OTT 스타트업에서 다크모드 만들기
라프텔 프로덕트 디자인팀의 다크모드 제작기
안녕하세요. 라프텔 프로덕트 디자인팀의 Sol입니다.
라프텔의 오랜 숙원사업 중 하나였던 다크모드를 출시하게 되었습니다! 라프텔 프로덕트디자인팀에서는 어떻게 수많은 난관을 극복하고 다크모드를 만들었는지 기록해 보고자 합니다.
다크모드 도입 배경
동영상 스트리밍을 제공하는 OTT 서비스에서 다크모드는 선택이 아닌 필수가 되고 있습니다. 어두운 환경에서 동영상을 시청하다가 밝은 화면으로 돌아가면 눈 뽕 불편하고 몰입에도 방해되겠죠. 그 때문에 많은 OTT 서비스는 다크모드만 제공하는 것이 추세입니다.
라프텔도 이를 알고는 있었지만 진행하지 못하는 제약사항들이 많았습니다. 오래전에 만들어 지금은 디자인 파일조차 없는 화면들, 정리하지 않은 컬러값들과 이미지 소스들. 그리고 많은 스타트업이 그렇듯 한정된 인력 대비 우선순위가 높은 프로젝트들..
앱 리뷰 캡처 (위험한 순간)작게 시작하자!
그렇다고 완벽한 환경이 갖춰질 때까지 기다릴 순 없었습니다. 그래서 프로덕트 디자인팀은 프런트엔드팀과 스쿼드 외 그룹 작업으로 ‘사전 준비'를 하기로 했습니다. 처음부터 목표를 ‘다크모드 완성’으로 잡았다면 힘들었을 것 같아요. ‘사전 준비’만을 목표로 잡으니 훨씬 가볍게 한 스텝을 밟을 수 있었습니다.
☑️ 목표 : 다크모드 완성하기(X) → 다크모드를 위한 사전 준비해 보기(O)
요구사항 정의하기
작업 방식을 정할 때 가장 고민했던 것은 다크모드가 앞으로의 업무를 더디게 만드는 원인이 되어서는 안 된다는 것이었습니다. 화면을 만들 때마다 라이트모드와 다크모드 두 벌을 디자인 & 개발하느라 힘든 상황이 오지 않도록요. ‘완벽한 다크모드’ 보다는 관리가 쉬운 ‘효율적인 다크모드’를 만드는 것이 중요했습니다.
☑️ 요구사항 : 관리가 쉽고 효율적인 다크모드 만들기
다크모드를 위한 사전 준비
1단계 : 베이직 컬러 팔레트 정리
우선 디자이너의 팔레트에 있던 컬러와 개발에서 사용하고 있는 모든 컬러값을 나열했습니다. 디자인 팔레트에 있지만 쓰이지 않는 것도 많고, 팔레트에 없는데 자주 등장하는 것도 있었습니다. HEX 값, RGB 값이 규칙 없이 쓰이고 있었고 미처 몰랐던 오래된 화면도 발견되었습니다.
쓰이지 않는 컬러는 제외하면서 베이직 컬러 팔레트를 다시 정의하고, 코드도 맞춰 정리했습니다. (사실 정의는 어렵지 않아요. 코드에 남은 레거시를 청산하는 작업이 가장 어려운데, 천사 개발자 Jordy가 디자이너들이 알기 힘든 모든 숨어있는 컬러값과 쓰임새를 정리해 줘서 많은 도움이 되었어요!!)
재구성한 Basic 컬러 팔레트2단계 : 아이콘 공통화
다음엔 아이콘을 공통화했습니다. 라프텔 앱에는 Bitmap 기반의 이미지로 제작된 소스들이 꽤 있었는데, 모드에 따라 아이콘 색이 반전되어야 하므로 Bitmap 방식으로는 아이콘도 최소 두 벌씩 필요해지게 됩니다.
여기에 사이즈까지 다양하게 쓰이면 배수로 많아지겠죠. 그러면 불필요하게 많은 용량을 차지하기도 하지만 일일이 추출하는 리소스도 낭비되기 때문에 모든 아이콘을 규격 사이즈에 맞는 Vector 기반으로 교체하기로 했습니다.
다시 코드상에 있는 모든 아이콘과 이미지들을 모았습니다. 같은 X 아이콘도 색상별로, 모양별로, 사이즈별로, 파일 형식별로 제각각이었습니다. (심플한 X 아이콘만 7개?!) 모은 아이콘을 분류해 통일할 수 있는 것은 통일하고 불필요한 것은 없애서 아이콘 세트를 새로 제작했습니다.
중구난방이었던 아이콘 소스들(왼쪽)과 정리한 아이콘 일부(오른쪽)디자인팀은 Vector 기반으로 파일을 정리하고, 개발팀은 피그마와 연동해 SVG 형태로 자동 추출되도록 만들었습니다. 같은 아이콘 소스로 코드상에서 사이즈와 컬러 변경을 할 수 있고, 필요하면 한 번에 교체할 수 있게 라이브러리 화하였습니다.
☑️ 아이콘 공통화
1. 기본 아이콘 분류
2. 신규 아이콘 세트 제작
3. 벡터(SVG) 형태로 교체
4. 아이콘 라이브러리 공통화
다크모드 제작하기
여기까지 사전 준비를 마쳤습니다! 틈틈이 그룹작업으로 진행해서 한 발짝 다크모드에 다가갈 수 있었어요. 사전 작업을 마친 후 본격적으로 ‘어떻게’ 다크모드를 디자인하고 구현할지 고민을 시작했습니다.
3단계 : 테마 컬러 팔레트 정의
우선 베이직 컬러를 단순 반전하면 어떨까 싶어 테스트를 해봤습니다. darkgray900이 라이트모드에서 가장 어두운 색이었다면, 다크모드에서는 가장 밝아지는 식으로 말이죠. 하지만 이런 단순 색상 반전으로는 자연스러운 다크모드를 만들긴 어렵습니다.
단순 명도 반전의 예☑️ 단순 명도 반전으로 대응이 되지 않는 것
- 섬네일, 배너와 같이 내부 색상이 반전되면 안 되는 부분
- Dim, Gradient, Shadow 등 색상 반전이 어울리지 않는 요소
- 반전하면 안 되는 이미 어두운 디자인 영역 (로그인 페이지 등)
- CTA 버튼처럼 반전이 불필요한 요소
- 컬러 톤이 1:1로 매치되지 않는 요소 (Purple 계열이 Gray 계열로 바뀌어야 자연스러운)
그래서 용도에 맞게 색상 교체가 필요한 부분에만 적용할 수 있도록 ‘베이직 컬러 팔레트’ 외에 ‘테마 컬러 팔레트’를 추가하게 되었습니다. 다크모드로 전환되어도 색상이 바뀌면 안 되는 부분은 기존 ‘베이직 컬러’로, 색상 교체가 필요한 부분은 두 종류의 '베이직 컬러'가 대응된 ‘테마 컬러’로 적용할 수 있도록 했습니다.
테마 컬러 팔레트 일부☑️ 라프텔의 컬러 팔레트
- Basic Color : 기본 컬러 단위. 모드에 따라 스위치 되지 않음.
- Theme Color : 2개의 Basic Color가 대응되는 컬러 단위. 모드에 따라 스위치 됨.
4단계 : 피그마 환경 만들기
지금까지 정의한 컬러 전환을 디자이너들이 쉽게 할 수 있도록 피그마 플러그인을 리서치했습니다. 그중 라프텔에서는 Appearance라는 플러그인을 발견해서 사용했어요. (당시 피그마에서 지원하지 않는 기능이었습니다! 지금은 Varient를 이용할 수 있겠죠.)
☑️ 피그마 Appearance 플러그인
- 컬러 스타일명 뒤에 ~[day], ~[night]을 붙이면 같은 이름의 day/night으로 스위칭됨
- 디자인 후 Frame을 잡고 우클릭 → Appearance → Light/Dark mode 선택해서 전환
사용하다 보니 아래 같은 소소한 아쉬움이 있었습니다.
한 번에 하나의 프레임만 스위칭 가능
한 텍스트 컴포넌트 내에 여러 컬러를 쓰면 둘 다 바뀌지 않음 (텍스트 박스를 분리해야 함)
가끔 피그마 업데이트와 싱크가 맞지 않아 자잘한 불편이 있었음 (검색 불편 등)
5단계 : 달리기!!
이제 규칙은 세워졌으니 디자이너들 프런트엔드 개발자들 모두가 화면을 분배하고 달렸습니다! 우선순위가 높은 스쿼드 작업 틈틈이 시간이 날 때마다 작업을 했고, 노션 카드로 진행상황을 체크했어요.
라프텔답게, 유쾌하게 출시하기!
잠깐. 자네 그냥 그러고 배포할 텐가?
프로덕트팀에서 다크모드를 달리는 중 (구) 마케팅팀 (현) 크리에이티브팀에서 연락이 왔습니다. 라프텔에 새로 들어오는 애니메이션 IP ‘흑집사’와의 멋진 콜라보 제안이었습니다. ‘흑집사 모드’라니.. 그들은 천재인 걸까? 덕분에 다크모드의 출시도 자연스럽게 바이럴 되고 작품의 홍보 효과도 좋았는데요! 자세한 이야기는 나중에 크리에이티브팀의 블로그 글에서(기약 없음) 확인해 주세요!
앱 다크모드 도입 후, 결과는 어떨까?
우선 다크모드 도입 후 이 글을 작성한 날짜(2023.1.30)까지의 정량적인 결과는 아래와 같습니다!
✔️ 도입 이후 전체 모바일 디바이스 중 다크모드의 이용률은 38.4%입니다.
✔️ 대부분은 핸드폰 기본 설정을 따라서 자동으로 테마가 적용되었으나, 앱 내에서 직접 테마를 설정한 인원은 라이트+다크모드 포함해 2.9%인데요,
✔️ 그중 다크모드를 직접 고른 비율은 77%입니다.
물론 정성적인 VOC 또한 확인해 볼 수 있었어요. 사실 이것이 이번 프로젝트의 목표이자 보람이었겠죠!
마치며
라프텔은 처음부터 디자이너의 손을 거친 서비스가 아니고, 조금씩 개선하며 진화해 온 서비스이다 보니 오래된 화면에 대한 아쉬움이 있었습니다. 하지만 이번 다크모드 프로젝트를 통해 모든 컬러, 아이콘, 이미지, 사라진 화면들을 싹 확인해 볼 수 있어서 마치 오래된 충치를 뺀 듯 시원해질 수 있었어요!
이 글을 쓰는 지금은 웹의 다크모드 또한 준비 중이랍니다. 앞으로도 변화해 나가는 라프텔을 기대해 주세요!
Written by Kim Dasol, Laftel Product Design Team
라프텔 프로덕트 디자인팀의 다른 이야기
