묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
디스코드 참여 안됨
안내해주신 링크를 눌러 디스코드에 참여하려는데 없는 링크거나 참여 권한이 없다고 뜹니다..ㅠㅠ
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인시스템 작업중 생긴 여러 질문들 드립니다.
안녕하세요 튜터님강의를 너무 잘보고있습니다! 고민하던 많은 부분이 해소되고있어 감사한 마음이에요 ㅠㅠ강의를 듣던중 평소 가지고있던 몇가지 질문과, 강의에서 파생되는 질문들이 있어 아래 문의남깁니다! [Shadow 여러겹 효과를 주는 이유] shadow효과의경우 튜터님께서도 강의에서 2개 값을 주신것처럼 1개 값만 주기보다는 2개씩 추가해 값을 주는경우가 많은것같은데요. 보다 섬세하게 그림자를 표현하기 위함일까요? (그렇다고 3~4개를 넣는 경우는 못본것같은데, 이렇게 레이어를 쌓듯이 그림자를 많이 추가하는 경우가 있을까요?) 2개를 넣었을때 위에 들어가는 수치와 아래 들어가는수치가 각각 의미하는게 강의에서처럼 큰 그림자, 잔그림자로 생각하면 될런지요? 너무 사소한건데 볼때마다 왜 다들 2개씩 추가해서 쓰게되었을까 궁금했던 부분이라 궁금해서 문의드립니다^^; [1개의 뜻에 여러 용어가 쓰이는경우] 모달 뒷배경의경우에 스크림이라고 나와있는데, overaly, dimmed 이런 용어도 혼용해서 많이 쓰고있는것같아서.. 혹시 3개가 각 의미하는바가 다를까요? 팀에서도 디자이너마다 비슷한데 다르게 쓰고있는 용어들이 종종 있어서 통일을 해야겠다 싶은데, 각자 입에 붙은용어가 편하다보니.. 어떤 기준으로 통일을 제안할수 있을까 싶은데 튜터님은 비슷한 상황이면 어떤 기준으로 통일을 하시나요? [레이어명 작업] 그리고 또하나 사소한것일수 있는데, 튜터님은 작업하실때 레이어이름을 디자인 할때마다 그때그때 수정하시나요? 빠르게 작업하다보면 신경을 못쓸때가 있는데 나중에 정리하려면 너무 레이어가 많아서 엄두가 안나더라구요. 이런경우는 디자인시스템이 확립되면 많이 수월해질것같은 부분이긴 하지만요. 레이어 이름을 매번 수정해야하는것, 그리고 어떤 레이어이름을 써야할지 이또한 컴포넌트화되어있지 않으면 매번 통일해서 쓰기가 (다른 디자이너와도 일관되게 사용하는게 어렵고, 스스로도 대소문자, 레이어 명칭을 모든 화면에 통일해서 쓰는게) 번거롭고 일관성 유지하기가 어렵다는 생각이 드는데 이런 어려움이 있으셨거나 해결하고 계신 방법이 있으신지 문득 궁금하여 긴 질문글 남깁니다..! [라이브러리를 고려해 디자인시스템을 만들때 주의할점] 저희 개발자분들이 tailwind, shadcn 라이브러리를 사용하는데.. 라이브러리를 고려해 디자인시스템을 만들때 주의해야하는점이 있을까요? 디자인시스템을 막 만들려고 하는 초기단계라, 어떤점을 고려해야좋을지싶어서요. 우선은 컴포넌트의 경우 라이브러리를 활용할수있는 컴포넌트(date pick과 같은)는 디자인을 해놓지 않고, 라이브러리에 없거나, 있다고하더라도 다른 형태의 디자인이 필요하다 생각하는경우는 디자인팀에서 컴포넌트로 만들고 개발팀에서 사용하게 하는 방식을 고민해보고 있어요. 라이브러리마다 토큰 형식이 정해져있다면 그 방식도 따라야하나 싶은데, 토큰은 라이브러리와 관계없이 정해도 되는걸까요? (추후 주로 쓰는 라이브러리가 변경될수도 있으니..?) [멀티프로젝트 대응을 위한 디자인시스템] 디자인시스템 만드는 과정에서 너무많은 변수를 고민하고, 완벽한 시스템을 기준에 두고 생각하다보니, 보게되는 자료도 너무많고, 각 회사마다 스타일도 다르고 이것저것 고민하다보니 속도가 안나서 고민이었거든요.. 특히나 지금 만들려고하는 시스템은 멀티브랜드도 아니고 멀티 프로젝트에 대응할수있는것을 만들려다보니, 보통은 인하우스나 멀티브랜드용 시스템들이라 이런 목적의 디자인시스템 케이스가 없더라구요. 이런경우에도 강의에서 멀티브랜드용으로 생성했던 테마 베리어블을 적용하면 이점이 많이 있을까요? 이렇게 에이전시성격의 멀티프로젝트를 응대하는 디자인시스템중에 참고할만한 레퍼런스가 있는지 아시는지도 궁금해 함께 여쭤봅니다..! 사소한 질문들도 남긴것 같아서 다소 질문이 길어졌네요.. 천천히 답을 주셔도 너무 감사할것 같습니다! 그럼 좋은하루되세요 🙂
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
컬러선택시 아이콘 컬러가 리스트에서 안보여요
BOLD PLUS Foundation v1.2.1 (Community)이 버전을 Added 하고 실습을 따라하고있는데요. 아이콘을 선택하고 color/icon/interactive 가 활성되지않습니다. color/bg border 등은 다 보이는데 icon 컬러만 안보입니다. 어떻게 하면될까요?
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
라이브러리 세팅과 연결 관련 질문드립니다.
안녕하세요~ 현재 [섹션 4. 컴포넌트 만들기 전 라이브러리 세팅하기] 부분을 듣고 있는데어디서 잘못 된 건지 알 수 없어 이렇게 질문 드립니다. [섹션 4. 컴포넌트 만들기 전 라이브러리 세팅하기] 에서 라이브러리를 발행하는 건앞강의에서 실습한 베리어블 파일 말고 올려주신 BOLD PLUS Foundation v1.2.1를발행하는 걸로 이해했는데 맞을까요?UI component library space 파일은 그냥 제가 따로 새 파일을 만드는건가요?아니면 혹시 파일을 공유해 주신 걸까요?일단 제가 UI component library space파일을 새로 만들고 영상대로따라 해본다고 했는데 뭐가 잘못 된건지 에셋들이 뜨지 않고 계속아래 이미지로 보이는데 어떻게 하면 퍼블리시한 에셋들이 보일까요? ㅜㅜ
-
해결됨디자인 시스템 with 피그마
업데이트 버전 토큰 스튜디오 import 시 ..and 2 more
보더 색상을 피그마에서 지정 후 토큰으로 import하여 색을 옮기려 했는데요. 노란색으로 체크한 것 처럼 ...and 2 more 이라고 뜨고 선택할 수가 없습니다. 이 more 안에 피그마에서 지정한 색이 있을 것 같은데.. 방법이 없을까요?
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
완강이벤트
안녕하세요.완강 후 설문조사와 수강평을 남겼습니다.선물혜택은 메일로 발송이 되나요?감사합니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
디스코드 채널에 들어가지지 않습니다.
디스코드는 이제 들어갈 수 없는걸까요? 링크로 진입했는데 초대를 수락할 수 없다고 뜨네요.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
반응형 / 적응형 웹의 정의에 대한 질문이 있습니다.
안녕하세요. 좋은 강의 잘 보고 있습니다. 디자인 시스템을 구축하는데 있어 큰 도움이 될 것 같습니다. 🙇♂ 영상 초반 반응형과 적응형 웹의 정의 설명 부분에서 질문이 있습니다. 제가 아는 기준에선 반응형은 기기에 상관없이 브라우저의 사이즈에 따라 미디어 쿼리로 구현해놓은 브레이크 포인트에 맞춰서 스타일이 달라지는 것이고, 적응형은 클라이언트의 기기를 웹서버에서 미리 파악하여 해당 레이아웃을 서버에서 내려주는 방식으로 알고 있습니다. 이에 따라 반응형은 브라우저의 크기가 변경될때마다 레이아웃을 비롯한 스타일이 변경되고, 적응형은 이미 내려 받은 소스코드가 해당 레이아웃이므로 변경이 없을텐데요. 그래서 예시로 알려주신 애플 웹 사이트는 반응형 웹이고, 적응형의 예시는 네이버가 아닐까 생각이 들었습니다. 제가 아는 것이 틀렸을수도 있고, 디자인에서는 반응형/적응형에 대한 정의가 조금 다른 것일수도 있다고 생각이 들었고, 무엇보다, 협업을 하면서 정확한 정의로 커뮤니케이션이 이루어져야할 것 같아, 어떻게 보면 강의에서 중요한 개념은 아닐 수 있지만, 이 부분에 대해서 조금 더 설명을 듣고 싶어 질문을 남기게 되었습니다. 감사합니다!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 라이브러리 스왑 질문
안녕하세요.피그라 라이브러리 스왑 관련해서 질문드립니다. A 파일에서 로컬로 마스터컴포넌트 생성해서 사용중인데,마스터 컴포넌트만 파일을 분리하여 B 파일을 생성하고 이를 링크시켜 사용하고자 합니다. A 파일을 퍼블리싱하고 새로운 B 파일에 마스터 컴포넌트를 복사하여 퍼블리싱한 하여 링크시키고라이브러리 스왑한 후 A 파일에서 원본을 삭제하는 방식으로 하고싶은데,라이브러리 스왑을 진행해도 오류메시지는 없느나 스왑이 되지 않고있습니다. 방법이 잘못된 것인지 궁금합니다.
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
vector 아이콘 유니온시 아이콘이 깨지는 현상이 있어요!
첫번째 사진은 유니온 하기 전두번째 사진은 유니온 후 입니다! 지금 사진에 나와있는건, 벡터가 아예 깨지는 현상이지만어떤건 색깔이 아예 빠지는 것도 있는 등.. 유니온 시 그대로 유니온이 되지 않은 현상이 있는데버그인지 아니면 제가 잘 못 해서 그런건지 궁금합니다!
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
아이콘 사이즈 변경
안녕하세요! 강의 잘 들으며 실습해보고 있습니다.버튼을 컴포넌트 세트로 만드는 연습을 하고 있는데요.사이즈별 버튼 생성시, 기존 24*24 사이즈의 아이콘에서 버튼의 사이즈에 맞게 아이콘 사이즈도 키워지면 좋을 것 같은데, 아이콘 프로퍼티 변경시 24*24 사이즈로 복귀됩니다. 아이콘 파운데이션을 크기별로 생성하는 것 말고 혹시 어떤 방법을 사용할 수 있는지 여쭙습니다.혹 제가 해당 개념을 강의 중 놓쳤거나 했다면 알려주시면 감사하겠습니다!
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
컬러 베리어블에서 semantic 관련
컬러 베리어블에서 semantic 관련semantic - text 정의 interactive를 따로 구분한 이유는 무엇인가요? 예를들어 웹 사이트의 GNB 텍스트 메뉴(버튼)의 primary, hover, pressed를 설정하기 위함 인가요?그럼 버튼 컴포넌트의 텍스트는 모두 컬러 설정 할때 semantic - text 정의 interactive로 정의 하면 되나요?아래 볼드님 피그마 파일로 스터디 중인데요. 위에 언급햇듯이 GNB의 텍스트 메뉴(버튼) 기본이 블랙컬러, 호버하면 블루 컬러로 변경되는 형태일 경우 컬러 베리어블 정의된 값을 어떻게 적용해야 하나요? 아래 첨부파일 이미지 보면 text>primary는 블랙, text>interactive>primary는 블루로 정의하셨는데...이런 부분은 뭔가 부딪치는 느낌입니다..text>interactive>primary가 필요한가요? interactive에서는 호버, 프레스, 디세이블, 셀렉티드 같은 상태값(states)만 정의 되야 하는거 아닐까 싶은데..의견 부탁드립니다. ? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨디자인 시스템 with 피그마
타이포 폰트 소수점 사용 관련 질문
안녕하세요 강의 잘 듣고 있습니다. 다름이아니라 폰트 관련해서 질문이 있어 질문 남깁니다. 왜 소수점을 사용하는지 이해가 안됩니다..! 기본 정수로 사용하면 안되는건가요?다른 디자인 시스템 같은 거 살펴보면 폰트 또한 소수점으로 끝나는 게 아닌 정수에 맞게 떨어지도록 정리를 해놨는데 소수점으로 하는 이유가 있을까요? 이렇게 소수점으로 이용했을 경우 실제 개발 시에 문제가 생기거나 그런 건 없을까요?
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
semantic 컬러 베리어블 정의 할때 왜 여기선 무조건 theme 컬러를 참조하는 이유가 무엇인가요?
semantic 컬러 베리어블 정의 할때 왜 여기선 무조건 theme 컬러를 참조하는 이유가 무엇인가요? primitive를 참조하지 않는 이유는 무엇인가요? 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
해결됨그 누구도 알려주지 않았던 UXUI 필수 지식, 디자인 시스템
궁금합니다.
위에는 프레임 인데 아래 아이콘은 어떤 경우 인가요?? 도형인 경우에는 다른 모양이라서요!
-
미해결피그마 배리어블을 활용한 디자인 시스템 구축하기
Part/MenuItems 컴포넌트 세트 만들때 badge 문제
다양한 형태의 사이드 네비게이션(Side Navigation) - 파트2Part/MenuItems 컴포넌트 세트 만들때 badge값을 하나만 변경해도 Full, Icon only, Icon & label 모두 변경됩니다. Full만 Number로 왜 안될까요??? 그리고 강의 너무 감사합니다. 한국어로 된 디자인 시스템 강의도 잘 없지만, 반복해서 연습해볼 수 있게 강의를 구성해주셔서 쉽게 잘 따라갈 수 있어요. 케이스별 실무 팁도 자연스럽게 배울 수 있고요. 수강생들에겐 참 알찬 강의인데, 강의 제작하시는 과정이 쉽지 않으셨을 것 같고.. 여러모로 정말 많이 배웁니다, 볼드님 :)
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
Value 값을 대문자로 꼭해야하나요?
Value 값을 대문자로 꼭 표시하지 않아도 괜찮을까요? 개발자와 네이밍에 관련해 카멜표기를 하자고 했었는데 컴포넌트 또한 카멜표기로 해야하는지 궁금합니다
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
피그마 UI 에 대해 여쭙니다.
강의를 열심히 듣고 있습니다.근데 한가지 해결이 안되는 문제가 있어서 질문드립니다.이번에 피그마가 UI3 로 업그레이드를 했다고 하는데, 저는 일단 강사님 버전에 맞게 거기에 맞춰서 하고자 하는데, 테스트로 여러개를 만들어봤는데, 어떤건 UI3 로 화면이 새롭게 바뀌어서 나오고 어떤건 이전 UI 로 나오더라구요,근데 UI3로 나와도 피그마 안에 들어가서 오른쪽 하단에 ?이이콘을 클릭하면 Go back to previous UI를 클릭하면 원래버전으로 돌아간다고 주변에서 알려줬는데, 그 메뉴가 아예 없어서 UI3 이전 인터페이스를 사용하려면 어지 해야 하는건지 해서요 ㅜㅜUI3는 아직 베타버전이라고 하니 아직은 이전 화면으로 사용하고 싶은데, 방법이 있을까요?
-
해결됨피그마 배리어블을 활용한 디자인 시스템 구축하기
색상베리어블 등록하기
색상베리어블 등록하기에서 질문드립니다.플로그인을 사용해서 색상을 등록하는 내용에서 ...아래와 같이 강사님의 화면과 다르게 나와서요이 플러그인을 오른쪽처럼 화면이 뜨는데....강의화면에서는 실행하면 색상들이 뜨던데...혹시 제가 중간과정을 빼놓은걸까요?
-
해결됨디자인 시스템 with 피그마
컬러 맵핑 light/dark 모드에 오류가 있네요!
안녕하세요 좋은 강의 만들어주셔서 덕분에 재밌게 강의를 듣고 있습니다. 다름이 아니라, 저도 컬러 맵핑 오류가 있는데 다른 수강생분들이 남겨주신 질문에 달린 답변을 시도를 해보아도 실패네요 ㅠㅠ다른 방안이 있을까요?+ 플러그인 사이트에 들어가보니 선생님이 남겨주신 솔루션 마지막 단계인 create style이 막혀있더라고요! 그래서 그 방법을 실행하지 못하고 있습니다 ㅠ