선생님 섹션 2의 색상 설명 자료는

안녕하세요, 전체 피피티 파일은 제공 드리지 않고 있습니다. 이메일로 필요하신 부분 보내주시면 도움 드리도록 하겠습니다. 또한 완강 하시면 요약본을 드리긴 한데 미리 필요하시면 알려주세요! boldplus.ux@gmail.com

반응형 웹 디자인

안녕하세요, Semin Hur님,모바일 First?저는 현재 회사에서 프로덕트가 두 개인데, 그 중 하나는 모바일 사용자가 90% 이상이라 모바일을 먼저 작업한 후 데스크탑으로 확장합니다. 디자인 복잡도도 높지 않아 모바일 퍼스트가 자연스러운 선택이었습니다.일반적으로 모바일 퍼스트를 권장하지만, Semin Hur님도 아래 두 가지 기준으로 시작점을 결정해 보시길 추천드립니다.사용자 비율 — 어떤 디바이스 사용자가 더 많은가?디자인 복잡도 — 레이아웃이 얼마나 복잡한가?예를 들어, 대시보드가 포함된 SaaS 프로덕트에서 사용자의 99%가 데스크탑 유저라면 굳이 모바일부터 시작할 필요가 없습니다. 모바일은 후순위에 두거나, 개발 리소스 상황에 따라 아예 제외하는 판단도 충분히 합리적입니다. 피그마 베리어블 모드, 어디까지 활용 방안베리어블 모드로 모든 반응형 스펙을 통제하는 것은 현실적으로 쉽지 않습니다. 개인적으로는 이렇게 접근하시길 권장드립니다.타이포그래피 → 베리어블 모드 적극 활용 (일관성 확보에 효과적)간격→ 큰 단위부터 먼저 잡고, 세부 간격은 별도로 관리모든 반응형 스펙을 베리어블 패널 안에 넣으려 하면, 오히려 디자인의 창의적 자유도가 제약될 수 있습니다. 반응형 디자인의 목적은 모드를 바꿔서 반응형을 자동으로 완성하는 것이 아니라, 기기 마다 얼마나 유연하게 바뀌는지가 중요하기 때문입니다. 그래서 이를 위한 그만큼의 스펙이 미리 정의되어 있어야 합니다. 그래서 저는 강의에서 제안하는 큰 구조를 먼저 잡고, 디테일은 유연하게 가져가시는 것을 추천드립니다. 볼드 드림.

액션 아이콘 컴포넌트 질문

안녕하세요, 좋은 질문 주셔서 감사합니다.사실 말씀해주신 선택은 팀원간의 합의하에 또는, 프로덕트의 복잡도, 작업자의 성향에 따라 다를 수 있을 것 같습니다. 저는 개인적으로 게시판 마다 따로 만드는 편이고, 선택된 경우도 베리언츠로 따로 분리해놓습니다. 이렇게 하면 구분하기도 편하기 때문입니다. 정리하자면, 저라면 3게시판이 있으면 각 게시판 마다 만들고, 선택된 것은 베리언츠(Boolean 형태)로 선택된 것/안된 것 따로 만들어서 말씀하신 아이콘이 바뀌는 것을 방지 하도록 할 것 같습니다.감사합니다. 볼드 드릠.

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

타이포가 문제가 있어서 그런 것 같습니다. 불린에 해당하는 True, False라고 하시면됩니다. Ture -> True또는 true, false 이렇게 소문자로 하셔도 되고, on, off 또는 ON, OFF 이렇게 하셔도 무방합니다. 시도해보시고, 안되시면 알려주세요. 감사합니다.

스피너 아이콘 크기 질문

혹시 파일을 공유 해주실 수 있을까요?제 생각에는 아이콘 비율이 줄어들면서 생기는 문제인 것 같습니다. 16px * 16/24를 하면 10.66666이 나오기 때문입니다. 혹시 스피너 아이콘 레이어를 선택한 뒤 오른쪽 패널에서 W/H 옆 자물쇠 아이콘을16 × 16으로 직접 입력해서 고정하거나, 컴포넌트 내부에서 Constraints를 Fixed로 설정해보실 수 있을까요? 그렇게하면 비율대로 바뀌는 것이 아니라 고정될 것 같습니다. 파일은 boldplus.ux@gmail.com으로 보내주시면 확인하고 더 자세히 답변드리도록 하겠습니다.

미리보기 빈칸생기는 현상

안녕하세요, 한별님 질문 주셔서 감사합니다.질문 주신 부분은 미리보기(Preview)할 경우 보통 랜더링이 깔끔하게 되지 않아서 생기는 문제입니다. 우선 배포할 경우는 크게 문제가 없고, 프로토타입 상태(Present)에서는 깔끔하게 보일 것이기 때문에 크게 걱정하지 않으셔도 될 것 같습니다. 조금 짚짚하시면 선 굵기에 1정도 주거나 오토레이아웃의 간격을 -1로 할 수는 있는데, 이 경우 핸드오프시 착오가 있을 것 같아서 추천드리지는 않습니다.감사합니다.볼드 드림.

아이콘 빌런 부분

강의 촬영 시에는 문제가 많았는데, 이제 잘 되나 보네요. 다행입니다.많은 이유가 있겠지만, 제 강의에서 사용되는 아이콘의 주요 목적을 말씀드리자면, 라인의 경우 크기가 커져도 선 굵기가 함께 따라오지 않는 반면, 면으로 처리하면 크기가 함께 따라옵니다.이뿐만 아니라 용량과 Path를 줄여 최적화하는 데 도움이 되나, 사실 체감상 크게 차이가 나지는 않습니다.따라서 강의에서처럼 Union, Flatten으로 처리하는 편입니다. Flatten의 경우에는 강의에서 언급했듯이 SVG 코드 내 문제도 있기 때문이기도 하고요.만약 회사에서 두 가지 색이 사용되거나 한 가지 크기로만 사용되는 경우에는 강의에서 제안하는 방식이 맞지 않을 수 있습니다. 따라서 회사에서 구성원들과 상의하여 아이콘 작업을 하시는 것을 추천드립니다.

배리어블 Value에 관해 질문있습니다.

베리어블의 값을 연결하고 스타일에 연동하면 어떻게 되나요?네, 피그마가 자동으로 인식해서 연결합니다 되도록이면 대소문자 띄어쓰기를 조심하면 좋습니다. 좋은 방법은 연결하시고, 스타일 창에 열어보면 문제가 있는 경우는 NotoSans 이렇게 스트로크가 쳐져 있습니다. 우선 답변이 늦어져서 죄송합니다. 4, 5월에 가족 병간호 하느라 정신이 없었네요ㅠ.질문 있으시면 언제든지 남겨주세요.

Navigation Mobile 토글 베리어블이 안됩니당

해결하신 것 같네요.! 이제 거의 다 오셨네요. 정말 수고 많으셨습니다!!

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

네, 연결이 끊겼다는 의미입니다. 보통 타이포그래피의 굵기 항목에서 연결선이 끊겨 보이는 경우는, 연결된 값이 서로 정확히 일치하지 않을 때 발생합니다. 예를 들어 등록하신 Roboto 타이포그래피에서 굵기 값이 Semibold여야 한다고 가정해보겠습니다. 그런데 베리어블 값에는 semi_bold로 들어가 있으면, 충돌이 발생합니다. 그리고, 만약 Semibold에 해당하는 숫자 값인 600으로 지정하였는데, 만약 Roboto 자체에 해당 값이 아예 없는 경우라면 이런 충돌이 발생할 수 있습니다. 특히 모드를 변경했을 때, 타이포그래피마다 지원하는 굵기 값이 서로 다르면 이런 문제가 더 자주 생깁니다. 그래서 이런 경우에는 텍스트 이름보다는 숫자 값으로 관리하시는 것을 보통 더 권장드립니다.한번 사용하시는 타이포그래피의 굵기 값과, 베리어블 원시 굵기 값을 확인하시고 크로스 체크 해보시기 바랍니다.감사합니다.