제가 제 첫 번째 웹사이트를 개발하기 시작했을 때, 저는 많은 사람들이 직면하기 전에 직면했던 질문으로 인해 어려움을 겪었고, 많은 사람들은 꽤 오랫동안 계속해서 직면할 것입니다.
부트스트랩을 선택해야 하나요, 테일윈드를 선택해야 하나요?
테일윈드 개발 영상을 몇 개 본 나는 그것에 반했다. 그럼에도 불구하고, 나는 정답을 찾는데 시간을 보냈다고 믿는다.
나는 그 의심을 빨리 해소했고, 테일윈드에 유리하게 결정했어요. 하지만 이것은 많은 개발자들이 가지고 있는 질문입니다. 오늘은 어떤 것을 사용하는 것이 더 적합한지 알아보겠습니다.
스포일러 경고: 테일윈드입니다. 테일윈드로.
테일윈드 대 부트스트랩은 공정한 비교가 아닙니다.
테일윈드와 부트스트랩은 둘 다 CSS 프레임워크야 하지만 생각해보면 부트스트랩은 CSS 프레임워크와 UI 키트 사이 어딘가에 있습니다.
만약 당신이 탐색바, 버튼, 혹은 카드를 만들고자 한다면, 당신은 단순히 그들의 설명서에서 몇 줄의 코드를 복사하여 붙여 넣는 것만으로 부트스트랩에서 그렇게 할 수 있을 것이다.
부트스트랩의 설명서는 당신의 코드에 사용될 수 있는 많은 구성 요소들을 특징으로 한다. 그냥 거기에 넣으면 끝이에요. UI 키트 같네요, 안 그래요?
부트스트랩이 기본 구성 요소에 대해 설정한 매개 변수 내에서 작업하는 한, 당신은 골든입니다. 그러나 당신이 그것을 수정하기를 원하는 순간, 그것은 다시 CSS와 미디어 쿼리를 작성하는 것으로 돌아간다.
솔직히 말해서, 부트스트랩이 따랐던 이 방법론은 웹 디자인에 대단한 것이었다. 우리는 이러한 원리 위에 구축된 수많은 놀라운 웹 플랫폼을 보아왔고, 부트스트랩은 반응형 웹 디자인의 시대를 빠르게 이끈 공로를 인정받을 만하다.
그러나 점차 신기함이 사라지기 시작했고 그 문제들은 점점 더 두드러졌다.
웹 사이트가 보기 좋고 성능이 좋았지만 UI 키트에 의해 설정된 규칙에 의해 심각한 제약을 받았습니다.
반응성 설계를 만들고 필요한 모든 구성요소를 점점 더 적은 코드로 포함할 수 있었습니다. 그러나 UI 키트 규칙에서 지원하지 않는 방식으로 사용자 정의해야 하는 두 번째 단계는 미디어 쿼리 및 스타일 세트를 직접 작성하는 것입니다.
맞춤 제작은 골칫거리였다. 하지만 결국 우리가 모두 반한 부트스트랩의 이 부분은 UI 키트였습니다. 따라서 사전 정의된 매개 변수 내에서 작동했다는 것은 이해할 수 있다.
반면에 순풍은 당신을 구속하지 않습니다.
언급할 미리 정의된 구성 요소가 없습니다. 따라서 카드에 배경색 또는 테두리 반지름을 지정하기 위해 사용하는 것과 동일한 클래스가 버튼에 이러한 속성을 제공하는 데도 사용됩니다.
이는 테일윈드에 이은 클래스 명명 규칙에 익숙해지기까지는 다소 시간이 걸리지만 일단 익숙해지면 개발 속도가 훨씬 빨라진다는 것을 의미한다. div 및 버튼에 할당하는 클래스 이름은 이러한 요소에 할당하려는 시각적 특성에 따라 달라지며 실제 요소가 무엇인지에 따라 달라지지 않습니다.
이러한 한 가지 차이점만으로도 테일윈드는 빠르게 팬이 가장 좋아하는 것이 되었고, 이것이 당신이 점점 더 많은 웹사이트와 솔롭 리뉴얼자들이 그들의 사업을 위해 테일윈드를 사용하는 것을 본 이유이다.
네, 알겠습니다. 이제 Tailwind와 Bootstrap의 몇 가지 중요한 차이점에 대해 알아보겠습니다. 우리는 UI 키트에 비해 css 프레임워크(테일윈드)를 사용하는 것의 장점을 설명하기 위해 몇 가지 예를 검토할 것이다(부스트랩은 더 정확하게 호출되어야 한다고 생각한다).
테일윈드가 상당히 새로운 틀이고, 지금도 매일매일 발전하는 모습을 보고 있다는 점도 염두에 둘 것이다.
테일윈드 CSS가 무엇입니까?
그렇다면 Tailwind CSS가 UI 키트가 아니라고 주장하는 것은 정확히 무엇입니까?
공식 문서에 따르면 사용자 지정 인터페이스를 신속하게 구축하기 위해 설계된 유틸리티 우선 CSS 프레임워크이다.
바로 저기. 그 자칭 정의에서, 그들은 모든 것을 분명히 했다.
뒷바람은 다음과 같다.
- 신속한 프로토타이핑을 염두에 두고 제작됨
- 무서운 속도로 웹사이트를 디자인하기 위해 만들어졌다.
- 설계자가 구성 요소를 있는 그대로 사용하는 대신 커스터마이징하는 것을 좋아한다는 사실을 염두에 두고 제작되었습니다.
아시겠지만, 빠르고 유연한 부분이요. 그들은 계속해서 그것을 강조합니다.
테일윈드를 사용하면 단점이 있나요?
음, 네! 만약 당신이 html 파일을 작성하는 "클래스 이름" 기반 접근법에 익숙하다면, 당신은 아마도 테일윈드가 얻을 결과보다 훨씬 더 깨끗한 html 파일에 익숙할 것이다.
Tailwind의 유틸리티 우선 클래스를 각 요소의 모양, 느낌 및 동작 방식에 따라 계속 추가하기 때문에, 종이에서는 훨씬 더 바빠 보이는 HTML 마크업이 나타납니다.
테일윈드에서 반응형 웹사이트를 디자인하는 것이 얼마나 쉬운가?
프레임워크의 반응적 특성을 사용하는 한, 두 가지 특성이 크게 유사하다는 것을 알게 될 것입니다.
개인적으로, 저는 테일윈드가 반응성 웹 디자인에 매우 도움이 된다고 생각합니다. 미리 정의된 중단점을 기준으로 원하는 모든 항목을 변경할 수 있습니다.
사용자 지정 중단점을 쉽게 정의할 수도 있지만, 대부분의 개발자와 대부분의 사용 사례에서는 이러한 요구 사항이 전혀 제시되지 않을 것입니다.
후풍은 당신의 취향에 맞게 제작될 준비가 되었습니다.
대부분의 개발자들은 Tailwind의 커스터마이징 기능을 당신이 CSS 프레임워크라고 생각할 수 있는 다른 어떤 것보다도 가장 큰 장점으로 내세운다.
그들은 틀리지 않았다.
Tailwind는 유틸리티 우선 클래스에 완전히 새로운 차원을 추가하는 기능을 제공하지만 동일하거나 유사한 명명 규칙을 유지할 수 있습니다.
예를 들어 Tailwind는 몇 가지 글꼴 크기(텍스트 베이스, 텍스트-sm, 텍스트-xs, 텍스트-lg, 텍스트-xl, 텍스트-2xl 등)를 즉시 제공하지만 프로젝트에 필요한 몇 가지 요구 사항에 정확히 부합하지는 않았다. 그래서 저는 단순히 text-xxs와 text-xxxxs, voila 두 가지 새로운 변형을 만들었습니다. 저는 모든 준비가 되었습니다.
그런데 아까도 말씀드렸듯이, 이건 스스로가 필요로 하는 것이 아니며, 대부분의 경우, 박스 안에서 제공되는 것이 프로젝트 전체에 도움이 되기에 충분합니다.
부트스트랩, 불마 또는 다른 UI 키트보다 테일윈드를 선택하는 이유
부트스트랩의 지지자들은 심지어 당신 자신의 커스텀 CSS로 프레임워크를 오버라이드함으로써 당신이 원하는 방식으로 미리 디자인된 부트스트랩 컴포넌트들을 커스터마이징 할 수 있다고 주장할 것이다.
맞아요. 그 옵션은 분명히 존재합니다.
하지만 충분히 반복하면 아주 기본적인 질문이 떠오른다.
UI 키트(또는 Bootstrap이라고 부르는 것에 따라 프레임워크)를 사용한 후에도 사용자 지정 CSS를 그렇게 많이 작성해야 한다면, 처음부터 UI 키트를 사용할 가치가 있을까요?
엄청난 양의 외부 라이브러리를 가져와 수많은 사용자 지정 코드를 작성하게 되는데, 시간 절약조차 제대로 못하고 있습니다. 더군다나 지금 걱정해야 할 파일 수가 늘어났다는 것입니다!
후풍으로 다른 요소에 영향을 주지 않고 원하는 것을 변경할 수 있습니다.
미리 정의된 클래스로 작업하는 경우 클래스를 사용자 지정하면 해당 클래스 이름을 사용하는 다른 모든 요소의 모양과 느낌을 망칠 위험이 있습니다.
테일윈드의 각 요소에 대한 클래스를 개별적으로 정의하기 때문에 사이트 전체의 설계를 변경하지 않고 특정 요소의 모양을 변경할 수 있습니다.
하지만 이것은 양날의 검이다.
또한 특정 요소 그룹의 모양을 변경하려면(또는 더 나쁜 경우) 모든 위치에서 설계를 변경해야 합니다.
리액트, 뷰, Nextjs, Nuxtjs와 같은 자바스크립트 프레임워크를 사용하는 경우 더 나은 방법이 있습니다.
자바스크립트 프레임워크는 구성 요소 모델을 따릅니다. 즉, 단추 구성요소를 정의하고 단추를 배치하는 모든 위치에서 해당 구성요소를 사용할 수 있습니다.
그렇게 하면 일이 더 간단해집니다. 단추와 같은 요소의 모양을 변경해야 할 경우 구성요소 내에서 관련된 클래스를 변경하면 모든 위치에서 요소가 변경됩니다.
균일하게.
그러나 버튼의 모양이 바뀌지 않고 다른 모든 곳에 영향을 미치지 않으면서 버튼의 모양을 변경하고자 했던 이전 사용 사례에서는 도움이 되지 않습니다.
특정 속성을 비워두고 구성 요소를 사용할 때 정의하면 됩니다. 이렇게 하면 구성 요소가 사용 중인 시점에 특정 속성이 할당된 구성 요소의 빈 템플릿이 생성됩니다.
(디자인의 여러 위치에서 svg 아이콘을 다른 크기로 사용해야 할 때 이 방법을 가장 자주 사용합니다.)
테일윈드와 부트스트랩 중 어느 것이 더 쉬울까요?
부트스트랩의 세계에서 온 거라면 테일윈드는 익숙해지는 데 시간이 좀 걸릴 거예요. 처음에는 싫어할 수도 있어요. 조언이요? 시간을 좀 줘!
부트스트랩은 거의 컴포넌트 기반입니다. 다양한 구성요소가 함께 제공되며 요소 스타일링을 위해 필요한 모든 작업을 수행할 수 있는 유틸리티도 있습니다.
테일윈드에 내장된 부품이 없다는 단순한 사실은 터무니없이 명백한 실수로 다가올 수 있다. 그렇지 않아요.
테일윈드를 사용하는 것은 부트스트랩 사용보다 일반 css를 작성하는 방법과 더 유사하다.
부트스트랩은 실제로 매우 강력합니다. 만약 당신이 그들의 사전 빌드된 구성 요소를 사용하려고 한다면요. 이 모든 것이 최종 결과를 염두에 두고 만들어졌기 때문에, 설계를 사용자 정의할 필요가 없는 한, 작성할 CSS는 거의 없습니다.
반면, Tailwind를 사용할 때는 처음부터 요소를 스타일링하기 때문에 최종 설계를 변경하고 커스터마이징하는 것이 훨씬 쉽고 직관적이며 자연스럽게 자연스럽습니다.
결론
Tailwind는 매우 유연하며 개발자의 요구에 따라 훨씬 더 직관적이고 빠르며 적응력이 뛰어납니다. 유틸리티 클래스 집합으로 작업하기 때문에 최종 css는 필요한 속성으로만 가득 차게 됩니다.
프로젝트에 Tailwind를 설치하는 방법이나 내장 클래스를 사용자 지정하거나 css 클래스와 속성으로 확장하는 방법에 대해서는 자세히 설명하지 않겠습니다.
a. 그들의 서류는 그들 모두를 꽤 잘 다루고 있다.
b. 내장 클래스를 사용자 정의하고 css 속성을 사용하여 확장하는 것은 매우 드물게 필요합니다.
2022년에 프론트엔드 개발자가 될 계획인가요?
작년에 코딩을 배우기로 결심했어요. 그 이후로, 저는 수많은 웹사이트를 디자인하고, 다양한 사용 사례의 요구 사항을 충족하기 위해 모든 종류의 API를 통합했으며, 다양한 복잡성의 시스템을 구축했습니다.
각각의 시스템은 달랐다. 그리고 백엔드를 디자인한 방식은 필요할 때 달랐습니다.
하지만 한 가지 일관성이 있는 것은 모든 것의 프런트 엔드가 테일윈드를 사용하여 만들어졌다는 사실이다.
제가 배운 내용을 초보자 친화적인 책으로 정리하고 있습니다. 그것은 제가 아는 새로운 개발자에게 가장 빠르고 간단하며 효율적인 접근 방식을 따릅니다. 내가 책에서 요약하고 있는 것과 정확히 같은 접근법을 따랐기 때문에 나는 그것을 알고 있다.
만약 당신이 그 책의 사전 사본을 받고 싶다면, 저에게 이메일을 보내세요. 이 책에는 가장 인기 있고 잘 디자인된 웹 사이트 중 일부에서 선택하는 구성 요소를 설계할 수 있는 수십 개의 후속 튜토리얼이 포함되어 있습니다. 당신이 책을 다 읽을 때쯤, 당신은 어떤 웹사이트를 발견하든 단숨에 디자인할 수 있을 것이다.
얼리버드(Early-bird)를 이용하시면 최종 가격의 50%를 할인받으실 수 있으며, 다양한 무료 상품과 함께 평생 업데이트도 이용하실 수 있습니다.
지금 잡아.
오늘은 여기까지 하겠습니다. 다음 시간까지 잘 지내요!
댓글