JOOTEK
JOOTEK

JDS (JOOTEK Design System)

JOOTEK 서비스의 일관된 디자인 언어를 위한 디자인 시스템을 설계하고 개발했습니다.

ReactReact
TypeScriptTypeScript
StorybookStorybook
FigmaFigma

JDS Overview

JDS(JOOTEK Design System)는 JOOTEK의 모든 서비스에 일관된 디자인 언어를 제공하기 위해 설계하고 개발한 디자인 시스템입니다. Adobe XD에서 Figma로의 디자인 툴 마이그레이션과 함께 시작된 이 프로젝트는 약 1년간의 리브랜딩 과정의 핵심이었습니다.


Color System

10단계 컬러 팔레트와 Semantic Color System(SCS)을 핵심으로 설계했습니다. 컬러 변수가 맥락과 외형을 분리하여 관리되기 때문에 다크 모드를 빠르게 구현할 수 있었고, 서비스 전반의 색상 일관성을 유지할 수 있었습니다.


Component Example

재사용 가능한 컴포넌트 라이브러리를 구축하여 지도, 포트폴리오, 노트, 스마트 포트폴리오 등 여러 서비스에 걸쳐 공통으로 활용했습니다. 특히 List 컴포넌트는 다양한 컨텍스트에 유연하게 적용할 수 있도록 설계하여, 여러 서비스에서 핵심적인 UI 요소로 활용되었습니다.


Renewal Result

디자인 시스템과 함께 진행한 서비스 리뉴얼에서는 기존의 비즈니스 중심 디자인에서 벗어나, 건축가의 포트폴리오를 전면에 내세우는 플랫폼 중심 디자인으로 전환했습니다. 장황한 서비스 설명 대신 실제 콘텐츠를 먼저 보여줌으로써 사용자가 자연스럽게 서비스를 이해할 수 있도록 했습니다.

© 2026 CalvinSnax.