빠른 웹사이트 빌딩을 도와주는 Blocs 리뷰
올해 조인한 스타트업의 CDO를 역임하면서 내 백로그에는 언제나 “코포레이트 사이트 리뉴얼"이라는 태스크가 남아 있었다. 기존 사이트가 너무 불편해서 (심지어 링크가 중복되는 등 동선의 버그도 있었다. 모바일 환경도 지원되지 않았다.) 되도록 빨리 만들고 싶었지만, 신기능 출시가 우선순위가 가장 높았기 때문에 하염없이 제작 스케쥴은 뒤에 있었다.
어쨌든 최근에 들어서야 백로그에 있던 우선순위 태스크들이 하나 둘 끝나가며 드디어 회사 공식 사이트의 리뉴얼이 가장 상위 우선순위로 올라왔다. 중간중간 레이아웃이나 컨텐츠들의 구상은 끝나 있었기때문에 컨텐츠 수급만 빨리 된다면 금방 끝날 것 같다는 생각이 들었다.
제작은 1일을 넘기지 말것.
딱히 머스트는 아닌데, 다른 업무들이 아직 너무 많은터라 스케쥴은 1일~2일을 넘길 순 없었다. 결국 도메인 이관 및 다른 자잘한 태스크때문에 4~5일정도 걸렸지만. 제작 자체는 1일로 끝냈다. 해놓고도 굉장히 놀랐던 순간이었다. 어떻게 했냐고?
Blocs + Photoshop CC
블록스라는 툴을 과거 포스팅한 적이 있다. 코드를 몰라도 웹사이트 디자인을 로컬환경에 금새 만들 수 있게 해주는 툴이었다. 나는 얼리버드 구매자로 당시 $49.99 가격에 구입할 수 있었는데. (현재는 개인용도로 $69.99달러) 이걸 이용해서 이번에 회사 사이트를 리뉴얼해보고자 했다.
장점
이 툴의 장점은 위지윅 방식이기 때문에 직접 설계했던 부분이 실제 사이트로 반영된다는 부분이다. 코드를 몰라도 된다. 부트스트랩 기반이기 때문에 다양한 레이아웃, 스타일이 정의 되어 있다. 따라서 입맛에 골라 설계할 수 있다. 진짜 다양하다.
(앱의 장점을 잘 보여주는 프로모션 영상)
게다가 이렇게 만들어진 사이트의 디자인은 곧바로 html 파일로 export해주고, asset도 자동으로 만들어준다. 가이드 작업자체가 필요없어지기 때문에 바로 Github에 업로드해서 반영할 수 있다. (프론트 개발을 위해 세세히 가이드를 만들어줬던 과거는 작별을 고하자)
제작된 사이트는 모바일 환경도 자동 대응해준다. PC화면과 모바일 화면을 각각 나누어서 디자인할 필요가 없다. 포토샵은 그저 리소스 툴로 필요한 이미지를 생성할 때만 썼다.
(게다가 비디오재생도 지원하기 시작했다.)
그외 SEO, GA(google analytics)등도 지원해주기 때문에 간단히 필요한 소스삽입을 툴에서 제공하고 있다. 꾸준히 업데이트 되고 있다는 점. 그리고 업데이트는 무료로 이뤄지고 있다는 부분도 장점이다.
단점
금새 익히기가 의외로 어렵다. 먹기 좋아보이는데, 먹어볼려고 해보니까 어떻게 먹어야 할지 방법을 잘 모르는 상황이 발생한다. 5일 트라이얼 기간동안 최소 1~2일의 툴에 익숙해지기 위해 공부가 필요하다. 또한 영문 툴이기 때문에 영어를 좀 알아야 써먹을 수 있다.
CSS를 어느정도 알아야 한다. 몰라도 개념정도는 알아둬야 한다.생성된 소스중에 일부분만 수정하고 싶을 때, 도저히 여기엔 없는 레이아웃을 만들어야 할 때. 게다가 여기서 지원하는 웹폰트 외에 다른 폰트를 쓰고 싶을 때 등등. 부트스트랩은 라이브러리의 모음집일 뿐. 그 자체가 완벽한 프레임워크는 아니다. 좀더 다른 스타일. 다른 레이아웃을 원할 경우에는 이 툴은 아직 지원하지 못하고 있다.
그럼 이 툴은 어떨 때 써야 할까?
나는 블록스를 LP(Landing Page)에 최적화된 툴이라고 생각한다. 아직은 그렇게 생각하고 있다. 화면 레이아웃을 다양하게 꾸려야 하는 Dashboard 스타일이나 관리툴은 부적합하다고 생각한다.
빠르게 페이지를 한두장 만들어야 할 때, 이벤트 페이지 등. 복잡한 기능이 들어가지 않는 사이트를 만들어야 할 때 이 툴은 시원시원하게 디자이너의 등을 긁어줄 수 있다고 생각한다. (이번에 만든 우리 회사 사이트 처럼 아무런 백앤드 기술이 필요없는 사이트에는 강력추천할 수 있다.)
마무리
사실, 실제로 “와 이거 좋다.”하고 구매했던 툴인데 활용성을 처음엔 잘 몰랐기 때문에 걍 맥에 깔아만 두었던 블록스. 이번에 회사사이트 리뉴얼하면서 진짜 빠르게 웹사이트 제작이 가능한걸 체감하고서 모두에게 추천할만하다고 생각되어 이렇게 글을 쓰게 되었다.
아직 블록스는 완벽한 툴은 아니다. 버그도 많은 편. (버그들 때문에 잡아먹은 시간이 좀 된다.) 하지만 올해 말 대규모 업데이트나 내년 업데이트에 대한 로드맵이 공개되어 있기 때문에 이러한 버그들이나 갈증들이 어느정도는 해소될 것 같다는 생각도 든다. (부트스트랩 4는 언제쯤 반영해줄런지.)
게다가 코드를 잘 모르는 나같은 디자이너에겐 제로 베이스부터 코딩을 하는 것보다 이렇게 어느정도 만든 선에서 소소한 수정정도만 하게 해주는 것도 매우 고맙게 느껴졌다.
