2013.08.07

파이어폭스·크롬, 웹 개발자 지원 강화한 신버전 나란히 출시

Joab Jackson | IDG News Service
모질라와 구글이 웹 개발자 지원 기능을 강화한 새로운 버전을 나란히 내놓았다. 모질라는 6일 공개된 파이어폭스 23에서 웹 개발자 툴바에 다양한 기능을 추가했다. 구글 역시 강화된 크롬 개발자 툴 기능을 선보였다.

이러한 변화는 기존의 정적인 웹 페이지 보기 이외에 사용자와 서비스 사이에 더 풍부한 상호작용을 지원하기 위한 브라우저의 변화를 바로 보여준다. 모질라의 파이어폭스 엔지니어링 담당 부사장인 조나단 나이팅게일은 "우리는 여전히 브라우저 언어를 사용하지만, 사람들은 이메일과 캘린더, 소셜 네트워크 등 이미 전혀 다른 활동을 보이고 있다"고 말했다.



파이어폭스 23에는 웹 개발자 툴바에 브라우저 내 코드 디버거를 자유롭게 바꿀 수 있는 새로운 옵션 패널이 추가됐다. 단축키를 자유롭게 지정할 수 있고 외부 코드 검증 툴, 문법 강조 색깔을 비롯해 다른 설정을 필요에 따라 바꿀 수 있다.

'네트워크 모니터'(Network Monitor)도 추가됐다. 이를 이용하면 페이지를 다운로드할 때 로드 시간, 소스코드 내 에러 등 브라우저에서 처리하는 모든 작업을 볼 수 있다. 이전 버전에서는 웹 콘솔에서 이런 정보를 확인할 수 있었지만 그리 직관적이지 않았다.

웹 개발자들이 흥미를 느낄만한 기능은 또 있다. 파이어폭스는 이번 버전부터 다양한 HTML5 폼 컨트롤을 지원한다. 이를 이용하면 중간자공격(man-in-the-middle attack)을 하는 콘텐츠를 차단하거나 과도한 블링크 효과(blink)나 요소를 제거할 수 있다.



구글 역시 크롬 브라우저에 내장된 웹 저작 및 디버깅 지원 툴인 '데브툴'을 업데이트하면서 웹 개발자에 대한 지원을 강화하고 있다. 가장 눈에 띄는 변화는 '워크스페이스'(Workspace)다. 내장 소스코드 에디터로, 그동안 새로 수정된 웹 페이지를 확인하느라 브라우저와 외장 코드 에디터를 왔다갔다했던 번거로운 작업이 이제 필요 없어졌다.

워크플레이스를 이용하면 브라우저 내 데브툴 콘솔에서 웹 페이지를 바로 수정할 수 있다. 수정해서 문제가 없으면 외부 에디터나 IDE를 실행하지 않고도 소스에 반영할 수 있다. 구글 크롬 데브툴 팀의 소프트웨어 엔지니어인 브세블라드 블라스보는 "이러한 기능을 이용하면 스크립트와 스타일을 작성하거나 수정하고 수정된 내용을 즉시 적용해 브라우저를 통해 볼 수 있으며 꾸준히 적용할 수 있다"말했다.

크롬 에디터는 PHP와 파이썬, 자바, CSS, HTML, 자바 스크립트 등의 문법 강조 기능도 지원한다. 또한, 개선된 데브툴을 이용해 개발자들은 프로-프로세스 CSS 파일을 실시간 수정할 수 있다. CSS 프리-프로세서(CSS pre-processor)는 CSS 코드를 더 쉽게 사용하고 이해할 수 있도록 구성해 주는 특수 언어다. 이번 버전에서 데브툴은 유명 Sass 프리-프로세서를 지원한다. 구글은 Less와 스타일러스, 컴패스 프리-프로세서도 지원할 예정이다.

이밖에 데브툴은 북마크와 스크립트, 유틸리티를 저장하는 기능을 제공해 브라우저 내에서 소스코드를 수정할 때 이들을 빨리 호출할 수 있다. 구글은 또한 관련 정보를 모은 커뮤니티도 개설했다. editor@idg.co.kr


2013.08.07

파이어폭스·크롬, 웹 개발자 지원 강화한 신버전 나란히 출시

Joab Jackson | IDG News Service
모질라와 구글이 웹 개발자 지원 기능을 강화한 새로운 버전을 나란히 내놓았다. 모질라는 6일 공개된 파이어폭스 23에서 웹 개발자 툴바에 다양한 기능을 추가했다. 구글 역시 강화된 크롬 개발자 툴 기능을 선보였다.

이러한 변화는 기존의 정적인 웹 페이지 보기 이외에 사용자와 서비스 사이에 더 풍부한 상호작용을 지원하기 위한 브라우저의 변화를 바로 보여준다. 모질라의 파이어폭스 엔지니어링 담당 부사장인 조나단 나이팅게일은 "우리는 여전히 브라우저 언어를 사용하지만, 사람들은 이메일과 캘린더, 소셜 네트워크 등 이미 전혀 다른 활동을 보이고 있다"고 말했다.



파이어폭스 23에는 웹 개발자 툴바에 브라우저 내 코드 디버거를 자유롭게 바꿀 수 있는 새로운 옵션 패널이 추가됐다. 단축키를 자유롭게 지정할 수 있고 외부 코드 검증 툴, 문법 강조 색깔을 비롯해 다른 설정을 필요에 따라 바꿀 수 있다.

'네트워크 모니터'(Network Monitor)도 추가됐다. 이를 이용하면 페이지를 다운로드할 때 로드 시간, 소스코드 내 에러 등 브라우저에서 처리하는 모든 작업을 볼 수 있다. 이전 버전에서는 웹 콘솔에서 이런 정보를 확인할 수 있었지만 그리 직관적이지 않았다.

웹 개발자들이 흥미를 느낄만한 기능은 또 있다. 파이어폭스는 이번 버전부터 다양한 HTML5 폼 컨트롤을 지원한다. 이를 이용하면 중간자공격(man-in-the-middle attack)을 하는 콘텐츠를 차단하거나 과도한 블링크 효과(blink)나 요소를 제거할 수 있다.



구글 역시 크롬 브라우저에 내장된 웹 저작 및 디버깅 지원 툴인 '데브툴'을 업데이트하면서 웹 개발자에 대한 지원을 강화하고 있다. 가장 눈에 띄는 변화는 '워크스페이스'(Workspace)다. 내장 소스코드 에디터로, 그동안 새로 수정된 웹 페이지를 확인하느라 브라우저와 외장 코드 에디터를 왔다갔다했던 번거로운 작업이 이제 필요 없어졌다.

워크플레이스를 이용하면 브라우저 내 데브툴 콘솔에서 웹 페이지를 바로 수정할 수 있다. 수정해서 문제가 없으면 외부 에디터나 IDE를 실행하지 않고도 소스에 반영할 수 있다. 구글 크롬 데브툴 팀의 소프트웨어 엔지니어인 브세블라드 블라스보는 "이러한 기능을 이용하면 스크립트와 스타일을 작성하거나 수정하고 수정된 내용을 즉시 적용해 브라우저를 통해 볼 수 있으며 꾸준히 적용할 수 있다"말했다.

크롬 에디터는 PHP와 파이썬, 자바, CSS, HTML, 자바 스크립트 등의 문법 강조 기능도 지원한다. 또한, 개선된 데브툴을 이용해 개발자들은 프로-프로세스 CSS 파일을 실시간 수정할 수 있다. CSS 프리-프로세서(CSS pre-processor)는 CSS 코드를 더 쉽게 사용하고 이해할 수 있도록 구성해 주는 특수 언어다. 이번 버전에서 데브툴은 유명 Sass 프리-프로세서를 지원한다. 구글은 Less와 스타일러스, 컴패스 프리-프로세서도 지원할 예정이다.

이밖에 데브툴은 북마크와 스크립트, 유틸리티를 저장하는 기능을 제공해 브라우저 내에서 소스코드를 수정할 때 이들을 빨리 호출할 수 있다. 구글은 또한 관련 정보를 모은 커뮤니티도 개설했다. editor@idg.co.kr


X