인프런 커뮤니티 질문&답변

앞 질문에서 언급해드렸듯이, 전체 구조는 동일하지만 용어는 회사마다 다르게 사용 할 수 있습니다.

하지만 질문에서 이미 답을 발견하셨듯이, 이제 전체적인 얼개를 알고 계신 것 같습니다.

1. 라이브러리를 외부로 내보낼 때, 숨길 수는 있습니다. 콜렉션 앞에 . 을 붙이시면, 콜렉션은 Hidden 안으로 들어가면서 내보내지 않을 수 있습니다. 이 부분은 스타일 가이드 부분에서 컴포넌트 사이에서 배우실 수 있습니다.

2. 이 회사의 구조는 atomic, semantic 이렇게 구조가 되어 있습니다. 원티브에서는 UI에 색상을 적용할 때 베리어블에서 가져오는 것이 아니라 컬러 스타일에서 가지고 옵니다. 이렇게 하는 이유는 여러가지가 있는데, 우선 강의 앞부분에서 베리어블과 스타일의 차이에서 스타일은 여러 변수를 넣을 수 있는 반면, 베리어블은 그러지 못합니다. 예를 들어, hover에서 기존 default 색상 위에 다른 색상값을 올리는 경우가 될수 있습니다. 이는 머티리얼 디자인을 참고해보시면 됩니다. 또한 이미 스타일로 다 만들어진 경우 베리어블로 바꾸기 보다는 기존 스타일안에 베리어블을 연결하는 경우가 있습니다.

   
   

   

   .

3. Component, Frame의 경우는 제가 그 회사를 다니지 않아서 왜 이런 결정을 했는지 모르겠지만, 추측건데, 베리어블 창의 atom, theme은 컬러고, component와 frame은 숫자 즉, 패딩, 높이 너비 등으로 구분한 것 같습니다. 이후에 제 강의에서도 이 부분에 대해서 많이 배우실 것입니다.

4. 시멘틱이라는 말 자체가 "의미가 있는 것." 디자인 시스템(UI Kit)에서는 단순하게 색상의 의미 역할을 부여한다고 생각하시면 됩니다. 그냥 빨강이 아니라 경고(warning) 중에서도 텍스트(text)에 사용되는 색 이렇게 말이죠. 그래서 크게 보면 UI 요소라고도 보실 수 있습니다. 강의에서는 라이트/다크 모드로 나오는데, 이는 이 모드가 가장 흔하게 사용되기 때문입니다.

    

    

   질문 더 있으면 주세요. 감사합니다.

    

    

안녕하세요, 인프런 AI 인턴입니다. gusdyd20님, 디자인 시스템의 계층구조와 그룹명에 대한 궁금증을 해결하기 위해 도움을 드리겠습니다.

질문에 대한 답변:

1. Semantic의 그룹명 표시 여부:

   • 그룹명 숨기기 가능성: 디자인 시스템에서 특정 그룹명을 숨기는 것은 가능할 수 있지만, 대개 사용자의 설정이나 디자인 시스템 라이브러리 설정에 따라 다르게 보일 수 있습니다. semantic이라는 그룹명이 보이지 않는 것은 설정에 따라 숨겨져 있거나 다른 방식으로 표현된 것일 수 있습니다.
     
   • 원티드 디자인 시스템의 가능성: 해당 디자인 시스템이 외부 라이브러리에 기반한 것이라면 semantic이라는 그룹명이 외부 라이브러리의 형태를 따를 가능성도 있습니다. 만약 다른 시스템에서 가져온 것이라면, 기존 설정을 그대로 반영하려는 의도일 수도 있습니다.
     

2. 이 회사의 계층 구조:

   • Atomic 및 Theme 구조:
     
     • 흔히 사용하는 Atomic 구조는 기본적인 디자인 요소(Colors, Text Styles 등)를 정의하고, Theme은 브랜드나 스타일 글로벌 설정을 위한 레이어로 사용됩니다. 설명하신 구조에서 Atomic이 강의의 Primitive와 유사하게 작동하며, Theme이 Theme/Semantic 역할을 한다고 볼 수 있습니다.
       
     • 이는 디자인 시스템마다 다를 수 있으므로, 해당 구조는 조직의 디자인 운영 방침에 따라 맞춰져 있을 것입니다.
       

3. Component와 Frame의 역할(예외 관리):

   • Component와 Frame의 사용:
     
     • Component와 Frame은 디자인 시스템에서 중요한 역할을 하며, 종종 Role로 구분되기도 합니다. 각각 독립적인 그룹으로 다루어지는 것은 복잡성을 줄이고 관리를 용이하게 하기 위함으로 볼 수 있습니다.
       
     • 이는 특정 조건에서 Role로 포함하기보다는, 실용성 측면에서 컴포넌트와 프레임별로 독립된 접근이 필요함을 나타낼 수 있습니다. 이러한 관행은 다양한 프로젝트에서 나타날 수 있으며, 프로젝트 요구사항에 맞춰 유연하게 적용되는 것입니다.
       

관련 자료:

• 컬러 베리어블에서 semantic 관련
  
• 디자인시스템 시멘틱 컬러 관련
  

위의 답변들이 gusdyd20님의 이해에 도움이 되길 바라며, 디자인 시스템의 계층구조에 대한 궁금증을 해소하는 데 참고가 되었기를 바랍니다. 추가적인 질문이 있으시면 언제든지 게시판을 통해 문의해 주세요. 곧 지식공유자께서도 추가적인 답변을 제공해 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.