지금 업무 투입 전 다음으로 받은 과제는 부트스트랩이라는 프레임워크를 사용해보기. 기존에 내가 만든 포폴을 화면만 다시 만들어보는 작업이었다.
부트스트랩(Bootstrap)
부트스트랩(Bootstrap) 은 웹사이트를 만들 때 컴포넌트 단위로 보다 쉽게 화면을 구성하게 도와주는 프레임워크다.
https://getbootstrap.com/
이 부트스트랩 홈페이지에 들어가서 확인이 가능하다!
사용하는 방법과 예시(테이블, 네비게이션, 페이지 등)들도 있기 때문에
꽤 친절하다고 생각된다. 엄청 어렵지도 않다.
사실...처음 사용할 땐 어떤 식으로 레이아웃을 만들어가면서 이걸 써야할지 감이 안 왔다. (나는 이것 외의 다른 프레임워크나 라이브러리를 별도로 사용해 본 경험이 전무했기 때문에...)
처음 사용해보는 사람들은 다소 적응하는 시간이 필요하겠지만 뭐...별로 안 걸린다 사실.
나는 하루정도 내 것 하나 만들어보고 레이아웃을 어떻게 짤지 감이 온 편이다.
암튼 내가 사용하면서 느낀 부트스트랩의 특징을 장단점에 따라 써본다.
장점
- 컴포넌트 단위로 사용할 수 있기 때문에 가져다 쓰기도 편하다
- 스타일은 클래스마다 지정되어있기 때문에 원하는 스타일이 있다면 해당 클래스를 넣기만 하면 끝
- 브라우저 크기에 따라 자동으로 변하는 반응형 컴포넌트
- 익숙해진다면 평소에 레이아웃을 짜는 것보다 시간이 단축될 수 있다.
단점
- 일부 클래스 이름들이 별로 직관적이지 않다. 직관적이지 않다고 해야하나? 내 기준으로 봤을 땐 너무 단순했다(ex: .col, .col-4, .row 이런식인 경우가 좀...있다)
- 자기가 원하는 반응형 디자인이 따로 있다면 오히려 디메리트거나...해당 클래스를 고쳐야 할 것(나는 그냥 따로 미디어쿼리를 또 넣었다)
단점은 사실...아직은 많이 모르겠다. 내가 추가로 미디어쿼리를 넣는 것은 어쩔 수 없을 것 같고, 클래스 이름들은 견디자.
그러나!! 반응형이 적용된다는 점은 어떻게 보면 수고를 크게 덜어주는 좋은 특징이라고 본다.
아래는 부트스트랩 사용 예시. 내가 과제로 만들었던 대시보드 디자인
(왼쪽 사이드메뉴 높이가 깨진 것은 전체 웹캡처를 하니 저렇게 되어버렸다...)
왼쪽 네비게이션의 프로필, 알림, 디엠, 메뉴 / 메인 컨텐츠의 각 구역들, 히스토리 테이블 등등
전부 부트스트랩 컴포넌트로 만들었다.
나는 속도가 느린 편이다 보니 회사에서 머무는 시간만큼 걸렸다.(근로시간 8시간^^)
뿌듯한 점은 저 오른쪽의 투두리스트...
처음엔 이틀에 걸쳐야 가능했지만 이번엔 몇 시간으로 단축했다
로컬 저장도 제대로 구현했다!
아무튼 이런 식으로 컴포넌트를 끌고오고
나는 몇 가지 디자인만 조금 건드려주면 시간을 훨씬 빠르게 단축시켜준다!
적응시간이 조금 필요했지만 '이런 류의 프레임워크는 대충 이런 느낌으로 사용하는 구나~' 하는 정도를 익혀갈 수 있던 좋은 과제였다.
✋ 저 차트들도 부트스트랩을 사용한 건가요?
저것은 chartjs 라는 것을 이용해서 만들었다.
내가 직접 디자인, 구현하지 않아도 차트를 만들어주는 사이트가...있다!
나는 그저 사이트에서 떠먹여주는 코드를 넣기만 하면 되는.
그냥 받아먹으면 되는!
이건 다음 글에 이어서 적기로
