아키텍처 의사결정 기록: CSS 프레임워크

목차:

• 요약
  • 이슈
  • 결정
  • 상태
• 세부 사항
  • 가정
  • 제약
  • 입장
  • 논거
  • 영향
• 관련 항목
  • 관련 결정
  • 관련 요구사항
  • 관련 산출물
  • 관련 원칙
• 메모

요약

이슈

우리는 웹 애플리케이션을 만들기 위해 CSS 프레임워크를 사용하고자 합니다:

• 모든 인기 브라우저와 화면 크기에서 사용자 경험이 빠르고 신뢰할 수 있기를 바랍니다.

• 디자인, 레이아웃, UI/UX 등을 빠르게 반복하기를 바랍니다.

• 모바일 기기 같은 작은 화면, 4K 와이드스크린 같은 큰 화면, 회전 가능한 디스플레이 같은 동적 화면에서 특히 반응형 애플리케이션을 원합니다.

결정

Bulma로 결정했습니다.

상태

Bulma로 결정했습니다. 새로운 CSS 프레임워크 선택지가 나오면 열린 자세로 검토합니다.

세부 사항

가정

우리는 현대적이고, 빠르고, 신뢰할 수 있고, 반응형인 웹 앱을 만들고자 합니다.

전형적인 현대 웹 앱은 여러 이유로 jQuery 사용을 줄이거나 없애고 있습니다:

• 현대 JavaScript가 jQuery가 제공하던 많은 기능을 점차 도입하고 있어 jQuery의 필요성이 줄었고, 특정 구현을 제공하는 더 좋고/빠르고/작은 모듈이 있습니다

• jQuery의 폭넓은 접근 방식은 DOM을 직접 조작하는 것인데, 이는 현대 JavaScript 프레임워크(예: React, Vue, Svelte)에서는 안티패턴입니다

• jQuery는 두 번 로드되면 스스로를 방해하는 등의 문제가 있습니다.

제약

jQuery를 사용하는 CSS 프레임워크를 선택하면 jQuery를 가져와야 합니다. 예를 들어 Semantic UI는 jQuery를 사용하고 Tachyons는 사용하지 않습니다.

최소한의 CSS 프레임워크를 선택하면 지금 또는 곧 필요할 수 있는 프레임워크 컴포넌트를 포기하게 됩니다. 예를 들어 Semantic UI는 이미지 캐러셀을 제공하지만 Tachyons는 제공하지 않습니다.

입장

우리는 프레임워크를 사용하지 않는 방안을 검토했습니다. 이는 특히 CSS 그리드가 우리 프로젝트에 필요한 것의 상당 부분을 제공하기 때문에 여전히 실행 가능해 보입니다.

우리는 빠른 후보 선별을 통해 많은 CSS 프레임워크를 검토했습니다: Bootstrap, Bulma, Foundation, Materialize, Semantic UI, Tachyons 등. 더 깊이 검토할 두 가지 선택은 Semantic UI(가장 의미론적인 접근 방식이기 때문)와 Bulma(우리가 지금 원하는 컴포넌트를 제공하는 가장 가벼운 접근 방식이기 때문)입니다.

우리는 Semantic UI를 검토했습니다. 이는 우리 프로젝트에 필요한 탭, 그리드, 버튼 등을 포함한 많은 컴포넌트를 제공합니다. 우리는 일반적인 CDN 파일 사용과 NPM 저장소 사용이라는 두 가지 방식으로 Semantic UI 시범 적용을 했습니다. 정적 HTML 페이지에서는 Semantic UI로 성공했지만, JavaScript SPA를 만드는 정해진 시간 안에서는 (주로 jQuery 로드 문제 때문에) 성공하지 못했습니다. 다른 개발자들도 우리와 같은 이유로 Semantic UI 개발자들에게 jQuery 없는 버전을 만들어 달라고 요청해 왔음을 알게 되었습니다. 다른 개발자들이 수년간 jQuery 없는 버전을 요청해 왔지만 개발자들은 거절했으며, jQuery 없는 버전은 작성하기에 너무 어렵다고 밝혔습니다. 예: ~“Semantic UI 프로젝트에는 jQuery를 사용하는 접점이 22,000개 이상 있다”.

Semantic을 사용한 예:

<div class="ui top attached tabular menu">
  <a class="item">Alpha</a>
  <a class="item">Bravo</a>
</div>

우리는 Bulma를 검토했습니다. Bulma는 Semantic UI와 비슷한 기능을 많이 갖고 있지만 정교한 컴포넌트는 그만큼 많지 않습니다. Bulma는 jQuery가 없는 등 현대적인 기법으로 만들어졌습니다. Bulma에는 일부 서드파티 컴포넌트가 있으며, 그중 일부는 우리가 사용하고 싶을 수 있습니다.

Bulma를 사용한 예:

<div class="tabs">
  <ul>
    <li><a>Alpha</a></li>
    <li><a>Bravo</a></li>
  </ul>
</div>

논거

위와 같습니다.

구체적으로 Semantic UI는 기술 측면(즉 jQuery 접점이 매우 많음)과 리더십 측면(즉 jQuery 없는 버전에 대해 로드맵이나 지속적인 개선, 후원 모금 등을 시도하기보다 단호히 거절함) 모두에서 주의 신호가 있어 보입니다.

영향

좋은 non-jQuery CSS 프레임워크를 찾으면 대체로 도움이 되고 전반적으로 좋습니다.

관련 항목

관련 결정

우리가 선택하는 CSS 프레임워크는 테스트 용이성에 영향을 미칠 수 있습니다.

관련 요구사항

우리는 순전히 현대적인 앱을 빠르게 출시하고자 합니다.

우리는 더 오래된 의존성(특히 jQuery)을 사용하는 더 오래된 프레임워크(특히 Semantic UI)를 작업하는 데 시간을 쓰고 싶지 않습니다.

관련 산출물

CSS를 사용할 모든 전형적인 HTML에 영향을 줍니다.

관련 원칙

쉽게 되돌릴 수 있음.

속도에 대한 필요.

메모

여기에 메모를 적으십시오.