DX Lab

안녕하세요, 이은종님! 질문 주셔서 감사합니다 ☺ 패딩값이 홀수여도 괜찮습니다. 말씀하셨듯이 패딩은 상하/좌우에 홀수를 주어도 전체의 값이 짝수가 될 수 있죠. 버튼 컴포넌트의 경우 값이 자연수라면 보편적인 디스플레이에서 픽셀이 깨지지 않기 때문에 꼭 4의 배수나 8의 배수가 아니어도 괜찮습니다. &nbsp;1. 버튼 컴포넌트 폰트에 행간 적용 👉 행간 값은 되도록 짝수를 추천드립니다. 대부분의 디자인 시스템에서 폰트의 행간 값을 px로 변환할 시 짝수가 되도록 맞춥니다. 이렇게 행간을 짝수로 맞춰놓으면 전체적으로 짝수 레이아웃을 유지할 수 있습니다.[예시 이미지] <a target="_blank" rel="noopener noreferrer nofollow" href="https://atlassian.design/foundations/typography">https://atlassian.design/foundations/typography</a><img src="https://cdn.inflearn.com/public/files/posts/c44700c8-6059-45f1-a84c-c0adbe36166f/70cfd8bf-b25b-46a8-ba5c-6d6fe5b4a3a4.png" media-type="img" alt="image.png" title="image.png" width="643" height="324"> 2. 버튼 컴포넌트 패딩 값에 짝수 적용 👉 홀수 사용해도 됩니다. 자연수라면 괜찮습니다.

버튼 컴포넌트 제작시 패딩 값 질문

안녕하세요 askare님 ☺ 질문 주셔서 감사합니다!말씀해주신 내용만으로는 정확한 상황을 파악하기는 조금 어려우나, 남겨주신 설명을 바탕으로 유추해보았을 때, 아래와 같은 경우일 수 있을 것 같아 몇 가지 자료를 함께 공유드립니다. <ul><li>자료 1 : Figma에서 SVG를 깔끔하게 내보내는 방법 <a target="_blank" rel="noopener noreferrer nofollow" href="https://levimcg.com/blog/more-control-over-figma-svg-exports/">https://levimcg.com/blog/more-control-over-figma-svg-exports/</a></li></ul>&nbsp;<ul><li>자료 2 : SVG 사용 시 fill-rule 문제에 대한 자세한 설명 <a target="_blank" rel="noopener noreferrer nofollow" href="https://medium.com/thoughts-overflow/the-mystery-of-the-disappearing-holes-a-gripping-tale-of-using-svg-in-android-442f6035a452">https://medium.com/thoughts-overflow/the-mystery-of-the-disappearing-holes-a-gripping-tale-of-using-svg-in-android-442f6035a452</a></li></ul> 도움이 되셨으면 좋겠습니다. 감사합니다!

플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의

제 경우에는 기존에 만들어놓았던 UI 디자인 페이지 일부를 가져와서 프라이머리 컬러, 세컨더리 컬러 등을 직접 적용합니다. 그렇게 해서 1차적으로 느낌을 보는데요. 전체 프레임을 선택한 상태에서 피그마 디자인 패널의 Selection colors에서 일괄적으로 색을 바꿔서 조정해봅니다. 만약 기존에 만들어놓은 UI 디자인 페이지가 없거나 적절하지 않다면, v0에서 임의로 만들거나,  피그마 AI 기능인 First Draft로 원하는 UI 디자인을 뽑은 후에 색을 적용해봅니다. 이 과정을 도와주는 툴들이 <a target="_blank" rel="noopener noreferrer nofollow" href="https://uicolors.app/generate/9ca863">UIcolors</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://tailwind.ink/context">Tailwind Ink</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.realtimecolors.com/">Realtime Colors</a>, <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.radix-ui.com/colors/custom">radix ui</a> 등 다양하게 있으나 실사용하기에는 조금 부족해서 추천드리기는 힘들 것 같습니다. 말씀하셨던 컬러 배색에 대한 노하우는 추후에 다른 개별 컨텐츠로 따로 다뤄야 될만큼의 이야기가 될 것 같습니다. 컬러 배색 시 방법론 측면에서 참고할만한 아티클이 있어 공유드립니다. 배색 시 도움이 될만한 내용이 꽤 있습니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://designlab.com/blog/sketch-tips-building-great-color-palettes?utm_source=chatgpt.com">해당 아티클 링크</a> 그리고 사용자가 입력한 프라이머리 컬러를 기준으로 다른 시멘틱 컬러 배색을 추천해주는 툴이 있어서 공유드립니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://colorffy.com/ui-palette-generator">colorffy UI Palette Generator</a> 인데요. <a target="_blank" rel="noopener noreferrer nofollow" href="https://material-foundation.github.io/material-theme-builder/">머터리얼 컬러 빌더</a> 만큼 디테일하지는 않지만, 초기 배색 시 참고하면 좋을 것 같습니다.

DX Lab

Posts