SuperDev 웹디자이너를 위한 확장 프로그램

Product Hunt에서 앱 하나를 발견했다. SuperDev라는 크롬 확장 프로그램인데, 웹디자이너에게 매우 유용할 것 같다. 사실 웹디자이너가 아닌 나에게도 유용하다.

SuperDev에는 8가지 기능이 있다. 그리고 각 기능의 사용도 아주 매끄럽게 이루어진다.

1. Text Editor: 현재의 웹페이지에 있는 텍스트 요소를 편집할 수 있다. 아이콘의 텍스트라든가, 설명 텍스트 등 바로바로 편집할 수 있다. 물론 내 눈에만 바뀌어 보이는 것이고, 새로고침 하면 다시 원래대로 돌아간다.

2. Color Picker: 웹페이지의 아무 곳이나 누르면 그곳에 사용된 색깔의 컬러코드를 확인할 수 있다. 예전에는 스크린샷을 찍고, PPT에 옮겨 컬러코드를 확인하곤 했는데 이제 그럴 필요가 없다.

3. Page Guideline: 웹페이지의 각 요소와 영역들이 어떻게 구분되어 있는지 마우스 커서를 옮겨가며 확인할 수 있다.

4. Move Element: 웹페이지의 요소들을 이리저리 움직일 수 있다. 구글 홈 화면에 있는 검색 창의 위치도 변경할 수 있다. 이리저리 옮겨보면서 디자인 구상을 하기 좋을 듯.

5. Page Ruler: 요소와 요소 사이의 높이와 폭이 몇 px인지 보여준다.

6. Color Palette: Color Picker에서 확인한 컬러코드들이 모여있다. 누르면 코드가 바로 복사됨.

7. Page Highlight: 웹페이지 내의 모든 요소들이 각기 다른 색깔로 하이라이트 되어, 요소가 전체적으로 어떻게 구성되어 있는지 한눈에 확인할 수 있다.

8. Delete Element: 요소를 선택해 화면에서 사라지게 만들 수 있다. 이것 또한 요소가 있을 때와 없을 때를 비교하면서 디자인 구상하기 좋은 듯.