Mainstream: 상용 디자인 시스템을 향해

The 3102는 처음부터 하나의 완성된 브랜드나 특정 사용자를 위한 시스템으로 출발한 것은 아니었습니다.
제작하는 1년 동안 여러 프로젝트에 적용해보며, 10개 이상의 해커톤 대회를 거치며 다듬어졌고, 그 과정 끝에 디미고 인트라넷 플랫폼이자 디미고인의 디자인 시스템으로 자리 잡았습니다.

상용 디자인 시스템과 다양한 디자인 기법을 탐구하며 쌓아 올린 이 작업은, 메인스트림 디자인 시스템을 꿈꿨던 제 첫 번째 앨범입니다. 자세한 제작기는 블로그 → The 3102 Design System: Director's Cut에서 확인하실 수 있습니다.

다양한 환경을 유연하게 받아내는 Foundation

The 3102의 Foundation은 Figma Variable을 활용해 다중 컬러 테마, 최대 2배 다이내믹 텍스트 스케일링, OS와 Viewport별 반응형 대응을 하나의 디자인 토큰 체계 안에서 관리합니다. 따라서, 접근성, 다크모드, 작은 화면의 디바이스처럼 놓치기 쉬운 조건들도 Variable 전환만으로 자연스럽게 대응할 수 있도록 설계되었습니다. 디자이너가 매번 환경별 예외를 고민하기보다, UI의 흐름과 완성도에 집중할 수 있게 만드는 기반입니다.

2개의 계층, 3개의 테마

The 3102의 컬러 시스템은 Brand (Primitive)와 Theme (Color), 두 계층을 거쳐 컴포넌트에 전달됩니다.
학교별 브랜드 전환을 유연하게 처리하기 위해, 각 브랜드의 HSB 원시값은 먼저 Brand (Primitive) 레이어에 저장됩니다. 이 값은 이후 실제 인터페이스에 적용되는 Theme (Color) 레이어로 매핑됩니다. Theme (Color)는 HIG 표준에 맞춰 Light, Dark, Elevated 테마를 포함하며, 브랜드가 바뀌어도 동일한 구조 안에서 안정적으로 컬러를 운용할 수 있도록 설계했습니다.

구조적으로 계열을 구분한 컬러 시스템

The 3102는 더 직관적인 컬러 시스템을 위해, 토큰이 사용되는 Scope에 따라 컬러 토큰을 네 가지 계열로 나누었습니다.

• Background: 도형과 프레임의 배경색을 지정하는 토큰
• Content: 텍스트와 아이콘의 채우기 색을 지정하는 토큰
• Border: 오브젝트의 아웃라인과 구분자에 사용하는 토큰
• Semantic: 특정 의미나 브랜드의 핵심 컬러를 전달하기 위한 토큰

또한 Primary, Secondary와 같은 일반적인 토큰 네이밍을 지양하고, 사용자가 UI를 인식하는 방식과 정보의 역할이 드러나는 이름을 사용했습니다. 예를 들어 Content 계열에서는 사용자가 반드시 읽어야 하는 핵심 정보를 Base, 이를 뒷받침하는 정보를 Additive, 필수는 아니지만 이해를 돕는 정보를 Assistive, 비활성화된 정보를 Disabled로 구분합니다.

컴포넌트도 다채롭고 유연하게

The 3102의 컴포넌트는 Atomic Design을 기반으로, 가장 기초적인 Atom부터 서비스 전반에서 반복적으로 사용되는 Molecule까지 일관된 구조로 설계되었습니다. Button, Input, Chip처럼 여러 서비스에서 공통으로 쓰이는 요소는 The 3102 안의 글로벌 컴포넌트로 관리하고, 학사일정이나 시간표같이 특정 기능이나 서비스에만 필요한 컴포넌트는 디자인 파일에서 로컬 컴포넌트로 분리해 관리합니다.

따라서 공통 요소의 일관성은 유지하면서, 서비스별 맥락에 맞는 확장성을 갖췄습니다. 또한 컴포넌트의 역할과 조합 방식이 명확해져 팀원 간 커뮤니케이션이 쉬워지고, 어떤 요소를 공통화해야 하는지, 어디서부터 서비스 고유의 영역으로 다뤄야 하는지를 빠르게 판단할 수 있습니다.

또한 The 3102는 디자인 상의 레이어 구조와 코드 상의 DOM 구조가 최대한 동일하게 대응되도록 설계했습니다. Auto Layout을 유연하게 활용해 위계, 정렬, 간격이 실제 코드 구조와 자연스럽게 맞물리도록 구성했고, 이를 통해 디자이너와 개발자가 같은 구조를 기준으로 화면을 이해할 수 있게 했습니다.

통일된 컴포넌트 스펙과 문서화

The 3102는 Human Interface Guidelines와 Material Design 3 등 네이티브 디자인 시스템을 기준으로 컴포넌트의 스펙과 문서화 체계를 설계했습니다.

플랫폼마다 네이티브 컴포넌트의 동작 방식이나 권장 사항이 다른 경우, Variable 기반 Foundation을 활용해 The 3102의 컴포넌트 역시 환경에 맞게 다르게 대응하도록 구성했습니다. 하나의 컴포넌트를 모든 플랫폼에 억지로 동일하게 적용하기보다, 각 플랫폼의 문법을 존중하면서도 The 3102만의 일관된 사용 경험을 유지하는 방식입니다.

문서화 역시 컴포넌트 설계의 중요한 일부로 다루었습니다. 각 컴포넌트의 역할, 상태, 사용 조건을 통일된 형식으로 정리해 디자이너와 개발자가 같은 기준으로 컴포넌트를 이해하고 구현할 수 있도록 했습니다.

• Anatomy: 컴포넌트의 분해도 및 Props 구성
• Variant: 컴포넌트 세부 Variant 나열 및 설명
• Platform: 네이티브 권장사항 혹은 스펙이 다른 경우, 플랫폼별 차이 설명
• Guideline: 컴포넌트 사용 시 UX 상 권장 사항 및 주의 사항

Atomic Design과 Instance Swap

The 3102의 컴포넌트 시스템은 Atomic Design을 기반으로, 가장 작은 단위의 Atom부터 반복적으로 재사용되는 Molecule까지 일관된 조립 구조를 갖도록 설계되었습니다. 각 컴포넌트는 명확한 역할을 가지되, 실제 페이지를 구성할 때는 고정된 형태에 갇히지 않도록 Instance Swap과 Nested Component 구조를 적극적으로 활용했습니다.

디자이너는 핵심 비즈니스 전략과 사용자 흐름에 맞춰 페이지를 설계하면서도, 컴포넌트의 제약 때문에 사고가 끊기지 않습니다. 필요한 요소를 새로 만들기보다 검증된 컴포넌트를 교체하고 조합하는 방식으로, 다양한 화면 구조를 빠르게 구성할 수 있습니다.

The 3102: Live and Released

The 3102는 디미고인 안에서만 재생된 앨범이 아니었습니다.
다양한 프로젝트와 해커톤, 외주 작업 속에서 여러 형태의 UI로 변주되며 실제 환경에서 사용되었고, 이후 Figma Community를 통해 누구나 열람하고 활용할 수 있는 디자인 시스템으로 공개되었습니다. 특히 디자인 시스템을 공부하시는 많은 분들께 큰 도움이 되었으면 좋겠습니다.