–
크롬 확장 프로그램은 오랜만에 소개하는 것 같습니다. 정말 많은 확장 프로그램을 설치하고 삭제하며 자주 쓰는 것이 어느 정도 정리된 것도 있지만, 대부분 비슷한 기능을 제공하기에 굳이 새로운 확장 프로그램을 사용할 이유가 많지 않았기 때문인데요. 오늘 소개할 크롬 확장 프로그램의 경우, 기존에 한 개 단위로 제공된 기능을 한 번에 사용할 수 있는 환경을 제공하고 있어 저도 고정 후 사용하고 있습니다.
‘Superdev’ 확장프로그램에서 제공하는 기능은 총 10개입니다.
- 텍스트 에디터
- 페이지 룰러
- 컬러 피커
- 컬러 팔레트
- 페이지 가이드라인
- 페이지 하이라이트
- 페이지 내 구성요소 이동
- 페이지 내 구성요소 삭제
- 페이지 내 구성요소 내보내기
- 캐시 지우기
다른 확장 프로그램이 그렇듯, ‘Superdev’ 설치 후 원하는 화면에서 실행하면 10가지 기능을 먼저 살펴볼 수 있습니다. 특정 기능을 클릭하면 바로 사용할 수 있어요. 10개 묶음이라 든든하네요.
위치 상 먼저 사용할 수 있는 확장 프로그램 기능은 ‘텍스트 에디터’입니다. 현재 화면 내 텍스트 영역으로 잡힌 곳을 클릭하면 바로 원하는 텍스트를 입력해 확인할 수 있어요. 기존 화면에 텍스트 등이 바뀌거나 추가되는 등의 영향이 어떻게 될지 확인하기 좋은 기능이기도 합니다. 줄바꿈 등이 되었을 때의 모습도 쉽게 확인할 수 있고요. 가볍게 실행할 수 있어 누구나 빠른 확인이 가능하다는 점이 가장 큰 장점입니다.
이어 사용할 수 있는 기능은 ‘페이지 룰러’입니다. 화면 (웹 페이지 기준)에 포함된 요소들을 측정할 수 있는 도구로 선택한 위치에 따라 픽셀 단위의 간격이나 마진 등을 확인할 수 있습니다. 페이지 룰러는 웹 페이지 구성 시 구성요소 간 간격 등을 어떻게 작업하면 좋을지 참고하기 위해 자주 사용되는데, 오늘 소개하는 확장 프로그램에 포함되어 있어 더 유용한 활용이 가능합니다.
‘컬러 피커’ 역시 제공합니다. 컬러 피커를 실행한 뒤 원하는 요소를 클릭하면 컬러값을 바로 확인할 수 있습니다. 마음에 드는 컬러를 다른 웹 페이지를 탐색하는 과정에서 발견했다면 손쉽게 알 수 있다는 점에서 좋습니다. (물론 오늘 소개하는 확장 프로그램의 ‘좋음’은 없었던 기능을 제공하기 때문이 아니라, 유용한 여러 기능을 하나의 확장 프로그램으로 사용할 수 있다는 의미입니다.) 더불어, 페이지에 포함된 컬러를 한 눈에 볼 수 있는 팔레트 기능도 지원합니다.
각 요소를 구분해 쉽게 살펴볼 수 있는 기능도 포함되어 있습니다. 영역을 어떻게 차지하고 있는지, 두 개 이상의 요소가 포함된 경우 각각의 구성이 어떻게 되어있는지 컬러 단위로 구분해 쉬운 확인이 가능합니다.
구독중 위치가 변경된 것을 눈치채셨나요~? 원래 응원하기 옆에 구독하기 버튼이 있었는데, 이렇게 특정 요소를 선택해 원하는 위치에 옮길 수 있는 기능도 제공합니다. 텍스트 에디터와 함께 활용하면 다른 과정 없이 개선될 화면의 UI 등을 대략적으로 확인할 수 있는 역할을 하게 됩니다.
각 요소를 내보내는 기능도 지원합니다. HTML, CSS 등으로 확인할 수 있으며 선택한 요소는 아래로 확인할 수 있습니다. 길이로 인해 10개 기능을 모두 상세히 소개하진 못했지만, 활용도가 높아 이 확장 프로그램 하나면 정말 많은 범위를 커버할 수 있지 않을까 하는 생각이 드네요. 지금까지 소개한 크롬 확장 프로그램은 아래 리스트를 통해 확인하실 수 있으며, 더 자세한 내용은 ‘설치 페이지’를 통해 확인해주세요!
–
