라이브세션 시간

잘문 주셔서 감사합니다. 오후 8시 입니다!

영상 13분 10초 예제 따라하다 커서에 플러스 사인이 뜨지 않아요

제 생각에는 플러스 아이콘이 나타나지 않은 이유는 두가지일 것 같습니다. 첫번째는 벡터네트워크 모두에서 나와 있는 경우입니다. 이 경우는 클릭하셔서 벡터 네트워크 모드로 접속 후 라인 위에 커서를 두시면 플러스 버튼이 나타날 것입니다. 두번쨰는 다른 버튼을 누르고 있는 경우입니다. 이 경우 가끔 인식을 하지 못하는 경우가 있는데, 그냥 커서만 위에 두시고 다른 키보드 버튼을 누르시지 마시기 바랍니다. 질문을 지우신 걸로 봐서는 해결하신 걸로 보이지만, 그래도 이렇게 코멘트 남겨드립니다. 감사합니다.

피그마 프로페셔널 기능활용 문의

안녕하세요, 제가 새소식으로 공지 드렸는데, 이번에 피그마 에듀케이션 정책이 변경되었습니다. 정확히는 피그마에서 에듀케이션 계정 정책을 바꿔서 더이상 온라인 강의는 안된다고 하고 부트캠프와 학교 계정만 가능하다고 하네요: 강의에서 언급한 부분을 수정하지 않아 혼동을 드린 것 같습니다. 이 부분은 강의 내에서 삭제하도록 하겠습니다. 더 궁금하신 부분 있으면 질문 주세요boldplus.ux@gmail.com 으로 연락주시기 바랍니다. 감사합니다

64강의 듣고 있는데요~

안녕하세요, 93225님 모드 활용에 해당하는 64강까지 수강해 주셨군요! 이제 거의 끝이 보이네요. 정말 수고 많으셨습니다.말씀해주신 부분을 확인해 보았고, 아래 강의를 참고해 주시면 도움이 될 것 같습니다. 57강: 상단에 위치하는 글로벌 네비게이션(Global Navigation/Header)→ 약 23분 지점에서 제가 햄버거 메뉴(Hamburger menu)를 추가하고 있습니다. 한 번 확인해 보시고, 혹시 또 궁금한 부분이 있으시면 언제든 말씀해 주세요. 감사합니다.

포커스링 묻히는거 처리하는 방법

안녕하세요, 런던 베이글님.우선 피그마 상에서는 할 수 있는 방법이 없습니다. 오토레이아웃을 씌우면 레이어 위치에 따라서 우선 순위가 생기기 때문입니다. 제가 보통 쓰는 트릭 중에 하나는 현재 강의에서는 Tab의 개별 아이템의 베리언츠 selelcted=false, Default의 배경이 흰색으로 적용되어 있는데, 이 배경을 제거합니다. 그리고 전체 Tab에 배경에다가 흰색을 넣는 방법입니다. 이렇게 하면 밑에 이미지 처럼 잘리지 않습니다. (사진) 한번 시도해보시고, 안되시면 말씀해주세요. 그리고 또 다른 인터랙션이 조합되면 어떻게 하나요? 라고 하실 수 있는데, 인터랙션은 한번에 하나만 이루어집니다. 첫번태 탭에서 호버가 일어나는데, 두번째 탭에서 포커스는 커서가 두개가 아닌 이상 일어날 수 없는 비현실적인 일이겠죠? 궁금하신 점 있으시면 언제든지 질문주세요.감사합니다.

아이콘 버튼 제작 (selected) 질문

안녕하세요, askare 님 👋 결론부터 말씀드리면 selected 상태는 보통 공통 스타일을 하나만 정의해 두고, 타입이나 스타일별로 따로 제작할 필요는 없습니다. (베리어블에는 있어서 사용하셔도 되긴 합니다만 구지 안하셔도 됩니다.)즉, 강의에서처럼 selected는 하나만 두고 나머지는 selected=false 상태를 기준으로 제작하셔도 충분합니다. 사실 selected는 본질적으로 state(상태) 중 하나입니다.다만 hover나 press처럼 순간적인 인터랙션 상태가 아니라, 구조적으로 의미를 가지는 상태라서 바깥으로 분리해 관리하게 된 것입니다.또한 다른 컴포넌트에서도 유사하게 selected를 활용하기 때문에 일관성을 위해 따로 빼두었습니다.selected 역시 경우에 따라 모든 상태(hover, focus, disabled 등)를 가질 수는 있습니다.하지만 disabled 상태에서 hover가 적용되지 않듯, 꼭 모든 조합(selected-hover 등)을 따로 정의하지 않아도 괜찮습니다. 더 궁금하신 부분 있으면 질문주세요.

강의 영상 질문

askare님, 영상 업로드 과정에서 문제가 있었던 것 같습니다.방금 바로 영상을 교체하였습니다. 문제가 있는 부분을 빠르게 알려주셔서 감사합니다.시청하시는데 흐름을 끊게 해드려 죄송합니다. 감사합니다.볼드 드림

Icon 버튼 Inverse와 관련하여 문의드립니다.

질문 주셔서 감사합니다. 질문을 꼼꼼하게 적어주셔서 답을 찾는데, 정말 도움이 되었습니다. 저도 영상을 다시 보면서 확인해 보았는데요, 하나씩 정리드리겠습니다. Q1. 24px과 48px 예시에서 색상이 다르게 적용된 이유아이콘 placeholder는 항상 기본 아이콘 색상과 동일하게 맞추면 좋습니다. 그 위에서 컴포넌트 내부 인스턴스 색상을 override 하여 상황에 맞게 바꾸는 거죠. 질문에서는 24px 색상을 맞춰주셨다고 했는데, 실제 강의에서는..24px 예시는 inverse(흰색) 으로 변경48px 예시는 success(초록색) 으로 변경 이렇게 하면 내부 레이어 이름이 동일할 경우, 컴포넌트 인스턴스 내에 아이콘이 다른 걸로 바뀌어도 색상은 동일하게 따라옵니다. Placeholder 컴포넌트 아이콘 색상 = 기본 색상모든 아이콘 컴포넌트 = 기본 색상으로 시작컴포넌트 내 24px 인스턴스 = inverse로 override컴포넌트 내 48px 인스턴스 = success로 override이 구조라야 instance swap 후에도 정상적으로 색상이 따라옵니다. Q2. 왜 이 순서대로 해야 하나?저도 여러 시행착오를 겪어 보았는데, 이 방식이 가장 안정적이고 관리하기 쉽습니다. 다양한 방법이 있긴 하지만, 이게 Figma 커뮤니티와 튜토리얼에서도 권장되는 방법입니다. 다른 방법은 오히려 더 복잡하고 관리가 어렵습니다. 다른 방법에 대한 것은 영상 보다는 블로그 글로 나중에 안내해드리겠습니다. Q3. Placeholder와 24/48px 컴포넌트 관계제가 설명을 더 친절하게 했어야 했는데요.icon placeholder = 베이스 아이콘 컴포넌트이 내부 프로퍼티는 24px, 40px 이렇게 나누고 이거는 단순히 필요해 따라 스위칭하기 좋도록 만들었습니다. 반드시 이렇게 만들 필요는 없습니다. 24px/40px 컴포넌트 = 버튼 같은 상위 컴포넌트이 내부 레이어 중에 icon placeholder 인스턴스가 존재합니다. 이는 이 상위 컴포넌트가 인스턴스로 바뀌었을 때, 다른 아이콘으로 변경할 수있도록 도와줍니다. 즉, placeholder가 기본을 잡아주고, 그 안에 들어간 인스턴스들이 swap될 때도 이 속성을 따라가게 됩니다. Q4. Reset all changes 기능 역할이 기능은 인스턴스에 적용된 override를 모두 초기화해서 원래 placeholder 기본값으로 되돌립니다.저의 경우 보통 두 가지 상황에 사용합니다:인스턴스가 잘못 바뀌어서 원래 컴포넌트와 똑같이 돌리고 싶을 때컴포넌트 변경이 일어났는데, 인스턴스가 이를 제대로 반영하지 않았을 때 강의에서는 제가 아이콘 색을 바꿨는데 의도대로 적용되지 않으면, placeholder에서 색을 다시 수정하고 돌아왔을 때 reset을 눌러야 정상적으로 따라오게 됩니다. Q5. Inverse 적용 문제와 과정 필요성이 과정은 위에서 세팅만 제대로 하면 문제가 생기지 않습니다. Override를 제대로 이해하지 못하고 사용하시면 영상에 나오듯이 매번 아이콘 스왑하고 Inverse값을 적용해주어야 합니다. 제가 강의에서 언급한대로 따라하시면, 이 과정을 순조롭게 이루어집니다. 도움이 되셨으면 감사합니다. 질문에 대한 답이 모호하거나 팔로우업 질문이 있으시면 언제든지 남겨주세요.감사합니다!

다크모드 적용시 문제가 있어 질문 드립니다.

안녕하세요, j_blasem님. 이 문제는 주로 외부 베리어블을 가져다 쓴 경우에 발생합니다.특히, 외부 베리어블에 모드(Mode) 가 설정되어 있는 경우에 자주 생기곤 합니다. 보통 모드를 변경했는데 값이 바뀌지 않는 상황은 해당 값이 제대로 적용되지 않았기 때문입니다. 제 개인적인 생각으로는 흰색이 #fff 값으로 바뀌었거나, 혹은 Foundation 2025 색상으로 덮어씌워져서 발생한 것으로 보입니다. 이 경우에는 결국 하나씩 확인하며 현재 사용하는 베리어블로 교체해주는 방법밖에 없습니다. 가능한 해결 방법Apply Variable 플러그인 활용이름이 동일하다면 로컬 베리어블로 자동 매칭하여 교체해줍니다.(단, 색상 값만 적용되어 있을 경우에 한합니다.)모드 탐색하기페이지 → 섹션 → 컴포넌트 순서대로 내려가면서 모드를 확인해보세요.이 과정에서 Foundation 2025 베리어블을 찾아낼 수 있습니다. 시간이 다소 걸리지만 확실한 방법입니다.Selection Color 사용하기색상을 변경할 때 Selection Color 기능을 사용하면 전체를 한 번에 교체할 수 있습니다.예를 들어 Foundation 2025 베리어블을 찾았는데 해당 라이브러리가 연결되어 있지 않다면, 색상을 직접 검색해도 찾을 수 없습니다. 이 경우는 하나씩 로컬 베리어블 색상으로 다시 연결해주셔야 합니다.시도해보시고 알려주세요. 감사합니다.

Rename layers

안녕하세요, 안냐세요님. 제 생각에는 현재 안냐세요님의 피그마 계정에는 AI 기능이 아직 활성화되지 않은 것 같습니다.제가 촬영했을 당시에는 제 피그마 계정에서 AI 기능이 활성화되어 있었고, rename layer를 입력하면 아래와 같이 표시되며, 지금도 동일하게 동작합니다.(사진) 이 경우, 툴바 → Plugin & Widget 메뉴로 들어가서 Layer Renamer 플러그인을 사용해보시는 것도 추천드립니다. 완벽하게 깔끔하게 나오지는 않지만, 기본 Frame123123 같은 이름보다는 조금 더 나은 결과를 얻을 수 있습니다. 🔗Layer Renamer 플러그인 링크 빠른 시일 내에 안냐세요님의 피그마 AI 기능이 활성화되기를 바랍니다 🙏볼드 드림.