CSS 모듈을 사용하여 사용자 지정이 가능한 설계 시스템을 구축하는 방법

반응형

Bonfire에서는 크리에이터가 웹3 자산을 기반으로 자체 브랜드 플랫폼에서 커뮤니티를 호스팅할 수 있도록 인프라를 구축하고 있습니다. 우리는 크리에이터들의 개성이 빛을 발할 수 있도록 하면서도 사용하기 쉬운 드래그 앤 드롭 인터페이스를 제공한다. 우리가 직면한 과제는 크리에이터들이 자신만의 색상과 배경 이미지, 어둡거나 밝은 모드로 페이지를 커스터마이징할 수 있는 디자인 시스템을 구축하는 것이었습니다. 이 블로그 게시물은 우리의 접근 방식과 우리가 만든 기술적 절충에 대해 설명합니다.

기술 스택

React, Nextjs, CSS 모듈을 사용하고 있습니다. React는 역동적이고 상태 저장 UI를 구축하기 위한 훌륭한 프런트 엔드 프레임워크입니다. Nextjs는 서버측 렌더링을 즉시 사용할 수 있도록 지원하므로 웹 페이지가 더 빠르고 성능이 향상됩니다. CSS 모듈은 스타일이 적용되는 구성요소로 범위가 지정되도록 한다. 코드베이스 스케일 및 클래스 이름 충돌 가능성이 높기 때문에 중요하다. 여기에서 규모에 맞는 CSS의 문제에 대해 자세히 읽어볼 수 있습니다.

동기

우리는 페이지별로 크리에이터별 CSS 스타일을 제공할 수 있는 기능을 원했습니다. 그 결과, 우리는 어플리케이션에 있는 스타일을 간단히 하드코드할 수 없었습니다. 성능도 중요한 요소였기 때문에 번들 크기를 늘리는 스타일 구성 요소와 같은 css-in-js 프레임워크를 피하고자 했습니다. css-in-js가 성능에 미치는 영향에 대한 자세한 내용은 여기를 참조하십시오.

 

해결책

우리가 착수한 접근 방식은 현대의 모든 브라우저에서 기본적으로 지원되는 CSS 변수를 사용하는 것이었습니다. CSS 변수는 사용자 지정 속성 표기법(예: --background: blue)을 사용하여 전체적으로 정의되며 var() 함수(예: background-color: var(--background)를 사용하여 액세스된다.

우리는 모든 색상이 하드 코딩된 16진수 값 대신 CSS 변수를 사용하는지 확인하는 것으로 시작했습니다. 이러한 변수 이름은 특정 사용 사례에 따라 다르지만, 생성자별 변수 앞에 --creator를 붙이기로 결정했습니다. 예를 들어, 작성자는 텍스트 색상(--creator-on-primary)뿐만 아니라 단추(--creator-on-primary)의 기본 액센트 색상을 선택할 수 있습니다.

다크 대 라이트 모드를 지원하기 위해 --mode로 선행되는 새로운 CSS 변수를 만들었다. 작성자는 "어둠" 모드와 "밝음" 모드 사이에서 전환할 수 있습니다. 예를 들어 어두운 모드에서는 배경색(--모드-배경)이 검은색인 반면 텍스트(--모드-배경)는 흰색입니다. 우리는 밝은 모드에서 이 값을 뒤집어서 배경이 흰색이고 텍스트가 검은색으로 되도록 합니다.

 

여기 밝은 모드와 어두운 모드의 매장 아이템 구성품이 있습니다.

우리가 직면한 또 다른 도전은 어둡고 밝은 모드의 그레이를 다루는 것이었습니다. 어두운 모드에 적합해 보이는 회색은 밝은 모드에서 대조가 없을 것입니다. 우리가 택한 접근법은 페이지가 밝은 모드인지 어두운 모드인지에 관계없이 대비 수준을 제어할 수 있는 CSS 변수 그레이스케일을 사용하는 것이었다. 예를 들어 값이 900인 회색은 배경과 가장 큰 대조를 보이는 반면 값이 50인 회색은 가장 적은 대조를 보인다.

 

CSS 변수 접근법의 큰 장점은 개발자들이 어두운 대 빛의 조건부 논리를 작성하는 것에 대해 걱정할 필요가 없다는 것이다. 그들은 부품을 제작할 때 정확한 CSS 변수를 고르기만 하면 됩니다. 위의 저장소 항목 구성 요소를 만드는 데 사용된 CSS의 일부입니다.

종합하면, 작성자가 페이지를 사용자 지정할 때 스크립트를 실행하여 새로운 CSS 스타일시트를 생성하고 파일을 파일 저장소(예: AWS S3)에 저장합니다.

클라이언트 측에서는 브라우저에서 캐시되는 크리에이터별 스타일시트를 미리 로드하고 가져옵니다. 아래의 스니펫은 이를 위해 필요한 몇 줄의 코드를 보여줍니다. rel="preload"가 있는 첫 번째 링크 태그는 브라우저에 페이지 수명 주기에서 가능한 한 빨리 콘텐츠를 로드하라고 알려줍니다. nextjs/head를 사용하므로 이 코드가 자동으로 문서 헤드로 이동합니다.

 

결과는?

다음은 크리에이터 페이지의 몇 가지 예입니다!

 

단점들

*유형 안전 부족: *css-in-js 프레임워크와 달리 css 변수의 유형을 생성하고 사용되지 않거나 철자가 틀린 변수로부터 보호할 수 없습니다.

잘못된 형식의 css 스타일시트: 우리는 프로그래밍 방식으로 스타일시트를 생성하고 있으므로 코드가 제대로 테스트되고 CSS가 삭제되었는지 확인해야 합니다.

이점

초고속: CSS 모듈을 사용하면 초기 번들 크기를 낮추는 추가 라이브러리를 설치할 필요가 없으므로(일부는 900kb 이상 추가됨!) 사이트를 로드하는 데 시간이 더 오래 걸립니다.

 

개발자 경험: 개발자는 제작자가 선택한 색상의 조합과 상관없이 페이지가 잘 보일 것을 알고 제품을 제작할 수 있다.

읽어주셔서 감사합니다! 이와 같은 흥미로운 문제를 해결하는 데 관심이 있으시다면, 저희 채용 게시판을 확인해 보시고 주저하지 마시고 연락하세요.

원래 게시물에 대한 링크