디자인시스템 작업중 생긴 여러 질문들 드립니다.

안녕하세요, Cloe님, 좋은 질문들 주셔서 정말 감사합니다. 사소한 질문도 언제든지 남겨주세요.1. 두 개의 Shadow를 사용하는 이유첫째, 효과(effect)를 사용하는 이유는 우리가 구현하는 UI가 현실과 최대한 비슷하게 보이도록 하기 위함입니다. 그중에서도 Shadow는 빛과 관련되어 입체감을 나타내는 중요한 역할을 합니다. 제가 준비 중인 기초 강의 내용을 참고하자면, 미술 시간에 원형 구에 빛이 비추었을 때를 떠올려보세요. 아래에 넓게 드리워진 그림자와 그 안에 반사광이 미치지 않는 매우 어두운 그림자를 기억하실 것입니다. Shadow를 구현할 때도 이와 마찬가지로, 빛이 비추면서 반사광에 의해 희미해진 Cast Shadow와 Occlusion Shadow를 함께 표현한 것입니다. 이 두 가지 개념이 두 개의 Shadow를 사용하는 주요 이유 중 하나라고 생각합니다.(사진) 2. Scrim, Overlay, Dimmed의 의미 Scrim, Overlay, Dimmed는 모두 모달 창과 배경 콘텐츠를 구분하기 위해 사용됩니다. 명확하게 구분하면 약간의 차이가 있겠지만, 역할 측면에서는 비슷합니다. 여러 디자이너들과 작업하다 보면 각자의 경험에 따라 다른 용어를 사용하는 경우가 많습니다. 특히 베리어블(variable)을 작성하거나 컴포넌트 네이밍을 정할 때도 마찬가지입니다. 이런 경우 저는 워크샵을 통해 용어를 통일하는 편입니다. • Status vs. State• Disable vs. Disabled, Enable vs. Enabled• Collapsed, Expanded vs. Open, Close• Collapse vs. Collapsed (수동태, 능동태 등)등등이러한 용어들을 함께 정리하고 문서화하는 것이 매우 중요합니다. 3. 레이어 네이밍 전략 네이밍의 경우, 제가 4월에 진행한 워크샵에서 진행한 다음의 방법이 매우 유용합니다.우리가 디자인을 할 때 보통 세 가지 단계가 있습니다: 아이디어, 디벨롭, 핸드오프. 1. 아이디어 단계: 레이어 이름에 신경 쓰지 말고 마음껏 만듭니다. 예를 들어 ‘Frame2212312’처럼 이름이 되어도 상관없습니다. 아이디어에 집중하는 것이 중요합니다.2. 디벨롭 단계: 이 단계에서는 깔끔하게 정리하면 됩니다. Figma의 AI Rename 기능을 사용하면 간단히 정리할 수 있습니다.3. 핸드오프 단계: 개발자들이 이해하기 쉽도록 의미 있게 정리합니다. 번거로울 수 있지만 ‘Container’, ‘Wrap’ 등 기본적인 용어를 사용하여 정리하면 됩니다. 너무 멋진 이름을 만들려고 하지 않아도 됩니다. 개발자분들은 레이어보다는 오른쪽의 프로퍼티에 더 관심이 많습니다. 4. 라이브러리 활용라이브러리를 사용할 때는 베리어블(토큰)을 만들 때 라이브러리의 용어를 참고하여 만드는 것을 추천드립니다. 하지만 무엇보다도 개발자분들과 상의하여 어떻게 구성할지 결정하는 것이 가장 중요합니다. 라이브러리의 장점은 이미 만들어져 있다는 것이지만, 서비스에 따라 수정이 필요할 수도 있습니다. 최대한 라이브러리와 동일하게 구현하거나 비슷한 라이브러리를 찾아 커스텀하는 것도 좋은 방법입니다. 제 강의에서 제공하는 33개의 컴포넌트를 만들어보시면 모두 구현하실 수 있을 것입니다. 5. 에이전시의 멀티 프로젝트 관리 에이전시에서 여러 프로젝트를 동시에 진행하는 경우, 초기에도 언급했던 Conde Nast의 방법이 유용할 것 같습니다. 화이트라벨 컴포넌트 라이브러리를 사용하여 스타일 가이드를 스왑하는 방식인데요. 제 강의에서 언급한 방법도 좋지만, 엔터프라이즈 계정은 40개의 모드를 지원하는 반면, 오거나이제이션 계정은 최대 4개까지만 지원합니다. 그래서 추천드리는 방법은 예를 들어, 디자인 시스템 관리를 프로젝트 5개를 동시에 진행한다면: • 화이트라벨 컴포넌트 라이브러리를 만들고,• 각 프로젝트마다 스타일 가이드를 생성하며,• 베리어블 이름을 동일하게 설정합니다.그런 다음 Apply Variable 플러그인을 사용하면 동일한 이름의 베리어블을 한꺼번에 스왑할 수 있습니다.이렇게 하면 프로젝트마다 컴포넌트 라이브러리를 만들 수 있습니다. 에이전시마다 다르지만 클라이언트가 만약 라이브러리와 스타일가이드를 요청하면 그 프로젝트 해당하는 것만 보내면 됩니다. 질문 주신 부분에 대해서 위와 같이 정리해보았는데, 혹시 추가 질문이 있으시면 언제든지 말씀해주세요. 볼드 드림.

컬러선택시 아이콘 컬러가 리스트에서 안보여요

안녕하세요, 아이콘에서 원하는 color/icon/interactive 베리어블이 나타나게 하려면 다음의 2가지 조건이 있어야하며, 이것이 충족되어 있는지 한번 꼭 체크해보시기 바랍니다. 아이콘의 경우는 면으로 처리 되어 있어야 합니다. 면으로 처리하는 과정은 새로운 아이콘 강좌에서 살펴보시면 됩니다.베리어블의 Scope가 Shape로 지정되어 있는지 확인 해보시기 바랍니다.두가지 조건이 만족하면 보이게 됩니다. 혹시 안되시면, 제 이메일로 파일 공유해주시면 한번 체크해드리도록 하겠습니다. boldplus.ux@gmail.com

Frame 생성 시, layer가 모이지 않음

안녕하세요, 정인님 질문 주셔서 감사합니다. 왼쪽에 보시면 오토레이아웃이 감싸진 레이어 Frame 1이 보이며, 제 생각에는 그 안에 원형 레이어가 있을 것 같습니다. 레이어 Frame 1에서 Enter/Return을 누르시거나 호버하시면 화살표가 나타날텐데, 한번 눌러보시기 바랍니다.만약 프로페셔널 계정이 아니시고 에듀 계정이시면, boldplus.ux@gmail.com으로 공유해주시면 제가 파일로 들어가서 체크해드리도록 하겠습니다. 감사합니다.(사진)

라이브러리 세팅과 연결 관련 질문드립니다.

안녕하세요, 개인적으로는 모든 스타일 가이드와 컴포넌트 UI Kit을 모두 만들어 보시는 것을 추천드립니다. 현재 스타일 가이드는 BOLD PLUS Foundation v1.2.1로 공유 해드리고 있으며, 이는 실습을 통해 만드신 것과 비교 및 참고를 위한 목적입니다. 사용하셔도 무방하지만 강의 실습을 통해 만드신 것을 사용하시는 것을 추천드립니다. UI 컴포넌트 라이브러리는 따로 보여주신대로 따로 파일을 만드셔야 합니다. 다른 수강생분들도 모두 그렇게 만들어서 사용하시고 계십니다. 만약 제가 만든 스타일 가이드를 쓰시려면, 보여주신대로 "Added"를 눌러서 추가를 하시면 되고, 이 경우는 29 styles, 125 variables가 보여지듯이 모두 스타일과 베리어블이기 때문에 컴포넌트 에셋(Assets)에는 아무것도 나타나지 않습니다. 컴포넌트 에셋에 채우기 위해서는 지금 만드신 UI Component library space에 컴포넌트를 만드시면 됩니다. 그러면 나타나실 것입니다. 어려우신 점 있으시면 언제든지 질문 주세요!

디자인 토큰이 뭔지 잘몰겠어요

안녕하세요, bbdba님강의 내용이 많이 어려우신 것 같네요. 사실 개념이 처음 접하시는 분들에게는 많이 어렵습니다. 저에게 온라인 챗을 요청해주시면 차근차근 잘 설명해드리겠습니다.충분히 그러실 수 있으며, 이 부분을 넘기시면 다음 강의부터는 수월해지실 것입니다. 그래도 너무 어려우시면 제가 인프런 관계자분에게 요청드려서 환불을 진행해보도록 하겠습니다.https://open.kakao.com/o/sG0GwNVg

완강이벤트

우선 정성스러운 수강평과 강의 설문 조사를 남겨주셔서 감사합니다. 강의를 통해 실무에서 필요한 내용들을 배워가시고 실제로 잘 적용하시기를 바랍니다. 완강 상품은 메일로 발송해드립니다. 제가 매번 확인 할 수 없어서 격주로 확인 후 보내드리고 있으며, 다음주 월요일 일괄 다 메일로 보내드립니다. 메일 안에는 링크가 있으며, 매번 업데이트가 되어서 가끔씩 시간 나실 때 찾아보시면 새로운 자료들이 있으실 것입니다. 이 업데이트는 따로 전달 드리지는 않습니다.감사합니다. 볼드 드림.

디스코드 채널에 들어가지지 않습니다.

안녕하세요, 정은희님 디스코드는 잘 되고 있고 현재 다른 분들도 접속을 하고 계십니다.혹시 비슷한 성함의 분이 어제 가입 되었다고 나왔는데, 혹시 안되시면 제 이메일로 메일 보내주시면 링크를 다시 보내드리겠습니다. boldplus.ux@gmail.com 감사합니다.

반응형 / 적응형 웹의 정의에 대한 질문이 있습니다.

it님 질문 주셔서 감사합니다.우선 수강하시는데, 혼동을 드려서 죄송합니다. 강의 자료를 체크해본 결과 저명한 디자인 자료에서는 애플의 웹사이트가 적응형 디자인의 예시로 언급되어 있습니다. 아래 자료는 디자이너 관점에서 맞추어져 있으며, 디자이너들이 모든 Breakpoint의 디자인을 만들어야 한다는 것을 강조합니다. 아티클 자료.https://www.wix.com/blog/responsive-vs-adaptive-designhttps://www.interaction-design.org/literature/article/adaptive-vs-responsive-design?srsltid=AfmBOoqxXh6216tJS39Psb9h7-zWaZPUK_FCG4UzdCQ1p2czrXaewNkh 하지만 말씀해주신 기준(기술적인 관점)에서는 애플 웹사이트는 반응형이 맞습니다. 미디어쿼리가 734px, 1068px, 1441px 등의 기준점으로 만들어져있기 때문입니다. 말씀해주신 대로 강의 전반적으로는 크게 중요한 부분은 아니지만 개발자와 협업 과정에서 정확한 정의가 필요한 만큼 강의를 빠르게 수정하도록 하겠습니다. 정말 감사합니다. 감사합니다.

피그마 라이브러리 스왑 질문

라이브러리 스왑은 제 강의에서는 다루지 않습니다.하지만 질문 해주신 부분을 보았을 때, 우선 문제를 해결하는 방법이 너무 복잡한 것 같습니다.(그리고 결과론적으로 해결도 되지도 않은 것 같습니다.) 해결하시고 싶으신 것은 그냥 A안의 로컬 컴포넌트를 B안으로 컴포넌트로 옮기고 싶은 것 같습니다. 이 경우 그냥 Ctrl X하시고 B에 가서 붙여놓으시면 됩니다.그러면 자동적으로 연결이 됩니다. 제가 말씀하신 부분에서 놓친 것이 있으면 알려주시기 바랍니다.말씀해주신 방법대로 저도 해보았는데, 안되네요. 왜 컴포넌트 스왑을 하려고 하시는지 잘 이해가 되지 않네요. 질문 있으시면서 더 답변주시면 감사하겟습니다.

아이콘 사이즈 변경

안녕하세요, 수진님. 연휴라 늦게 답변 드린점 죄송합니다. 우선 원하시는 상황이 아이콘은 24px 하나로 만들고sm 버튼에서 동일한 아이콘을 사용해서 16px로 작게md 버튼에서도 동일하게 사용하게 해서 24px로 만들고 싶은 것 같습니다. 이를 해결한 방법은 아래와 같습니다.1. 우선 버튼 보다는 아이콘을 전체 불린 하시면 모두 깨지게 만듭니다. 이경우 크기가 작아지거나 커져도 비율만큼 커집니다.다음에 아이콘의 내부 union의 Constrain을 상하좌우로 Scale로 바꿉니다.(사진) 이렇게 하시면 아이콘이 크기에 따라서 저절로 바뀌게 됩니다. 그리고 각각 버튼에 아이콘 넣고 테스트를 해보시기 바랍니다. 아마 잘 되실 겁니다. 한번 시도해보시고 어려움이 있으시면 저에게 파일을 공유해주시면 제가 한번 봐드리겠습니다.boldplus.ux@gmail.com으로 공유해주시면됩니다.(만약 프로페셔널이면 과금이 되기 때문에 비추천드립니다.)