bootstrap 5, bootstrap studio, 그리고 독학 1일차

다시 시작하는건 쉽지 않다.
이미 얼마나 힘든지 알기 때문에...

부트스트랩을 파파고는 손잡이 가죽, 혼자 힘으로 번역하고 있습니다.

여기서 가죽이라니...

쉽게 말해서 도구입니다.

좀 더 편하게 뭔가를 하기 위한 도구.

개인적으로 디자이너 없이 개발자가 사용하기에 이보다 좋은 도구가 없습니다.

버전 3 때 잠깐 쓴 경험이 있고 버전 4 때 바뀐 정도만 파악하고 있었는데

이제는 버전 5 를 봐야만 할 거 같습니다.

pigendo라는 무료 프로그램의 모든 지원이 끊어 졌는지 모듈이 모두 깨져서 나옵니다.

그래서 차선으로 유료 프로그램인 bootstrap studio를 통해 독하게 학습을 진행하고자 합니다.

이 프로그램은 버전 3, 4도 지원은 한다.  하지만 5를 위주로 진행할 생각입니다.

https://bootstrapstudio.io/

Bootstrap Studio - The Revolutionary Web Design Tool

30일간 무료로 쓸 수 있고 평생 쓰려면 59$(약 7만원)를 지불하면 됩니다.

일단 유튜브 채널에 올라온 영상을 통해 사용법과 동시에 부트스트랩을 알아보도록 하겠습니다.

https://youtu.be/kZ0NqLl4gAY

첫 영상이 너무 예전거라 왜 보냐고 하겠지만 오히려 첫 영상이 가장 프로그램 특징을 잘 담지 않았을까 하는 기대감에 선택 했습니다.

이제 본론으로...  소리도 없고 자막도 없습니다.  눈 크게 뜨고 작은 마우스를 따라 다녀야 합니다.

컴포넌트를 검색해서 사용하고 있습니다.  쓸 수 있는 컴포넌트가 많아서 그런거 같습니다.  나름 스펠링 공부도 될거 같습니다.

화면의 버튼을 선택하면 관련된 속성 변경은 우측창에서 변경 할 수 있습니다.

테마 선택이 가능해 보입니다.  최신버전의 부트스트랩 스튜디오에는 이 기능이 다소 축소 되어 있습니다.

디바이스별 미리보기는 우측 상단에 있습니다.  지금은 지원하는 디바이스가 좀 더 많아 졌습니다.

여기까지 드래그 엔 드랍 방식이라는 걸 보여주고 있습니다.

이미지 파일을 디자인에 넣어서 사용한다.  관리 차원이라 생각 했는데 그 보단 Export 를 위해 저리 사용 하는 듯 싶습니다.

3개의 영역을 분리해서 코딩이 가능해 보입니다.

코드에서 클랙스를 선택하면 태그의 속성창이 나옵니다.

새로운 스타일 추가도 가능 합니다.

디자인 창의 파일을 클릭하면 해당 파일을 열어 수정도 가능 합니다.

디바이스 말고 그리드의 반응형을 버튼으로 지정이 가능해 보입니다.

이 부분은 소스 변화가 어찌 되는지 자세히 살펴야 할 부분입니다.

브라우저와 프로그램간 실시간으로 동기화가 된다.  저장을 하지 않고 동기화가 되는게 무척이나 신기합니다.

두번의 클릭으로 Export가 가능합니다.

이상 첫번째 영상의 끝입니다.  예상한거처럼 심플하게 특징을 잘 보여주고 있습니다.