Bootstrap Dashboard 적용기

gentelella?

Python, Flask, Bootstrap을 이용해서 사이트를 만들었다. 디자인은 신경 쓰지 않고, 상단에 메뉴 링크를 하나씩 추가하면서 화면을 구성했다. 메뉴가 몇 개 되지 않을 때는 별로 신경 쓰이지 않았다. 기능을 추가해 나가다 보니 어느새 메뉴는 2줄을 넘었고, 그래서인지 지저분해 보였다. 이걸 보고 후배가 gentelella라는 대시보드 테마를 알려줬다. 데모 사이트를 구경해 보니 훌륭하다. 

gentelella

메뉴는 사이드바 형태로 만들었고, 계층 구조로 구성해서 사용할 수 있다. 본문은 다양한 형태의 화면을 샘플로 제공하고 있어서, 필요에 맞게 가져다 쓰면 된다. 미리 알았더라면 처음부터 이걸 가지고 만들었을 텐데 하는 아쉬움이 들었다. 

gentelella 적용 실패

지금이라도 gentelella를 적용하기로 하고, 소스를 다운로드받았다. 로컬에서 샘플 화면을 띄워서 동작하는 것을 확인했다. 샘플 소스를 참고해서 기존에 만들어 놓은 사이트를 변환하기 시작했다. 메뉴는 손쉽게 적용할 수 있었다. 다음으로 차트가 들어간 페이지를 적용하는데 문제가 생겼다. 알 수 없는 스크립트 오류가 발생한 것이다. 왜 그럴까? 원인을 살펴보다가 오픈소스 자바스크립트를 vendors라는 디렉토리에 보관하고 있고, 그 중 Chartjs가 버전 2.1.4인 것을 발견했다.

gentelella, Chartjs v2.1.4

내가 만든 사이트는 3.5.1 버전을 사용한다. gentelella에서 참조하는 Chartjs 버전을 3.5.1로 변경했지만, 오류는 없어지지 않았다. 소스를 살펴보니, 아마도 gentelella의 js와 css에서 Chartjs 버전 3.5.1에서는 없어진 값을 참조해서 생기는 현상으로 보였다. 차트가 주요 기능인데, gentelella는 포기해야겠다. 

Bootstrap Dashboard 적용

내친김에 좀 더 찾아보니 gentelella 류의 대시보드 테마(Dashboard Theme)는 무척 많았다. 테마(theme), 또는 템플릿(template)이라는 이름으로 손쉽게 찾아볼 수 있다. 그중 마음에 드는 것을 골라 사이트를 구축하면 된다. 

너무 많은 테마와 템플릿 중에서 Bootstrap 5가 적용된 최신 버전을 찾아 2개를 다운로드받았다. 소스를 확인해 보니 gentelella처럼 Chartjs 2.9 버전이 들어가 있었다. 왠지 gentelella처럼 오류가 발생한 것 같은 예감이 든다. 메뉴를 좀 더 보기 편하게 만들어 보려고 시작했는데, 배보다 배꼽이 더 커질 것 같다. 메뉴를 사이드바로 만들고, Chartjs는 최신버전을 쓸 방법이 없을까?

Bootstrap 적용한다고 숱하게 들어가서 문서만 봤었는데, 그 옆에 Example이 있었다. 사이드바와 대시보드는 물론 다양한 형태의 예제들이 있었다. 심플한 것이 마음에 쏙 든다. 간단해서, 빠르고 손쉽게 적용할 수 있었다.

Bootstrap Dashboard

가까운 길을 두고 먼 길을 돌아온 심정이다. 등잔 밑이 어두웠구나.