[19강]시맨틱 베리어블 - 폰트

안녕하세요, 이선영님. 갑자기 밑줄이 생겨서 많이 당황하셨을 것 같습니다. ㅠ 밑줄이 그어져 있는 것은 연결이 되지 않는 것을 의미합니다. 즉, 찾지 못한다는 것인거 같습니다. 타이포그래피 베리어블 중 폰트, 굵기에 쓰이는 텍스트 베리어블의 경우에는 스펠링과 띄어쓰기 굉장히 민감합니다. 예를 들어, Inter라고 해야하는데, Intel 이렇게 적혀 있으면, 아예 찾지 못합니다.(즉 밑줄이 생기죠.)또한 Pretandard에서 Semibold라고 해야하는데, Semi-bold 이렇게 적혀 있으면, 아예 찾지 못합니다. (밑줄이 생깁니다ㅠ) 한번 로컬 베리어블에서 스펠링, 띄어쓰기에 문제가 있는지 살펴보시고 그래도 계속 문제가 있으면, boldplus.ux@gmail.com에 파일로 초대해주시면 제가 직접 파일에 가서 도와 드리도록 하겠습니다. 감사합니다.볼드 드림.

25강.컴포넌트 만들기 전 라이브러리 세팅하기

허허헌님 안녕하세요 😊 보통 apply variable을 사용할 때는 모든 컬렉션이 보여야 하는데, 다른 컬렉션이 나타나지 않는 이유는 저도 확실히는 모르겠습니다. 다만, 컬렉션 앞에 Semantic이 붙어 있는 점으로 보아 해당 컬렉션만 필터링되어 보이는 것이 아닐까 조심스럽게 추측해봅니다. 하지만 실제 사용에는 큰 문제가 없어 보입니다. 강의에서 apply variable 사용 예시는 기존 템플릿의 변수와 제 UI 키트가 연결되어 있어 생긴 문제를 보여주기 위함인데, 허허헌님께서는 단순히 semantic color만 변경하시면 되는 상황이기 때문에, 현재처럼 semantic 컬러가 잘 보인다면 문제 없이 사용하실 수 있을 것 같습니다. 또한 강의 예시에서는 Source Pro 폰트를 사용했지만, 앞으로 강의를 제작하실 때에는 Pretendard 폰트를 사용해 주시면 더 좋을 것 같습니다. 강의를 들으시다가 궁금한 점이 생기면 언제든지 편하게 질문 주세요.더 자세한 도움이 필요하시면 Figma 파일을 저와 공유해 주셔도 좋습니다. 제가 직접 파일을 확인하고 도와드릴 수 있습니다.(boldplus.ux@gmail.com) 끝까지 강의 완주하셔서 Figma 실력도 쑥쑥 늘고, 디자인 시스템에 대한 이해도 함께 깊어지길 바랍니다! 🙌

프로그레스 바 애니메이션이요~

안녕하세요, 93225님. 보내주신 스크린샷을 확인해본 결과, 현재 애니메이션은 잘 셋업이 되어 있는 것으로 보입니다. 몇 가지 제 추측으로는, 잘못된 부분을 재생하신 것이 아닐까 생각되지만, 이는 어디까지나 제 개인적인 추측일 뿐입니다. 현재 제가 도와드릴 수 있는 방법은 다음과 같습니다. 관련된 파일 일부를 아래에 첨부해드렸습니다. 다운로드하셔서 현재 작업 중인 파일과 비교해보시고, 필요하시다면 해당 부분을 복사하여 사용해보시기 바랍니다. 다만, 이 경우 변수명이 중복될 수 있어, 나중에 혼동이나 오류가 생길 수 있으니 유의해주시기 바랍니다.https://drive.google.com/file/d/1kDVIuB9zug7C2STu3PckvBqT2H_oT-hl/view?usp=sharing 만약 그래도 문제가 해결되지 않는다면, 현재 사용 중인 파일이 에듀 계정에 있다면 저를 해당 파일에 초대해주시면 보다 직접적으로 도와드릴 수 있습니다. 제 이메일 주소는 boldplus.ux@gmail.com 입니다.감사합니다. 볼드 드림.

변경 기능 관련 강의 업데이트

안녕하세요, 심심이님! 😊현재 강의는 1, 2월에 촬영된 최신 UI3가 반영된 강의입니다.혹시 이번 Config에서 변경된 오토레이아웃 그리드에 대해 문의하신 것이라면, 현재로서는 해당 부분에 대한 강의 업데이트 예정은 없습니다. 변경된 부분이 매우 작은 부분이라 전체 강의를 재촬영해야 하는데, 전체 내용이 바뀐 것이 아니라서 현실적으로 어려움이 있습니다.대신 오토레이아웃의 새로운 업데이트에 대해 제가 직접 사용해보고, 변경된 점과 활용 방법에 대한 추가 강의 영상을 조만간 준비해드리도록 하겠습니다! 기다려주시면 감사하겠습니다. ✨궁금하신 점이 있으시면 언제든지 문의해주세요!감사합니다.볼드 드림.

섹션5 아이콘 색상 변경 질문입니다.

작성자 분이 안계셔서 답변을 안드렸는데, 인프런 인턴이 자세하게 설명해주어서 그것을 따라하시면 됩니다. 궁금하신 부분 있으면 언제든지 질문 주세요!

다크모드의 색상은 반드시 primitive에 정의된 색으로만 진행해야하나요?

darkmoon90님 안녕하세요, 정말 좋은 질문 주셔서 감사합니다. 디자인에서 반드시라는 것은 없는 것 같습니다.규칙은 있지만 만약 말씀하신대로 완성도가 떨어진다면, 당연히 바꿔야 겠죠. 개발자분들과 상의하에 임의에 컬러를 바로 가져오셔도 괜찮습니다. 대신 도큐먼트와 왜 그렇게 했는지 기술을 해놓으면 됩니다. 그래야지 다른 작업자가 와서도 왜 그렇게 했는지 의도를 알 수 있기 때문입니다. 만약 다크모드 전용 색상이 따로 있고, 동일한 컬러색상 군에 완전히 다른 색이라고 한다면 개인적으로 따로 primitive에도 담아두면 관리하기 좋을 것 같습니다.예를 들어, pink_light, pink_dark 이렇게 해서 50~900 두시고 primary_text 라이트모드에서는 pink_light 쪽을 다크모드에서는 pink_dark를 선택하는 방법이 될 것 같습니다. 그리고 반드시 primitive의 컬러 스케일도 숫자형태로 하실 필요는 없으시고 darker, lighter 이런식으로 그레이딩을 하셔도 됩니다. 더 궁금하신 부분 있으면 말씀해주세요. 감사합니다!

병합된 셀 표현은 어떻게 표현하는게 좋을까요?

안녕하세요, darkmoon90님우선 정말 좋은 질문 주셔서 감사합니다.강의에서 제공된 테이블 컴포넌트의 경우는 컬럼별로 짜져 있어서 이 경우에는 만약 수평으로 병합된 셀을 표현하고 싶으시면 이 컬럼 컴포넌트를 활용하는 것은 다소 어려울 것 같습니다. 이 경우에는 셀을 컴포넌트 기본 컴포넌트 베이스로 해서 복합 컴포넌트로 만드시지 마시고 그냥 레이어 상태에서 만드는 것이 나중에 수정하실 때 편하실 것 같습니다. 가끔은 모든 것을 컴포넌트로 만들다보면 수정할 때 머리가 아프기 때문에 가장 기본이 되는 것만 컴포넌트로 만드시고 복잡도가 올라가는 경우(기본 테이블이 아닌)에는 레이어로 두시는 것도 나쁘지 않을 것 같습니다. 이 부분에 대해서 관련자료나 팁을 발견하게 되면 여기에 나중에 공유해 드리겠습니다.감사합니다. 볼드 드림.

라벨이나 chip에 열 개 정도 컬러가 들어갈 때

안녕하세요, Wony님 우선 제가 어떤 현재 일하시는 서비스에 대해 구체적으로 몰라서 감히 조언드리기는 어려울 것 같지만, 우선은 한 곳에다가 다 모아둘 것 같습니다. 하지만 갯수가 늘어난다면 찾기가 굉장히 어렵겠죠. 이 경우는 MECE 방법대로 잘게 의미론적으로 잘라볼 수 있을 것 같습니다. 예를 들어,🛒 이커머스에서의 MECE 기반 칩 컬러 분류이커머스 플랫폼에서는 제품의 다양한 속성을 칩 형태로 표시하는 경우가 많습니다. 이러한 칩들을 MECE 원칙에 따라 분류할 수 있습니다. (MECE는 구글에 더 검색해서 찾아보실 수 있습니다. )1. 제품 카테고리별 분류• 예: 의류, 전자제품, 가구 등• 각 카테고리에 고유한 칩 컬러를 지정하여 시각적으로 구분합니다.2. 가격대별 분류• 예: 저가형, 중가형, 고가형3. 브랜드별 분류• 예: 브랜드 A, 브랜드 B, 브랜드 C 이러한 분류는 상호 배타적이며(중복되지 않음), 전체 포괄적(모든 제품을 포함)인 MECE 원칙을 따릅니다. 그래서 베리언츠 프로퍼티에 색 자체로 구분해서 한 곳에 모아두는 방법도 있을 것 위의 예시 처럼 색의 활용방안에 따라 분리해볼 수도 있을 것 같습니다. 한 번 몇가지를 만들어보고 팀원들과 상의하에 결정하시면 좋을 것 같습니다. 도움이 되셨으면 감사합니다.

Design Kits관련 질문.

안녕하세요, 강의에서도 언급했는데 디자인 킷대로 가셔도 됩니다.여러 프로덕트와 상황에 따라 달라질 수 있는데, 우선 단일 프로덕트와 적은 팀원이 일한다면 디자인킷으로 한 파일 안에 스타일 파운데이션과 컴포넌트를 같이 넣어두고 관리하는게 관리 측면에서 더 편할 수 있습니다. 감사합니다.

아이콘

잘하셨습니다. 원래 Union을 하면 그 아래에 Union을 한 모든 레이어가 있습니다. 이 경우는 아래 레이어(원본)을 움직여서 수정할 수 있는 장점이 있습니다.만약 이것을 없애버리고 싶으시면 Flatten Selection(Option + Shift + F)하시면 됩니다.