전

크롬 DevTool 과 Macaw

· 2013-10-15 (화) 05:24:53 · 2246 · 4
얼마전에 소식을 듣기는 했지만, 개발자 버전에만 들어있는 줄 알았던 크롬 DevTool(개발자도구) 새 버전이 지금 사용하는 버전에서도 가능하네요.. ^^ (사용하는 버전: Version 30.0.1599.69 m )

Elements panel

제가 보통 작업하는 방법이 마크업과 대충의 스타일을 에디터로 하고
크롬에서 보면서 스타일을 고친 후, 수정된 스타일을 하드카피 (-_-) css 화일에 옮기곤 했는데,
이번 DevTool을 이용하면, 고치는 순간 자동으로 저장된다고 하네요.
게다가 모든 소스파일을 개발자도구 'Source' 탭에서 직접 수정이 가능하다고 하니,
로컬로 작업하는 경우는, 웬만하면 에디터는 안써도 될것 같은 기분이 듭니다. ^^;
ftp 연동은 좀 힘들더라도, 버저닝을 조금 지원하면 더할나위 없을것 같은데요.. ^^)

혹시 새 개발자도구를 사용하고 있는 분이 계시나요?
있으시면 리뷰좀.. ^^

* * *

Macaw의 광고문구 (tag line)은 'The Code-Savvy Web Design Tool' 이라네요.
CS InStyle 같은 위지윅 기반 웹디자인 툴이면서, 내부적으로 실제 코딩하는 것과 비슷하거나 더 나은 결과물을 만들어준다고 하네요.


예를 들어, 아래처럼 여러 버튼이 있다면 공통된 속성은 .button으로 뽑고 개별적인 것은 각각의 클래스로 뽑아주고요..
http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2013/08/Screen-Shot-2013-08-02-at-12.05.35-PM-520x395.png

제가 InStyle 같은 웹디자인/저작 툴을 사용해보지 않아서, 위와 같은 기능이 얼마나 새로운지는 잘 모르겠지만,
프로그램을 주로하는 저로써는 굉장히 유용한 툴인것 같아 보입니다.
그밖에 js 스크립 작성을 도와주는 기능과, 기본적으로 유동형 그리드 기반이고, 반응형 디자인과 템플리팅 도 가능하다고 하는데, 아직 나와있는 소개 동영상은 아래 두개이네요.

한가지 단점은 맥용이라는 점.. -_-
|

댓글 4개

크롬 새 개발자도구 그림을 본문에 넣었는데, webp 포멧이라서 나오질 않네요.
전체 (영문) 소개글은 http://www.html5rocks.com/en/tutorials/developertools/revolutions2013/ 를 보세요. ^^
^^ 좋은 툴이네요.
사이트 반응형으로 잘 만드셨네요....^-^
음..한번 사용해봐야겠네요.
댓글을 작성하시려면 로그인이 필요합니다.

자유게시판

202,958건
+
제목 글쓴이 날짜 조회
13-10-15 조회 2,320
13-10-15 조회 1,563
13-10-15 조회 1,269
13-10-15 조회 1,266
13-10-15 조회 2,247
13-10-15 조회 5,570
13-10-15 조회 2,162
13-10-15 조회 1,369
13-10-14 조회 2,910
13-10-14 조회 1,325
13-10-14 조회 1,235
13-10-14 조회 1,289
13-10-14 조회 1,233
13-10-14 조회 1,263
13-10-14 조회 1,158
13-10-14 조회 1,418
13-10-14 조회 1,818
13-10-14 조회 1,337
13-10-14 조회 1,243
13-10-14 조회 1,225