친절한효자손 취미생활

그동안 정말 잘 사용해오던 나의 단짝(?)과도 같은 브라켓... 이제 당신을 놓아줄 때가 된 모양입니다. 최근부터 이상하게 실시간 미리보기가 안 되더라고요. 원인은 알 수 없습니다. 크롬이 문제인가 싶어서 크롬을 재설치해봐도 문제가 해결되지 않습니다. 혹시 브라켓 자체 오류인가 싶어서 브라켓도 싹 다 지우고 다시 설치했는데 소용 없었습니다. 그렇다고 겨우 이 문제로 컴퓨터를 포맷하자니 눈앞이 깜깜합니다. 다시 세팅할 생각을 하니 짜릿한거죠. 결국 대체 프로그램을 찾아보기로 결심합니다.

 

번외 : 브라켓 실시간 미리보기 오류 해결법

혹시 여러분들께서는 브라켓 오류로 본 페이지를 방문하셨습니까? 그럼 우선 이 방법으로 해결을 노려보시기 바랍니다. 참고로 저는 이 방법도 먹히지 않았습니다. (절망) 브라우저에 연결한다고만 나오고 크롬은 무반응입니다. Chrome 재시작 버튼을 눌러도 결과는 똑같습니다.

 

먼저 브라켓 바로가기 아이콘을 검색합니다. 검색창에 bracket을 입력하면 앱이 검색됩니다. 해당 프로그램에서 마우스 오른쪽 버튼을 눌러서 파일 위치 열기를 선택합니다.

 

그러면 바로가기가 담겨있는 폴더가 열리는데 여기에서 브라켓 아이콘을 찾고 마우스 오른쪽 버튼을 눌러서 속성으로 들어갑니다.

 

속성창이 떴습니다. 바로가기 탭에서 고급으로 들어갑니다.

 

관리자 권한으로 실행(R) 옵션을 체크 후 확인 버튼을 눌러 저장하면 끝입니다. 결국 브라켓을 관리자 권한으로 실행하는것이 문제의 핵심인데 이렇게해서 해결되면 다행입니다만 앞서 말씀드렸듯 제 경우는 이 문제가 아닌가 봅니다. 이렇게해도 해결이 되지 않습니다. 브라켓 구버전을 설치해서 실행해도 마찬가지입니다. 어딘가 단단히 꼬여버린 모양이에요. 하지만 브라켓을 평소 주업으로 사용하는 것이기 아니기에 이 녀석 하나 때문에 고생하기는 좀 그래서 결국 비주얼 스튜디오 코드를 설치했습니다.

 

VSC (Visual Studio Code)

이 프로그램은 대전에서 진행중인 HTML 모임의 회원분들 덕분에 알게 되었습니다. 비주얼 스튜디오 코드, 줄여서 VSC라고도 부릅니다. 텍스트 위주의 코딩 프로그램입니다. 모임 때 알게된 사실인데 의외로 브라켓의 존재를 모르시는 분들이 많더라고요. 저만 사용했었으니까요. 나머지 회원분들은 모두 VSC를 사용 중이셨습니다. 그래서 한번쯤 나도 써봐야지하고 막연하게 생각만 해왔었는데 이제 실천의 길로 접어들게 되었군요.

 

https://code.visualstudio.com/

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

마이크로소프트에서 공식 배포하는 무료 소프트웨어입니다. 혹시 다운받으려고 하신다면 반드시 공홈에서 받으세요. 블로그나 소프트웨어만 취급하는 사이트에서는 왠만하면 안 받는걸 추천합니다. 공식 홈페이지에서는 사용중인 OS에 맞게 프로그램을 배포하고 있으니 OS에 맞는 버전으로 다운로드 후 설치하시면 됩니다. 설치 과정에서 딱히 중요한 부분은 없습니다.

 

Bracket and VSC 장단점

비주얼 스튜디오 코드로 작업중인 친효애드온의 모습

비주얼 스튜디오 코드도 브라켓과 마찬가지로 확장 프로그램 시스템이 있었습니다. 이 부분은 다행이라고 생각했습니다. 왜냐하면 브라켓도 확장 플러그인을 지원하는데 엄청 유용한 것들이 많거든요. HTML 홈페이지를 만들때 말이지요. 근데 VSC에는 브라켓보다 더 뛰어난 확장 프로그램들이 있었습니다. 실제로 몇 개를 설치해 사용해봤는데 피부로 바로 알겠더라고요.

 

"이래서 많은 사람들이 VSC를 쓰는구나!"

 

장점

딱 한 방에 납득되었습니다. 차후에 유용한 확장 플러그인을 따로 소개하는 글을 작성하겠지만 맛뵈기로 살짝 말씀 드리자면 다음의 기능이 있습니다. 브라켓에서는 안 되는 거구요. 예를 들어서 <div>태그를 다른 요소로 바꿔야 하는 상황입니다. 그러면 어떻게 하죠? 당연히 수동으로 바꿔야 합니다. 문제는 닫히는 </div>도 바꿔줘야 합니다. 브라켓은 이 두개를 모두 수동으로 일일히 바꿔줘야 합니다. 그런데 VSC에서는 첫 태그를 변경하면 닫히는 태그도 자동으로 바뀌는 플러그인이 있습니다. 이게 엄청 시간도 단축되고 태그 오류도 막는 기가막힌 것이거든요! 전 이것에 반해버렸습니다. 왜 진작에 VSC를 사용하지 않았던건지에 대한 자책 똥멍청이 주문이 시작되었고요.

 

또 하나 다른점은 브라켓은 무조건 크롬 브라우저와의 연동입니다. 즉 크롬을 사용하지 않는 사용자 중에서 브라켓을 주력으로 쓰는 사용자는 무조건 크롬을 설치해야 합니다. VSC는 브라우저가 자유롭습니다. 기본 브라우저로 얼마든지 미리보기를 할 수 있습니다. 이 부분도 개인적으로 매우 높게 평가하는 부분입니다. 또한 실시간 미리보기 반응속도가 VSC가 더 빠릅니다.

 

단점

이건 아직 VSC 사용 기간이 브라켓 대비 길지 않아서 제가 잘 모르는 상태일 수 있는데 일단 첫 체감 부분에서만 놓고 비교해보면 이 부분은 단점이 될 수 있습니다. 브라켓의 경우에는 CSS에서 특정 코드를 클릭해 선택하면 미리보기 화면에서 현재 어떤 영역에 이 스타일이 적용되어 있는지 영역 표시가 되어 가시성이 뛰어납니다. 하지만 비쥬얼 스튜디오 코드에서는 이게 안 되는군요. 이런 기능을 지원하는 별도의 확장 프로그램이 있는지 모르겠습니다만 혹시 이 글을 보신 분들 중에서 이 내용에 대해 아신다면 아낌없이 댓글로 정보좀 주시면 감사하겠습니다.

 

앞으로는 VSC만 쓸 것!

혹시 몰라서 동기화가 가능한지도 찾아봤는데 가능하군요! 대박입니다. 브라켓은 이게 안 되서 포맷하거나 프로그램을 지우고 재설치하면 다시 처음부터 수동으로 하나하나 한땀한땀 세팅을 해줘야 합니다. 이게 겁~~~나 번거롭거든요. 이것 때문에 무서워서 포맷도 못 했으니까요. 근데 VSC는 동기화 기능을 제공하고 있습니다. 글 써 놓고 보니까 추가 장점 내용이군요. 방금 언급한 미리보기 관련 단점 부분만 빼면 나머지는 모두 마음에 듭니다. 프로그램 반응 속도도 빠른 편이라 좋아요. 앞으로는 VSC를 사용하면서 여러가지 유익한 기능들과 새로운 사실을 알게될때마다 글로 작성하겠습니다. 나중에 까먹으면 안 되니까요. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band