Variables 에서 Color 를 하나하나 추가하는 작업은 기존 컬러 Row 를 클릭하고 Shift + Enter 를 하시면 바로 하단에 추가가 됩니다. 그리고 Collection 아래에 Grouping 도 Shift 해서 마우스로 컨트롤 하실 필요 없이 Neutral/800 으로 네이밍을 하면 자동으로 그룹핑이 됩니다.
안녕하세요. 재밌게봐주셔서 감사합니다😊 파운데이션을 어떤식으로 카테고라이징할지는 정해진 정답은 없고 회사의 프론트엔드 개발자와 잘 협의하면서 정하면 됩니다. 명칭도 개발자와 함께 정하면 좋은데, 네이밍에 있어서 팁이있다면 red100, radius60과 같이 뒤에 숫자가 10이나 100단위의 짝수로 떨어지는 게 좋습니다. red1, red2 이렇게 한자리 수로 정하게되면 혹시 나중에 중간값이 추가될 때 red1.5 이런 네이밍이 필요하게 되는데 개발언어에서 저런 점 표기는 네이밍에 사용하지 않는다더라구요 ㅎㅎ
안녕하세요! 강의가 처음 듣더라도 정말 잘 이해가 되고 도움이 많이 되었습니다. 감사합니다! 저는 프론트엔드 개발자이지만, 디자인 시스템에 대해 잘 이해하고, 개인 프로젝트에도 사용해보고 싶어서, 디자이너 DK님의 강의를 보고팔레트를 따라서 만들어 보았습니다!! 그런데, 보면서 저가 생각하기에 이상했던 점이 있습니다. 저는 이전 토큰 관련 강의에서 #1 컬렉션에서 사용되는 색깔들에 기능 또는 의미를 부여하여 #2 Semantic 컬렉션에 토큰을 만들고, #3 Component 컬렉션의 Variable에 #2 Semantic 컬렉션의 토큰 정보에 추가로 컴포넌트의 정보를 담은 토큰을 또 만든다고 이해했습니다. 그런데 이 강의에서는 #3 Component 컬렉션에서 TextIcon/Primary의 색깔을 #2 Semantic 컬렉션에서 Primary/800를 찾아서 쓰는 것이 아니라, #1 Primitive 컬렉션에서 Orange/800 찾아 쓰는 것으로 보입니다. 그래서 Primary 색이라는 정보를 넘겨주지 못한다고 생각합니다.(물론 'TextIcon/Primary' 에 Primary라는 정보가 있지만 다른 경우일 경우 못넘겨줌.) 그래서 Orange/800을 찾아 쓰는 것이 아닌 Primary/800을 찾아 쓰는 것이 맞는지 궁금합니다. 또한 위 내용이 궁금하여 영어로 Primitive, Semantic, Component에 대해 설명하는 것을 봤는데, 그 내용에는 Primitive 컬렉션에서 색깔 Orange대신 바로 Primitive라는 변수명을 주고, Semantic 컬렉션에서는 textColor와 같은 변수명을 주고, Component에서는 Button과 같은 컴포넌트들에 대한 변수명들을 사용하는데, 이건 그냥 사용하기에 따라, 나누기에 따라 다르게 사용하는지 알고싶습니다.
안녕하세요. 영상 재밌게 봐주셔서 감사합니다 :) 질문 주신 부분에 답변드려보자면 우선 첫번째 질문은 저도 디자이너 입장에서는 primitive-semantic-component로 연결되는 구조가 더 좋다고 생각합니다. 다른 해외 디자인토큰 영상을 보아도 그렇게 이용하는 것 같았구요. 그래서 저도 회사 시스템을 짜 볼 때 그렇게 제안을 했었는데요~ 그런데 저희 회사 개발자 분들이 primitive-component로 바로 연결하는 방식을 더 원해서 아직 저희 회사에서는 다이렉트로 연결하는 방식을 사용하고는 있습니다. 개발 방식에 따라 다를 것 같긴 하지만, 제 추측엔 orange800과 같은 각 primitive값을 미리 등록해놓고 이 값들을 컴포넌트로 적용하고 싶은데 아무래도 중간 단계가 하나 더 있는게 불편했던 것 같아요. 아쉽게도 피그마 dev모드에서는 베리어블의 단계 트리를 볼 수 없거든요 ㅜㅜ 뷰어로 초청된 사람들도 마찬가지구요. (코드에도 컴퍼넌트팔레트명과 헥스 값만 뜹니다) 그래서 제가 추천드린 플러그인으로 토큰이 연결된 베리어블 리스트를 뽑아서 확인할 수 밖에 없는데, 결국 컴포넌트 팔레트와 연결된 primitive값을 찾고 싶을 때 한단계 더 거쳐야 하는 과정이 불편하게 생각되지 않았을까 예상됩니다. 그래서 제 생각엔 이 디자인 토큰을 3단계로 전체 연결하는 게 나을지 2단계로만 연결이 나을지는 각 회사 팀마다 더 편한 방식을 찾는게 좋은 것 같아요 :) 두번째 질문의 경우, 제가 리서치했을때는 primitive는 오렌지, 블루 등 색상으로 이루어진 값들, semantic은 brand컬러를 필두로 neutral, warning, success 같은 시스템에 필요한 컬러값들, component는 버튼, 인풋과 같은 컴포넌트 컬러 값들로 주로 찾을 수 있었습니다. 그런데 이것 또한 이야기 주신 것 처럼 사람 혹은 팀 마다 사용하는 방식이 조금씩 다르지 않을까 생각되긴 합니다^^ 어쨌든 이 디자인 토큰을 활용하는게 아직 완전 활성화는 안되고 아직 시작단계라고 보기 때문에 좀 더 완전한 개념이 정립될때까지는 시간이 더 걸리지 않을까 싶어요. 저도 계속 스터디 해보면서 보완할 설명이 있다면 추가적인 영상 또 제작해보겠습니다. 좋은질문 감사했습니다. 편안한 밤 되세요 :)
@@designer_dk 현업에서 어떻게하는지랑 엮어서 친절한 답변 해주셔서 감사합니다!! 그리고 첫번째 예시 들어준 것을 보고 많은 생각을 해보았는데요. 개발자 또한 3단계에 걸쳐서 색깔을 정의한다면, 굳이 Primitive 값을 확인할 필요 자체가 없어지고, 피그마에 정의된 이름대로 사용할 수 있어서 좋을거 같다고 생각되네요. 자바스크립트로 theme을 만들어 사용하든, css에 정의하여 사용하든 모두 적용가능하기도 하고, 나중에 유지 보수에도 훨씬 좋을거 같습니다!! 예를들면 만우절에 다른회사와 브랜드 컬러? 컨셉을 바꾼다고 했을때, 개발자도 3단계에 걸쳐서 색깔을 정의했으면, 디자이너가 특정 Semantic 컬러들만 다른 바꿀때, 개발자도 Primitive 컬러를 일일이 바꿔주는 것이 아니라 Semantic컬러만 디자이너와 똑같이 바꾸면 똑같이 적용되어서 훨씬 편할거라고 생각됩니다! 저도 어떻게 코드 구조를 가져가야 디자이너와 한 몸 처럼 일할 수 있을지 한번 더 생각해 볼 수 있어서 좋았습니다. 감사합니다!
시스템 가이드를 만들고있는데 영상이 참 많은 도움이 되고있습니다 :) 실무에서는 개발까지 완료된 후에 가이드가 만들어지는 경우가 많은데 화면이 엄청 많을 때 효율적으로 베리어블 팔레트를 적용시키는 방법은 있을까요 ? 영상에선 다 하나씩 잡은 다음에 컬러를 연결하더라구요!
같은 컴포넌트(인스턴스), 같은 팔레트 컬러, 같은 폰트 등 같은 종류들끼리 선택할 수 있는 기능이 edit-select all with 에 있어서 저는 주로 이걸 잘 이용합니다🙂 그래도 더 세분화해서 셀렉트해야할 땐 어쩔 수 없이 개별적인 선택이 필요할 것 같아요 ㅎㅎ
실전예제로 영상 제작해 주셔서 너무 너무 큰 영감을 얻고 갑니다. 👍 질문드립니다. ❶ primitive > ❷ semantic > ❸ component 으로 토큰화 되어과정에 있습니다. 영상 제작에서는 ❸ component에서도 ❶ primitive를 굳이 참조해야된다면, 활용도 없는 ❷ semantic으로 토큰화 과정이 굳이 필요할까요? 결국 ❸ component으로 토큰화를 할때 시멘틱을 참조하는 것이 좀 더 명확할 거 같아요. 또하나는 ❸ component으로 토큰화시 레이블링이 아직 기능을 유추할 수 있는 것은 아닌 단계로 보여지고 오히려 시맨틱 단계에 머물러 있지 않았나 의견드립니다. 예를 들어 ❸ component 단계에서 을 참조시키는 것이 _orange 800을 참조 시키는 것보다 의도한 토큰화에 더 맞지 않을까 생각됩니다.
안녕하세요. 좋은 질문 감사합니다. 저도 이 디자인 토큰관련해서는 해외 레퍼런스들을 많이 참고하면서 만든 케이스인데 그 레퍼런스들에서 1.Primitive-2.Semantic-3.Conponent 구조로 많이 설명이 되어있다보니 저도 일단 그러한 정석적인? 레퍼런스 구조로 먼저 설명드릴 필요성이 있다고 판단되어서 일단 1,2,3단계 구조 모두 토큰화 시키는 과정을 설명드려 본 것이구요~ 실질적인 적용은 제가 자주 하는 방식 중 하나의 사례로 영상을 만든 케이스라고 볼 수 있겠습니다. 사람마다 사용방식이 다르겠지만 저는 일단 변하지 않게 설정하는 건 1단계 Primitive이긴 합니다. 1단계는 회사에서 사용하는 고정 팔레트들로 구성해두는 편이라 추가가되면 추가가되었지 왠만해서는 그 값을 바꾸지 않는 편이구요 그 다음부터는 제 개인적인 스타일이긴 한데 1단계와 연결되는 다음 토큰을 2,3단계가 섞인? 스타일로 구성한 후 1단계에서 바로 연결시켜서 사용하는 편입니다. 3단계의 경우 컴포넌트별로 팔레트를 구성할 수 있어서 관리에 특화된 면이 있지만 모든 컴포넌트를 다 쪼개서 팔레트화 시키는 것에는 한계가 있다고 느껴져서 버튼이나 인풋같은 주요 컴포넌트는 전용 팔레트로 분리시키는 편이고 그 외의 컴포넌트나 엘리먼트는 보편적인 팔레트로 사용하는 편입니다. 예를들어 Surface/Brand/Primary, Surface/Neutral/BG, TextIcon/Onsurface/HighEmp 이런식으로 어떻게보면 2단계느낌의 팔레트 구성도 함께 섞어서 진행할 때가 많습니다. 따라서 이부분은 사용하는 디자이너들이 편하게 사용할 수 있는 방식을 그 회사 개발팀과 함께 고민해서 정해나가면 된다고 봅니다. 영상에서도 이야기드린대로 정답이 있는 부분이 아니니까요 :) 다만 저는 1단계는 디자인시스템에 있어 핵심이라고 생각하는 편이여서 1단계를 제외하는건 다소 부정적인 입장이긴한데요. 대신 2,3단계의 경우는 디자이너스타일에 맞게, 혹은 프로젝트 스타일에 맞게, 회사 스타일에 맞게 잘 정해서 쓰면된다고 생각합니다. 1->2->3 방식, 1->23 방식, 1-> 2방식, 1->3 방식 등 여러 케이스가 나올 수 있으니까요~ 이 토큰 방식이 역사가 길지 않은 부분이여서 점차 좋은 사용 솔루션은 계속해서 나오지 않을까 싶습니다. 혹시나 추가적으로 좋은 솔루션이 나오면 또 영상으로 제작해볼게요 ^^ 감사합니다.
안녕하세요 🙂 이 영상에서는 프리미티브를 시멘틱으로도 연결할 수 있고 컴포넌트로도 연결할 수 있고 여러 케이스를 보여드리긴 했어요~ 사실 모든 컴포넌트를 토큰화 하면 팔레트가 너무 많아지기 때문에 자체 팔레트가 있으면 효과적인 컴포넌트들만 해도 좋다고 봅니다. (버튼, 인풋 등) 컴포넌트 토큰화의 장점은 제가 ruclips.net/video/IN0a_3c1vJs/видео.html 이 영상에서 자세히 설명드렸으니 확인하시면 도움되실 것 같아요 :) 감사합니다.
![왜 출산 안 하냐고? 인구소멸 찐 실제 상황 "남녀 한 쌍 결혼에만 평균 3억"- [한눈에 이슈] / KBS 2024.07.09.](http://i.ytimg.com/vi/5Z8aJd8qMNY/mqdefault.jpg)
![[수정판] 버튼 상태(States)의 모든 것! (Feat. focus와 focus-visible의 차이점) #CSS #버튼컴포넌트 #스테이츠](/img/1.gif)
DK님의 디자인시스템 시리즈는 정말 좋은 영상이었습니다. 앞으로도 좋은 영상 많이 부탁드립니다. 항상 건승하십시오!
감사합니다 😊😊 시청자님도 건승하세요👍👍
외쳐 GOD DK... 그저 빛..
댓글 안 달고 가기엔 죄송스러울 만큼 너무나도 완벽한 강의입니다.
긴 시간 강의하시느라 고생 많으셨습니다. 한순간도 지루하지 않았네요..!
선생님 덕분에 디자인 공부가 재밌어요 ㅠㅠ 감사합니다!!
너무 극찬해주셔서 몸들바를 모르겠네요😍😍 재미있게 봐주셔서 정말 감사합니다!
Variables 에서 Color 를 하나하나 추가하는 작업은 기존 컬러 Row 를 클릭하고 Shift + Enter 를 하시면 바로 하단에 추가가 됩니다.
그리고 Collection 아래에 Grouping 도 Shift 해서 마우스로 컨트롤 하실 필요 없이 Neutral/800 으로 네이밍을 하면 자동으로 그룹핑이 됩니다.
오오 좋은 정보 감사합니다😍
이런 유용한 영상 올려주셔서 감사합니다 ! 정말 진심으로 복 많이 받으세요
감사합니다 😆😆 구독자님도 복받으실거예요👍
이분 쵝오입니다!! 쌍따봉 드려요
감사합니다😍😍
디테일한 설명 감사드려요~ 한수 배우고 갑니당~👍
감사합니다😊😊
너무 유용한 영상이네요...신기하다고만 생각했지 직접 활용하기 조금 어려운 감이 있었는데, 플러그인까지 추천해주셔서 빠른 적응이 가능할 것 같습니다~! 어지간한 유료강의보다 훨 나은 것 같아요 ㅠㅠ
도움되셨다니 저도 기쁘네요. 감사합니다😊😊
유용한 정보 너무 고맙습니다 🙏 혹시 파운데이션 요소마다 파생될 경우, 카테고라이징을 효율적으로 관리할 수 있는 팁(명칭에대한 규칙같은 팁)을 알수 있을까요?
안녕하세요. 재밌게봐주셔서 감사합니다😊
파운데이션을 어떤식으로 카테고라이징할지는 정해진 정답은 없고 회사의 프론트엔드 개발자와 잘 협의하면서 정하면 됩니다. 명칭도 개발자와 함께 정하면 좋은데, 네이밍에 있어서 팁이있다면 red100, radius60과 같이 뒤에 숫자가 10이나 100단위의 짝수로 떨어지는 게 좋습니다. red1, red2 이렇게 한자리 수로 정하게되면 혹시 나중에 중간값이 추가될 때 red1.5 이런 네이밍이 필요하게 되는데 개발언어에서 저런 점 표기는 네이밍에 사용하지 않는다더라구요 ㅎㅎ
@@designer_dk 구체적인 답변 고맙습니다😊👍🏻
안녕하세요! 강의가 처음 듣더라도 정말 잘 이해가 되고 도움이 많이 되었습니다. 감사합니다! 저는 프론트엔드 개발자이지만, 디자인 시스템에 대해 잘 이해하고, 개인 프로젝트에도 사용해보고 싶어서, 디자이너 DK님의 강의를 보고팔레트를 따라서 만들어 보았습니다!! 그런데, 보면서 저가 생각하기에 이상했던 점이 있습니다. 저는 이전 토큰 관련 강의에서 #1 컬렉션에서 사용되는 색깔들에 기능 또는 의미를 부여하여 #2 Semantic 컬렉션에 토큰을 만들고, #3 Component 컬렉션의 Variable에 #2 Semantic 컬렉션의 토큰 정보에 추가로 컴포넌트의 정보를 담은 토큰을 또 만든다고 이해했습니다.
그런데 이 강의에서는 #3 Component 컬렉션에서 TextIcon/Primary의 색깔을 #2 Semantic 컬렉션에서 Primary/800를 찾아서 쓰는 것이 아니라, #1 Primitive 컬렉션에서 Orange/800 찾아 쓰는 것으로 보입니다.
그래서 Primary 색이라는 정보를 넘겨주지 못한다고 생각합니다.(물론 'TextIcon/Primary' 에 Primary라는 정보가 있지만 다른 경우일 경우 못넘겨줌.) 그래서 Orange/800을 찾아 쓰는 것이 아닌 Primary/800을 찾아 쓰는 것이 맞는지 궁금합니다.
또한 위 내용이 궁금하여 영어로 Primitive, Semantic, Component에 대해 설명하는 것을 봤는데, 그 내용에는 Primitive 컬렉션에서 색깔 Orange대신 바로 Primitive라는 변수명을 주고, Semantic 컬렉션에서는 textColor와 같은 변수명을 주고, Component에서는 Button과 같은 컴포넌트들에 대한 변수명들을 사용하는데, 이건 그냥 사용하기에 따라, 나누기에 따라 다르게 사용하는지 알고싶습니다.
안녕하세요. 영상 재밌게 봐주셔서 감사합니다 :)
질문 주신 부분에 답변드려보자면 우선 첫번째 질문은 저도 디자이너 입장에서는 primitive-semantic-component로 연결되는 구조가 더 좋다고 생각합니다. 다른 해외 디자인토큰 영상을 보아도 그렇게 이용하는 것 같았구요. 그래서 저도 회사 시스템을 짜 볼 때 그렇게 제안을 했었는데요~ 그런데 저희 회사 개발자 분들이 primitive-component로 바로 연결하는 방식을 더 원해서 아직 저희 회사에서는 다이렉트로 연결하는 방식을 사용하고는 있습니다. 개발 방식에 따라 다를 것 같긴 하지만, 제 추측엔 orange800과 같은 각 primitive값을 미리 등록해놓고 이 값들을 컴포넌트로 적용하고 싶은데 아무래도 중간 단계가 하나 더 있는게 불편했던 것 같아요. 아쉽게도 피그마 dev모드에서는 베리어블의 단계 트리를 볼 수 없거든요 ㅜㅜ 뷰어로 초청된 사람들도 마찬가지구요. (코드에도 컴퍼넌트팔레트명과 헥스 값만 뜹니다) 그래서 제가 추천드린 플러그인으로 토큰이 연결된 베리어블 리스트를 뽑아서 확인할 수 밖에 없는데, 결국 컴포넌트 팔레트와 연결된 primitive값을 찾고 싶을 때 한단계 더 거쳐야 하는 과정이 불편하게 생각되지 않았을까 예상됩니다. 그래서 제 생각엔 이 디자인 토큰을 3단계로 전체 연결하는 게 나을지 2단계로만 연결이 나을지는 각 회사 팀마다 더 편한 방식을 찾는게 좋은 것 같아요 :)
두번째 질문의 경우, 제가 리서치했을때는 primitive는 오렌지, 블루 등 색상으로 이루어진 값들, semantic은 brand컬러를 필두로 neutral, warning, success 같은 시스템에 필요한 컬러값들, component는 버튼, 인풋과 같은 컴포넌트 컬러 값들로 주로 찾을 수 있었습니다. 그런데 이것 또한 이야기 주신 것 처럼 사람 혹은 팀 마다 사용하는 방식이 조금씩 다르지 않을까 생각되긴 합니다^^
어쨌든 이 디자인 토큰을 활용하는게 아직 완전 활성화는 안되고 아직 시작단계라고 보기 때문에 좀 더 완전한 개념이 정립될때까지는 시간이 더 걸리지 않을까 싶어요. 저도 계속 스터디 해보면서 보완할 설명이 있다면 추가적인 영상 또 제작해보겠습니다. 좋은질문 감사했습니다. 편안한 밤 되세요 :)
@@designer_dk 현업에서 어떻게하는지랑 엮어서 친절한 답변 해주셔서 감사합니다!! 그리고 첫번째 예시 들어준 것을 보고 많은 생각을 해보았는데요. 개발자 또한 3단계에 걸쳐서 색깔을 정의한다면, 굳이 Primitive 값을 확인할 필요 자체가 없어지고, 피그마에 정의된 이름대로 사용할 수 있어서 좋을거 같다고 생각되네요. 자바스크립트로 theme을 만들어 사용하든, css에 정의하여 사용하든 모두 적용가능하기도 하고, 나중에 유지 보수에도 훨씬 좋을거 같습니다!! 예를들면 만우절에 다른회사와 브랜드 컬러? 컨셉을 바꾼다고 했을때, 개발자도 3단계에 걸쳐서 색깔을 정의했으면, 디자이너가 특정 Semantic 컬러들만 다른 바꿀때, 개발자도 Primitive 컬러를 일일이 바꿔주는 것이 아니라 Semantic컬러만 디자이너와 똑같이 바꾸면 똑같이 적용되어서 훨씬 편할거라고 생각됩니다! 저도 어떻게 코드 구조를 가져가야 디자이너와 한 몸 처럼 일할 수 있을지 한번 더 생각해 볼 수 있어서 좋았습니다. 감사합니다!
시스템 가이드를 만들고있는데 영상이 참 많은 도움이 되고있습니다 :) 실무에서는 개발까지 완료된 후에 가이드가 만들어지는 경우가 많은데
화면이 엄청 많을 때 효율적으로 베리어블 팔레트를 적용시키는 방법은 있을까요 ? 영상에선 다 하나씩 잡은 다음에 컬러를 연결하더라구요!
같은 컴포넌트(인스턴스), 같은 팔레트 컬러, 같은 폰트 등 같은 종류들끼리 선택할 수 있는 기능이 edit-select all with 에 있어서 저는 주로 이걸 잘 이용합니다🙂 그래도 더 세분화해서 셀렉트해야할 땐 어쩔 수 없이 개별적인 선택이 필요할 것 같아요 ㅎㅎ
답변 너무 감사드립니다!
좋은 강의 감사합니다 :)
질문이 있는데요 !
파운데이션 컬러 값 설정할때 어느 곳은 900,800,700 이렇게 하고 어느 곳은 99,95,90 80 70 이렇게 하던데 이것도 회사마다 다른건가요??
네 그것도 자유입니다 ㅎㅎ
@@designer_dk 답변 감사합니다 ㅎㅎ 혹시 그러면 베리어블로 파운데이션 색상값 입력할 때 콜렉션 이름을 primitive로 설정하셨는데 그냥 foundation으로 설정해도 괜찮을까요?
27:35
실전예제로 영상 제작해 주셔서 너무 너무 큰 영감을 얻고 갑니다. 👍
질문드립니다.
❶ primitive > ❷ semantic > ❸ component 으로 토큰화 되어과정에 있습니다.
영상 제작에서는 ❸ component에서도 ❶ primitive를 굳이 참조해야된다면, 활용도 없는 ❷ semantic으로 토큰화 과정이 굳이 필요할까요?
결국 ❸ component으로 토큰화를 할때 시멘틱을 참조하는 것이 좀 더 명확할 거 같아요.
또하나는 ❸ component으로 토큰화시 레이블링이 아직 기능을 유추할 수 있는 것은 아닌 단계로 보여지고 오히려 시맨틱 단계에 머물러 있지 않았나 의견드립니다.
예를 들어 ❸ component 단계에서 을 참조시키는 것이 _orange 800을 참조 시키는 것보다 의도한 토큰화에 더 맞지 않을까 생각됩니다.
안녕하세요. 좋은 질문 감사합니다.
저도 이 디자인 토큰관련해서는 해외 레퍼런스들을 많이 참고하면서 만든 케이스인데
그 레퍼런스들에서 1.Primitive-2.Semantic-3.Conponent 구조로 많이 설명이 되어있다보니
저도 일단 그러한 정석적인? 레퍼런스 구조로 먼저 설명드릴 필요성이 있다고 판단되어서
일단 1,2,3단계 구조 모두 토큰화 시키는 과정을 설명드려 본 것이구요~
실질적인 적용은 제가 자주 하는 방식 중 하나의 사례로 영상을 만든 케이스라고 볼 수 있겠습니다.
사람마다 사용방식이 다르겠지만 저는 일단 변하지 않게 설정하는 건 1단계 Primitive이긴 합니다.
1단계는 회사에서 사용하는 고정 팔레트들로 구성해두는 편이라
추가가되면 추가가되었지 왠만해서는 그 값을 바꾸지 않는 편이구요
그 다음부터는 제 개인적인 스타일이긴 한데
1단계와 연결되는 다음 토큰을 2,3단계가 섞인? 스타일로 구성한 후
1단계에서 바로 연결시켜서 사용하는 편입니다.
3단계의 경우 컴포넌트별로 팔레트를 구성할 수 있어서 관리에 특화된 면이 있지만
모든 컴포넌트를 다 쪼개서 팔레트화 시키는 것에는 한계가 있다고 느껴져서
버튼이나 인풋같은 주요 컴포넌트는 전용 팔레트로 분리시키는 편이고
그 외의 컴포넌트나 엘리먼트는 보편적인 팔레트로 사용하는 편입니다.
예를들어 Surface/Brand/Primary, Surface/Neutral/BG, TextIcon/Onsurface/HighEmp 이런식으로
어떻게보면 2단계느낌의 팔레트 구성도 함께 섞어서 진행할 때가 많습니다.
따라서 이부분은 사용하는 디자이너들이 편하게 사용할 수 있는 방식을 그 회사 개발팀과 함께 고민해서
정해나가면 된다고 봅니다. 영상에서도 이야기드린대로 정답이 있는 부분이 아니니까요 :)
다만 저는 1단계는 디자인시스템에 있어 핵심이라고 생각하는 편이여서
1단계를 제외하는건 다소 부정적인 입장이긴한데요.
대신 2,3단계의 경우는 디자이너스타일에 맞게, 혹은 프로젝트 스타일에 맞게, 회사 스타일에 맞게
잘 정해서 쓰면된다고 생각합니다.
1->2->3 방식, 1->23 방식, 1-> 2방식, 1->3 방식 등 여러 케이스가 나올 수 있으니까요~
이 토큰 방식이 역사가 길지 않은 부분이여서 점차 좋은 사용 솔루션은 계속해서 나오지 않을까 싶습니다.
혹시나 추가적으로 좋은 솔루션이 나오면 또 영상으로 제작해볼게요 ^^
감사합니다.
영상 잘 봤습니다! 이해가 잘 안가서 그런데,, 또 컴포넌트로 분류 하는 작업이 왜 필요한건지 잘 이해가 안가네요ㅠㅠ
안녕하세요 🙂 이 영상에서는 프리미티브를 시멘틱으로도 연결할 수 있고 컴포넌트로도 연결할 수 있고 여러 케이스를 보여드리긴 했어요~ 사실 모든 컴포넌트를 토큰화 하면 팔레트가 너무 많아지기 때문에 자체 팔레트가 있으면 효과적인 컴포넌트들만 해도 좋다고 봅니다. (버튼, 인풋 등) 컴포넌트 토큰화의 장점은 제가 ruclips.net/video/IN0a_3c1vJs/видео.html 이 영상에서 자세히 설명드렸으니 확인하시면 도움되실 것 같아요 :) 감사합니다.
진짜 개어렵다 😂😂😂😢😢😢