프론트엔드 디자인프레임워크
Frontend Design Frameworks
자바스크립트 프론트엔드의 경우, 다양한 디자인 프레임워크가 존재한다.
아래는 개인적으로 프로젝트에서 한 번 이상 직접 사용해본 프레임워크이다. 각 프레임워크에 대한 상세설명은 차후 진행하도록 하겠다.
1. 가장 유명한 부트스트랩 Bootstrap
가장 단순하고 습득하기 쉬운 용법을 제공한다. 그래서 가장 유명하다.
- 부트스트랩은 바닐라 버전이 있고, 각기 다른 프론트엔드 프레임워크에 맞는 랩퍼버전이 있는 것으로 알고 있다.
나는 뷰(vue) 개발자라서 랩퍼를 쓰는 경우도, 그냥 바닐라로 진행하는 경우도 있다.
2. 부트스트랩 뷰 랩퍼버전 Bootstrap-vue
뷰라는 프론트엔드 프레임워크에 맞는 랩퍼(wrapper) 버전이다.
3. 뷰티파이 Vuetify
뷰티파이는 커스텀이 좀 짜증나는 디자인 프레임워크이다. 부트스트랩과 다르게, 디자인 프레임워크를 설치하면 html이 변경된다. 그러므로 프로젝트 시작 전 디자인 프레임워크를 결정한 뒤 vuetify로 확정되면, vue create frontend로 프론트 설치한 뒤, 코딩하지 않고 바로 vuetify를 얹어야 한다.
프로젝트 중간에 vuetify 얻는 것은 일을 더 키우는 행위다. 작성한 코드의 일부가 날아가버리기 때문이다. App.vue 와 같은 루트파일이 변경되긴 하는데, 이 고질적 문제를 고쳤는지는 모르겠다. 난 쓰다보니 커스텀 안되는게 짜증나서 이거 쓸 바에는 부트스트랩 쓴다.
4. 엘리멘트 UI ElementUI
https://element-plus.org/en-US/
뷰티파이보다 마진이나 패딩이 좁게 잡혀서 화면 구성할 때 버려지는 영역을 크게 고려하지 않아도 되는 디자인 프레임워크이다. 다만, 제공하는 컴포넌트는 부트스트랩이나 뷰티파이보다 좀 더 적은 편이긴 하다. 이벤트나 프롭 옵션도 적어서 만약 엘리멘트를 사용할거라면 기획이 확실히 나온 상태에서 구현여부를 확인한 뒤 사용하는 것이 좋다.
5. 퀘이사 Quasar
퀘이사는 뷰티파이와 비슷하게 html 마크업을 완전히 다 바꿔버리는 프레임워크이다. 하지만 뷰티파이보다 훨씬 더 많은 기능을 제공하고 있고, 퀘이사는 디자인 프레임워크라는 기능 반, 뷰 기반의 실질적 프론트 프레임워크라는 기능 반이라는 의견이 많다. SPA, SSR, PWA 등을 모두 제공하는 하나의 플랫폼이라고 이해하면 된다. 난 모바일웹화면 개발에 퀘이사 썼었다. 굉장히 합리적이고 습득도 빠르다.
----- 안써봤는데 유명한거
6. 일렉트론 Electron
모든 기능을 다 제공하는 가장 거대한 플랫폼이라고 알면 될 것 같다. 스크립트로 짠 프로젝트를 말아서 앱화 시킬 수도 있을 정도다.난 그정도의 기능을 필요로 하는 프로젝트를 진행한 적 없어서 써본 적이 없기 때문에, 현재 개인 포폴을 준비하면서 사용할 계획이다.
7. 테일원드CSS Tailwind.css
요즘 엄청 핫한 프레임워크다. 고급기능이랄까, 최대한 빠르게 개발할 수 있을 정도로 정리된 컴포넌트를 쓰려면 유료라서 돈 내야 한다. 한 번 구매하면 평생 쓸 수 있다. 그 외 기본적인 것은 모두 무료로 제공한다.
8. 머테리얼UI Material-UI
구글에서 사용하고 있는 (어쩌면) 전 세계 웹표준 이라고도 불릴만한 프레임워크이다. 이걸로 구현하면 진짜 구글에서 만든 것 처럼 보이긴 한다. 난 개인 프로젝트에서 한 번 써봤는데, 실제 프로젝트에서는 써본적이 없어서 여기에 작성했다.
9. 시멘틱UI Semantic-UI
테일윈드랑 비슷한 디자인의 프레임워크다. 시멘틱이 테일원드보다 훨씬 오래된걸로 알고 있다. 부트스트랩이랑 느낌 좀 비슷한데, [부트스트랩 + 머테리얼UI]의 느낌이 강하다.
10. 스켈레톤 Skeleton
엄청나게 유명하다. 엄청 심플하고, 굉장히 깔끔하다.
