디자인시스템 관련

안녕하세요, snowmanoh님.우선 좋은 질문 주셔서 감사합니다.저는 디자이너 없이도 디자인 시스템을 구축하는 것은 충분히 가능하다고 생각합니다. 많은 분들이 ‘디자인’이라는 단어 때문에 반드시 디자이너가 있어야 한다고 생각하시지만, 실제로는 그렇지 않습니다. 그리고 초기 단계에서는 인력과 시간이 한정되어 있기 때문에, 새로 모든 것을 만드는 것보다 기존의 라이브러리를 활용하는 것이 훨씬 효율적입니다. 특히 B2B 서비스의 경우, 심미적인 완성도보다 기능적 안정성과 효율성이 훨씬 더 중요하기 때문에, 초반부터 디자인 리소스에 많은 투자가 꼭 필요하다고 보지 않습니다. 실제로 아마존의 일부 AWS 서비스만 봐도 “이게 디자이너가 만든 게 맞나?” 싶은 부분이 있을 정도죠. 반면, 디자인 시스템에서 개발자의 역할은 필수적이라고 생각합니다. 특히 요즘처럼 AI 툴이 있는 경우에서는 사실 기획자와 디자이너 사이의 경계가 점점 줄어들고 있습니다. 제가 일하는 곳의 PM의 경우 러버블 같은 툴을 활용해 프로토타이핑을 하거나, v0에 디자인 시스템을 연결해 직접 디자인 흐름을 잡기도 합니다. 그래서 해외에서는 기획자와 디자이너의 역할 구분이 뚜렷하지 않은 경우가 많고, 그만큼 프로덕트 디자이너 역할이 이 둘을 모두 커버하며, 사용자 경험(UX)에 더 집중하는 역할로 바뀌고 있습니다(비즈니스 부분도 강조되고 그래서 데이터 역량도 요구 되고 있고요) 추천드리고 싶은 방법은, 디자인 시스템을 처음부터 직접 다 만들기보다는, 개발자와 협의하여 현재 사용하는 기술 스택과 프레임워크를 확인한 후 이미 존재하는 시스템을 적극 활용하는 것입니다. 예를 들어 머티리얼(Material)을 사용 중이라면, 이미 완성된 머티리얼 디자인 시스템을 기반으로 시작하시고, 필요한 부분만 커스터마이징하시면 됩니다. 이는 제 강의를 통해서도 그러한 접근법을 쉽게 익히실 수 있을 거예요. 결국 우리가 서비스를 만드는 일은 ‘아트’를 만드는 게 아니라, 사용자의 멘탈 모델에 맞춘 효율적인 인터페이스를 설계하는 일입니다. 예를 들어 버튼 하나를 디자인한다고 해도, 남들과 전혀 다른 형태나 새로운 인터랙션을 만드는 게 아니라, 사용자가 익숙하게 인식할 수 있는 형태의 버튼을 만드는 것이죠. 특히 제 강의는 개발자 분들이 많이 들으시는데, 다 듣고 나시고 실제 개인프로젝트, 그리고 회사에 사용하시는 분들을 많이 보았습니다. 디자인 감각이 없으셔도 충분히 하실 수 있습니다. 감사합니다.볼드 드림.

질문이 있습니다!

안녕하세요, 모모님. 라이브 강의를 바로 오픈하도록 하겠습니다. 자동으로 열리지 않아서 수동으로 진행해야 하네요. 제가 알기로는 챌린지 미션 페이지에서도 확인할 수 있는 것으로 알고 있습니다. 만약 그렇지 않다면, 제가 디스코드 채널에 따로 공지드리겠습니다. 그리고 혹시 미션을 조금이라도 진행하셨다면, 올려주시면 제가 직접 리뷰하고 도와드리겠습니다! 감사합니다. 🙏

간격 베리어블 등록하기 하며 질문

안녕하세요, hye님. 일반적으로 이미 웹사이트나 서비스가 존재한다면, 그 안에서 자주 쓰이는 단위를 기준으로 border-radius 값을 정하는 경우가 많습니다. 만약 기존 레퍼런스가 없는 경우, 말씀하신 것처럼 다른 디자인 시스템을 참고하거나 브랜드 경험(BX) 에 맞게 새로 설정합니다. 이를 위해선 다양한 시도를 미리 해보는 과정이 필요하죠. 저도 보통은 버튼, 주요 컴포넌트, 배경 요소 등을 중심으로 테스트를 해본 뒤 브랜드에 어울리는 값을 선택합니다.물론 저도 미리 값을 정해두고 쓰다 보면 추가로 필요한 게 생기기도 합니다. 하지만 가능한 한 새로운 단위를 무분별하게 추가하지 않으려고 합니다. 특히 팀 규모가 클수록 일관성을 지키는 게 중요하거든요. 팀의 성격이나 분위기에 따라 접근 방식은 달라질 수 있습니다.예를 들어,xs: 작은 UI 요소(아이콘 등)lg: 배경이나 큰 요소처럼 구체적으로 구분하기도 하고,혹은 목적에 따라 분리해 따로 관리하기도 합니다.정답이 정해진 것은 아니며, 팀의 상황과 목적에 따라 유연하게 정하면 됩니다.Measurement vs. Appearance무언가를 구분하는 기준도 결국 목적과 상황에 따라 달라집니다.이번 강의에서는 이해를 돕기 위해 다음과 같이 구분했습니다.Measurement: Primitive 개념으로, 측정값(예: px 단위의 수치, 백분율%) 자체를 의미합니다.Appearance: Semantic 개념으로, 이 Measurement 값을 기반으로 시각적으로 표현되는 형태를 의미합니다. 하지만 실제 프로젝트에서는 이렇게 세분화하지 않고, Semantic 단일 체계만 사용하는 경우도 많습니다.예를 들어,border-radius-xl: 8px 이렇게 직접 값을 지정하는 식이죠. 이 방식은 Measurement 단계(예: 4px 그리드 규칙) 를 생략할 수 있어 좀 더 자유롭게 디자인할 수 있다는 장점이 있습니다. 도움이 되셨으면 좋겠습니다. 감사합니다. 볼드 드림.

variables 관련 질문입니다.

안녕하세요, Mira Kim님 아마 해당 UI Kit은 오래전에 제작되었거나, 배리어블을 충분히 활용하지 못한 상태에서 만들어진 것으로 보입니다. 최근에는 그런 방식으로 구현하지 않습니다. 다른 UI Kit을 살펴보셔도, 특별한 이유가 없는 한 모드를 저런 식으로 처리하지는 않죠. 지금은 변수를 활용해 모드를 적용할 수 있기 때문에, Mode라는 프로퍼티를 두고 Light Mode와 Dark Mode 값을 지정하는 방식을 사용합니다. 따라서 예전처럼 모드별로 값을 따로 만들어 두는 접근은 거의 쓰이지 않습니다. 다만, 제가 해당 UI Kit 전체를 직접 확인한 것은 아니고, 제작자의 의도 또한 알 수 없기 때문에 단정적으로 말씀드리기는 어렵습니다. 감사합니다. 볼드 드림.

[실습]아이콘 등록하는 방법, 그리고 팁(with 앤트맨 전략) 수업에서

개발자aws님, 우선 질문 주셔서 감사합니다. 아이콘을 작게 만들어야 하는 이유를 강의에서 기초 이론까지 다루지 못하다 보니, 그 부분이 다소 납득되지 않으셨던 것 같습니다. 아이콘 디자인은 보통 아래와 같이 키 라인(Key Line) 을 기본 템플릿으로 삼아 그 안에서 작업을 진행합니다. 이때 좌우 패딩 여백을 2px 정도 두는 경우가 많습니다.(사진) (사진) 즉, 전체 크기가 24px이라 해도 실제 디자인은 내부 20px 영역에서 이루어지게 되죠. 이렇게 하면 기본적으로 텍스트와 비율이 잘 맞습니다.다만 제 강의에서는 직접 아이콘을 제작하기보다는 기존에 만들어진 아이콘(FeatherIcon)을 활용합니다. 그런데 이런 아이콘들은 대체로 패딩을 고려하지 않고 꽉 채워져 있습니다. 그래서 이를 가져온 후 양쪽에 2px 여백을 추가하는 튜닝 작업이 필요합니다. 그리고 그 작업을 강의에서 진행을 합니다. 그렇다면, 이렇게 수정한 아이콘을 개발 단계로 넘길 때는 어떻게 해야 할까요? 아이콘 패키지 활용 시:일부 개발자분들은 아이콘 NPM 패키지를 가지고 와서 그대로 사용하시기도 합니다. 이 경우 아이콘은 꽉 채워진 형태로 들어가게 됩니다. 따라서 아이콘 컴포넌트를 따로 제작하여 2px 여백을 반영하기도 하고, 반대로 그냥 꽉 채워진 상태로 두기도 합니다.튜닝한 아이콘 직접 내보내기:새롭게 조정한 아이콘을 내보내는 방법도 있습니다. 다만 이 경우 SVG를 바로 내보내면 currentColor 속성이 적용되지 않아 색상 변경이 어려울 수 있습니다. 이런 상황에서는 별도의 플러그인(svg Export)을 사용하여 문제를 해결할 수 있습니다. 이경우 monochrome으로 설정하시고 내보냈을 때, currentcolor로 색상을 쉽게 조절할 수 있습니다.https://www.figma.com/community/plugin/814345141907543603 닉네임에 “개발자”라는 단어가 포함되어 있어 조금 더 깊이 설명을 드렸습니다.도움이 되셨길 바랍니다.감사합니다.볼드 드림.

이미지 가져오기 단축키

안녕하세요, AirDream님. 말씀 주신 두 기능의 단축키가 동일하네요. 만약 노션을 꼭 켜두셔야 한다면, 노션 쪽 단축키를 변경해보시는 건 어떨까요? 아래 이미지에 보시면 해당 부분에서 단축키를 조정하실 수 있습니다. 또는, place image 기능을 사용할 때 강의에서 안내된 단축키 방식 외에도 다양한 방법이 있듯이, 이 경우에도 다른 방식으로 활용해 보시는 것도 좋을 것 같습니다.하단 툴바도형 그리고 FIll에서 이미지 첨부더 궁금하신 부분 있으시면 질문 주세요!감사합니다. 볼드 드림. (사진)

인프런 피그마 교육계정 연장

안녕하세요, sykimweb 님.앞서 새소식을 통해 안내드린 것처럼, 앞으로 에듀 라이선스는 온라인 강의에 사용이 불가능합니다. 이는 초기 신청 기간과 관계없이, 9월 말 이후부터는 모든 에듀 계정 사용자에게 동일하게 적용됩니다. 이 부분은 이미 모든 수강생분들께 공지드린 사항이며, 저 또한 예외가 아닙니다. 저도 기존에 사용하던 에듀 계정을 더 이상 사용할 수 없어, 현재는 직접 프로페셔널 요금제로 결제하여 사용 중입니다. 또한 현재 에듀 라이선스는 부트캠프 강의 전용으로만 제공되며, 부트캠프 수강생만 사용 가능합니다. 이 과정에서도 별도의 증명(시스템 내 명부)과 검증 절차가 필요하고, 만약 이를 위반할 경우 라이선스 박탈 및 추가 비용 청구 등 법적 리스크가 발생합니다. 추천드리는 방법은 남은 기간 동안은 에듀 계정을 활용하시고, 강의는 주로 섹션 9부터 모드 관련 내용이 나오니 그 부분부터 확인하시면서 수강해 보시길 추천드립니다.감사합니다.

[37강] label 관련 질문드립니다.

해결되신 것 같아서 이렇게 답변 드립니다! 감사합니다.

베리어블을 등록했는데 토큰으로 잡히지않아요

안녕하세요, DongHawn Hwang님. 우선 제 강의에서는 개발 영역을 직접적으로 다루고 있지는 않습니다. 다만, 개발자 분들과 협업하고 작업해본 경험을 바탕으로 말씀드리면, 적절한 플러그인을 활용하시면 도움이 되실 것 같습니다. 사실 피그마 내 플러그인 중에는 제대로 작동하지 않거나, 참조가 되지 않는 등 문제가 있는 경우가 많습니다.다만, 질문해주신 부분에서 구체적으로 어떤 어려움이 있으신지 조금 더 설명해주시면 상황을 더 잘 이해할 수 있을 것 같습니다.예를 들어,JSON 파일에 시맨틱 변수가 나오지 않는 문제인지,원시 변수가 시맨틱 변수에 연결되지 않는 문제인지,아니면 아예 export 자체가 되지 않는 문제인지 등등 말씀해주시면 더 정확히 도와드릴 수 있을 것 같습니다. 참고로, 제가 현업에서 활용하는 플러그인 중 하나는 아래 링크의 플러그인입니다. 사용해보니 결과물도 안정적이고 변환 및 유지보수도 잘 되며, 문서화도 잘 되어 있어 도움이 되실 거라 생각합니다.👉https://www.figma.com/community/plugin/888356646278934516 감사합니다.볼드 드림.

라이브 녹화본 어디서 볼 수 있나요??

쥐뇨닝님 안녕하세요,라이브 영상을 보실 수 있도록 방금 설정을 완료했습니다.이 기능은 지난주에 출시된 최신 기능인데, 지식공유자가 추가 설정을 해야 하는 부분이 있어 바로 업로드 영상을 볼 수 없도록 되어 있었습니다. 게다가 오리엔테이션, 어제 일정, 그리고 주말 동안 가족·육아로 시간이 지연된 점 양해 부탁드립니다.지금은 업데이트가 완료되었으니 확인해보시면 바로 이용하실 수 있을 겁니다.감사합니다.