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

안녕하세요, 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