상당수의 사람들이 이런 이야기를 하는 것을 봅니다.
“제품 디자인은 Bootstrap 정도면 충분하고”
Bootstrap이란 트위터에서 배포한 CSS Framework을 말합니다. 이것을 사용하면 초기 구성에 용이함이 많은 사례로 검증되었고, 이제는 디자인의 일부 영역마냥 취급되는 느낌입니다.
Bootstrap.
가장 널리 쓰이는 Bootstrap을 예로 들겠습니다. Bootstrap은 CSS 기반의 스타일링과 디자인 구조화. DOM 요소와 상호작용하는 JavaScript 컴포넌트들로 구성되어 있습니다. Bootstrap은 그 이름 그대로 첫 부트 시퀸스를 실행하듯, 처음 개발에 착수해서 시제품을 만들어 낼 때 뛰어난 성능을 보여줍니다. 이미 일정 수준의 가공이 되어있기 때문에 원하는 모양으로 끼워맞춰서 시제품을 만들 때 편리합니다.
CSS Framework만으로 디자인은 끝나지 않는다.
CSS Framework은 대체적으로 Grid Layout, Normalize, 그리고 간단한 Base styling 정도를 담당합니다. 이것들 하나하나는 개별 요소에 지나지 않습니다. 이것들을 조합하지 않으면 디자인으로써 성립하지 않습니다. Grid에 맞춰서 원하는 장소에 원하는 내용을 배치하고, 이미 간단히 꾸며진 버튼 등을 배치할 수 있습니다. 이것 또한 디자인을 위한 행위들이지만, 사실 이것은 단순히 CSS Framework을 설치하고 사용하고 있을 뿐입니다. 물론 시제품은 이정도 만으로도 충분히 만들 수 있습니다.
불가피한 변형.
하지만 그건 어디까지 시제품의 이야기입니다. 실제 고객 내지는 사용계층이 그 디자인에 만족할지의 여부는 별개사항입니다. 시작품으로 구현 가능함을 검증한 후에 아예 바닥부터 깔끔하게 재개발을 하면 좋겠지만 현실은 시작품에 이것저것 덧대는 식으로 진행됩니다. 수정하고 덧대는 작업에도 CSS Framework이 적합할까요?
Bootstrap은 자체적인 UI가 있고, 그것으로 만들어진 생산품엔 Bootstrap 스러운 UX가 깔리게 됩니다. 여기에 덧대여지는 것은 기존 Bootstrap의 UI/UX에 어울릴까요? 이렇게 만들어진 결과물의 UI/UX가 사용자 친화적일까요? 사용자가 만족할 수 있게 만드려면 결국 디자이너가 개입해야 합니다.
필요를 부정하지 말자.
Bootstrap을 필두로 하는 CSS Framework은 디자인을 위한 만병통치약이 아닙니다. Bootstrap 으로 만든 사이트는 못생겼다고들 하는데, 아무것도 하지 않았다면 그게 사실이자 현실입니다. 기본 틀만 잡는 용도의 기본 디자인이 모든 상품의 디자인을 충족시켜줄 수 있을 리 없습니다. 디자인의 영역에서는 디자인에 대한 경험과 센스가 필요한데, 이 부분을 디자인에 대한 이해가 부족한 개발자가 대체하긴 힘듭니다.
디자인의 개선이 필요한 시점에서 필요한 것은 더 예쁜 CSS Framework이 아니라 디자이너입니다.
이것은 자신이 디자인도 가능한 개발자, 흔히 말하는 디발자 혹은 개자이너여도 같은 이야기입니다. CSS Framework을 바꾼다고 바뀔 문제라면 애초에 디자인의 문제가 아닐 가능성이 높습니다. UI/UX등을 고려하다보면 결국엔 변형이 필요해집니다.
변형이 불편해.
문제는 CSS Framework은 변형이 불편하다는 점입니다. 정해진 모양대로 쓰길 바라고 만들어진 물건들이기 때문에 추가적인 변형이 넉넉치 않습니다. 이것은 Framework을 쓰고 있기에 생기는 문제, 이 문제에서 벗어나려면 결국은 CSS Framework을 걷어내는 시점이 필요해집니다. 한번에 모든 것을 걷어내는 것은 매우 힘듭니다. 하지만 CSS 전처리기를 이용한다면 필요한 기능을 켜고 끄는 것으로써 제어가 가능합니다. 결국엔 Framework을 뜯어서 필요한 부분만 챙기는 작업을 해야겠죠.
결론.
- Bootstrap등의 CSS Framework은 시제품 제작엔 용이하나, 실사용자가 쓸 제품에 변형 없이 접근하기에 한계가 뚜렷하다.
- 이 문제의 개선을 위해선 디자이너(혹은 디자인 가능자)가 필요하다는 사실을 부정하지 말자.
- 언젠가 Framework의 일부분을 뜯어낼 각오를 해둬야 한다.