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

dingo2님의 프로필 이미지
dingo2

작성한 질문수

피그마 배리어블을 활용한 디자인 시스템 구축하기

[실습] 타이포 그래피 스타일 플러그인으로 만들어보기

[컬러] https://swatchy.twosix.studio/

해결된 질문

작성

·

149

0

안녕하세요^^

우선 좋은 강의 준비해주셔서 감사합니다.
잘 들고 있어요.

궁금한점은요.

https://swatchy.twosix.studio/

에서 베이스 색상입력하면 제가 입력한 컬러가 (브랜드컬러여서)
400,500,600 중에 하나로 들어오고 나머지가 구성될줄 알았는데요.
피그마에서 .json파일 불러들오오니까 base 가 따로 존재
해버려서요.
제가 원하는 컬러의 색 변화가 아닌듯합니다.
어떻게 된건지 궁금합니다. (제가 이해 잘못하고 있을 수 있습니다.)

그리고 컬러 톤 50~ 900 사이를 생성하는 자동 프로그램이
다른 플러그인이나, 사이트 추천 부탁드리겠습니다.

감사합니다.

 




우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요.

 

  • 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다.

     

  • 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요.

     

  • 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다.

 

인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.

답변 2

1

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

dingo2님 질문 주셔서 감사합니다.

 

요즘은 컬러팔레트나 웹사이트가 워낙 많아서 한번 찾아보시면 원하시는 것을 쉽게 찾을 수 있으실 것입니다. 개인적으로 아래 웹사이트가 정말 도움이 많이 되었는데요.

그 이유는 이 웹사이트는 tailwindcss를 기반으로 색 단계를 정합니다.

  1. 익숙한 컬러 단계

보통 개발자분들이 tailwindcss를 많이 사용하시고 구글 머티리얼 2때문에 보통 색을 50~950 단계로 정하기에 굉장히 색의 형태를 제공합니다.

  1. 회사 브랜드 컬러 기반으로 적용

회사 브랜드의 컬러를 입력하면 색이 400~600 사이에 어디에 들어갈 것인지 정해주고 다른 색도 자연스럽게 적용해줍니다.

  1. 다양한 예시와 툴

     

    밑에 바로 보시면 UI 예시가 나와 있고 피그마 플러그인도 있으며, 색도 내보낼 수 있습니다.

 

https://uicolors.app/create

https://www.figma.com/community/plugin/1242548152689430610/tailwind-css-color-generator

 

한번 사용해보시고 안 맞으시면 말씀 해주세요. 필요하신 니즈에 맞게 다른 걸로 또 알려드릴게요.

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

볼드님,^^
친절하고 상세한 답변 너무너무~감사합니다!

1

안녕하세요, 인프런 AI 인턴입니다. dingo2님, 좋은 강의에 대한 피드백과 질문 해주셔서 감사드립니다.

swatchy.twosix.studio 에서 베이스 색상을 입력했을 때 예상과 달리 나머지 색상이 구성되는 이슈는 특정 플랫폼이나 툴에서 색상 범위를 자동으로 생성할 때 발생할 수 있는 일반적인 현상입니다. 피그마에서 .json 파일을 불러올 때, 입력한 베이스 컬러가 예상한 위치가 아닌 다른 위치에 할당되거나, 원하는 컬러 변화가 아닌 결과를 얻게 되었다면, 자동 생성된 컬러 팔레트가 기대한 결과와 다르게 설정된 것일 수 있습니다.

원하는 컬러 변화를 얻기 위해, 직접 컬러 팔레트를 조정하거나 다른 방법을 시도해볼 수 있습니다. 피그마내에서는 다른 플러그인을 사용해 보거나, 다른 외부 도구를 이용해 컬러 팔레트를 생성하는 방법이 있는데요. 아쉽게도 제공된 정보 내에서 직접적인 다른 플러그인이나 사이트 추천 정보는 없으나, UX/UI 디자인 과정에서 자주 사용되는 컬러 스키마 생성 툴을 살펴보시는 것을 추천드립니다. 예를 들어 Adobe Color, Coolors.co 등이 있으멀로 해당 사이트를 방문해 보시면 도움이 될 수 있습니다.

또한, 궁금증이 해결되지 않았다면, 해당 플랫폼의 문의 기능을 활용하거나 UX/UI 디자인 커뮤니티에 질문을 올려 도움을 받는 것도 좋은 방법입니다.

더 자세한 도움이 필요하시면 인프런 내 “1:1 문의하기”를 통해 질문해 주시기 바랍니다. 감사합니다.

dingo2님의 프로필 이미지
dingo2

작성한 질문수

질문하기