아주 옛날에 웹개발의 기본인 HTML, CSS를 배우던 시절이 있었습니다. 가장 절실했던 것은 간단한 편집기이면서 작성한 코드를 바로 확인할 수 있는 편집기였습니다. 내가 작성한 코드가 어떻게 보이는지 일일히 저장하고 웹브라우저에서 확인하는 것이 너무 불편했죠. 오늘자 웹디자이너 뉴스 기사에 이런 편집기가 나타났습니다. 이 편집기는 웹브라우저인 파이어폭스의 제작사로 모질라에서 만든 것이더군요. 그래서 신뢰성이 더합니다. 설치할 필요도 없고 회원가입만 하면 바로 사용할 수 있고 퍼블리싱도 가능해서 간단한 웹사이트도 만들 수 있습니다.
https://thimble.mozilla.org/en-US
홈 화면에서 "Start a project from scratch" 버튼을 클릭하면 편집기가 열립니다. 우측에서 언어를 선택할 수 있지만 한글은 아직 없습니다. 다른 사람이 공유한 프로젝트를 선택해 다른 프로젝트를 만들 수 있습니다. 이러한 과정을 Remix라고 하네요.
편집기에는 위와같이 아주 간단합니다. 기본적으로 style.css 파일과 index.html 파일이 있고 기본 코드가 만들어져 있습니다. 코드가 있는 부분을 클릭하면 미리보기 화면에서 하이라이트됩니다. 각 버튼의 기능은 클릭해보면 알 수 있는 것이지만 초보자들이 많이 사용할 수 있는 편집기이기에 간단하게 설명드립니다.
1의 아이콘을 클릭하면 홈 화면이 나타나 새 편집기를 만들 수 있습니다.
2의 아이콘을 클릭해 제목을 수정할 수 있습니다.
3의 아이콘을 클릭하면 파일을 추가할 수 있으며 3가지 파일은 바로 만들어지며 외부에서 파일을 가져오려면 4의 Upload...를 클릭하면 됩니다. 5의 창에서 6의 버튼을 클릭해 자신의 컴퓨터에서 이미지나 다른 CSS, 자바스크립트 파일을 업로드 할 수 있습니다.
7은 취소, 8은 취소한 것을 취소합니다.
9를 클릭하면 편집기의 옵션을 변경할 수 있는 몇 가지 기능이 있습니다. 편집기의 글자 크기 변경, 스킨 변경을 할 수 있고 10은 긴 줄이 있을 경우 편집기 화면에 들어오도록 할 수 있습니다.
11을 클릭하면 아래 그림과 같이 미리보기 화면에 마우스를 올렸을 때 편집기 화면에서 어떤 부분인지 하이라이트 됩니다.
12는 모바일에서 보이도록 합니다.
13은 미리보기 화면을 전체화면으로 전환합니다.
실제로 웹사이트를 만들어보겠습니다.
사이드바에서 우클릭하고 New Folder를 클릭한 다음 css와 js 폴더를 만듭니다. 메인에 있는 style.css 파일을 대상으로 우클릭하고 Move to...를 선택해 css 폴더로 이동합니다. 같은 종류의 파일은 한군데 몰아서 관리하는 것이 좋습니다. link 태그의 href 경로에 css/를 추가해줍니다.
플러스 아이콘을 클릭해 외부 파일을 업로드 합니다. 여기서는 부트스트랩 파일을 업로드 했습니다. css와 js 파일을 업로드 한 후 각각의 폴더로 이동해줍니다.
추가한 파일을 연결해주기 위해 link 태그를 입력합니다. 자동완성 기능도 있으므로 <l 만 입력하면 원하는 태그를 선택할 수 있습니다.
href 속성에서 css 폴더 다음에 파일들이 나타납니다.
</body> 태그 바로 위에 자바스크립트도 추가합니다.
제이쿼리도 추가해줍니다. 여기까지 하면 부트스트랩을 이용해 웹사이트를 만들 수 있는 기본환경이 된 것입니다. 제대로 되는지 확인해봅니다.
부트스트랩의 모달 코드를 추가하니 미리보기 화면에 바로 나타납니다. css가 작동하는 것이죠. 버튼을 클릭하니 모달 창이 나타납니다. 자바스크립트가 작동하는 것입니다.
부트스트랩의 냅바코드를 추가하고 냅바의 메뉴 링크를 추가합니다.
각 메뉴의 html도 만들고 모든 코드를 복사해 각 html 파일에 붙여넣습니다. 미리보기 화면에서 메뉴를 클릭했을 때 편집기에 파일이름이 변경돼야 정상입니다. 여기까지 완성되면 각 페이지에 맞는 콘텐츠를 추가하면 됩니다.
각 페이지의 콘텐츠를 완성한 후에는 우측 상단의 Publish 버튼을 클릭하고 발행합니다. 그러면 링크가 나타나며 이를 클릭하면 웹사이트로 이동합니다.
https://thimbleprojects.org/martian36/103643/
간단한 웹사이트도 만들 수 있으니 웹디자인을 배우기 시작하는 초보자들에게 좋은 도구임에 틀림없습니다.
