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

친절하게 답변해주셔서 정말 감사합니다.. 많은 도움이 되고 있습니다. 질문이 몇가지 더 생겨서 다시 질문드립니다 ㅠ

일단 저는 [Primitive -> Theme -> Semantic] 형태로 제작 중이며, 예제와 다른 점은 Primitive에 opacity를 조절한 팔레트를 추가해야하고, Theme에 한 brand에 컬러를 2개 넣어야 하는 상황입니다.

1. 이 때 Primitive에 만든 opacity 팔레트는 theme에서는 뭐라고 명칭하면 되나요? 그냥 opacity라고 똑같이 써도 상관 없나요?

2. Theme에서 brand 아래 primary와 secondary를 넣으면 한 브랜드에 2개 이상의 컬러를 넣을 수는 있지만, 다른 브랜드에서도 2개 이상의 컬러를 반드시 넣어야하는 형태인 것 같은데.. 혹시 이것말고 다른 방법이 있을까요?

3. 그리고 브랜드별로 그라디언트가 많이 활용될 예정인데, 이것도 그냥 theme의 brand 아래에 넣는게 베스트일까요?

세영님 언제든지 질문 주세요!

1. 만약 두 브랜드 사이에 Opacity의 차이가 없는 경우는 바로 Semantic으로 가셔도 무방합니다. 즉, Semantic에서 바로 가져다 쓰면 됩니다. 만약 브랜드마다 다르게 하고 싶은 경우는 theme에서 별다른 디자인 요소의 이름이 생각이 나지 않으면 opacity라고 하셔도 괜찮습니다.

2. 네 맞습니다. 만약 Theme을 중간에 배치해두면 모두 다 같이 사용해야 합니다. 그래서 저의 경우는 시맨틱 스타일 가이드라인을 브랜드별로 사용하기도 합니다. 브랜드마다 베리어블 구조가 다를 수 있기 때문입니다. 하지만 중간에 배치해둔다면 제 강의에서 보이다시피 모두 다 secondary를 사용하면 다 같이 사용해야합니다.

3. Theme에서 관리하시면 괜찮을 것 같습니다. gradation primary, secondary 등등을 만드시고 이후에 스코핑을 설정해주시면 됩니다. 여기서 약간 트릭이 있는데요. 지금 버전에서 스타일 안의 그라데이션에 들어가는 색상 베리어블을 찾으려고 하면 반드시 스코핑이 모두 선택된 상태이어야 합니다. 이런 경우는 다른 디자인 요소(Frame, text, shape, effect 등) 다른 곳에서도 다 보이는 단점이 있습니다. 만약 이런 경우 스코핑 중 하나를 선택 하시구요, 저의 경우는 Frame을 선택하고 스타일을 만들 때, Frame 위에다가 그라데이션을 만들고 추가를 하시면 됩니다. 이렇게 하면 이 스타일 가이드라인을 Shape, Text 아무데나 붙일 수 있습니다.
   이 부분이 업데이트 되리라 믿는데, 안되는 경우는 이렇게 한번 사용해보세요.
   
   질문 있으시면 언제든지 주세요! 감사합니다.

정말 감사합니다... 진행하다보니 또 질문이 여러개 생겼습니다.

1. 혹시 그라데이션을 배리어블에 추가하는 방법이 있는걸까요..?? 찾아보니 배리어블에 그라데이션 추가를 못해서 컴포넌트로 관리하는 경우가 더 많은 것 같은데, 말씀을 들어보니 배리어블로 관리하시는 것 같아서요 ㅠ

2. inverse는 정확히 어떤 개념인가요? 라이트모드에서 inverse가 밝은 컬러면 다크모드에서는 inverse 색상이 무조건 어두운 컬러여야 하는건가요?

3. 만약 2번이 맞다면, pirmary 버튼의 텍스트에 inverse 색상을 쓰셨다고 하셨는데 다크모드에서도 밝은 컬러를 유지하고 싶다면 inverse 컬러를 사용하면 안되는건가요?

4. disabled는 보통 interactive한 요소가 사용 불가능할 때 사용되는 컬러인데 interactive에 넣지 않은 이유가 있을까요?

5. accent라는 네이밍은 자유롭게 강조용도로 사용하고싶을 때 semantic에서

   사용하면 될까요?

1. 그라데이션 및 스타일 관리:

   그라데이션 자체는 베리어블에 직접 추가할 수 없습니다. 대신 스타일을 만들어 그 안의 요소들을 베리어블에 등록하여 관리할 수 있습니다.

2. Inverse 개념:

   Inverse는 말 그대로 대비를 의미합니다. 어두운 배경에서는 흰색, 밝은 배경에서는 검정색으로 표현됩니다.

   예를 들어, 몇몇 앱을 다크 모드로 전환해 보시면 버튼 색상이 흰색에서 검정색으로 바뀌는 것을 볼 수 있습니다. 이처럼 대비되는 색상을 지정하시면 됩니다.

    

   그래서 강의에서도 다크 모드에서는 inverse 색상이 흰색에서 검은 계열로 바뀐다는 점을 참고하세요.

3. Disabled 요소 처리:

   Disabled 상태는 interactive 요소에 포함해도 괜찮습니다.

   다만, 저는 두 가지 이유로 포함하지 않았습니다:

   1. 인터랙티브하지 않다: Disabled 상태는 상호작용이 불가능하므로 “interactive”라는 용어와 어울리지 않는다고 판단했습니다.

   2. 명칭의 간결성: “interactive-disabled”라는 명칭이 길어져서 생략했습니다. 하지만, 이해에 큰 문제가 없을 것이라 생각했습니다.

      반면에, interactive-primary처럼 “interactive”를 생략하면 기존의 primary와 구분을 주기 위해 때문에 기존처럼 유지하였습니다.

       

4. 액센트 컬러: 당연히 넣으셔도 됩니다. 다시 한번 말씀 드리지만 정답은 없습니다. 같이 일하는 동료만 설득해서 모두 동의를 하면 됩니다. 그리고 제 강의는 하나의 예시일 뿐 세영님 만의 구조를 짜보시는 걸 추천드립니다.
   
   
   그리고 이렇게 질문과 답변을 해주시면 세영님만의 구조를 더 명확하게 짜시리라 믿습니다. 정말 좋은 질문들 감사합니다.
   

질문 주셔서 감사합니다.

제가 원티드 디자인 시스템을 제작하진 않아서 왜 이렇게 만들었는지는 사실 잘 모르겠습니다. 아마 원티드 디자인 시스템을 제작하신 분께 직접 물어보시면 더 좋은 답변을 받으실 수 있을 것 같습니다.

우선 저의 뇌피셜 견해를 말씀 드리면,

1. 우선 원티드는 Theme은 없는 것 같습니다. Palette - Primitive, Semantic - Semantic 이렇게 구성되어 있습니다.

2. 원티드 디자인 시스템은 스타일 안에다가 베리어블을 저장해놓았습니다. 그리고 스타일을 컴포넌트에 바로 입력해두었습니다.

   반면 제 강의에서는 베리어블을 직접 컴포넌트에 입력합니다. 이렇게 원티드가 한 이유는 잘 모르겠지만 제 생각에는 이미 기존 디자인 시스템에 스타일을 시맨틱 형식으로 만들어 두었고 베리어블을 직접 대응하는 것보다 기존 디자인 시스템을 유지하면서 베리어블만 스타일에 연결하는 방식을 취한 것 같습니다. 저는 개인적으로 이 방법의 경우는 기존 스타일로 연결된 페이지도 활용할 수 있는 좋은 전략인 것 같습니다. 하지만 전제 조건은 이전에 스타일을 시맨틱 관점에서 잘 만들었다는 가정 하입니다.

3. 두 번째 저의 뇌피셜 이유는 색상을 다루는 방식에서 하나의 원색이 아닌 다양한 색을 한 스타일에 담아두는 방식을 사용하기 때문이 아닌가 싶습니다. 예를 들어, primary가 있는 경우 저의 경우에는 hovered인 경우 다른 색상 값을 대응합니다. 하지만 만약 hovered의 색상에서 primary 색을 그대로 둔채로 그 위에 얇은 어두운 배경색을 두어서 만들고 싶은 경우는 스타일이 적합하겠죠. 왜냐하면 스타일은 여러 색상 요소를 담아 둘 수 있기 때문입니다.

4. 피그마에서 제공하는 UI 킷을 살펴보더라도

   1. iOS, Simple 디자인 시스템: 현재 강의 방식

   2. 머티리얼 디자인 시스템: 원티드 방식

   강의에서 언급했듯이 디자인 시스템은 형태가 너무 다르고 제각각입니다. 그래서 정답이 없습니다. 제 강의도 한가지 예시에 불과합니다. 그래서 강의에서 언급했듯이 회사 프로덕트와 유사한 몇가지 기준 되는 디자인 시스템을 토대로 만들어보시는 것을 추천드립니다.