⚠️ 주의!!! 필자는 모든 사람들의 취향을 존중하며 절대로 어떤 프레임워크가 최고가 아니다 라는 것을 먼저 밝히고 갑니다!!! ⚠️

서론

세상의 모든 정보의 근간이 되는 인터넷과 그 인터넷을 이루고 있는 웹은 조금이라도 더 많은 사람들을 이끌기 위해서 미려한 디자인과 애니메이션을 만들어서 사용자에게 조금이라도 더 아름답거나 예쁘거나, 혹은 멋있는 스타일을 주기 위해 노력한다.

모두가 디자인이 중요하다는 점에서 동의하지만 항상 모든 코딩 커뮤니티의 가장 큰 떡밥인 이 디자인 즉 스타일을 입히는 도구를 어떤 것을 사용하는지에 대해서는 정말 많은 토론이 오가면서 서로 자기가 사용하는 도구가 제일 좋다고 이야기한다.

그렇다면 이 굉장히 많은 논쟁이 되고 있는 스타일 프레임워크들을 전부 사용해 보지는 않았지만, css scss tailwind styled-component 를 사용해 본 필자가 사용하면서 필자가 사용한 느낀점을 서술해보겠다.

모든 스타일의 기본이 되는 css

가장 기본이 되는 스타일 css 다 가장 유구한 역사를 가졌으며 사실 뒤에 설명할 모든 프레임워크 혹은 라이브러리는 사실 일련의 과정을 거쳐서 다시 css로 재구성된다. 왜냐하면 브라우저가 이해할 수 있는 스타일 언어는 css 이기 때문에 반드시 변환을 하여 적용을 시켜야한다. 그렇기 때문에 처음으로 웹을 배우는 입장에서는 html + css + js 엮어서 배우는 것은 어떻게 보면 당연한 것이다.

그렇지만 css가 나쁜 것은 아닌데 왜냐면 기본적으로 있을 건 다 있기 때문이다. 하지만...

너무 길어지고 보기가 힘들어요

css의 기본적인 문법은 다음과 같다.

태그이름: {
 적용할_스타일_속성: 속성값;
}
.클래스이름: {
 적용할_스타일_속성: 속성값;
}
#아이디이름: {
 적용할_스타일_속성: 속성값;
}

위의 방식대로 하나의 무언가를 선택하고 중괄호로 열고 원하는 속성값을 지정해야한다. 하지만 내가 만약에 다른 요소를 더 자세하게 특정하고 싶다면 아래와 같이 작성해야한다.

.클래스이름1 .클래스이름2 ...대충이런식으로 {
 적용할_스타일_속성: 속성값;
}

벌써부터 보기가 힘들어진다. 위의 상황을 방지하기 위해서는 클래스 이름을 고유하게 지어야하는데... 이 이름을 짓는 것도 상당한 골치거리인데다가 엄청 길어지게 된다.
대충엄청_나게긴이름__의클래스_명의진짜__이름 이딴식으로 되기 때문에 보기에도 정말 별로다. 유지보수 측면에서도 생각해보면 이런식으로 스타일을 나열하게 되면 보기가 엄청 힘들어 진다... 이런식으로 코드를 500줄 1000줄 넘게 된다면 어떻게 봐야할 것인가 그렇기 때문에 파일을 나눠놓는 것이 좋다.

장점

• 웹 스타일 기술의 표준
• 부족하지 않은 기능, 계속해서 추가되는 기능들.

단점

• 스타일링 하는데 불편함을 겪을 수 있음.
• 작명에 고통을 받을 수 있음.
• 솔직히 코드 보기 힘듬(사심)

css에서 조금 더 발전된 scss

scss는 sass에서 파생되었으며 sass는 css의 몇몇 불편한 점들 (중첩이 불가능한 선언, 변수 개념이 없음) 등을 개선하기 위해서 만들어진 css 전처리기 언어라고 할 수 있다. 즉 css의 단점을 고치기 위해서 파생된 언어라고 할 수 있다.

그렇다면 한가지 의문점이 생길 것이다. 엥 css에서 변수선언 가능한데 뭔소리임? 이 라고 하지만 사실 업데이트 이전의 css에서는 변수를 선언할 수 없었다... 앞서 언급했다 싶이 css는 계속 변화하고 업데이트를 진행하기 때문에 다른 스타일링 언어 ex) sass, scss, less 같은 언어들의 좋은 기능들을 반영하여 업데이트를 계속해서 하고 있다.

그렇다면 이 css를 개선한 scss는 어떻게 사용하는지 살펴보자.

.클래스_이름{
 적용할_스타일_속성: 속성값;
}

뭔데요 css랑 다른 게 없잖아요.. 라고 생각 할 수도 있다. 하지만 이 sass즉 scss의 약어는 바로 (Syntactically Awesome StyleSheet) 즉 문법적으로 개쩌는 스타일 시트라는 뜻으로 바로 다음 코드를 보면 왜 개쩌는 지 알수 있을 것이다.

.클래스_이름1{
  .클래스_이름2{
  }
}

어떄요 정말 보기 좋죠? 이 얼마나 간결하면서도 깔끔한 문법인가.

.클래스이름1 .클래스이름2 ...대충이런식으로 {
 적용할_스타일_속성: 속성값;
}

.클래스_이름1{
  .클래스_이름2{
    ...계속 중첩
  }
}

어때요 진짜 쉽죠? 사실 이 중첩 문법만 적응하게 된다면 절대로 다시는 css로 돌아가지 못할 것이다. 이거는 직접 내가 css에 고통을 받다가 scss로 넘어오면서 느낀 실화이다. 정말 이게 엄청 편하다. 저렇게 중첩을 하게 되면 대충엄청_나게긴이름__의클래스_명의진짜__이름 요딴식으로 가뜩이나 좋지 않은 머리를 작명을 시간을 할애하는 것 대신에 중첩을 사용하여 적용하게 되면 큰 범주에서만 클래스 이름을 선언하고 정말 필요한 부분에서만 클래스를 작명을 하는 나를 발견할 수 있을 것이다.

그외에 정말 편한 @mixin 기능과 잘 쓰면 좋은 cal 등등 다양하고 좋은 기능을 많이 가지고 있기 때문에 한번 공식문서를 참고하여 내가 만약 여태까지 css에게 고통을 받고 있었다면 도움이 될 것 이다.

https://sass-lang.com/

장점

• css대비 코드 양이 확실히 줄어듦
• 다양한 유틸리티들이 편하다
• 중첩문법(사심)

단점

• 초기 세팅시 조금 어려울수도 있다? (근데 솔직히 번들러 쓰면 쉽게 가능하던데)
• 어쩄든 css의 전처리 언어이기 때문에 css기반인 건 변하지 않음

고3왭개발자인데,,, 요즘,,, tailwind 덕분에 정말 편하웁다~~~

요즘 굉장한 뜨겁다는 이 tailwind는 어떤 녀석일까? 사실 이 tailwind는 일종의 css를 편하게 작성하는 것을 도와주는 일종의 css 프레임워크다. 이 tailwind에 관해서는 사실 정말 많은 말들이 오갔고 또 많은 싸움들이 일어났다. 예전에 bootstrap이 한참 유행 할때 제발좀 부트스트랩 쓰지좀 마라 제발 이라는 말이 오갈정도로 피터지게 싸운 양샹이랑 비슷하지만, 또 한편으로는 tailwind를 정말 좋아하는 사람들도 있다.

이 말많은 tailwind 어떻게 쓸까? 사실 문법 자체는 단순하다 별도의 스타일 파일을 만들어서 관리하는 것이 아니라, 그냥 인라인 스타일 처럼 클래스 이름에 해당하는 속성을 미리 세팅 된 클래스 이름을 넣기만 하면 끝

<태그이름 class="텍스트-크게, 텍스트-색상 적용하고-싶은-속성"></태그이름>

게다가 다양한 유틸리티 제공으로 만약 자주 사용될 것 같은 컬러는 미리 지정가능하며 또 자주 사용되는 색상은 따로 변수로 지정하여 빼줄수도 있다. 이 얼마나 편한가. 하지만 이 tailwind에는 아주 치명적인 단점이 있으니...

아니 class 이름이 뭔 100자가 넘어가

바로 클래스 이름이 아주아주아주아주아주아주아주 지저분해져서 가독성이 개차반이 되어버린다. 하나의 예시를 들어보겠다.

function App(){
  return (
   <div classNames="flex flex-col p-20 items-center">
      <span classNames="text-sky-500 text-lg">안녕하세요 이 문구를 꾸미고 가운데로 보내주기 위해서 몇줄이 사용 되었을까요?</span> 
      <button classNames="text-sky-500 p-5 rounded-md hover:bg-color-gray-400">안녕하세요 이 버튼을 꾸며주기 위해서 얼마나 많은 클래스 이름이 들어갔을까요?</button>
   </div>
  )
}

이런식으로 작성이 되기 때문에 표현하고자 하는 스타일이 복잡하면 복잡할수록 정말 많은 이름의 클래스들이 들어가게 될 것이고 그렇게 된다면 가독성은 개나 줘버리는 구조가 될 것 이다. 그렇다면 이를 방지하기 위해서 변수로 지정하면 괜찮지 않을까? 라는 생각을 하게 되는데, 사실 scss 나 css로 작성하면 더 편하게 되어버린다.

심지어는 미디어쿼리를 대응시키려고 한다면 이야기는 정말 끔찍해지는데, tailwind로 미디어쿼리를 작업하라고 시킨다면 나는 정말 진심으로 한숨만 100번 쉴 것이다. 차라리 css를 쓰는 경우가 좋은 경우가 있다.

게다가 저런식으로 클래스 이름들이 나열이 되어있다면 유지보수를 하는 입장에서는 정말 끔찍한 결과를 초래할 것이다.

만드는 곳에서 작성하라고 하면 그렇게 따라야함

사실 모든 프레임워크의 양날의 검이라고 할 수 있는데, 자유성이 주어지지 않는 대신에 일정한 출력 값을 보장을 받을 수 있지만 반대로 말하면 내가 따로 스타일을 변경을 하고 싶다면 변경을 할 수도 없다. 그렇게 때문에 처음에는 내가 원하는 값이 무엇인지에 따라서 공식 문서를 검색해가면서 사용을 해야한다. 일종의 적응 기간이 필요하다는 뜻이다. 그렇다고 무작정 불편한것만은 아닌게 IDE 플러그인도 있기 때문에 의외로 쓸만은 하다는 점? 이 있다.

장점

• 스타일이 어려운 사람들에게는 단비 같은 존재
• 기본으로 스타일을 초기화 해주기 때문에 번거로움 없음
• 사용성이 좋다

단점

• 유지보수를 생각하면 한숨부터 나옴
• 차라리 css 쓰는게 편한 경우도 있음
• 초기세팅 약간 복잡

리액트에 가장 최적화 된 styled-component

많은 사람들이 사용하며 욕을 하지만 누구도 쉽게 버리지 못하는 React 리액트는 구) 페이스북 현) 메타가 개발한 자바스크립트 라이브러리다. 가상돔이라는 개념을 활용하여 상태의 변화에 맞춰서 변한 부분만 리렌더링을 시킨다. 지금은 리액트를 설명하는 시간이 아니니까 일단은 제쳐두고, React 에서 나오는 개념중 하나인 component는 최소한의 단위로 쪼갠 하나의 js파일 즉 button 을 먼저 만들어두고 적재 적소에 끼워넣기만 하면 된다.

component의 개념을 그림으로 정리한 것

출처 https://www.javatpoint.com/react-components

export function Button(prop){
  return (
    <button classNames="btn btn-primary">Btn</button>
   );
}

export function App(){
 return (
   <div>
   	<Button />  
   </div>
 )
}

위의 방식 처럼. 하지만 저렇게 구현하게 된다면 스타일에 상당한 애를 먹을수도 있는데, 먼저 react는 모든 컴포넌트들을 조립해서 하나의 파일로 만들어버리게 때문에 결국 스타일이 다른 파일에서 가져오더다도 클래스 이름이 중복이 되어버리면 스타일이 겹치는 현상이 발생하게 되어버리기 때문에 상당히 애를 먹을수도 있다. 게다가 클래스 이름으로 해당하는 컴포넌트를 구별하려고 하다보니 가독성도 상당히 떨어지는 모습인데, 이를 고치고자 나온 라이브러리가 바로 styled-component되시겠다.

styled-component 과연 어떻게 사용하는 것일까?

사실 이 글에 stlyed-component의 모든 내용을 담기에는 글이 너무 길어지기 때문에 다음에 정리를 해서 styled-component를 정리한 내용을 따로 포스트를 작성하겠다.

간단한 사용법을 짚고만 넘어가보자. 아래와 같은 방법으로 사용을 할 수 있다.

const 컴포넌트이름 = styled.태그이름`
 /멋있는 것을 표현하는 속성들/
`

export default function App(){
  return (
  	 <div>
      <컴포넌트이름 />
    </div>
  )
}

위의 방식으로 내가 원하는 요소를 만들어서 스타일을 적용시키고 그것을 태그 라고 '간주' 해주기 때문에, 해당하는 태그의 원하는 속성들을 적용을 할 수 있다. 저렇게 적어주면 이 태그가 어떤 내용을 하는지 내가 작명을 해줄 수 있기 때문에 바로 해당하는 컴포넌트가 어떤 일을 하는지확인 할 수 있다. 이 얼마나 편한가. 게다가 아직 제대로 된 기능을 설명하지 않았다. 사실 저기서 별도의 prop들을 받아서 상태에 따라서 해당하는 스타일을 변경해줄수도 있다. default = true 면 배경색이 빨간색 default = false 면 파란색으로 표시를 해보겠다.

const 컴포넌트이름 = styled.태그이름`
  background-color: ${(props) => pros ? "red" : "blue"}
`

export default function App(){
  return (
    <div>
      <컴포넌트이름 default={true} />
      <컴포넌트이름 default={false} />
    </div>
  )
}

위의 형식으로 바로바로 적용이 가능한 것이 최대의 강점이다. 위의 것만 봐도 정말 개쩔지만 아직 끝나지 않았다. 기본적인 테마를 결정해서 테마를 변경하면 해당하는 색을 변경하거나... 정말 많은 기능들이 있지만 글 내용이 엄청 길어지게 때문에, 추후에 styled-component 전용 포스트를 게시할 예정이다.

하지만 너무 좋은 점만 나열하기에는 단점도 상당히 명확한 편이다. 먼저 TypeScript를 프로젝트에 사용하고 있다면 상당히 이 prop의 타입을 입하는 방법이 상당히 어렵고, 어느정도 배우는 시간 즉 러닝커브가 어느정도 있다. 게다가 너무 길어지게 되면 css를 사용하는 것이 오히려 더 편한 경우도 있다.

장점

• React와 가장 어울리는 방식의 스타일링
• 다양한 유틸리티 지원
• 유지보수에 굉장히 좋음

단점

• 러닝커브가 어느정도 있음
• ts 적용시 props 적용하기 조금 까다로움

마무리

정리 하자면 다음과 같다.

css

• 웹기술의 표준이며, 반드시 스타일을 css로 적용시켜야 하기 때문에 반드시 배워야한다.
• 하지만 조금만 더 복잡한 스타일링을 처리할시 코드의 양이 배로 불어난다.
• 사용하기 상당히 귀찮다.
• 하지만 꾸준히 업데이트 되면서 개선되어가고 있다.

scss & sass

• css의 전처리 언어로 css의 불편한 점들을 어느정도 해소 시켜준다.
• 다양한 유틸리티(변수, 믹신 등등)을 지원
• 하지만 css가 기본이기 때문에 css를 짜는 것을 편하게 해줄 뿐 기본적인 css지식은 반드시 필요하다.

tailwind

• 스타일을 편하게 도와주기 위해서 나온 css 프레임워크로 인라인 스타일 방식처럼 class 이름을 이용하여 스타일링을 하게 된다.
• css작업이 어려운 사람들에게는 정말 최고의 선택지가 될 수 있을 정도의 간편함을 제공
• 정말 다양한 유틸리티 및 플러그인들을 제공한다.
• 하지만 css와 scss를 알고 있으며 오히려 특정 구간에서는 차라리 css를 사용하는 것이 더 깔끔하게 보이며, 재사용성이 정말 구리다.

styled-component

• React와 최고의 궁합을 자랑하는 스타일링 방식
• 코드의 시인성이 좋아진다.
• prop의 존재로 다양한 방법으로 스타일링이 가능하다.
• 하지만 약간의 러닝커브가 존재하며, TypeScript적용시 prop 지정하는데 약간의 불편함이 있다.

이제 어느정도 정리를 해보았다. 그렇다면 이 글씬이 필자의 선택은 과연 무엇일까??

과연 필자의 선택은!!?!?!?!?!?!?

바로바로 SCSS 이다!!! (패널들 와 하는 효과음)

필자가 사용하면서 여태까지 제일 마음에 들었고 선호하는 것이 바로 scss다. 사실 중첩 문법을 한번 경험하고 나면 절대로 벗어나지 못하게 된다. 진짜 다른거 다 포기해도 중첩문법 떄문에라도 나는 scss를 사용한다. 하지만 나는 위의 해당하는 라이브러리 혹은 프레임워크를 사용해 보았기 때문에, 왜 편한지 왜 쓰는지 알고 있다. 그렇기 때문에 나는 각자의 취향을 존중한다.

특히 이 스타일링을 입히는 스타일 관련 라이브러리 혹은 프레임워크들은 개인의 호불호의 영역에 매우 근접하기 때문에, 더 편한 방법이 있지만 그것이 정답은 아니다. 특히 스타일링에 관련해서는 특히 더더욱. 그렇기 때문에 나는 모두의 선택과 취향을 존중한다.

근데 한가지 용서 못하는 게 있는 데 제발 인라인스타일좀 쓰지좀 마라 제발 아니 왜 짅대ㅑㄴ\