kindtiger

미들 (4~8년)

안녕하세요 Meaw님 😀&nbsp;제 강의를 좋게 봐주셔서 감사드립니다.지금 말씀해주신 상황을 보면 굉장히 좋은 방향으로 성장하고 계신 것 같습니다.제가 말씀드리는 내용은 지극히 제 주관이므로 참고정도만 해주시면 좋을 것 같습니다 ^^;&nbsp;질문주신 피그마에서 개발로 handoff하는 과정을 어떻게 하는 것이 좋을까? 는요즘 실무에서는 자동화 방식(MCP)까지는 아직 이른 단계입니다.요즘 여러 ai 도구들이 figma를 코드로 변환해 주긴 하지만 아직까진 참고용으로 사용하는 경우가 많습니다."유튜브나 다른곳에서는 바로 배포까지 해서 쓰던데요?" 라는 질문을 하실수도 있을 것 같습니다만그건 후킹이거나 광고용으로 가벼운 포트폴리오 사이트와 단발성 (유지보수가 필요없는) 사이트들에 한에서만 가능한 이야기입니다. 실제로 기업에서 사용하는 정밀하게 고도화된 서비스를 피그마가 가지고있는 전반적인 시스템까지 연결시키면서 자동으로 개발까지 해주는 영역은 아직 미비합니다. 물론 ai에게 instrction을 주기적으로 심어주고 LLM을 어느정도 학습시킨다면 비슷(?)하게 만들 수는 있지만. 여전히 사람의 손을 거쳐야 하는 단계는 존재합니다.&nbsp;그렇다고 ai를 배제하라는 얘기는 아닙니다. 이렇게 빠르게 세상이 변하는 만큼, ai를 어떻게 잘 활용할 것인가에 대해서는 늘 궁금증과 관심을 가지고 들여다 봐야하는 문제인것이라 생각합니다 😀(언젠가는 대체가 될겁니다)&nbsp;지금으로서는 잘 구축된 시스템을 가지고 개발단에서 변환하여 토큰을 잘 사용하여 중복되지 않는 컴포넌트들을 개발하는 플로우를 공부해보시는게 좋을 것 같습니다.&nbsp;그럴려면 퍼블리셔를 넘어서서 프론트엔드 개발의 영역까지 건드려야 하기 때문에(실제로 시스템과 컴포넌트를 사용한느 이유는 리액트와 뷰같은 컴포넌트 중심의 라이브러리때문인 경우가 많습니다) 그 시너지를 온전히 느끼시려면 개발을 좀 더 깊게 공부해 보시는걸 추천드립니다.&nbsp;정리하자면 ai와 mcp는 아직까지 코드 생성기 보다는 구현 보조 도구로 사용하시는게 바람직하되, 항상 새로운 모델이 등장할 때마다 관심을 가져야 한다..? 정도로 보시면 될 것 같고&nbsp;공부의 추천 방향은 디자인토큰을 컴포넌트에 어떻게 잘 녹여낼 수 있는지 그럴려면 프론트엔드쪽을 공부하셔야 할 것 같습니다. 컴포넌트에 대해 더 배우고자 한다면 storybook까지 가시면 좋을 것 같습니다. [Component Drivent Development] 줄여서 CDD라고 합니다 ^-^&nbsp;&nbsp;&nbsp;완강 해주셔서 감사합니다 :)&nbsp;&nbsp;&nbsp;

안녕하세요! 강의잘 들었습니다.

안녕하세요 boyoung choi 님 😀토큰스튜디오가 업데이트된 이후로 다른 카테고리(폴더)에 있는 하위 요소를 불러올 때 이전엔 fontsize > scale로 불러와졌다면 이제는 전역으로 인식해 scale 변수로 편하게 불러올 수 있습니다.&nbsp;다만 네이밍이 중복되면 안된다는 단점도 존재하긴 하지만, 이렇게 바뀐게 유저들이 더편하게 생각하는 것 같아요 &nbsp;&nbsp;감사합니다 :)&nbsp;&nbsp;&nbsp;

토큰스튜디오에서 폰트 스타일등록 문의

안녕하세요 🙂&nbsp;혹시 Pretendard 서체를 설치 하셨을까요~? 설치하지 않으셨다면, 아래의 링크로 접속 후 폰트 설치후 피그마를 다시 껏다 키신 다음 진행해보세요 <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/orioncactus/pretendard">https://github.com/orioncactus/pretendard</a> 감사합니다 :)

토큰에서 style로 export시 에러

안녕하세요 박미소님 😀&nbsp;현재 문제는, border의 스타일을 잘못 등록했는데, style 목록에 보이지 않고 삭제도 되지 않는다. 하지만 색상 등록엔 계속 등장한다! 인 것 같은데 제가 이해한바가 맞을까요~?&nbsp;그렇다면, 해당 문제는 미소님이 border의 설정을 style로 하지 않고 variables로 했을 가능성이 가장 커보입니다. variables로 지정했을 때 가장 큰 특징은 ui가 사각형으로 나온다는 점입니다. <img src="https://cdn.inflearn.com/public/files/posts/deabdc34-8fe1-44eb-9323-7360e64d3658/79ac8033-94a9-472a-ade8-fea6adf04f0f.png" media-type="img" alt="image.png" title="image.png" width="643" height="306">&nbsp;<img src="https://cdn.inflearn.com/public/files/posts/cb9c3dfa-3287-430a-be4a-2567599cea61/e29b5f52-4047-49a3-8623-e7e874adb2f9.png" media-type="img" alt="image.png" title="image.png" width="643" height="537">&nbsp;영상을 찍을 당시에는 variable이라는 기능이 없었기 때문에 충분히 혼란스러울 수 있을거란 생각이 듭니다. &nbsp;영상 강의처럼 따라하시려면 style로 등록하셔야 합니다.<img src="https://cdn.inflearn.com/public/files/posts/e595e401-7ddc-46d0-9a34-288d7d021984/f53cf9a3-1a0d-401f-ad08-c95e8614314a.png" media-type="img" alt="image.png" title="image.png" width="643" height="494">&nbsp;그럼 기존에 등록했던 variable은 어떻게 지우는가? 는 variable 항목을 선택 후 우클릭으로 삭제가 가능합니다.<img src="https://cdn.inflearn.com/public/files/posts/0f27aafb-d9ac-4ade-95d0-debdb1308ed5/a4522d7e-3324-48fa-9219-4d9f9ea1c10b.png" media-type="img" alt="image.png" title="image.png" width="643" height="328">&nbsp;<img src="https://cdn.inflearn.com/public/files/posts/44958b7a-4ae4-4ce4-b5bb-dafe89386c89/869b0521-6eb4-44a8-82ee-4a8b510c6916.png" media-type="img" alt="image.png" title="image.png" width="643" height="388">&nbsp;이 순서대로 삭제를 진행하시면 될 것 같습니다.&nbsp;또 문제가 생긴다면 언제든지 질의응답 작성해주세요.&nbsp;감사합니다 :)&nbsp;&nbsp;

컬러시스템 등록 관련

안녕하세요 박미소님 😀&nbsp;해당 내용에 대한 질문은 이미 올라온적이 있어서 제가 강의 새소식에 안내드린적이 있습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://inf.run/sQgKW">https://inf.run/sQgKW</a>&nbsp;해당 내용을 참고하시고, 이 문제에 대한 영상강의도 따로 제작해놨기 때문에 그 부분도 같이 시청해주시면 좋을 것 같습니다.&nbsp;감사합니다 :)

토큰 light/dark mode 오류

안녕하세요 qjatjs123123님 😀&nbsp;프리텐다드 서체는 오픈소스로 제공되는 무료 서체입니다.&nbsp;다만 기본 글꼴이 아니기에 컴퓨터에 설치 후 진행해주시면 됩니다.&nbsp;하지만, 해당 강의는 pretendard서체가 없어도 문제가 되지 않습니다.&nbsp;설치를 원하지 않으신다면, 지금처럼 기본 글꼴을 변경 후 사용하셔도 됩니다 ^. ^ &nbsp;혹시몰라 pretendard 공식 사이트를 첨부드립니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://cactus.tistory.com/306">https://cactus.tistory.com/306</a> 감사합니다 :)&nbsp;

Pretendard 없으면 에러납니다

안녕하세요 지선님 😀&nbsp;default값은 폰트의 가장 기본이 되는 값이며 웹에서는 모든 폰트의 기본 사이즈가 16px입니다. 그래서 개발에 용이할 수 있도록 16px을 맞춰 주시는게 좋으며 같이 일하는 개발자와 상의 후 변경해주시는게 좋습니다.&nbsp;디자이너 입장에서는 기본값이 필요한가? 로 볼 수 있지만, 개발하는 개발자 입장에서는 em같은 단위를 사용해 코딩을 하기 때문에 default의 값을 지정해주시는게 커뮤니케이션적인 관점에서 좋습니다. &nbsp;"그리고 폰트 사이즈가 수업에서 계속 정해놓은 scale값을 곱하는 것과 별개로 저는 폰트 사이즈가 다른데 어떻게 해야 하는거죠?" 이거에 대한 답변은 좀 더 자세히 캡쳐 화면을 제공해주시면 답변 드리도록 하겠습니다 ^-^ 감사합니다 :)&nbsp;&nbsp;

폰트 토큰 작업 할때

안녕하세요 지선님 😀&nbsp;색상을 다양하게 만드는 이유는 디자인 시스템을 구성요소 중 컬러의 토큰을 지정할 때 한가지의 색상들만 정의해놓는다면 디자인하기 힘들 수 있습니다. (예를들어 지정된 gray 이외의 연한 회색이 필요한 경우 또 등록을 해야 하기 때문에)&nbsp;그래서 미리 다양한 색상들을 지정후 필요할 때 마다 꺼내 사용하는 방식으로 진행됩니다. 이후 그 색상이 많이 사용된다면 다른 이름으로 매핑해 사용하는게 좋겠지요 이는 구글의 머터리얼 디자인을 기반으로 많은 시스템들이 색상 토큰을 따라 지정하곤 합니다. &nbsp;감사합니다 :)

여기 수업에서 엘로우나 레드나 블루 이런 컬러들을 다양하게 만드는 이유가 뭔가요?

안녕하세요 지선님 😀&nbsp;토큰을 깃허브에 올리는건 토큰 스튜디오의 핵심 기능이기 때문에 없어지지 않습니다 😅&nbsp;settings 탭을 선택 후 Add new sync provider 버튼을 클릭하시면 됩니다.<img src="https://cdn.inflearn.com/public/files/posts/bfc2c91e-caa6-4320-88d2-45a93e2e20f1/a3aaddf2-bdb1-4fef-af11-644917e81881.png" media-type="img" alt="image.png" title="image.png" width="631" height="1014">&nbsp;이후 GitHub를 Choose버튼을 눌러 선택해주세요.<img src="https://cdn.inflearn.com/public/files/posts/c489ae2c-cf69-4601-ab7a-50e06e8599b1/536e8f05-6a13-4db9-ae78-3feefc8885c9.png" media-type="img" alt="image.png" title="image.png" width="616" height="990">&nbsp;그 후 영상에 나오는것 처럼 빈칸을 하나씩 입력해주시면 동기화가 가능합니다.^-^&nbsp;감사합니다 :)&nbsp;&nbsp;

토큰을 깃허브에 올리는 방법이 없어진거 같은데요

안녕하세요 지선님 😀아래의 첨부 이미지처럼 토큰 스튜디오의 1번 아이콘을 누르신 후 2번 Export to file/folder를 선택하시면 내보내기 항목을 정할 수 있습니다.<img src="https://cdn.inflearn.com/public/files/posts/75e99218-7981-4b52-ac0e-09b8c5b6ecbc/315b8d8b-13a0-4a24-996d-780e863f86a4.png" media-type="img" alt="image.png" title="image.png" width="631" height="1004">&nbsp;<img src="https://cdn.inflearn.com/public/files/posts/87c91014-b4a7-470b-ad1a-c69b478b6edc/f7a263b9-82d2-490a-8975-e078d327ce1f.png" media-type="img" alt="image.png" title="image.png" width="616" height="984">&nbsp;&nbsp;감사합니다 :)&nbsp;

kindtiger

Bài viết