[프론트엔드] 8. UI 스타일링의 관련된 기술 및 라이브러리

요즘은 프론트엔드 개발자도 UI를 맡게 되는 경우가 존재하기도 한다.

html, css, javascript, jquery를 대다수가 사용하던 때가 있었다. 최근에는 React기반으로 개발을 진행하는 경향이 강하였다.

따라서 요즘 UI 개발을 진행할 때 대표적으로 어떤 방식으로 진행하는 리스트 5개를 알아보고자 한다.

1. 원시 css

말 그대로 순수 css로 개발을 하는 것을 말한다. 화면 개발 시 기본 베이스는 html, css, javascript로 구성하는 것을 의미한다. 하지만 어느 라이브러리를 사용하든 기본이 3가지 요소 중 하나이다.

2. bootstrap

css 라이브러리 중 하나로 bootstrap으로 활용하여 개발이 가능하다. bootstrap만의 라이브러리를 활용하여 해당 클래스를 호출할 경우 본인이 맞는 화면 개발이 가능하다. 하지만 커스텀 마이징이 힘들다는 단점을 보유하고 있다.

3. scss

css의 단점을 보완하기 위해 나타난 것으로 css  전처리기라고 할 수 있다. 변수, 상속, 혼합, 중첩 등 다양한 기능을 제공한다. 단 nodejs버전과 scss 버전과 호환되지 않으면 매번 환경설정에 번거로움을 가지고 있다.

4. style-component

리액트 환경에서 사용이 가능하며 css를  js 변수를 사용할 컴포넌트명을 지정하여 사용한다. 주로 css 겹침 현상을 방지하기 위해 사용하는 것이며 이에 따라 유지보수를 어렵게 하는 단점도 가지고 있다.

5. TailwindCss

bootstrap처럼 class 안에 입력하여 사용한다. bootstrap과 다르게 tailwindcss는 유사 css를 만드는 느낌이 든다. 단점은 클래스명에 tailwind css 클래스를 과다하게 남용할 경우 소스코드의 대한 난잡함 정도가 된다.




이렇게 간략하게 설명을 해보았다.
필자인 경우 5. tailwindcss를 선호하는 편이다. css문법과 유사한 느낌이 강하며 css를 최소화하여 사용이 가능해지기 때문에 사용하는 편이다.