GDSC FE트랙 6월 MIL
6월에는 FE개발에서 가장 많이 사용하는 React 라이브러리와 디자인 툴인 Figma에 대해서 학습했다.
우선 컴포넌트 별로 다양한 기능을 구현할 수 있는 React 라이브러리에 대해서 학습했다. 5월달의 HTML, CSS강의들이 어렵다기보다는 자잘한게 많아서 혼란스러웠다면 이번 강의는 어렵고 혼란스러웠다. 사실 이번 학기에 객체지향프로그래밍 수강신청을 놓쳤는데 그 때문에 살짝 코딩과 멀어지는 바람에 더 그렇게 느껴졌다. 그래도 프론트엔드 개발에 있어 가장 중요한 기술 스택인 만큼 복습과 앞으로의 FE트랙 프로젝트 개발에 적용해보면서 소화해내야겠다.
피그마같은 경우에는 디자인 툴이라서 학교 교양에서 들었던 포토샵, 일러스트레이터 강의와 유사점이 있어서 상대적으로 학습이 수월했다. 필자가 미대 출신의 디자이너가 되는 것이 목표가 아니기 때문에 필수적인 기술들을 바탕으로 간단한 디자인 수정 및 구성을 할 수 있는 것을 목표로 했고 그 목표에 도달하기에 알맞은 강의였다. 특히 UI를 어떻게 구성하는게 사용자가 정보를 인식하기에 더 효율적인지도 알려주어서 큰 도움이 되었다.
또한 피그마의 특징이라면 유료 기능이지만 개발에 적용할 수 있게 해당 디자인의 코드를 제공했다. 그리고 최근 트렌드에 맞춰 프롬프트 기반의 AI서비스도 제공하고 있다. 이러한 간단한 사용법과 강력한 기능들이 피그마라는 디자인 툴을 다른 툴들과 차별화시키는 것 같다.
마지막으로 프로젝트 트랙 팀빌딩이 끝나 본격적인 협업을 진행하게 되었다. 디스코드나 노션과 같은 협업 툴이 아직 익숙치는 않지만 점점 적응 중이고 확실히 협업 툴을 사용하는 것이 업무에 더 효율적이라고 느꼈다. 또한 회의를 통해 여러 의견들을 개진하면서 혼자라면 생각할 수 없을 좋은 아이디어들을 만들고 평가하고 선택할 수 있었다. 아쉬운 점은 내가 아직까지 아는 것이 많지 않아 확실한 의견을 낼 수 없는 것이 한계로 느껴졌다는 것이다. 하루 빨리 React와 같은 개발 기술스택과 앞으로 하게 될 Django와 React native의 조합을 어떻게 할 것인지에 대한 학습을 마쳐야겠다.
개발 시 유용한 컴포넌트 라이브러리 사이트
컴포넌트 UI 라이브러리 사이트
MUI: The React component library you always wanted
MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design.
mui.com
Ant Design - The world's second most popular React UI framework
An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises
ant.design
Bootstrap
Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
getbootstrap.com
Headless UI 라이브러리 사이트
shadcn/ui
Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
ui.shadcn.com
Radix UI
Components, icons, and colors for building high‑quality, accessible UI. Free and open-source.
www.radix-ui.com