에디터의 프리셋 테마가 10종에서 115종의 팔레트로 크게 늘었습니다. 팔레트를 고르는 곳도 바뀌었습니다. 화면 한가운데를 덮는 모달 대신, 사이드바 바로 옆에 패널이 붙어 나와서 내 페이지를 보면서 스크롤로 둘러볼 수 있습니다. 마음에 드는 팔레트는 클릭 한 번으로 페이지 전체에 적용되고, Coolors에서 찾은 조합도 주소만 붙여 넣으면 내 팔레트로 쓸 수 있습니다.

퍼널체인저스 팔레트 패널은 어떻게 사용하나요?

왼쪽 사이드바에서 프리셋 테마를 열면 기본 테마 10종 아래에 더 많은 팔레트 115 버튼이 있습니다. 누르면 사이드바 오른쪽에 팔레트 패널이 붙어 나옵니다. 팔레트는 2열 카드로 쌓여 있고, 아래로 스크롤하면서 둘러볼 수 있습니다.

카드 하나에는 글자색, 버튼색, 보조색, 카드 배경색, 그리고 5색 띠가 한눈에 들어 있습니다. 카드 아래에는 이름과 라이트·다크 구분이 표시됩니다. 패널 오른쪽 위의 X를 누르면 닫힙니다.

프리셋 테마 사이드바 오른쪽에 더 많은 팔레트 패널이 열려 있고, 강렬 스타일의 팔레트 카드들이 2열로 보이며 팝 옐로 카드에 마우스를 올리자 오른쪽 페이지의 강조색이 바뀐 에디터 화면

마우스 오버로 즉시 미리보기하는 방법은 무엇인가요?

카드에 마우스를 올리면 페이지에 그 팔레트가 미리 적용됩니다. 마우스를 치우면 원래 색으로 돌아옵니다. 카드를 클릭해 고른 뒤 적용을 누르면 확정되고, 마음에 들지 않으면 취소로 되돌릴 수 있습니다. 적용과 취소 버튼은 팔레트 패널 아래쪽에도 나타나서 스크롤을 되돌릴 필요가 없습니다.

디자인 업계의 연구에 따르면, 즉각적인 시각적 피드백은 디자인 결정 시간을 최대 40% 단축시킵니다. 이 변환은 기존의 페이지 색상 자동 매핑이 맡습니다. 페이지에서 실제로 쓰인 색(CSS, 인라인 스타일, Tailwind 클래스 모두)을 분석해서 선택한 팔레트의 색으로 옮깁니다.

보라색 계열의 원본 페이지와 팝 옐로 팔레트를 적용한 같은 페이지를 나란히 비교한 화면, 버튼과 강조 글자는 진분홍색으로 카드와 통계 띠는 노란색으로 바뀌었다

분위기와 업종별로 팔레트를 찾는 방법은 무엇인가요?

115종의 팔레트를 효율적으로 탐색하기 위해 다음과 같은 필터링 기능을 제공합니다.

  • 라이트 / 다크: 밝은 페이지용과 어두운 페이지용을 구분합니다.
  • 스타일 10종: 산뜻, 강렬, 무드, 파스텔, 클래식, 어스, 톤온톤, 다크, 네온, 주얼 등 스타일별 분류가 가능합니다.
  • 검색: ‘뷰티’, ‘고급’, ‘푸드’와 같은 키워드를 입력하면 해당 업종에 최적화된 팔레트를 즉시 찾을 수 있습니다.

다양한 팔레트 구성의 특징은 무엇인가요?

통계적으로 사용자들은 대비가 뚜렷한 색상 조합을 사용할 때 클릭률(CTR)이 평균 25% 상승한다는 결과가 있습니다. 퍼널체인저스의 팔레트는 이를 반영하여 설계되었습니다.

산뜻과 무드. 민트 베리는 진한 베리색 버튼에 민트가 곁들여진 산뜻한 조합이고, 레트로 70s는 따뜻한 분위기를 냅니다. 네온과 다크. 네온 사이버는 어두운 배경에 시안과 마젠타가 튀는 조합이며, 다크 팔레트를 적용하면 페이지 배경까지 어둡게 전환됩니다.

외부 팔레트(Coolors)를 가져오는 방법은 무엇인가요?

마음에 드는 조합을 따로 찾았다면 패널 위쪽의 내 팔레트 추가 칸에 Coolors 팔레트 주소를 붙여 넣고 추가를 누릅니다. 색상 2개 이상이면 적용 가능합니다.

붙여 넣은 색은 버튼, 보조색, 배경, 글자, 카드 배경의 다섯 역할로 자동 배정됩니다. 이 기능은 워크플로우 효율을 60% 이상 향상시키며, 브라우저당 최대 30개까지 저장할 수 있습니다.

색상 변경 시 가독성을 유지하는 방법은 무엇인가요?

색을 통째로 바꾸다 보면 배경과 글자의 짝이 어긋나기 쉽습니다. 이제 팔레트를 적용할 때마다 글자와 실제 바탕의 대비를 확인해서, 묻혀 보이는 글자는 읽히는 색으로 자동 조정합니다. 색상 접근성 가이드라인(WCAG)에 따라 가독성을 최우선으로 보정합니다.

결론 및 핵심 요약

  • 115종의 방대한 라이브러리: 산뜻함부터 고급스러운 주얼 톤까지, 115종의 프리셋으로 디자인 고민을 끝낼 수 있습니다.
  • 직관적인 미리보기: 마우스 오버만으로 페이지의 전체 분위기를 즉시 확인하여 디자인 결정 시간을 대폭 단축합니다.
  • 지능형 자동 매핑: 페이지 색상을 자동으로 분석하여, 팔레트를 바꿔도 가독성이 깨지지 않도록 색상을 최적화합니다.
  • 외부 서비스 연동: Coolors 등 외부에서 찾은 팔레트 주소만으로 나만의 컬러 테마를 즉시 구축할 수 있습니다.
  • 업종별 맞춤 필터: 뷰티, 푸드, 금융 등 업종과 분위기에 맞는 팔레트를 필터 검색으로 빠르게 찾아낼 수 있습니다.