디자이너를 위한 CSS 뷰어, ‘CSS Peeper’은 어떨까요?

 

디자이너의 업무 효율!

이번주 지금 써보러 갑니다를 통해 ‘디자이너를 위한 크롬 확장 프로그램4‘과 ‘원하는 웹사이트의 URL을 입력하면 폰트와 컬러 정보를 추출해주는 Unpack-Site‘를 소개드렸는데요 🙂 이들은 모두 디자이너의 업무 효율을 높여주는 서비스에 초점을 맞춰 정리한 내용이었습니다. 오늘은 이 두 콘텐츠에 이어 함께 쓰거나 확인하면 좋은 서비스를 소개드릴까 합니다. 업무 효율을 높일 수 있다면! 여러개 중 하나라도 나와 맞는다면! 많은 도움을 받을 수 있을테니 말이죠!

 

크롬 확장프로그램으로 등장한 ‘CSS Peeper’

오늘의 주인공은 ‘CSS Peeper’로 디자이너와 기획자들에게 많은 도움을 주는 서비스인데요! 디자이너를 위해 만들어진 CSS 뷰어로 요소검사를 따로 하지 않고도 스타일을 간단하고 체계적으로 확인할 수 있도록 도와줍니다. 크롬 확장프로그램으로 활용이 가능하며, 디자인이 정말 매력적인 서비스이기도 합니다. ‘CSS Peeper’을 활용하면 원하는 웹 사이트의 선 높이, 글꼴 종류와 버튼 크기는 어떤지, 이미지로 적용이 되어 있는지, 텍스트로 반영이 되어 있는지 등 쉬운 방법으로 코드를 확인하고 검사할 수 있습니다.

 

크롬 확장프로그램을 설치한 후, 특정 웹페이지에서 아이콘을 클릭하면 위와 같이 크게 3가지 탭으로 나눠 정보를 확인할 수 있습니다. 첫 번째는 페이지의 CSS 정보로 파일 크기, 페이지 로딩 시간은 물론 사용된 헤드와 바디에 사용된 폰트 정보를 확인할 수 있습니다. 두 번째는 컬러 정보로 페이지에서 쓰인 컬러값을 차례대로 볼 수 있습니다. 마지막 세 번째가 상당히 매력적인데, 페이지에 사용된, 겉으로는 잘 드러나지 않는(특히 요소 검사로는 더더욱) ‘Asset’들을 확인하고 저장할 수 있도록 도와줍니다.

 

또한 페이지에서 특정 영역을 선택하면 위와 같이 요소에 대한 상세 정보를 보여주는데요! 해당 영역의 사이즈는 물론이고 배경과 텍스트 컬러 등을 쉽게 확인할 수 있었습니다. 다시 한 번 정리해보자면, 페이지 전체의 정보를 세 가지 탭(기본 정보/컬러/어셋)으로 확인할 수 있으며 특정 영역에 대한 정보를 클릭 한 번으로 확인할 수 있도록 도와주는 것이 바로 ‘CSS Peeper’인 것!

 

크롬을 쓰는 분들이라면 확장 프로그램의 설치로 어렵지 않게 쓸 수 있다는 점과, 서비스 자체의 UI가 상당히 직관적이라는 점, 제공해주는 정보의 양이 많은 것은 아니지만 컬러, 폰트 등 꼭 필요한 것들로 구성 되어 있다는 점이 ‘CSS Peeper’의 가장 큰 매력이라고 생각됩니다. 디자이너는 물론 저와 같은 기획자들에게도 상당히 유용한 서비스이고요 🙂 웹에서 활용 가능한 CSS뷰어를 찾으신다면 지금 바로 ‘CSS Peeper‘를 확인해보세요!

 

댓글 남기기