뒤로
윤민석
윤민석 ·

새로운 오픈소스 프로젝트 개발을 시작합니다.

안녕하세요?

디자인시스템을 위한 CSS in JS 프레임워크인 Mincho를 개발을 시작했습니다.

Mincho 프레임워크란?

방금 소개했듯이 디자인시스템을 위한 CSS in JS 입니다.

제작동기

처음에는 CSS의 스타일링에 대한 접근과 관리방법에 대한 고민이었습니다.

CSS의 Selector에 대한 방법론으로는 크게 시각적 위계와 의미론적 위계로 나뉘어져 있습니다.

시각적 위계는 .text-red { color: red; } 처럼 시각적인 이름을 사용하는 방식이며,
의미론적 위계는 .error { color: red; } 처럼 의미적인 이름을 사용하자는 방식이에요.

그러한 특성 때문에 목표를 달성하는 방식도 상이합니다.

예를 들어 다음과 같이 컨텐츠는 같지만 다양한 디자인을 만들어야 한다면 어떨까요?

시각적 방식은 CSS는 정해져 있지만, HTML을 변경하여 달성하고
의미론적 방식은 HTML은 그대로지만, CSS를 변경하여 달성하려 하겠죠.

image.png

시각적 위계를 다루는 실제적인 예시로는 TailwindCSS가 있고, 의미론적 위계로는 Stitches가 있습니다.
Tailwind의 Text Color를 보면 text-black, text-white 처럼 딱 봐도 시각적입니다.

Stitches는 Variants라는 API를 창안해놨는데 Element identifiers라는 CSS Class 원래 목적에 부합하며, BEM을 매우 쉽게 적용할 수 있습니다.

기타 CSS에 대한 자세한 역사나 접근법은 다음 글들을 읽어보세요.

  1. CSS 역사로 알아보는 CSS가 어려워진 이유

  2. CSS책 출판제의를 받고 작성했던 원고들 공유... (지금은 부러졌어요)

  3. CSS-in-JS, 무엇이 다른가요?

저는 이 두가지 방식이 화해를 하고, 정반합을 이룰수 있을거라 믿었어요.

마치 민트의 시원하고 상쾌한 맛과 초콜릿의 달콤함이 조화를 이루는 민트초코처럼요!!

배스킨라빈스 '민트 초코 봉봉' 판매량 1위 등극 - 딜사이트

매우 다양한 CSS 프레임워크와 라이브러리가 있지만 제가 만족하는 사용법을 제공하는 것은 찾아볼 수가 없었습니다.
최근에 나온 PandaCSS가 그나마 좋아보이지만, 여전히 시각적 위계와 의미론적 위계를 잘 다룬다고 보기는 어렵습니다.

image.pngimage.png

결국 2년전즈음 프론트엔드 코딩을 하다가 더 쉽게 제 생각을 표현하는 방법을 탐색하기 위해
HTML과 CSS 전처리, 템플릿의 표현력이라는 글을 쓰다가 "내가 해결할 수 있겠는데???"라는 근자감이 들게 됩니다.


하지만 작업양이 방대할 뿐만 아니라 다른 프로젝트를 하느라 시도하지 않았고

그동안 UnoCSS, PandaCSS, StyleX등 여러가지 프레임워크가 나왔습니다.

이렇게 점점 춘추전국시대가 되어가는 CSS 프레임워크 시장을 보며 결국 저도 하고 싶다는 생각이 들어 시작하게 됩니다.

그래서 왜 프레임워크의 이름이 Mincho인가요?

작년에 트위터에 밝혔듯이, 3가지 이유가 있으며 우연의 마주침에서 조합된 필연과도 같습니다(?)

  1. Atomic CSS(Good) + Variant(Good) = Better 인 모습이 민트초코 같아서

  2. Vanilla Extract라는 라이브러리를 기반으로 할 예정이라서

  3. 제가 민초단이라서 (매우중요)

나훈아님의 인터뷰처럼 까와 빠를 둘다 미치게 만드는 슈퍼스타 같은 존재이기도 하죠. ㅎㅎ

비전 및 목표

"Build your own design system"이 비전 입니다.

시각적인 위계 + 의미론적인 위계 통합뿐만 아니라 디자인 자체의 프로세스 개선을 지향합니다.
그래서 아직 지배적인 CSS framework가 없는 웹 생태계에서 한 자리를 차지하는 것이지요.

우리의 CSS in JS 프레임워크는 5개(Literal, Theme, Atomic, Variant, Styled Component)의 레이어로 이루어질 예정입니다.

  1. Literal: JavaScript의 문법적 한계를 고려하며, CSS 전처리기의 다양한 CSS 특화된 구문 제공

  2. Theme: Color, Typography, Spaces 등 디자인 토큰 값과 커스텀

  3. Atomic: 시각적 값과 매핑되는 원자적인 스타일

  4. Variants: 재활용 가능한 블록을 위한 스타일

  5. Styled Component: JSX 컴포넌트와 바인딩

이는 State와도 비교할 수 있습니다. [1, 2]

  1. JSX: HTML과 JS를 바인딩합니다

  2. State hook: 뷰 플랫폼에 구애받지 않는 로직

  3. Behavior hook: 플랫폼 API(DOM, React Native등)를 위한 이벤트, 접근성, 국제화등을 처리

  4. Headless Component: JSX와 hook을 바인딩하여 사용할 수 있도록 제공

  5. Component: 디자인까지 포함된 컴포넌트 블럭

다만 처음부터 모든 기능을 제공할 수는 없기 때문에 단계별로 이루어가려 합니다.

  1. Natural CSS in the Typescript: 각종 CSS전처리 기능등을 Typescript에 특화되도록 바인딩합니다.

  2. A CSS in JS that integrates AtomicCSS and Varients: 원래 목표였던 시각적 위계(AtomicCSS)와 의미론적 위계(Varients)를 통합을 이룹니다.

  3. Build your own design system: 디자인 토큰 관리 및 피그마 플러그인등으로 디자인 시스템을 만들기위한 프레임워크로서 기능합니다.

왜 디스콰이엇에 글을 쓰게 되었나?

사실 완전히 뿅 튀어나온 것은 아니고, 작년 말에 학교 졸작이 끝나고 조금 시도를 한 적이 있습니다.

물론 많은 프로젝트들이 그렇듯 회사일로 바뻐지면서 이래저래 개발이 진행되지 않았습니다. ㅠㅠ

이대로는 안되겠다라는 생각이 들어 공개SW 개발자대회에 참가를 신청하였고, 올해말까지 일정 수준으로 퀄리티를 올려보려고 합니다.

이때 디스콰이엇에 정기적으로 글을 올리는 REAME 주도 개발을 통해 게으른 저에게 강제적인 동기부여를 하고자 합니다.

(홍보도 되면 좋고요!!)

혹시 개발에 관심이 있으시다면 댓글을 달아주시거나 alstjr7375@daum.net에 연락을 주셔도 좋습니다.

하단의 업보트와 깃허브 스타를 찍어주셔도 매우 큰 도움이 됩니다!!

인디 개발자 클럽 그룹의 글
Mincho

디자인시스템을 위한 CSS in JS 프레임워크

10

댓글

로그인 후 댓글을 남길 수 있습니다.

아직 댓글이 없습니다.