React Semantic UI vs. Chakra UI

대구 이월드 83타워 전경 (2021.05.29.)

 

Semantic UI

장점

• 사용이 매우 간편하다.
• 공식 홈페이지에 컴포넌트 별로 props도 정리가 잘 되어있고 사용법도 상세하게 잘 나와있음.
• 디자인. 사용하기 직관적이고 일관적이었음.
• 미리 구현된 것이 많아서 빠르고 편하게 사용할 수 있다는 장점이 있음.

단점

• 계속 사용하게 되면 Bootstrap처럼 개성없는 디자인으로 변질될 가능성이 있어 보인다. (다행히 아직 React의 시장 점유율이 낮아서 망정이지)
• 살짝 밋밋한 느낌? Bootstrap 보다는 낫지만 그래도 어딘가 부족해보인다.

 

Chakra UI

장점

• 디자인이 정말 깔끔하고 모던하게 예쁘다.
• 어떤 단점이 있어도 디자인이 깔끔하고 모던하다는게 단점을 압도할 수 있을 것 같음.

단점

• 구현된게 별로 없어서 내가 컴포넌트를 만들어가면서 해야한다는게..
• 그래도 테마는 많이 보이던데 내가 아직 그 테마들을 경험하지 못해서 그런거 일수도 ?
• 특히 Semantic UI에 익숙해져서 그런지 각 컴포넌트마다 사용할 수 있는 이벤트 핸들러의 종류도 부족하고 내가 변경할 수 있는 props 도 적어서 불편했다.
• Chakra 공식 홈페이지에 컴포넌트 별로 제시된 예시가 적어서 사용법 익히기가 힘들었다.

 

결론

• 오픈소스SW프로그래밍 수업 최종 성과물을 만들면서 처음으로 Chakra UI를 써봤는데, 디자인 자체가 많이 현대적이면서 예쁘다. 진짜 시선을 확 끌 정도로 예뻐서 만족스러웠다.
• 다만 Chakra UI는 Divider, Grid 및 각종 이벤트 처리 등의 기능이 부족해서 생산성을 높이기에 부족한 점이 있다. 프로젝트를 처음 시작할 때 시간을 좀 많이 잡아먹을 듯하다.
• 이 부분은 import { ... } from 'semantic-ui-react' 로 semantic ui 컴포넌트를 차용하면서 사용하면 일정 부분 큰 불편함 없이 Chakra UI를 사용할 수 있다.