CSS 프레임워크 또는 CSS 그리드: 내 프로젝트에 무엇을 사용해야 합니까?

내가 가장 자주 받는 질문 중 일부는 "CSS 그리드 또는 부트스트랩을 사용해야 합니까?"와 같은 다양한 질문입니다. 이 기사에서는 그 질문을 살펴볼 것입니다. 프레임워크를 사용하는 이유는 다양하며 단순히 해당 프레임워크에 포함된 그리드 시스템의 사용을 중심으로 하는 것이 아님을 알게 될 것입니다. 이러한 이유를 설명함으로써 귀하가 작업 중인 사이트와 응용 프로그램과 함께 작업하는 팀에 가장 적합한 것이 무엇인지 스스로 결정하는 데 도움이 되기를 바랍니다.

이 기사 에서 프레임워크 에 대해 이야기할 때 Bootstrap 또는 Foundation과 같은 타사 CSS 프레임워크를 설명합니다. 이것이 실제로 구성 요소 라이브러리라고 주장할 수도 있지만 많은 사람들(자신의 문서 포함)은 이를 프레임워크로 설명하므로 여기에서 사용할 것입니다. 중요한 요소는 이것이 귀하의 특정 문제에 대한 참조 없이 귀하의 외부에서 개발된 것이라는 것입니다. 타사 프레임워크를 사용하는 것의 대안은 자체 CSS를 작성하는 것입니다. 여기에는 자체 내부 프레임워크를 개발하거나, 많은 공통 파일을 시작점으로 사용하거나, 모든 프로젝트를 새로운 것으로 만드는 것이 포함될 수 있습니다. 이 모든 것은 매우 일반적인 요구 사항이 아니라 자신의 특정 요구 사항과 관련하여 수행됩니다.

CSS 프레임워크를 선택하는 이유

CSS 그리드는 CSS 프레임워크가 수행하는 작업에 대한 드롭인 대체가 아니기 때문에 그리드 또는 프레임워크를 사용할지 여부에 대한 질문에는 결함이 있습니다. 주제를 탐색하려면 CSS Grid 프레임워크가 대체할 프레임워크를 고려해야 합니다. 저는 사람들이 CSS 프레임워크를 사용하기로 선택한 이유를 찾는 것으로 시작하고 싶었습니다. 그래서 트위터로 돌아와서 이 트윗을 올렸습니다.

질문: 프로젝트에 CSS 프레임워크(Bootstrap, Foundation 등)를 사용하기로 선택한 경우, 그렇게 하는 주된 이유는 무엇입니까?

— 레이첼 앤드류(@rachelandrew) 2018년 10월 16일

반응이 많았습니다 . 예상대로 프레임워크에 포함된 단순히 그리드 시스템보다 프레임워크를 사용해야 하는 훨씬 더 많은 이유가 있습니다.

프레임워크는 팀에 준비된 문서를 제공합니다.

여러 다른 개발자와 함께 프로젝트를 진행하는 경우 생성하는 내부 시스템에는 팀 구성원이 이를 효과적으로 사용하는 데 도움이 되는 문서도 포함해야 합니다. 유용한 문서를 만드는 것은 그 자체로 시간이 많이 걸리고 숙련된 작업이며 큰 프레임워크가 잘하는 일입니다.

많은 경험 많은 프론트엔드 개발자들이 CSS 프레임워크를 추천하고 사용하는 이유를 설명하면서 프레임워크 문서가 계속해서 나왔습니다. 사람들이 CSS를 잘 몰라서 프레임워크를 사용하고 있다는 의견을 가끔 듣습니다. 하지만 답변을 주시는 많은 분들이 저에게 CSS 전문 개발자로 잘 알려져 있습니다. 나는 그들이 프레임워크에 의해 만들어진 선택에 의해 때때로 좌절감을 느낀다고 확신하지만, 그 선택의 긍정적인 측면이 그것보다 더 중요합니다.

온라인 커뮤니티: 도움을 받을 수 있는 손쉬운 액세스

특정 도구를 사용하기로 결정하면 도움을 요청할 수 있는 사용자 커뮤니티도 얻게 됩니다. 매우 명확한 CSS 문제가 있고 이를 설명하기 위해 축소된 사용 사례를 생성할 수 있는 경우가 아니면 CSS에 대한 도움을 요청하는 것이 어려울 수 있습니다. 특정 구성 요소를 빌드하는 방법에 대해 질문하려는 경우 특히 그렇습니다. 프레임워크를 사용하면 질문에 대한 출발점이 될 수 있습니다. 일반적으로 처음부터 시작하지 않고 특정 구성 요소를 수정하거나 스타일을 지정하는 방법을 묻습니다. 이것은 묻기도 쉽고 대답하기도 쉬운 일이다.

그리드 시스템

CSS Grid가 있음에도 불구하고 프레임워크를 사용하기로 결정한 가장 큰 이유는 그리드 시스템 때문이라는 답변이 많았습니다. 물론 이러한 프로젝트 중 상당수는 CSS 그리드가 제공되기 훨씬 전에 시작되었을 수 있습니다. 그러나 오늘날에도 하위 호환성에 대한 우려나 새로운 레이아웃 방법에 대한 팀 이해로 인해 사람들은 기본 CSS를 채택하기보다 프레임워크를 사용하기로 결정할 수 있습니다.

프로젝트 납품의 속도

독특한 디자인과 효율적인 CSS가 마감일보다 훨씬 낮은 우선 순위를 가질 때

— CodingBlocks.net(@CodingBlocks) 2018년 10월 16일

일반적으로 프레임워크를 선택하면 프로젝트를 훨씬 더 빠르게 제공할 수 있습니다. 특히 해당 프로젝트가 프레임워크가 작업을 수행하는 방식과 매우 잘 맞고 많은 사용자 정의가 필요하지 않은 경우에 그렇습니다.

새로운 아이디어에 대한 MVP를 개발하는 경우 프레임워크가 탁월한 선택이 될 수 있습니다. 시간을 할애할 일이 많으며 프로젝트에 필요한 사항에 대한 가정을 계속 테스트해야 합니다. 프레임워크를 사용하여 첫 번째 버전을 개발할 수 있으면 사용자에게 제품을 더 빨리 알리고 사용하지 않기로 결정한 것을 개발하는 데 드는 많은 시간을 절약할 수 있습니다.

저는 MVP인 모든 것에 프레임워크를 사용합니다. 도구에 대한 최소한의 개발 노력과 실제 개념을 작업하는 시간에 최적화하기 위한 프레임워크입니다.

나는 기존의 대규모 사이트/앱을 다시 실행하는 모든 것에 대해 나만의 CSS "프레임워크"를 만듭니다.

— 벤 보디엔(@bbodien) 2018년 10월 16일

속도와 많은 준비된 구성 요소가 매우 유용할 수 있는 또 다른 장소는 사이트 또는 응용 프로그램에 대한 백엔드 관리 시스템을 개발할 때입니다. 단지 몇 개의 관리 화면을 생성해야 하는 경우 프레임워크는 양식 필드 및 기타 구성 요소의 스타일을 지정하는 데 많은 시간을 절약할 수 있습니다! 유용한 출발점을 제공할 수 있는 Bootstrap 및 Foundation용 대시보드 테마도 있습니다.

나는 디자이너가 아니다!

이것이 내가 과거에 CSS 프레임워크를 선택한 이유입니다. 나는 디자이너가 아니며 무언가를 디자인하고 구축해야 하는 경우 자격이 전혀 없는 디자인 결정을 내리기 위해 오랜 시간을 할애할 것입니다. 모든 측면 프로젝트에 대해 디자이너를 고용할 수 있는 자금이 있으면 좋겠지만 저는 그렇지 않습니다. 따라서 프레임워크는 물건을 선적하는 것과 그렇지 않은 것의 차이를 의미할 수 있습니다.

CSS 버그 및 브라우저 호환성 문제 다루기

실제 버그나 특정 기능에 대한 지원 부족으로 인해 프레임워크 작성자가 이미 브라우저 문제를 처리했을 것이라는 사실이 생각보다 적게 언급되었습니다. 그러나 이것은 여전히 ​​많은 사람들에게 결정을 내리는 요소였습니다.

반응형 디자인을 돕기 위해

웹 페이지의 응답성 . 웹 페이지의 중단점을 결정하기가 어려웠습니다.

— 파이살 알리(@f_a_akhtar) 2018년 10월 18일

이것은 몇 번 나타났습니다. 사람들이 프레임워크를 선택하는 이유는 특히 응답성이 좋았거나 내가 그들을 위해 중단점에 대한 결정을 내렸기 때문입니다. 특히 이것이 프레임워크 사용을 선택하는 요인으로 언급된 것이 흥미롭다고 생각했습니다.

프레임워크를 사용하지 않는 이유는 무엇입니까?

프레임워크를 선택한 긍정적인 이유 중에는 사람들이 그 선택에 대해 가지고 있는 몇 가지 문제가 있습니다.

프레임워크 코드 재정의의 어려움

많은 사람들이 프레임워크에서 사용된 코드를 재정의하기 어려워질 수 있다는 사실과 재정의가 많이 필요하지 않은 프레임워크가 좋은 선택이라는 사실에 대해 언급했습니다. 사용 용이성의 이점과 프레임워크 사용 방법을 이해하고 있는 팀의 모든 사람은 엄청난 수의 사용자 정의가 준비되어 있는 경우 손실될 수 있습니다.

모든 웹사이트는 결국 동일하게 보입니다

똑같이 보이기 시작하는 모든 웹사이트에 대한 비난은 잘 알려진 CSS 프레임워크의 문에 정면으로 놓여 있습니다. 나는 특정 프레임워크가 사용되었다고 확신하는 사이트를 보았고 그 사이트가 사용자 정의 CSS임을 발견했습니다. 따라서 이러한 프레임워크에서 만들어진 디자인 선택이 널리 퍼져 있습니다.

이미 언급한 프레임워크 스타일을 재정의하는 어려움은 특정 프레임워크를 사용하여 개발된 사이트가 비슷하게 보이는 경향이 있는 큰 부분입니다. 이것은 단지 창의적인 문제가 아닙니다. 모두 동일한 프레임워크를 선택한 몇몇 웹사이트의 사용자로서 그들이 모두 같은 것이라고 느끼는 것은 매우 이상할 수 있습니다. 브랜드를 전달하고 좋은 사용자 경험을 그 일부로 만드는 측면에서 프레임워크의 일반적인 선택을 선택할 때 무언가를 잃을 수 있습니다.

전체 세계의 CSS 문제 상속

프론트엔드든 백엔드든 주류에 도달하려는 도구나 프레임워크는 가능한 한 많은 문제를 해결해야 합니다. 도구가 하나의 특정 사용 사례를 해결하는 데 밀접하게 연결되어 있지 않은 한 매우 일반적인 코드와 사용자가 갖고 있지도 않고 앞으로도 없을 문제를 해결하는 코드가 많이 포함될 것입니다.

Internet Explorer 또는 이전 버전의 Chrome에서 보다 제한된 경험을 허용하는 최신 브라우저에서만 전체 경험을 볼 수 있는 운이 좋은 위치에 있을 수 있습니다. IE9로 돌아가는 많은 내장 지원이 있는 프레임워크를 사용하면 특히 최근 CSS 레이아웃이 개선된 점을 감안할 때 많은 추가 코드가 발생합니다. 또한 프레임워크의 모든 것이 이러한 지원 요구 사항을 가정하기 때문에 창의적이지 못할 수도 있습니다. CSS를 사용하여 가능한 것은 프레임워크에 의해 제한될 수 있습니다.

예를 들어, 인기 있는 프레임워크의 그리드 시스템에는 행을 확장할 수 있는 기능이 없습니다. 그리드 레이아웃 이전의 레이아웃 시스템에는 개념이나 행이 없기 때문입니다. CSS 그리드 레이아웃은 이를 쉽게 허용합니다. Bootstrap Grid에 묶여 있고 디자이너가 여러 행에 걸쳐 있는 요소를 포함하는 디자인을 제안하면 대상 브라우저에서 Grid를 지원할 수 있음에도 불구하고 이를 구현할 수 없습니다.

성능 문제

위와 관련하여 정확한 사용 사례에 최적화된 것이 아니라 상당히 일반적인 코드를 사용하는 데 내재된 성능 문제가 있습니다. 성능을 향상시키려고 할 때 프레임워크의 결정에 반하는 자신을 발견하게 될 것입니다.

증가된 기술 부채

속도, 주로 장기적으로 상당한 기술적 부채를 발생시켰기 때문에 약간의 잘못된 경제라는 것을 빨리 알아냈습니다.

— Tim Cthulhuegdon(@nefarioustim) 2018년 10월 16일

프레임워크는 스타트업을 신속하게 시작하는 좋은 방법일 수 있으며 결정을 내리는 시점에 이를 대체할 것이라고 확신하지만 그렇게 할 계획이 있습니까?

CSS를 배우는 것보다 프레임워크를 배우기

회의 및 워크샵 참석자들과 이야기할 때 많은 사람들이 CSS를 작성하는 데 프레임워크만 사용했다는 것을 알게 되었습니다. 오늘날 웹 플랫폼의 복잡성을 고려할 때 이러한 도구 중 하나를 통해 웹 개발에 참여하는 것은 아무런 문제가 없습니다. 그러나 특히 기술 기반 프레임워크가 선호되지 않는 경우 경력을 제한하는 선택이 될 수 있습니다.

CSS 지식이 없는 프론트 엔드 개발자가 있다는 것은 회사를 걱정해야 합니다. 팀이 실제로 CSS 없이 CSS를 수행하는 방법을 이해하지 못한다면 해당 프레임워크에서 벗어나는 것이 엄청나게 어렵습니다. 이것이 프레임워크를 사용하지 않는 이유는 아니지만 프레임워크를 사용할 때 염두에 두어야 할 사항입니다. 이사가는 날이 되면 팀이 CSS 작성 방법을 기억하거나 처음 배울 필요 없이 새로운 것을 받아들일 준비가 되길 바랄 것입니다!

최종 사용자를 고려하지 않는 선택

Nicole Sullivan은 내가 이 기사를 작성하려고 생각하는 동안 내 질문에 며칠 전에 거의 같은 질문을 했습니다. 그녀는 CSS 프레임워크가 아니라 프론트엔드 프레임워크 전체를 고려하고 있었습니다. Jeremy Keith는 최종 사용자와 관련된 답변 중 정확히 0건이라고 언급했습니다. 내 질문에 대한 답변도 마찬가지였다.

사이트를 빨리 구축하기 위한 경쟁과 사이트의 디자이너 및 개발자인 우리 자신을 위해 가능한 한 좋은 것을 만들고자 하는 열망에서 우리가 누구를 위해 이 작업을 하고 있는지 잊으셨습니까? 프레임워크 개발자가 내린 결정이 구축 중인 사이트 사용자의 요구 사항과 일치합니까?

프레임워크를 "바닐라" CSS로 대체할 수 있습니까?

프레임워크를 교체하거나 프레임워크 없이 새 프로젝트를 시작하는 것을 고려하고 있다면 해당 프로세스를 더 쉽게 만들기 위해 고려할 수 있는 사항은 무엇입니까?

프레임워크의 어떤 부분이 필요한지 이해

프레임워크 사용을 자신의 CSS로 교체하는 경우 현재 프레임워크 사용을 감사하는 것이 좋은 출발점이 될 것입니다. 무엇을 사용하고 왜 사용하는지 알아보세요. 새로운 디자인에서 이러한 것들을 어떻게 대체할 것인지 고려하십시오.

프레임워크를 선택할지 직접 작성할지 고민할 때도 비슷한 프로세스를 따를 수 있습니다. 이 중 어떤 부분이 필요하다고 합리적으로 예상할 수 있습니까? 귀하의 요구 사항에 얼마나 잘 부합합니까? 가져오는 코드가 많아 방문자에게 다운로드를 요청할 수 있지만 절대 사용하지 않습니까?

문서화된 패턴 라이브러리 또는 스타일 가이드 만들기

나는 패턴 라이브러리 작업의 열렬한 팬이며 여기 Smashing Magazine에서 Fractal 사용에 대한 내 게시물을 읽을 수 있습니다. 패턴 라이브러리 또는 스타일 가이드를 사용하면 모든 구성 요소와 함께 문서를 작성할 수 있습니다. 패턴 라이브러리의 CSS 작업으로 모든 프로젝트를 시작합니다.

문서를 작성하는 사람으로서 여전히 문서를 작성해야 하지만 문서를 어디서부터 어떻게 구성해야 하는지 아는 것이 가장 어려운 경우가 많다는 것을 알고 있습니다. 패턴 라이브러리는 구성 요소 자체에 대한 CSS와 함께 문서를 유지함으로써 이를 도와줍니다. 이 접근 방식은 문서가 참조하는 구성 요소에 밀접하게 연결되어 있기 때문에 문서가 구식이 되는 것을 방지하는 데도 도움이 됩니다.

나만의 CSS 코드 지침 개발

팀 전체의 일관성은 매우 유용하며 프레임워크가 없으면 이를 지시하지 않을 수 있습니다. 특히 새로운 레이아웃 방법을 사용하면 패턴을 구축할 수 있는 여러 가지 방법이 있는 경우가 많습니다. 모든 사람이 다른 방법을 선택하면 불일치가 나타날 수 있습니다.

도움을 요청할 수 있는 더 나은 장소

스택 오버플로 방향으로 사람을 보내는 것 외에 CSS에 대한 도움을 요청할 수 있는 곳이 거의 없는 것 같습니다. 특히 초보자가 접근할 수 있는 곳은 거의 없는 것 같습니다. 사람들에게 타사 도구를 사용하지 않도록 권장하려면 해당 도구를 둘러싼 커뮤니티에서 제공하는 친절하고 유용한 지원에 대한 필요를 채워야 합니다.

회사 내에서 보다 숙련된 개발자가 새로운 팀 구성원을 위한 CSS 지원이 될 수 있습니다. 프레임워크에서 자체 솔루션으로 이동하는 경우, 특히 사람들이 과거에 도움이 필요할 때 타사 도구와 함께 제공된 도움말을 사용하는 데 익숙한 경우 격차를 해소하는 데 도움이 되는 교육이 필요한지 고려하는 것이 현명할 것입니다. .

비 디자이너를 위한 스타일 가이드 또는 시작점

나는 “어떤 글꼴을 사용해야 합니까?”, “제목은 본문과 관련하여 얼마나 커야 합니까?”, “그림자를 사용해도 될까요?”와 같은 질문으로 매듭을 짓습니다. CSS를 쉽게 작성할 수 있습니다. 내가 무엇을 하려는지 안다면! 내가 정말로 필요한 것은 끔찍한 디자인을 만들기 위한 몇 가지 규칙, 일종의 타이포그래피 출발점, 또는 일련의 기본 지침이 많은 경우에 프레임워크의 기본값을 사용할 수 있는 것을 대체할 수 있다는 것입니다.

최신 브라우저 상호 운용성 상태에 대한 교육

나는 수년 동안 프레임워크 기반 개발에 몰두해 온 사람들이 종종 몇 년이 지난 브라우저 상호 운용성에 대한 견해를 갖고 있다는 것을 발견했습니다. 우리는 CSS 작업 크로스 브라우저 측면에서 더 나은 상황에 처한 적이 없습니다. 일부 브라우저는 새로운 CSS를 지원하지 않을 수 있지만 일반적으로 CSS(지원되는 경우)는 이상한 버그로 가득 차 있지 않습니다. 예를 들어 거의 모든 경우에 한 브라우저에서 CSS 그리드를 사용하면 CSS가 다른 브라우저에서도 정확히 같은 방식으로 작동합니다.

프레임워크가 브라우저 버그로부터 자신을 구할 수 있다고 믿는 팀 구성원에게 프레임워크를 사용하지 않는 것에 대한 사례를 만들려는 경우 이 점을 제기하는 것이 유용할 수 있습니다. 브라우저 호환성 문제는 실제입니까, 아니면 과거의 우려를 기반으로 합니까?

새로운 유형의 프레임워크를 볼 수 있습니까?

흥미로운 점은 우리의 새로운 레이아웃 방법이 새로운 유형의 도구와 프레임워크를 안내하는 데 도움이 될지 여부입니다. 새로운 레이아웃 방법을 활용하고 더 많은 창의성을 허용하면서도 여전히 팀과 개인에게 내 트윗에 대한 응답에서 나온 부인할 수 없는 이점을 제공하는 도구를 보게 될까요?

내장 그리드 시스템보다 새로운 레이아웃 방법에 의존함으로써 새로운 스타일의 프레임워크가 훨씬 가벼워지고 유용한 구성 요소의 모음이 될 수 있습니다. 그러면 매우 일반적인 코드에 내재된 일부 성능 문제에서 벗어날 수 있습니다.

프레임워크가 도움이 될 수 있는 영역은 새로운 레이아웃 방법을 지원하지 않는 브라우저에 대한 견고한 폴백을 만드는 데 도움이 되거나 구성 요소에 정말 견고한 접근성을 제공하는 것입니다. 이는 상호 운용성과 접근성을 고려하는 작업 방식에 대한 지침을 제공하는 데 도움이 될 수 있습니다.

CSS 그리드 레이아웃을 위해 부트스트랩 그리드를 전환하는 것만으로는 이를 달성할 수 없다고 생각합니다. 대신, 새로운 프레임워크를 제안하는 작성자는 여기에 설명된 몇 가지 이유를 살펴보고 CSS에 있는 새로운 기능을 사용하여 새로운 방식으로 문제를 해결해야 합니다.

프레임워크를 사용해야 합니까 ?

당신과 당신의 팀은 그 질문에 스스로 답해야 합니다. 그리고 사람들이 당신을 믿게 하려고 할지라도 보편적인 옳고 그름은 없습니다. 당신의 프로젝트에 옳고 그른 것만이 있습니다. 이 기사와 내 원래 질문에 대한 많은 답변이 그 질문에 대해 숙고할 때 토론할 내용을 제공할 수 있기를 바랍니다.

대답은 시간이 지남에 따라 변경될 것임을 기억하십시오. 사이트 개발 초기에 지금 당장 필요한 것만 고려하는 것이 아니라 사이트의 수명을 고려하는 것도 유용한 사고 실험이 될 수 있습니다. 이것이 5년 후에도 계속될 것이라고 예상하십니까? 그렇다면 당신의 선택은 긍정적일까요, 부정적일까요?

결정을 문서화하고, 재검토하는 것을 두려워하지 말고, 당신과 당신의 팀이 당신이 사용하기로 결정한 프레임워크 외부에서 당신의 기술을 유지하도록 하십시오. 그렇게 하면 앞으로 나아가고 프로젝트의 다음 단계를 위해 최선의 결정을 내리기에 좋은 위치에 있게 될 것입니다.

그 트윗에서 시작된 대화가 계속되기를 바랍니다. 댓글로 여러분의 이야기를 알려주세요. 현재 자신의 프로젝트에 가장 적합한 것이 무엇인지 알아내기 위해 노력하는 다른 사람들에게 도움이 될 것입니다.