간격 베리어블 등록 자료

섹션 0 - 피그마 파일 - 링크를 타고 가시면 파일을 복사하실 수 있습니다. 거기 보시면 Local variable을 눌러보시면 모든 primitive, theme, semantic을 색, 간격 모든 스타일 가이드라인에 들어가는 파일을 다 보실 수 있습니다. 또 궁금하시거나 필요한 파일이 있으시면 제 메일로 스크린샷 찍어서 보내주시면 배우시는게 유익하다고 생각하는 경우 다 보내드리도록 하겠습니다. 감사합니다.

디자인시스템 리뉴얼 관련

안녕하세요. 우선 질문 주셔서 정말 감사합니다. 저도 실무에서 성공과 실패의 경험이 있어서 우선 공유해드립니다. (정답은 아니니 참고만 하세요.) 우선 디자인 시스템 마이그레이션(Migration)은 정말 어려운 과제 중 하나입니다. 잘못했다가는 이도저도 아닌 상황이 될 수 있습니다. 제가 했던 방법을 소개하고 개인적으로는 이 방법을 추천합니다. 하지만 팀원들과 개발자들과 상의하에 결정하시기 바랍니다. 피그마에서 새로운 디자인 시스템 UI kit v2 디자인 파일을 만듭니다. 이렇게 하는 이유는 우선 기존 레거시 파일의 경우 예전 디자인 시스템과 연결되어 있고 이것을 전체 다 바꾸는 것은 어렵습니다. 개발의 경우 개발자와 상의하에 결정하시는 걸 추천드리며, 저의 경우는 새로운 베리어블이 포함된 개발쪽 스타일 파일을 새로 만들어서 컴포넌트를 나누어서 차근차근 연결했습니다. 주요 디자인 페이지를 모은 공용 피그마 파일을 하나 새로 만들어서 새로운 디자인 시스템 UI Kit v2와 모두 연결합니다. 이 경우는 오른쪽 메뉴에서 Paste replace(단축키: command shift R)을 눌러 쉽게 컴포넌트를 바꿀 수 있습니다. 이 과정을 완성되기 전까지는 기존 디자인 시스템을 사용해서 페이지를 관리합니다. 이렇게 하는 이유는 기존 레거시와 디자인 시스템을 유지함이 목적이고, 새로운 디자인 시스템과 이와 연결된 프로젝트 파일을 따로 생성해서 관리하기 위함입니다. 질문에 대한 답변이 되었으면 좋겠습니다. 이해가 안되시거나 궁금하신 점 있으면 알려주세요 감사합니다.

피그마에서 한번에 텍스트 수정하는 방법

안녕하세요, 정재희님. 오탈자를 한번 변경하는 방법은 현재 피그마에서도 내재되어 있습니다. 말씀하신대로 Ctrl+F를 누르신 다음 바꾸고 싶은 단어를 입력하신 다음 아래의 첫번째 그림처럼 필터에서 replace버튼을 누룹니다. 다음으로 바꾸고 싶은 텍스트를 입력 한후 모두 바꾸고 싶으면 Replace all을 하시면 됩니다. (사진) Find and replace 플러그인을 쓰셔도 한꺼번에 바꿀 수 있습니다. 하지만 이 기능은 위의 피그마 내재 기능과 동일합니다. 관련된 내용에 대해서 다른 분들도 요청이 있으면 영상을 자세하게 다뤄보도록 하겠습니다. 혹시 위의 방법 해보시고 안되시면 언제든지 답글 주세요!

디자인시스템 개발 적용 시 스토리북 연동

안녕하세요, wy님. 우선, 정말 훌륭한 질문 주셔서 감사합니다. 이 질문은 강의 범위를 벗어나지만, 저 역시 비슷한 경험이 있어 도움이 될 수 있을 것 같아 답변 드립니다. 스토리북은 디자이너가 실제 개발된 UI를 검토할 수 있는 공간으로, 개발자가 피그마에서 UI 키트를 보는 것과 비슷합니다. 이 곳에서 디자이너는 각 컴포넌트의 UI가 제대로 작동하는지 확인할 수 있고, 개발자들 역시 상호 검토할 수 있습니다. 또한, 문서화 작업을 진행하고 접근성을 검토할 수 있습니다. 스토리북을 어플리케이션의 최종 단계와 비교하자면, 마치 최종적인 디자인 시스템처럼 볼 수 있습니다. 스토리북의 필수성에 대한 질문에, 저는 개인적으로 이를 필수적이라고 생각합니다. 이는 디자이너와 개발자 간의 의사소통을 줄이고 UI의 품질을 향상시키는 데 큰 도움이 되기 때문입니다. 문제는 모든 사람이 필수라고 생각하지 않는다는 점입니다. 이럴 때는 설득이 중요해집니다. 현재 고민하는 문제를 정리하여 개발자들에게 왜 스토리북이 필요하고, 어떤 문제를 해결할 수 있는지를 설명하는 것이 중요합니다. 설득 과정이 어려울 수 있지만, 이 과정을 통해 더욱 뛰어난 디자이너로 성장할 기회가 될 수 있습니다. 그리고 말씀해주신 부분에 대해서도 심도 있는 강의를 준비해보도록 하겠습니다! 안그래도 설문조사를 받고 있는데 많은 분들이 요청하시더라구요! 도움이 조금이라도 되셨으면 좋겠습니다. 더 궁금하신 내용있으시면 언제든지 질문 주세요.!

프라이머리 버튼-디폴트에서 컬러 500이 아닌 600을 쓰는 이유

안녕하세요. 우선 정말 좋은 질문 해주셔서 감사합니다. 두가지 질문을 해주셨는데요. 모두 다 가능합니다. 600과 500모두 가능할 것 같습니다. 여기서 중요한 건 브랜드 컬러가 무엇인지와 색상 대비 측면에서 접근성을 위배되지 않느냐이겠죠. 이 측면에서 만약 브랜드 메인 컬러가 500이라고 한다면 쓰셔도 됩니다. 하지만 만약 브랜드 컬러가 접근성이 떨어지면 어떻게 해야할까요. 이 경우는 버튼 등 액션을 요구하는 컴포넌트의 쓰이는 컬러의 경우 브랜드 컬러에 근접하면서 접근성이 통과하는 유사 색으로 바꿔주시는 것을 권장합니다. (예로 브랜드 컬러가 400 언저리 근처인데, 접근성이 통과하지 못한다면 500쪽으로 가야겠죠) 네 위에 오퍼시티로 상태 구분하는 방법른 그렇게 하셔도 됩니다. 아마 머티리얼 디자인에서 그렇게 했던 것 같습니다. 하지만 개발자와 상의하에 결정하시는 것을 추천드리며, 아마 괜찮을 것 같습니다! 강의 들으시면서 궁금하신 점은 언제든지 남겨주세요! 더 궁금하신 내용 있으시면 글 남겨주게요.