Inflearn brand logo image

인프런 커뮤니티 질문&답변

askare님의 프로필 이미지
askare

작성한 질문수

디자인 시스템 - 스타일 파운데이션

색상 파레트 제작 시, 색상 배합 방법 문의

작성

·

56

·

수정됨

0

안녕하세요

컬러 파운데이션 제작 (컬러 파레트 색상 정의) 질문 드립니다.

브랜드 컬러로 프라이머리 컬러, 세컨더리 컬러가 있을 경우, 프라이머리 컬러를 고려한 시스템 컬러, 뉴트럴 컬러, 액센트 컬러 각각 파레트 생성을 위한 컬러 배합 노하우가 궁금합니다!

머터리얼 컬러 빌더 도구도 시도해보았으나 아직 테스트 해 본 정도입니다.

피그마 플러그인 사용 시, 제가 지정한 프라이머리 컬러를 고려한 시스템 컬러, 뉴트럴 컬러를 생성할 수 있는 플러그인은 찾지 못하여 문의 드립니다!

프라이머리 컬러를 반영하여 컬러 스타일 가이드를 완성할 수 있도록 시스템 컬러, 액센트 컬러, 뉴트럴 컬러 등을 생성하는 효과적인 방법이 있는지 궁금합니다.

답변 1

0

DX Lab님의 프로필 이미지
DX Lab
지식공유자

제 경우에는 기존에 만들어놓았던 UI 디자인 페이지 일부를 가져와서
프라이머리 컬러, 세컨더리 컬러 등을 직접 적용합니다.
그렇게 해서 1차적으로 느낌을 보는데요.
전체 프레임을 선택한 상태에서 피그마 디자인 패널의 Selection colors에서 일괄적으로 색을 바꿔서 조정해봅니다.

만약 기존에 만들어놓은 UI 디자인 페이지가 없거나 적절하지 않다면,
v0에서 임의로 만들거나, 
피그마 AI 기능인 First Draft로 원하는 UI 디자인을 뽑은 후에 색을 적용해봅니다.

이 과정을 도와주는 툴들이 UIcolors, Tailwind Ink, Realtime Colors, radix ui 등
다양하게 있으나 실사용하기에는 조금 부족해서 추천드리기는 힘들 것 같습니다.

말씀하셨던 컬러 배색에 대한 노하우는 추후에 다른 개별 컨텐츠로 따로 다뤄야 될만큼의 이야기가 될 것 같습니다.

컬러 배색 시 방법론 측면에서 참고할만한 아티클이 있어 공유드립니다.
배색 시 도움이 될만한 내용이 꽤 있습니다.
해당 아티클 링크

그리고 사용자가 입력한 프라이머리 컬러를 기준으로 다른 시멘틱 컬러 배색을 추천해주는 툴이 있어서 공유드립니다.
colorffy UI Palette Generator 인데요.
머터리얼 컬러 빌더 만큼 디테일하지는 않지만, 초기 배색 시 참고하면 좋을 것 같습니다.

askare님의 프로필 이미지
askare
질문자

상세한 답변 주셔서 감사합니다!!

추천해주신 자료 잘 참고하겠습니다!!

컬러 배색 노하우도 강의를 만들어 주시면 좋겠어요!! 꼭 수강하고 싶습니다!!

도움주셔서 정말 감사합니다!!

DX Lab님의 프로필 이미지
DX Lab
지식공유자

좋은 말씀 남겨주셔서 감사합니다
제 답변이 조금이나마 도움이 되셨다면 정말 다행입니다.
컬러 배색 강의에 대한 좋은 아이디어도 함께 나눠주셔서 감사합니다.
말씀 주신 내용은 강의 제작 계획에 꼭 반영해보겠습니다.
앞으로도 궁금한 점이 있으시면 언제든지 편하게 말씀 주세요!
다시 한 번 감사드립니다.

askare님의 프로필 이미지
askare

작성한 질문수

질문하기