베리어블 등록 이동하기

안녕하세요, ifuwonder 님 워밍업 질문 게시판으로 질문 주셔서 감사합니다.밑에 인프런 AI가 참 잘 이야기했는데, 우선 배리어블을 다른 프로젝트에서 쓰시는 경우는 파일 내보내기를 하시고 다른 B프로젝트에서 A파일을 붙여넣으면 베리어블을 확인해보면 확인해볼 수 있습니다. 이 경우 베리어블에 hide from publishing이나 콜렉션 그룹에 _ , .을 붙이시면 나오지 않습니다. 만약 베리어블을 다른 프로젝트로 옮기고 싶은 경우는 플러그인을 사용하시는 방법을 추천드리는데요, 플러그인 중에 Variable Pro라는 플러그인이 유용합니다.제가 듣기에는 어드민 페이지 같아 보이는데요. 보통은 어드민 페이지는 따로 모바일을 사용하여 고정형으로 사용하고 우측 메인은 따로 8그리드를 사용하거나 복잡도에 따라 상황에 따라 12그리드를 사용합니다. 추후 강의에서 그리드 파트에서 배우시게 될 것입니다. 강의에서 제공되는 파일대로 정하시면 됩니다. 1440px을 쓰기도 하지만 고정형으로 보통은 Width를 12개 그리드 컬럼으로 해서 그 사이에 11개의 거터를 고려해서 계산을 해서 사용합니다. 12개의 컬럼, 거터의 길이 마진을 모두 다해서 사용하시면 되고 정답은 없습니다. 한번 만들어보시고 양 쪽 마진을 브랜드에 맞게 잘 맞춰주시면 됩니다. (밑에는 예시입니다. 빨간색 부분을 더해주시면 됩니다.)- 한 컬럼의 길이는 16(Rem 기준) 5 = 90 - 12개의 컬럼의 길이는 90 * 12 = 1080- 거터의 길이 = 24px- 11개의 커터의 길이 = 24px * 11 = 264- 마진 = 24px- 양쪽 두개의 마진 = 48px만약 Strech의 경우(크기가 커지면 같이 커지는 경우)는 마진을 고려하지 않으셔도 되구요. 1.5px, 2px 상관없습니다. 문제가 전혀 없습니다. 근데 강의에서 언급하였듯이 깨서 면처리 해서 쓰시는 걸 추천드립니다.사이트는 머티리얼 2가 잘 나와있습니다. 확인해보세요. https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins감사합니다!!!!

강의 완강 후 노션자료

선규님 안녕하세요, 방금 확인하고 이메일 보내드렸습니다. 강의 업데이트로 요즘 분주하고, 완강 이벤티를 수기로 하다보니 깜빡했던 것 같습니다. 죄송합니다. 2월에 강의 UI3로 업데이트 될 예정입니다. 피드백 주신 네이밍 부분에 대해서도 추후에 자료 제작과 강의 업데이트 시 참고하도록 하겠습니다. 감사합니다.볼드 드림.

디자인 시스템, 시멘틱 컬러 관련 질문이 있습니다.

세영님 안녕하세요! 질문 주셔서 감사합니다. 질문에 대한 저의 생각을 정리해서 적어보았습니다. 현재 예제에서는 파란색 primary 버튼에 bg-interactive-primary 쓰인 경우는 text-interactive-inverse를 사용하고 있습니다. 이 경우는 말씀하셨다시피 동일한 컬러를 쓰이기 때문에 inverse로 대비되는 색을 사용하고 있습니다.어떻게 베리어블을 구성하느냐에 따라 다르겠지만 저의 구성 방식에서는 컴포넌트가 primary 여도 primary, secondary를 혼용해서 사용하고 있습니다. secondary의 경우는 neutral 컬러를 사용해서 보조하는 역할을 하고 있고요. 이렇게 쓰지 않고 만약 primary로만 다 쓰인다면 컴포넌트 전체가 주요색으로만 나타나서 구분이 되지 않습니다. 그리고 secondary 컴포넌트의 경우에는 secondary만 사용하고 있구요. 만약 엄격하게 만들고 싶으시면 다르게 구성을 짜보셔도 됩니다.제 강의에서 이론 부분에서 Component가 필요하면 쓰일거라고 언급했지만 실제로 강의 따라가보시면 시맨틱으로 모두 다 활용할 수 있습니다. 강의 섹션에서 5~8 컴포넌트를 만들어볼 거구요. 그리고 섹션 9에서 모드홀용, 나머지 뒷 부분 섹션에서 페이지를 만들어봅니다. 뒷 부분에 모든 내용이 나옵니다.

파운데이션과 컴포넌트 파일 별도로 관리해야할까요?

안녕하세요, Bear Bumble Bee님 우선 제 강의가 배리어블 사용성에 도움이 되셨다고 말씀해주셔서 감사합니다.동일한 질문을 저번 주에 디스코드 질문 답변 방에 받았으며, 답변을 여기다가 붙여 넣도록 하겠습니다.우선 회사에서 만드실 때 규모에 따라서 다르게 만드시면 됩니다. 예를 들어, 소규모 프로덕트를 운영하는 스타트업의 경우는 스타일가이드, 컴포넌트를 하나로 통합해서 운용하셔도 괜찮습니다. 반면에, 여러 프로덕트나 플랫폼의 경우는 컴포넌트 라이브리러리를 따로 두시면 좋습니다. 이는 몇가지 장점이 있는데, 파일 크기가 우선 작습니다. 한곳에 모아두다 보면 나중에 규모가 커지다 보면 문제가 생깁니다.쪼개서 관리할 수 있어 편합니다 예로, 컴포넌트 라이브러리도 여러개로 만들어서 사용할 수 있고 몇개는 디자인 시스템 팀에서 나머지는 각 스쿼드에서 따로 커스텀하게도 사용합니다. 회사마다 달라서 이게 정답이라는건 없습니다. 제 경우 회사에서 스타일 가이드도 아래처럼 쪼개어 두었구요.기본 primitive 베리어블 라이브리러리마케팅 용 브랜드 시맨틱 스타일 가이드라인프로덕트 용 브랜드 시맨틱 스타일 가이드라인 컴포넌트 라이브러의 경우는 아래처럼..기본 라이브러리와 각 프로덕트별 컴포넌트 라이브러리(저의 경우는 b2b, b2c 두개로 나뉘며, 둘다 웹앱입니다.) 그리고 지금 다른 서비스를 만들고 있으며, 이거에 필요한 컴포넌트는 따로 제작할 계획입니디. 굉장히 복잡해보이긴 하지만 이렇게 관리하면 확장하기 좋습니다. 만약, 적은 인원의 디자이너가 소수의 프로덕트를 만드신다면 우선 함께 통합해서 만드시고 나중에 프로덕트 복잡해지면 그때 나누셔도 무방합니다. 질문하신 부분이 혹시 해결 되지 않으셨으면 더 질문 주세요. 감사합니다.

BOLD PLUS Design System 어디에서 찾나요?

플랜의 경우 강의를 완강하실려면, 프로페셔널 플랜의 기능이 필요합니다. 섹션 1의 강의 시작전 필수사항에 보면 대안으로 쓰일 수 있는 방안을 적어놓았습니다. 꼭 한번 살펴보시기 바랍니다.

BOLD PLUS Design System 어디에서 찾나요?

안녕하세요, Ori님. BOLD PLUS Design System은 강의에서 활용하기 위해 제작한 것으로, 별도로 공유해드리지는 않습니다. 제 강의에서는 스타일 가이드만 공유하고 있는데, 이는 배리어블 개념이 어려우시거나 처음 접하시는 분들을 위해 제공하는 자료입니다. 컴포넌트 라이브러리 UI Kit은 공유하지 않는 점 양해 부탁드립니다. 직접 만들어보며 실습을 해야 온전히 자신의 것으로 습득할 수 있다고 생각하기 때문에, 강의 개설 이후에도 모든 수강생에게 동일한 원칙을 적용하고 있습니다. 다만, 수강을 모두 마치고 실습 과정에서 체크용 자료가 필요하신 분들을 위해, 인프런 워밍업 때 활용했던 자료를 완강 이벤트 로 제공해드리고 있으니 참고 부탁드립니다. 하지만 대부분이 제공드려도 10%도 보지 않으십니다. 왜냐하면 이미 실습을 통해서 본인 만의 UI 킷을 만들어보시기 때문입니다. 2월 초에 강의를 전면 업데이트 할 예정이며, 이 때 새로운 UI Kit 템플릿도 제공 드릴 예정이라, 혹시 그 동안은 UI2로 한번 본인만의 디자인 시스템 UI 킷 파일을 만드셔서 연습 해보시는 것도 제안 드립니다.

구글sheet 어디서 다운 받을 수 있나요

질문 주셔서 감사합니다.[실습]색상 배리어블 등록하기 강의에서 영상을 호버하시면 제일 아래 "수업노트 보기"가 나타납니다. 이 부분을 선택하시면 아래와 같이 자료 링크를 보실 수 있습니다. 어려운 부분 있으시면 언제든지 질문 주세요.볼드 드림.(사진)

디자인 시스템 세팅 임포트

고예진님, 안녕하세요. 제가 좀 리서치해서 찾아본 결과, 퍼블리싱이 안되는 이유는 아마도 폰트 안에 속성 값이 문제가 있는 것 같습니다. 현재 퍼블리싱하려는 두 파일을 꼭 체크해보세요. 스타일 안에 heading/desktop/sm과 body/lg/semibold를 체크해보시기 바랍니다. 만약 각 스타일 안에 폰트를 못찾거나 무엇인가 문제가 있어서 퍼블리싱을 못하고 있는 것 같습니다. 또한, 만약 계속해서 문제가 생기면 따로 저에게 boldplus.ux@gmail.com으로 파일 공유해주시면 제가 한번 체크해보도록 하겠습니다. 추가적으로, 현재 제가 공유드린 스타일 가이드는 확인 결과 아무 문제가 없습니다. 궁금하신 부분 있으시면 언제든지 질문 주세요!

디자인 시스템 세팅 임포트

안녕하세요, 고예진님 스터디 신청해주셨는데, 제가 디스코드에서 아이디를 찾을 수 없어서 혹시 저에게 따로 디엠 보내주실 수 있으실까요?

디자인 시스템 세팅 임포트

안녕하세요. 퍼블리시 버튼을 오류가 나는 경우는 여러 상황이 있습니다.혹시 파일이 드래프트 안에 없는지?새로 한번 retry를 해보셔도 됩니다. 저의 경우 다운 받아서 해본 결과 퍼브리싱이 잘됩니다. 혹시나 안되시면 강의에서는 기존 스타일 가이드에 페이지를 만들어서 컴포넌트를 추가하셔도 됩니다. 컴포넌트 관련된 파일은 현재 공유해드리지 않으며, 추후 어려움이 있으시면 글이 아닌 온라인 구글 챗으로 제가 화면을 보면서 도와드리겠습니다혹시 계속 안되시면 boldplus.ux@gmail.com으로 연락주시면 스케쥴을 잡도록 하겠습니다. 강의 어려운 부분이 있다고 하셔서 그 부분도 제가 자세히 안내해드리면 좋을 것 같습니다. 볼드 드림.