Token 등록 방법 문의
46
작성한 질문수 3
안녕하세요. 배리어블 작성법 관련하여 궁금한 점이 있습니다.
강의에서는 모든 컴포넌트에 대하여 배리어블 값을 쪼개서 등록하는것으로 이해하였는데요.
토큰에 대해 리서치 했을 때, Primitive와 Semantic을 따로 활용하라는 권장도 있었어서 실무에서 어떻게 쓰는게 좋은지 궁금합니다.
예시 상황 : Component의 상단 Padding이 20, 하단 Padding이 10일 경우
-> TypeA (현재 강의안) : margin-top-section 20, margin-top-bottom 10으로 각각 등록
-> TypeB : Primitive로 padding 20px, 10px으로 등록 후
margin-top-section-> padding 20px
margin-bottom-section -> padding 10px
답변 1
0
안녕하세요? 혜령님
좋은 질문 감사드립니다.
결론부터 말씀드리면,
강의 방식(TypeA)과 Primitive/Semantic 방식(TypeB)은 서로 틀린 것이 아니라 목적이 다른 구조입니다.
본 강의에서는 요소를 기준으로 값을 쪼개는 방식(TypeA)을 사용했습니다.
AI가 디자인 구조를 헷갈리지 않고 정확하게 읽도록 만들기 위함입니다.
예를 들어
section-padding-top = 20
section-padding-bottom = 10
이렇게 정의하면
AI 입장에서는 “이 값이 어디에 쓰이는지”를 바로 이해할 수 있어서
구현 정확도가 높아집니다.
반면에 실무 디자인 시스템에서는 보통 Primitive + Semantic 구조(TypeB)를 많이 사용합니다.
Primitive
spacing-10 = 10px
spacing-20 = 20px
Semantic
section-padding-top = spacing-20
section-padding-bottom = spacing-10
이 방식은 값 재사용, 유지보수, 확장성에 더 유리해서
실제 실무에서는 보통 이렇게 많이 사용하기도하는데요
둘 중 하나가 정답이 아니라, 상황에 따라 선택하거나 혼합해서 사용하는 것이 가장 좋은 방법이라 생각됩니다
감사합니다^^
J.영드림
0
넵 답변 감사합니다. 혹시 그러면 이 강의의 목적인 AI로 반응형 코드를 바로 대응하기에는 TypeB는 불가하거나 어려운가요?
TypeA : AI로 코드화 하기 유용함
TypeB : 실무상 확장/대응 하기 유용함
으로 이해해도 될까요?
클로드 코드에 붙여넣기후 편집 관련 질문입니다!
0
3
1
session이 점점 길어지면 어떻게 대처하나요?
0
11
1
cursor ai가 업데이트 되서 ui가 바뀌었는데 반영은 안될까요?
0
7
1
자동화프롬프트 가져오기 에러
0
9
1
노션 사용 권한 없음
0
12
2
Google API에 Generative Language API 선택이 없습니다.
0
14
2
아무것도 안됨
0
9
1
윈 터미널의 클로드와 에디터의 터미널의 클로드에 관한 질문
0
9
1
output-styles 명령어 없어 지지 않았나요?
0
10
1
강의자료
0
12
1
Notion에서 이 페이지에 대한 사용 권한 없음
0
15
2
figma 파일을 받을 수가 없어요
0
48
1
다운로드 연결이 되지 않을 때는 어떻게 해야할까요?
0
37
1
커서, 클로드, 피그마는 모두 유료버전을 사용해야하나요?
0
56
1
안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?
0
65
2
노션에 20.Contact가 없어요
0
47
2
Json 플러그인 사용시 variable collection 없음
0
54
2
배리어블 목록 없음
0
87
3
노션 25 인터렉션 구현 파트 안 보입니다!
0
60
2
figma variable 반응형 디자인 결과물 공란
0
101
2
로고이미지가없는데요..
0
77
2
피그마 AI기능 관려
0
97
2
hero-img 이미지
0
97
1
폰트확인 부탁 드립니다.
0
88
2