JetStrap - 트위터 UI Bootstrap을 이용해 순식간에 웹 디자인을 하자

웹 개발자라면 트위터에서 공개한 UI 프레임워크인 Bootstrap에 대해 많이 들어 보셨을 겁니다. 실제로 수많은 웹 페이지들이 Bootstrap를 이용하여 만들어지고 있습니다. 덕분에 예전보다 전체적인 웹의 퀄리티가 높아졌다는 느낌이 듭니다. 트위터의 Bootstrap을 이용하면 예쁜 UI로 무장한 웹 페이지를 쉽게 만들 수 있습니다. 하지만 뭔가 아쉽습니다. 웹 페이지를 코드가 아닌 GUI 환경에서 Bootstrap을 이용해서 직관적인 웹 디자인을 하고 싶다는 욕구가 생깁니다. 완전 편하게 웹 페이지를 만들고 싶습니다. 그래서 찾아낸 것이 JetStrap입니다. 

JetStrap: http://jetstrap.com/

JetStrap의 메인화면입니다. 트위터, 구글 또는 Github 아이디를 이용해 로그인을 할 수 있습니다.

JetStrap은 웹 환경에서 Bootstrap을 이용한 GUI 웹 디자인 인터페이스를 제공합니다. 왼쪽에는 UI 컴포넌트들이 있습니다. UI 컴포넌트들은 드래그앤 드랍을 이용하여 쉽게 웹 페이지에 추가할 수 있습니다. 

UI 요소를 더블클릭하면 속성창이 나타나고, 속성창에서 UI 요소의 속성들을 수정할 수 있습니다. 버튼의 경우 id, class, 링크, 버튼의 종류, 버튼의 크기등이 있는 것을 확인할 수 있습니다.

CSS와 HTML을 자기 입맛대로 수정할 수 도 있습니다. 꼭 Bootstrap에 있는 그대로 쓸 필요는 없는 거죠.

위의 네비게이션 바에 보면 네개의 디바이스 그림이 있는 것을 볼 수 있습니다. 폰, 타블렛, 노트북, 데스크탑 이렇게 4 가지가 있는데, 각 디바이스의 해상도에 맞게 웹페이즐 보여 줍니다. 여러 해상도를 지원하는 웹 페이지를 만들고자 할 때 굉장히 유용히 사용될 수 있는 기능입니다. 

왼쪽위에는 프로젝트를 선택할 수 있는 버튼이 있습니다. 버튼을 누르면 위의 그림과 같이 프로젝트를 고르거나 새로 만들 수 있는 화면이 나타납니다.

여기서 새로 만들기를 누르면 위와 같이 4개의 템플릿 중에서 하나를 고를 수 있습니다. 이미 템플릿까지 준비되어 있으니 웹 페이지를 만드는 속도는 정말 상상을 초월한다고 할 수 있겠습니다. 몇분만 투자하면 웹페이지 하나가 뚝딱 만들어 지는 것입니다. 그것도 조잡한 웹페이지가 아닌 세련된 퓁페이지가 말입니다.