디자이너, 코딩 텍스트 에디터는 뭘 써야 할까.

최근에 에디터 유목민 생활을 하면서 느낀 점을 적어볼까 한다.

이건 디자이너의 관점이라는 것을 전제로 한다. 그리고 요즘 좋은 에디터는 다 오픈소스고 확장기능도 비슷비슷해서 "OO 확장기능이 좋다" 는 뻔한 이야기도 제외하겠다.

 

1. VS CODE

"코드 에디팅을 재정의하다"

 

 

- 제작 : Microsoft

 

현재 세계적으로 점유율이 가장 높은 대세 에디터.

급하신 분들은 아래는 안 읽어도 됩니다. 묻지도 따지지도 말고 VS Code 쓰세요.

 

 

[장점]

1. 대세 of 대세

사람들이 많이 쓰는데는 이유가 있다. 생태계가 방대해서 다양한 추가확장 기능을 제공한다. 또한 MS 언어와 호환성이 좋아서 특정 기술을 사용하는 개발자들에게는 매우 편리하다고 한다.

 

2. 손 델 필요가 없는 스마트한 기본 기능

이미 코딩에 편리하게 기본 셋팅이 되어 있어서 별도의 커스텀이 별로 필요하지 않다. 다른 에디터가 개발자 위주였다면 VS Code는 상대적으로 "디자이너 프렌들리"한 면이 많이 보인다.

 

[단점]

특별히 없지만 굳이 꼽자면 오류 체크 기능이 빡빡하다. 예를들어 CSS에 빈 스타일이 있으면 오류로 체크해서 귀찮다. (예) div{      } 이렇게 값이 들어가 있지 않은 소스를 절대 용납하지 않는다.)

 

 

 

2. Brackets

"웹디자인을 잘 아는 현대적인 오픈소스 텍스트 에디터"

 

 

- 제작 : Adobe

 

디자인 기반을 정체성으로 내세우는 브라켓은 HTML과 CSS에서 만큼은 최강자이다. 그 유명세가 어찌나 큰지 대한민국 공공기관의 마음까지 사로잡았다. 웹디자인기능사 실기시험에서 드림위버, 에디트플러스와 함께 브라켓이 기본 에디터로 제공된다.

 

 

[장점]

디자이너 프렌들리하다.

<img src="주소"> 의 주소부분에 이미지폴더를 타이핑하면 폴더 내 모든 이미지 파일명 리스트를 보여준다. 이미지 이름이 헷갈리거나 타이핑하기 귀찮을 때 유용하다. 또한 이미지 주소 위에 마우스를 올리면 미리보기도 가능하다. 눈으로 확인하고 작업하는데 익숙한 디자이너에게는 아주 편리하다. 다른 에디터에서도 확장기능을 깔면 가능하지만 브라켓은 기본으로 제공된다는 점에 점수를 주었다.

 

[단점]
무겁다 무겁다 무겁다

다른 에디터로 갈아탄 결정적인 이유이다. 램을 어마무시하게 잡아먹는다. 포토샵, 일러스트레이터, 크롬, 브라켓까지 열어놓고 작업해보면 인내심이 +100 되는 자신을 발견할 수 있다.

 

 

3. Atom

"21세기를 위한 Hackable 텍스트 에디터"

 

 

- 제작 : GitHub

 

깃헙언니오빠들의 아이돌. 가볍다. 빠르다. 이름도 귀엽고 캐릭터도 귀엽다.

 

 

[장점]
가볍고 빠르다.
가볍다는 장점은 브라켓에서 갈아타고 가장 만족스러웠던 부분이다.

 

[단점]
1. 커스텀 하는데 진입장벽이 있다

맨 처음 깔고 나면 화면 중앙에 뜬금없이 회색 세로선이 있고 창이 나눠지는 방식도 애매해서 기본 상태로 쓰기보단 커스텀을 좀 해야 한다. 그러나 VSCode처럼 모든 세팅 메뉴가 GUI로 제공되는 것도 아니고 코드를 수정해야 하는 부분도 있어서 디자이너들에겐 진입장벽이 느껴질 것 같다. 출생지가 깃허브이니 디자이너 따위는 안중에 없다.

 

2. (내 기준) 일부 확장기능이 불완전하다.

HTML 마크업을 편하게 하기 위해 "html auto close" 라는 가장 평점이 높은 자동태그닫기 확장기능을 설치했다. 그런데 주석을 달려고 / 를 치면 자동으로 />로 변환시켜서 오류를 낸다. 구글링을 해봐도 해결법을 찾지 못했고 나는 이렇게 미저리처럼 따라다니는 /> 귀신에게 시달려야 했다. 확장기능은 대부분 개인 개발자들이 만드는 것이라 만들어만 준 것만도 감사하지만 대다수 개발자들에게 HTML, CSS는 비관심 영역이니 A/S 디테일이 떨어지는게 아닐까 싶다.

 

3. 반쯤 모자른 인텔리센스 기능

인텔리센스란 자동완성 기능을 말한다. 예를들어 querySelector를 입력하고 싶다면 que까지만 쳐도 querySelector가 추천되는데, 추가하면 기존에 내가 타이핑했던 que에 querySeletor가 더해져 quequerySelector로 입력이 된다. WTF. 타자 좀 덜 치려다가 손이 더 가는 사태가 벌어진다.

 

 

 

결론: VS Code가 짱입니다. VS Code 쓰세요