---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
✅ 멘토링 분야
- 디자인 시스템을 구축했거나 피드백이 필요한 작업물
- 개발자를 위한 디자인을 어떻게 확인 전달에 대한 이해
- 인터랙티브 웹을 만들고 싶은 사람
- 인터랙티브 웹 진로 고민
✅ 진행방식
- Discord를 활용한 수업 방식
- 예약이 되면 기재하신 연락처를 통해 접속 주소를 알려드립니다.
- 상호 원활한 대화를 위해 " 이어폰과 마이크 혹은 헤드셋" 을 준비해 주세요!
- 마이크가 없을 경우 채팅창으로 대화를 나눠야하는데 시간 Loss가 발생할 수 있습니다.
✅ 준 비 물
- 질문할 내용 list
- VScode가 설치된 컴퓨터
- 마이크+스피커 혹은 헤드셋 (상호 원활한 커뮤니케이션을 위해 필수)
- 본인이 작업했던 디자인 작업물 또는 개발 작업물
범쌤과 이런 저런 이야기를 나눠보고 싶은 분들 누구나 환영합니다!
현재 상황에 맞는 멘토링과 조언으로 과외를 진행하며 1:1 과외는 상당히 학습효과가 높습니다.
단시간에 많은 것을 얻어가실 수 있습니다.
강의
로드맵
전체 1수강평
- 디자인 시스템 with 피그마
- 웹 애니메이션을 위한 GSAP 가이드 Part.03
- 웹 애니메이션을 위한 GSAP 가이드 Part.01
게시글
질문&답변
폰트 토큰 작업 할때
안녕하세요 지선님 😀 default값은 폰트의 가장 기본이 되는 값이며 웹에서는 모든 폰트의 기본 사이즈가 16px입니다. 그래서 개발에 용이할 수 있도록 16px을 맞춰 주시는게 좋으며 같이 일하는 개발자와 상의 후 변경해주시는게 좋습니다. 디자이너 입장에서는 기본값이 필요한가? 로 볼 수 있지만, 개발하는 개발자 입장에서는 em같은 단위를 사용해 코딩을 하기 때문에 default의 값을 지정해주시는게 커뮤니케이션적인 관점에서 좋습니다. "그리고 폰트 사이즈가 수업에서 계속 정해놓은 scale값을 곱하는 것과 별개로 저는 폰트 사이즈가 다른데 어떻게 해야 하는거죠?"이거에 대한 답변은 좀 더 자세히 캡쳐 화면을 제공해주시면 답변 드리도록 하겠습니다 ^-^ 감사합니다 :)
- 1
- 3
- 26
질문&답변
여기 수업에서 엘로우나 레드나 블루 이런 컬러들을 다양하게 만드는 이유가 뭔가요?
안녕하세요 지선님 😀 색상을 다양하게 만드는 이유는 디자인 시스템을 구성요소 중 컬러의 토큰을 지정할 때 한가지의 색상들만 정의해놓는다면 디자인하기 힘들 수 있습니다. (예를들어 지정된 gray 이외의 연한 회색이 필요한 경우 또 등록을 해야 하기 때문에) 그래서 미리 다양한 색상들을 지정후 필요할 때 마다 꺼내 사용하는 방식으로 진행됩니다. 이후 그 색상이 많이 사용된다면 다른 이름으로 매핑해 사용하는게 좋겠지요이는 구글의 머터리얼 디자인을 기반으로 많은 시스템들이 색상 토큰을 따라 지정하곤 합니다. 감사합니다 :)
- 0
- 2
- 13
질문&답변
토큰을 깃허브에 올리는 방법이 없어진거 같은데요
안녕하세요 지선님 😀 토큰을 깃허브에 올리는건 토큰 스튜디오의 핵심 기능이기 때문에 없어지지 않습니다 😅 settings 탭을 선택 후 Add new sync provider 버튼을 클릭하시면 됩니다.(사진) 이후 GitHub를 Choose버튼을 눌러 선택해주세요.(사진) 그 후 영상에 나오는것 처럼 빈칸을 하나씩 입력해주시면 동기화가 가능합니다.^-^ 감사합니다 :)
- 1
- 2
- 26
질문&답변
토큰 export 할때 어떻게 해야 하나요? 버전이 바뀌어서 그런지 못찾겠어요
안녕하세요 지선님 😀아래의 첨부 이미지처럼 토큰 스튜디오의 1번 아이콘을 누르신 후 2번 Export to file/folder를 선택하시면 내보내기 항목을 정할 수 있습니다.(사진) (사진) 감사합니다 :)
- 0
- 2
- 33
질문&답변
인프런 할때마다 짜증나는데 수업내용이 너무 오래된건 제발 삭제좀 하던지 다시 찍던지 해주세요
안녕하세요 지선님 😀피그마 버전이 맞지 않아 여러가지 불편함을 겪게 해드려 죄송합니다.토큰 스튜디오의 사용과 아토믹 디자인시스템, 디자인 토큰 설계에 대한 이론은 변함이 없기 때문에 해당 강의를 그대로 제공하고 있습니다.현재 버전과 UI가 달라 불편함을 드려 죄송합니다 🥹
- 1
- 1
- 33
질문&답변
tailwind color generator 이게 작동이 잘 안되네요
안녕하세요 지선님 😀 저렇게 그레이만 1개 나오는 경우는 보통 gray가 이미 있을 때 100번대 하나만 자동완성이 됩니다. 해당 항목을 지우시고 새로 제너레이팅 해보시거나 새로운 이름으로 제너레이팅 해보시면 잘 나올 것 같습니다. 혹시 몰라 저도 방금 다시 플러그인을 돌려 확인했는데, 문제 없이 잘 나오는것으로 확인이 됩니다! (사진) 감사합니다 :)
- 0
- 2
- 28
질문&답변
figma tokens플러그인 안나오는데요??
안녕하세요 지선님 😀 figma tokens는 현재 이름이 변경되어 tokens studio for figma로 검색하면 해당 항목을 확인하실 수 있습니다. (사진) 감사합니다 :)
- 0
- 2
- 35
질문&답변
혹시 토큰 가공할 수 있는 강의도 따로 있을까요??
안녕하세요 SOHYE KIM님 😀 토큰 가공 강의영상은 따로 제공되어있지 않습니다.제가 영상에서 말한 강의는 오프라인으로 진행되는 과정에서 토큰 가공에 대한 안내를 드리고 있어서 그렇게 말한 것 같습니다. 26~27년도 사이에 개발자를 위한 피그마 영상 강의를 올릴 예정입니다. 그때 다시 한번 찾아주세요 ^.^ 감사합니다 :)
- 1
- 2
- 22
질문&답변
hover pulse animation 관련해서 질문있습니다!
안녕하세요 방가워요님 😀 reverse를 사용하셔도 동일하게 부드러운 애니메이션을 만들 수 있습니다. 차이점은 애니메이션의 타임라인 부분에 일시정지해 있느냐(pause) 애니메이션의 타임라인이 처음의 위치로 돌아가느냐 (reverse)의 차이점이 있습니다. 직접 적용해보시면 자연스러운것과 부자연스러운 애니메이션들을 확인하실 수 있을거예요 감사합니다 :)
- 0
- 2
- 28
질문&답변
어몽이를 stage의 100% 로 보낼 수 있는 방법이 궁금해요!
안녕하세요 pom0306님 😀부모사이즈를 기준으로 움직이고 싶다면, %를 사용하시면 보다 유연하게 애니메이션을 설정할 수 있습니다. 단 %를 쓸 경우 문자로 감싸주셔야 해요! gsap.to(target, {x: '80%'}) 열심히 시청해주셔서 감사합니다 :)
- 1
- 2
- 39









