All Class Design System





2021-2023

✓ Category: Brand System / Template Development  
✓ Role: System Planning, Visual Guideline, Internal Handoff Design  
✓ Tools: Figma, Illustrator, Notion

CLASS101의 다양한 온라인 클래스 콘텐츠를 하나의 시각 시스템으로 통합한 대규모 프로젝트입니다.
총 20여 개 카테고리의 콘텐츠를 분석하고, 브랜드 관점에서 일관된 구조로 설계했으며, 기획자, 마케터, 촬영팀 등 다양한 부서와의 협업을 통해 실제로 활용 가능한 템플릿 시스템을 구축했습니다.

이 프로젝트는 단순한 가이드북 설계를 넘어서
→ 브랜드 정체성, UX 설계, 제작 효율화까지 모두 고려한 실질적인 시각 시스템 구축 사례입니다.




 Design Insight

  • 클래스마다 다른 레이아웃, 썸네일 구조, 톤앤매너를 통합하고 브랜드 정체성을 유지할 수 있는 시스템으로 정리

  • 카테고리별 콘텐츠 특성을 분석하여, 유연하게 적용 가능한 모듈형 템플릿으로 설계

  • 협업 부서 간의 니즈를 조율하고, 실무 중심의 제작 환경을 반영한 디자인 가이드와 교육 자료까지 직접 제작

  • 디자이너 1인으로서 프로젝트 전체를 주도하며, ‘누구나 사용할 수 있는 디자인 시스템’을 목표로 구현


Key Points

  • 약 20개 카테고리의 콘텐츠 구조를 브랜드 시스템으로 정리
  • 전 부서를 아우르는 실무 커뮤니케이션 및 제작 흐름 최적화
  • 전 과정 단독 리딩 (기획, 설계, 디자인, 가이드 제작)
  • 비디자이너도 활용 가능한 구조로 템플릿 시스템화
  • 브랜드 일관성과 제작 효율을 동시에 달성



Brand Target

  • 장기적이거나 반복적인 학습 경험을 원하는 사용자군
  • 직관적이고 사용하기 쉬운 UI를 기대하는 처음 온 사용자군
Visual Motif

  • 아이콘 및 인포그래픽 스타일 레이아웃의 일정화
  • 명확성을 위해 색상으로 구분된 카테고리
  • 정보 전달에 최적화된 텍스트 중심 템플릿


Process

  • 분류된 콘텐츠 구조 및 시각적 패턴 제작
  • 설계된 UI 구성 요소 및 확장 가능한 템플릿 구성
  • 개발자, 기획자, PD와 협력하여 원활한 사용성 구조 확립



Design Points

  • 비디자이너가 쉽게 적용할 수 있는 모듈형 시스템
  • 플랫폼 내 사용자 시청 흐름에 최적화된 UX 가이드



Result

  • 300개 이상의 클래스 콘텐츠에 디자인 시스템 일괄 적용

  • 시각 일관성과 브랜드 통일성 확보

  • 콘텐츠 제작 리드타임 40% 이상 단축

  • 디자이너 외 제작자의 자율성 증가로 협업 효율 향상

<101> WorkArtContactEN