실무에서 사용하는 최고의 코딩툴은 어떤것일까요?

게시자: 대문 demun 카테고리: 퍼블리셔 2014.02.03 06:00

참 여러가지 이야기를 하려 합니다. 지금까지 계속 익히고, 알아보고, 테스트해보고 한것들중에서 무엇이 가장 좋고, 가장 사용성이 있는지 아직 완전이 감이 잡히지가 않아 정리의 글이나 시간이 필요한것 같아 이글을 씁니다.


프론트엔트개발....퍼블리싱...이쪽과 관련이 있는것 같군요.



1. html


먼저 html 이야기를 해볼까 합니다.

맨날 하는것이 html 입니다. 실무에서는 같은 영역을 계속 코딩을 할때가 많습니다.

예를들어 하나의 사이트를 만든다고 가정하면 메인메뉴 라든가, 사이드바라든가 반복적으로 사용이 되는 곳이 있죠.

많은 html 을 만든후 메인메뉴에 수정이 들어온다면 html 를 모두 수정해줘야 합니다.


html 의 단점이죠.

이걸 극복하는것이 바로 php 입니다.

html 에서 메인메뉴부분을 include 하는것이죠. 

메인메뉴는 하나의 html 로만 만들어서 사용하게 됩니다. 물론 수정사항이 들어오면 메인메뉴 부분만 수정을 하면 됩니다.


여기에도 단점이 있습니다. 

php를 실시간으로 확인하려면 서버구성을 해야합니다. 예를들어 apmsetup 와 같은 프로그램을 설치하고 브라우져로 봐야한다는 겁니다. 또한 주소도 수정해서 봐야하는 단점이 있습니다.


그럼 대안은 없는가?

바로 jade 입니다.




jade를 사용하면 똑같이 include 문을 사용할 수 있어 위에서 말한 메인메뉴 수정이 왔을때 유연하게 대처를 할 수 있습니다.

이또한 완벽하지는 않습니다. 컨버팅 과정을 거쳐야 하지요.


jade 와 비슷한걸로 haml 도 있습니다.

이걸또 해결해주는것이 여러가지가 있는데 뒤에서 자세하게 다룰 grunt 와 컨버팅툴 입니다.


또 여기서 에디터 이야기를 뺄수 없지요. sublime text 를 사용하면 emmet 플러그인으로 인해 젠코딩등으로 빨리 코딩을 할 수 있지요....이 부분은 생략하겠습니다. 워낙 많이 다른부분이라...


html 에서 결론은 jade, php, 젠코딩입니다.



2. CSS

css 이야기를 안할수 없지요.
역시 뭐니뭐니해도 css 는 less , sass 입니다. sass에는 compass도 포함된다고 봅니다.
이것보다 더 좋은 대안은 없는듯합니다.
또 다른것으로 stylus 가 있지만 성격이 좀 다르고 less,sass 에는 못 미치는듯 합니다.
마찬가지로 컨버팅 과정을 거쳐야 한다는 단점이 있습니다.

결론은 css 는 less 또는 sass 를 써야한다는 겁니다.




3. 에디터


에디터가 많아서 나눌까하다가 하나로 몰아서 이야기 해봅니다.

먼저 가장 추전하는것은 아무래도 서브라임텍스트(Sublime text) 입니다. 아직까지도 무궁무진합니다.




무료로 사용할 수 있으며, 중간중간에 라이센스 구매창이 뜨는것 이외에 사용상에 제약은 없습니다.

실무에서도 계속 사용하고 잇는 툴이죠.

만약 안써본분이 있다면 꼭 써보기를 권합니다.


그 다음 신진세력이 바로 adobe 툴입니다.

먼저 Adobe Edge Code 입니다.



Adobe Edge Code 를 논할려면 먼저 Brackets 을 이야기 해야 합니다.

Brackets 은 오픈소스입니다. 이걸 Adobe 에서 살짝 개량해서 만든것이 Adobe Edge Code 입니다.


사용법은 95% 똑같다고 봅니다.

두번째로 추천하는것은 바로 Adobe Edge Code 입니다. 


이유는 바로 Adobe 이기 때문입니다. 

에디터로써의 장점도 있습니다. 한글표기라든가 Ctrl+E 의 빠른 표기등등.... 하지만 그것보다 제 생각에는 바로 Adobe의 힘입니다.


그것은 바로 반응형에 최적화되어 만들어진 Adobe Edge Reflow 입니다. 




반응형은 Adobe Edge Reflow 로 만들고 코딩은 Adobe Edge Code 로 하면 된다는거죠. 그야말로 파워가 배가 되는셈입니다.

또 있습니다. 


실무에서 항상 다루는 Photoshop.... 이것과의 연동도 무시못할 부분입니다.

또한 요즘에는 웹페이지에 액션이 많습니다. 아니 액션이 없는 사이트는 거의 없을 정도입니다.

이 액션에 최적화되어 만들어진 것이 바로 Adobe Edge Animate 입니다.



즉 자바스크립트는 Adobe Edge Animate 로 해결하면 된다는 것이죠.


그래서 두번째로 추천하는 에디터는 바로 Adobe 툴입니다. 요놈 3개만 제대로 다룰줄알면 못하는 액션없고, 못하는 반응형없고, 못하는 코딩없습니다......전라도 망치의 말씀....


잠깐 소개한 Brackets 이 세번째 입니다.




4.컨버팅 툴


실무에서는 코딩을 하고, 바로 확인이 필요합니다. 즉 실시간 반영이라는것이 상당이 중요하죠.

실시간으로 반영하는 하는것은 LiveReload 입니다.




서브라임텍스트의 좋은점 중에서 LiveReload 라는 플러그인이 있습니다. 이걸 이용하면 실시간으로 코딩한것을 볼 수 잇습니다.

여기에 한수 더떠서 LiveStyle 이라는것이 있어 에디터와 브라우져의 개발자도구에서 서로 코딩을 합니다.

정말 편한 기능이죠.


근데 이것은 순수하게 htlml , css 를 사용할 때 이야기 입니다.

jade, less, css, stylus... 등과 같은 언어를 사용할때는 사용할 수 없지요. 왜냐면 컨버팅 과정을 거쳐야 하기 때문입니다.


그럼 컨버팅도 하고 실시간 반영도 하고 .... 그런것은 없나요?

있습니다.


맥에서는 Codekit 이라는것이 있습니다.

하지만 실무에서는 거의 윈도우죠. 그럼 윈도우에는 없냐? 비슷한것이 있긴 있습니다.

그것이 바로 Prepros 라는 겁니다.





Prepros 는 컨버팅도 실시간으로 하고, 서버구성을 하면 미리보기도 실시간으로 할 수 있습니다.

좀더 세밀한것은 유료로써 돈을 줘야 한다는 점과 미리보기를 html 파일, 파일마다 해야한다는 단점이 있긴 하지만 ...이것보다 더 좋은 컨버팅 툴은 없는것 같습니다.




5. 빌드 툴


위의 모든 단점을 극복해주는것이 있습니다. 

그것이 바로 Grunt 입니다.





자바스크립트 프레임워크중에서 1위라고 합니다. 그 만큼 인기몰이고, 사용성이 좋다고 할 수 있습니다.

사용법이 다소 어렵다고 저는 생각합니다.


제가 실무에서 서먹을만한 모듈을 설치해보니 대략 17개가 나왓습니다. 

grunt 에 대한 사용법도 알아야하지만 이 모듈에 대한 설정법도 알아야합니다. 즉 이 모듈이 어떤 기능을 하고 어떻게 설정을 해야 하는지 알아야 써먹을수 있다는 이야기죠.


강추하는 툴입니다. 그리고 반드시 익혀야 하는 툴인것 같습니다.




6. 패키지 관리툴


사이트를 제작하고, 설정하고.... 등등의 일련의 과정을 손쉽게 할 수 있게 만들어주는 툴이 바로 Yeoman 입니다.





요만은 제네레이터 기능이 있어서 몇단어만 입력하면 관련 모듈을 한번에 받을수 있어 무척 편리합니다.


문제는 grunt 를 알아야 제대로 사용할 수 있다는 점입니다.

제네레이터도 알아야하고, grunt 도 알아야 합니다.

충분이 익힐말한 가치가 있는 툴입니다.



여기까지 제가 본 가장 익혀야하고, 알아야하고, 사용해야 하는 툴들을 이야기 했습니다 

과연 실무에 있는 여러분은 위의 툴을 얼마나 알고 , 얼마나 사용하시는지요????


위툴에 관련해서 서로 정보를 공유하고 도움이 됐으면 합니다.


신고

댓글

  1. 2014.02.23 00:52 신고 BlogIcon 루키  댓글주소  수정/삭제  댓글쓰기

    grunt를 처음접하니 뭐가 뭔지 모르겠어요. 실무에 쓸만한 모듈좀 추천해주실수 있나요?

    • BlogIcon 대문 demun 2014.02.24 18:01 신고  댓글주소  수정/삭제

      너무 많습니다.
      모듈에 대해서 나중에 포스팅하겠지만, 모듈이 어떤기능을 하는지 알아야하고, 어떻게 설정하는지도 알아야 합니다.
      그것이 만만치가 않더라구요.

      단순이 less만 사용할것도 아니고, 이왕이면 붙이고, 합치고, 최적화하고, 복사하고, 컴파일하고 등등 ... 그러다보면 많아지더라구요.

      아래는 제가 테스트해보고 있는 모듈들입니다.

      "grunt": "~0.4.2",
      "grunt-contrib-uglify": "~0.3.2",
      "grunt-contrib-watch": "~0.5.3",
      "grunt-contrib-concat": "~0.3.0",
      "grunt-contrib-less": "~0.9.0",
      "grunt-contrib-copy": "~0.5.0",
      "grunt-contrib-connect": "~0.6.0",
      "grunt-contrib-clean": "~0.5.0",
      "grunt-contrib-imagemin": "~0.5.0",
      "grunt-contrib-compass": "~0.7.1",
      "grunt-contrib-jade": "~0.9.1",
      "grunt-csscomb": "~2.0.1",
      "grunt-html-validation": "~0.1.13",
      "grunt-contrib-jshint": "~0.8.0",
      "grunt-contrib-qunit": "~0.4.0"

  2. 2014.05.16 03:00 신고 BlogIcon 백팩커스  댓글주소  수정/삭제  댓글쓰기

    궁금한게 드림위버랑 서브라임텍스트랑 어떤게 좋나요 ㅋ

    • BlogIcon 대문 demun 2014.06.08 16:16 신고  댓글주소  수정/삭제

      아 제가 댓글을 못봤습니다.
      당연 서브라임텍스트죠.

      서브라임은 가볍습니다.
      그래서 어느때나 실행해서 사용학요...

      드림위버는 딱 드림위버만 사용해야될때만 사용합니다.
      특히 이미지맵같은거 그릴때...ㅎㅎㅎ

      99% 서브라임을 이용합니다.