웹페이지 색 조합 색상 팔레트 바로 보기 툴 Design Sidekick

오늘은 웹디자이너들을 위한 유용한 색상 도구 크롬 확장 프로그램을 소개할게요. 이 프로그램은 웹페이지를 디자인할 때 필요한 색 조합과 팔레트를 쉽게 찾을 수 있게 도와주고, 디자이너들이 크롬 브라우저를 통해 실시간으로 디자인 작업을 더욱 효율적으로 활용할 수 있습니다 

웹디자이너 위한 크롬 브라우저 색상 도구 Design Sidekick 

Design Sidekick는 모든 웹페이지에서 사용되는 색상, 글꼴, 스타일들을 즉시 검색하고 저장하고 복사할 수 있는 색상 도구 확장 프로그램입니다.

 

Design Sidekick 주요 기능 및 사용법 

 

1. Design Sidekick 크롬 확장 프로그램 추가하기

크롬 웹스토어에서 ' Design Sidekick' 검색하거나 링크 통해 크롬 확장프로그램 추가하면 크롬 브라우저 상단 아이콘 추가됩니다 

반응형

2. 아이디어 얻을 수 있는 웹페이지 'Design Sidekic'으로 색상 팔레트 보기 

참고 예사: 롤링페이퍼 제조업체 웹사이트 - 웹페이지

색상 아이디어를 얻을 수 있는 웹페이지를 찾고, 원하는 색상을 발견하면 상단에 있는 Design Sidekick 아이콘을 클릭하면, 현재 웹페이지 사용된 색상들을 작은 페이지 창으로 보여줍니다 

디자인 스타일 - 색상 팔레트 

그리고 '디자인 스타일(Design styles)' 클릭해 주면 페이지 색상 팔레트 확인할 수 있니다, 색조, 밝기 용도별로 정렬하고, 원하는 색상을 바로 복사할 수 있고, 저장할 수 있고, 저장된 색상은 상단 '북마크 아이콘' 클릭하면 저장된 색상 팔레트 바로 볼 수 있으면, 언제 어디서든 디자인 필요한 색상을 저장하고 바로 쓸 수 있습니다 

 

3. 그 외 타이포그래피, SEO. CSS 스타일 기능 활용하기 

웹페이지 타이포그래피

디자인 스타일(Design styles) 기능에는 웹페이지 폰트, 폰트 스타일 확인할 수 있습니다 페이지 어떤 폰트 사용했고, 폰트 스타일 상세 정보 활 수 있어,  CSS 코드로 활용할 수 있습니다 

SEO 체크리스트

SEO 체크리스트는 개발자와 디자이너가 웹페이지를 최적화하는 데 도움이 되는 기능입니다. 이를 통해 자신의 웹페이지나 다른 웹페이지가 얼마나 잘 최적화되었는지 비교하고 확인할 수 있습니다. 각 페이지에 필요한 프레임과 목업 코드를 제공하여 사용자가 필요한 작업을 간편하게 활용할 수 있습니다 

스타일 검사기 

inspect page은 스타일 검사기로 개발 도구 열지 않고도 페이이의 모든 요소를 클릭하면 모든 디자인 스타일을 볼 수 있습니다, 웹사이트 상세피이지 제작 시 CSS 스타일 코드 활용할 수 있습니다 

---

오늘 다방면 활용할 수는 색상 크롬 확장 프로그램 'Design Sidekick' 소개해 보았습니다.  

시간 절약도 되고 실시간으로 바로 사용할 수 있는 색상 도구 및 스타일 참고할 수 있어 여러모로 웹디자이너 또는 개발자 유용한 도구라고 생각하면, 오늘 글 여기서 마치겠습니다 

 

Design Sidekick 크롬 확장 프로그램 바로가기

Design Sidekick