핵심컴포넌트 공유

안녕하세요, gangsugi 님정말 죄송하지만, 핵심 컴포넌트 완성 파일은 공유해드리고 있지 않습니다. 이건 원칙으로 모든 수강생 분들에게 동일하게 적용하고 있습니다. 그 이유는 아래와 같습니다.몇 개 만들어보시면 원리와 패턴을 알게 되십니다.직접 만들어보셔야지 실력이 늡니다. 또한 2월에 강의를 업데이트하면서 참고형으로 볼 수 있는 워크시트를 공유드릴 예정입니다. 또한, 완강하시고 이벤트 참여하시면 인프런 워밍업에서 만든 완성 파일을 참고형으로 공유해드리고 있습니다.또 궁금하신 사항 있으시면 boldplus.ux@gmail.com으로 연락주시기 바랍니다. 감사합니다.

color style guide 플러그인이 안나오는데요

안녕하세요, gangsugi님.다시 강의를 들으신다니 정말 반갑습니다! 완강하실 때까지 언제든지 질문 주시면 성심껏 답변 드리겠습니다. 😊 우선, 화면에서 보니 Color Style Guide 플러그인을 적용한 결과물이 잘 나온 것 같습니다. 현재 스타일에서 blue, foundation/violet/... 등의 결과가 표시되는 것을 보니 올바르게 적용된 것 같아요. 다만, 제 강의에서처럼 모든 컬러가 나오게 하시려면 Color Style Guide 플러그인을 사용하시기 전에 아래 플러그인을 먼저 사용해주셔야 합니다. 이를 통해 TailwindCSS 컬러를 스타일로 등록하실 수 있습니다. 플러그인 링크 바로가기 위 플러그인을 활용하여 모든 컬러 스타일을 등록한 후, 다시 진행하시면 제 강의의 내용대로 적용하실 수 있을 겁니다. 질문 있으시면 언제든지 주세요.감사합니다!

신 아이콘 등록방법

안녕하세요, 이민지님. 우선 질문에 답변을 늦게 드린 점 죄송합니다. 이 아이콘의 경우는 크기를 10배로 해서 Union을 해보셨는지요? 아니면 10배를 하지 마시고 Union을 해보셔도 좋을 것 같습니다. 제 컴퓨터에서 테스트한 결과는 잘 되고 있습니다. 그래도 만약 안된다고 하시면, 제가 추천 드리는 방법은 이 아이콘만 SVG로 내보낸 후 아래의 웹사이트를 사용하셔서 svg로 만든 다음 가지고 오시는 것을 추천드립니다.https://iconly.io/tools/svg-convert-stroke-to-fill더 자세한 내용은 저의 필기노트를 확인해보시기를 바랍니다.https://boldux.notion.site/98e7383dc7b14882b05266eaf1667949?v=fb1d7d1032514a1f905ed16974622312&p=7314f9f004a249debee466851f4dd7a8&pm=c 감사합니다.

베리어블 등록 이동하기

안녕하세요, 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 어디서 다운 받을 수 있나요

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