방긋 웃을수 있는 공간이란, 나만의 일상을 만드는 공간입니다.

더 많은 이들의 미소를 위한 재건축.

Hejhome 서비스는 Hejhome Square와 같은 플랫폼으로 전환을 꾀하는 프로젝트를 비롯해 내부 크루용 백오피스, 신규 출시 기기의 컨트롤 패널, 해외향 서비스 등으로 점차 다각화되고 있었습니다. 이처럼 관리할 서비스가 다양해지면서, 한 가지 서비스에만 초점을 맞춰온 기존 디자인 시스템에서 여러 분야를 포용할 수 있는 형태로 개선할 필요성이 대두되었습니다.

우리가 새로운 디자인 시스템을 구축하는 데 있어 집중해야 할 부분은 크게 두 가지였습니다. 첫째, 지금 우리 서비스의 기능을 모두 포용하면서도 미래를 대비할 수 있을 것. 둘째, 더 넓은 스펙트럼의 사용자가 사용할 수 있도록 만들 것. 이를 위해 Hejhome Leende보다 더 큰 규모의 교차 협업을 통해 새로운 디자인 시스템을 구축했습니다.

다채로운 목표로 가기 위해서는 단순한 과정만이 남아야 했습니다.

우리의 서비스는 더 이상 하나나 둘이 아니었습니다. 회사 내외부로 다양한 사업 아이디어가 발생하고 있었고, 이를 빠르게 출시하고 데이터를 모으며 더 나은 서비스로 만드는 과정이 필요했습니다. 그러기 위해, Hejhome Square 전용으로 사용하던 디자인 시스템인 Hejhome Leende를 전방위적으로 활용할 수 있도록 업그레이드 하기로 했습니다. 기획부터 개발까지 모두가 디자인할 수 있도록 컴팩트한 워크플로우로 개선하고, 빠른 배포를 위한 기성 프레임워크와의 연동을 기술적인 주요 목표로 설정했습니다.

다양한 서비스를 통해 고객과 만나는 접점이 늘고, 더 이상 단순한 기기를 조작하는 컨트롤 앱이 아닌 라이프스타일 플랫폼을 지향하고 있었기에 이에 맞춘 사용자 경험적 변화도 필요했습니다. 이를 위해 더 OS 플랫폼과 친화적이고 개인화에 용이하며, 다양한 접근성 기준을 만족할 수 있는 시스템으로 만들어 나가야 했습니다.

블록은 모여야 비로소 조립할 수 있습니다.

다양한 솔루션을 통해 디자인과 개발 사이를 오갔던 기존과 달리, 많은 업데이트를 거친 Figma의 기능을 활용해 보기로 했습니다. 가장 먼저, 디자이너가 별도의 플러그인으로 넘겨주었던 디자인 토큰을 Variable Collection으로 통합했습니다. Variable Collection은 여러 개의 토큰 팔레트(콜렉션)를 만들고, 서로 참조하여 의미론적 팔레트를 구성할 수 있는 기능이 충실히 구현되어 있었습니다. 그뿐만 아니라, 단순한 색상 값을 넘어 각 스타일이나 레이아웃의 수치마저 자유롭게 구성할 수 있었습니다. 문서를 참고하며 써야 했던 이전과 달리, 바로 수치를 입력창에 불러와 보다 쉽게 작업할 수 있게 된 것입니다.

새롭게 만나는 다크 모드

Variable Collection을 통해, 테마마다 다른 토큰을 적용하는 디자인 토큰의 강력한 설계를 Figma 내에서 사용할 수 있게 되었습니다. 이에 따라 Dark Mode 같은 테마별 컴포넌트를 더 이상 별도로 생성할 필요가 없게 되어, 더욱 간결한 방식으로 컴포넌트를 구축할 수 있게 되었습니다.

우리가 편안함을 말할 수 있으려면, 더 가까워져야 하니까요.

그다음 우리가 집중한 것은 개발자의 시점, 바로 "Dev Mode"에서의 넘겨주는 방식이었습니다. 별도의 컴포넌트 문서를 기술하는 것도 중요하지만, 시스템 관리와 서비스 개발을 위해 해당 컴포넌트를 빠르게 톺아볼 수 있는 환경을 제공하는 것이 더 강력한 협업 문화를 만들어 줄 것이라 믿었습니다.

따라서 우리는 Figma에 있는 컴포넌트 라이브러리를 간이적인 스펙 시트로 사용할 수 있도록 재작성했습니다. 모든 컴포넌트의 Property 순서 및 의존성에 대해 규칙을 부여하여 눈에 잘 보이지 않는 변화 사례를 구조화했으며, Playground 기능을 통해 이를 여러모로 둘러보며 확인해 볼 수 있도록 안내했습니다.

때로는 발명보다 발전을.

크로스 플랫폼을 위해 하나의 컴포넌트로 만들었던 기존 디자인 시스템의 컴포넌트를 다시 네이티브 컴포넌트를 최대한 활용하는 방향으로 구조를 변경했습니다. 네이티브 컴포넌트와 겹치는 역할의 컴포넌트를 그것에 기반에 두어 다시 설계하는 작업을 진행했고, 이를 통해 컴포넌트의 개수를 크게 절약하며 각 OS에서 권장하는 UX로 더 가깝게 디자인을 고려할 수 있게 되었습니다.

보고, 듣고, 만지며 편리한 일상을 만들 수 있도록.

접근성을 위한 내비게이션 및 상태변화에 있어, 네이티브 컨트롤의 규칙을 그대로 수용하여, 이전 시스템보다 더욱 매끄러운 접근성 기능을 지원할 수 있게 되었습니다. 예로, Android 14부터 지원하는 비선형 폰트 스케일링(Non-Linear Font Scailing)을 정식으로 지원하여 저시력 사용자가 더 자연스럽게 서비스를 사용할 수 있도록 도모합니다.

우리가 찾은 편안함이 구석구석 스며들도록

서비스뿐만 아니라 백오피스 및 관리 콘솔 등 인터널 서비스나 회사나 제품 소개를 위한 랜딩 페이지 등 우리가 만들어야 할 분야는 다양했습니다. 다만, 이런 종류의 개발은 고도화된 디자인보다 빠른 기능 구현 및 안정적인 배포가 우선적입니다. 그 해결책으로, Leende 2는 Ant Design과 Tailwind의 호환성을 제공하여 프레임워크를 통해 빠르게 프론트엔드를 개발하면서도 디자인 언어나 일부 컴포넌트를 활용할 수 있도록 가교를 두었습니다.

일상을 콜라주와 같이.

인터페이스는 기존의 디자인을 더욱 분명한 모습으로 만들었습니다. 몰랐던 불편을 해소할 방법을 사려 깊게 알려주는 것. 그것은 비단 말과 글 뿐만 아니라 인터페이스 자체에도 녹아들어 가야 한다고 생각했습니다. 앞으로 출시되는 서비스는 지금 운영중인 제품보다 더 복잡한 시스템을 전해야 했기에, 더 단순한 형태로 UI 요소를 만드는 것을 미션으로 삼았습니다.

Craft. 오리고 붙이며 만드는 나의 일상.

Hejhome의 새로운 디자인 언어인 Craft는 여러 색깔의 종이를 오려 하나의 공예 작품을 만들듯, 더 분명한 색을 활용해 사용자의 초개인화 경험을 제공할 수 있도록 돕는 구상입니다.

요소 하나하나가 피드백을 더 넓은 영역에서 표현할 수 있도록 면 형태의 디자인을 최대한 활용합니다. 가능한 한 비언어적 소통의 면적을 크게 늘려, 사용자의 무의식적인 인지 시점을 앞당기며 내용을 파악하는 시간을 크게 줄이고자 했습니다. 이는 색상이 다채로워진 것과 함께 WCAG 기준을 만족하게 만듦과 동시에, 디바이스나 기능 등의 중요한 상태변화를 더 빨리 깨달을 수 있는 설계를 제공합니다.

또한, 사용자가 직접 만들거나 조작해야 하는 부분에는 지정 색상 대신 다채로운 컬러를 제공합니다. 나만의 환경을 만들어 나가는 Hejhome 브랜드 서비스의 특성을 살리기 위해, 사용자 스스로 무언가를 만들고 꾸미는 행위에 분명한 피드백을 제공합니다.

기술이란 종이로 편안한 일상을 접어 나갈 수 있도록.

세상의 변화에 따라, 이를 이루는 것 또한 세세한 변화가 필요합니다. Leende 2는 Hejhome 서비스 다각화에 있어 제일 중요한 챕터가 되었습니다. 단순히 기기를 원격으로 끄고 켜는 행위를 넘어, 당연한 불편함을 풀고 편안한 삶을 만들어 나가기 위한 라이프스타일 플랫폼으로 진화하기 위해서는 일상을 만드는 능력을 사용자의 손에 쥐여주어야만 합니다.

이를 위해 우리는 서비스를 이루는 기저인 디자인 시스템에서부터 이 소명을 담고자 했고, 다양한 기술적 문제와 협업 난제를 풀어나가며 자연스럽게 포용하게 되었습니다. Leende 2는 앞으로, Hejhome의 모든 신규 디지털 서비스의 근간이 되어 보다 더 넓은 세상에 몰랐던 불편함을 알리고 스스로 해결하도록 돕는 일상의 동반자를 꿈꿀 수 있도록 만들어 나갑니다.