디자인 시스템은 일관된 사용자 경험을 제공하고, 효율적인 디자인 및 제품 개발을 위해 디자인 원칙과 스타일 가이드, 구현 코드를 집약한 시스템입니다. 디자인팀과 개발팀의 공통 언어이자 지침이죠.

그래서 많은 회사에서 디자인 시스템을 구축해 관리하고 있습니다. 저희도 기존 디자인 시스템이 존재했습니다. 엄밀히 말하면 디자인 시스템이라고 불리던 코드는 존재했지만, 팀 전체가 공유하는 시스템으로서는 제대로 작동하지 않고 있었습니다.

이 글에서는 어떤 계기로 디자인 시스템 v2를 새로 만들게 되었는지 공유하려 합니다.

최근 저희 FE 그룹 내에서 프로젝트들에 E2E 테스트를 도입해 보자는 이야기가 나오기 시작했고 실제로 적용하는 사례들이 많아지기 시작했습니다. 제가 진행하던 프로젝트에도 E2E 테스트를 도입하기 위한 사전 조사를 하게 되었는데, 유닛 테스트나 통합 테스트의 활발한 도입 사례들에 비해 E2E 테스트의 성공 사례는 손에 꼽을 정도였습니다. 특히, 단순 도입 외에 성공적인 운영사례는 정말 찾기 어려웠죠. 그래서 우리가 성공적으로 E2E 테스트를 도입하고 운영하기 위해 어떤 것들을 생각해 보고, 어떤 것들을 실천했는지 공유하고자 합니다.

프론트엔드 개발을 하다 보면 빠짐없이 등장하는 주제 중 하나는 어떤 기준으로 컴포넌트를 나눌 것인가라고 생각합니다. 마찬가지로 카카오페이지 웹 파트도 이 주제로 여러 가지 시행착오를 겪어 왔습니다. 현재는 Harry가 소개해 주신 Atomic Design Pattern을 적용해 UI 컴포넌트를 나누는 기준으로 활용하고 있습니다. (https://fe-developers.kakaoent.com/2022/220505-how-page-part-use-atomic-design-system/)

개인적으로 이 디자인 패턴의 가장 큰 장점을 꼽아보자면 컴포넌트별 역할이 잘 분리되고 높은 재사용성을 가진다는 것입니다. 재사용성이 뛰어난 컴포넌트들을 미리 잘 준비해 놓으면 추후 화면 전체를 개발할 때 속도 향상에 큰 도움이 되는 것을 체감하고 있습니다. 그래서 현재 프로젝트의 UI 컴포넌트를 개발할 때는 재사용성에 공을 상당히 많이 들이고 있습니다.

그렇게 컴포넌트들을 만들던 도중 하루는 Dialog Modal 구현이 필요하다는 디자인 팀의 요구사항이 들어왔습니다. 첨부된 이미지처럼 제목, 확인 버튼이 있는 안내 메시지였습니다. 이 컴포넌트도 역시 재사용성이 높게 만들고 싶어졌습니다. 어떻게 구현해볼 수 있을까요?

어두운 바탕에 밝은 글씨를 보여주는 다크모드는 눈의 피로감을 줄여주고, OLED 디스플레이에서는 배터리 절약 효과도 있습니다. 글자가 많거나 콘텐츠 소비 시간이 긴 서비스일수록 다크모드 지원이 중요해집니다.

다만 밝은 환경에서는 오히려 가독성이 떨어질 수 있으므로, 일반적으로 라이트/다크 모드를 선택할 수 있도록 제공하는 것이 좋습니다.

이 글에서는 웹에서 다크모드를 구현하는 대표적인 방법들과 각각의 특징을 소개합니다.