범쌤
@kindtiger
미들 (4~8년)·
프론트엔드/웹퍼블리셔
이듬
수강생
4,489
수강평
236
강의 평점
4.9
멘토링 신청
8
멘토링 리뷰
5
멘토링 평점
5.0
---안녕하세요 디자인과 개발에 재미를 가지고 강의를 만드는 범쌤입니다 🙂 -----------------------------------------------------온라인 / 오프라인 출강 문의는 seonbeom2@gmail.com 으로 연락주세요 🙇♂
✅ 멘토링 분야
- 디자인 시스템을 구축했거나 피드백이 필요한 작업물
- 개발자를 위한 디자인을 어떻게 확인 전달에 대한 이해
- 인터랙티브 웹을 만들고 싶은 사람
- 인터랙티브 웹 진로 고민
✅ 진행방식
- Discord를 활용한 수업 방식
- 예약이 되면 기재하신 연락처를 통해 접속 주소를 알려드립니다.
- 상호 원활한 대화를 위해 " 이어폰과 마이크 혹은 헤드셋" 을 준비해 주세요!
- 마이크가 없을 경우 채팅창으로 대화를 나눠야하는데 시간 Loss가 발생할 수 있습니다.
✅ 준 비 물
- 질문할 내용 list
- VScode가 설치된 컴퓨터
- 마이크+스피커 혹은 헤드셋 (상호 원활한 커뮤니케이션을 위해 필수)
- 본인이 작업했던 디자인 작업물 또는 개발 작업물
범쌤과 이런 저런 이야기를 나눠보고 싶은 분들 누구나 환영합니다!
현재 상황에 맞는 멘토링과 조언으로 과외를 진행하며 1:1 과외는 상당히 학습효과가 높습니다.
단시간에 많은 것을 얻어가실 수 있습니다.
강의
로드맵
전체 1수강평
- 디자인 시스템 with 피그마
- 웹 애니메이션을 위한 GSAP 가이드 Part.02
- 디자인 시스템 with 피그마
- 웹 애니메이션을 위한 GSAP 가이드 Part.03
게시글
질문&답변
컬러시스템 등록 관련
안녕하세요 박미소님 😀 현재 문제는, border의 스타일을 잘못 등록했는데, style 목록에 보이지 않고 삭제도 되지 않는다. 하지만 색상 등록엔 계속 등장한다! 인 것 같은데 제가 이해한바가 맞을까요~? 그렇다면, 해당 문제는 미소님이 border의 설정을 style로 하지 않고 variables로 했을 가능성이 가장 커보입니다. variables로 지정했을 때 가장 큰 특징은 ui가 사각형으로 나온다는 점입니다. (사진) (사진) 영상을 찍을 당시에는 variable이라는 기능이 없었기 때문에 충분히 혼란스러울 수 있을거란 생각이 듭니다. 영상 강의처럼 따라하시려면 style로 등록하셔야 합니다.(사진) 그럼 기존에 등록했던 variable은 어떻게 지우는가? 는 variable 항목을 선택 후 우클릭으로 삭제가 가능합니다.(사진) (사진) 이 순서대로 삭제를 진행하시면 될 것 같습니다. 또 문제가 생긴다면 언제든지 질의응답 작성해주세요. 감사합니다 :)
- 0
- 2
- 14
질문&답변
토큰 light/dark mode 오류
안녕하세요 박미소님 😀 해당 내용에 대한 질문은 이미 올라온적이 있어서 제가 강의 새소식에 안내드린적이 있습니다.https://inf.run/sQgKW 해당 내용을 참고하시고, 이 문제에 대한 영상강의도 따로 제작해놨기 때문에 그 부분도 같이 시청해주시면 좋을 것 같습니다. 감사합니다 :)
- 0
- 2
- 12
질문&답변
Pretendard 없으면 에러납니다
안녕하세요 qjatjs123123님 😀 프리텐다드 서체는 오픈소스로 제공되는 무료 서체입니다. 다만 기본 글꼴이 아니기에 컴퓨터에 설치 후 진행해주시면 됩니다. 하지만, 해당 강의는 pretendard서체가 없어도 문제가 되지 않습니다. 설치를 원하지 않으신다면, 지금처럼 기본 글꼴을 변경 후 사용하셔도 됩니다 ^. ^ 혹시몰라 pretendard 공식 사이트를 첨부드립니다.https://cactus.tistory.com/306감사합니다 :)
- 0
- 2
- 24
질문&답변
폰트 토큰 작업 할때
안녕하세요 지선님 😀 default값은 폰트의 가장 기본이 되는 값이며 웹에서는 모든 폰트의 기본 사이즈가 16px입니다. 그래서 개발에 용이할 수 있도록 16px을 맞춰 주시는게 좋으며 같이 일하는 개발자와 상의 후 변경해주시는게 좋습니다. 디자이너 입장에서는 기본값이 필요한가? 로 볼 수 있지만, 개발하는 개발자 입장에서는 em같은 단위를 사용해 코딩을 하기 때문에 default의 값을 지정해주시는게 커뮤니케이션적인 관점에서 좋습니다. "그리고 폰트 사이즈가 수업에서 계속 정해놓은 scale값을 곱하는 것과 별개로 저는 폰트 사이즈가 다른데 어떻게 해야 하는거죠?"이거에 대한 답변은 좀 더 자세히 캡쳐 화면을 제공해주시면 답변 드리도록 하겠습니다 ^-^ 감사합니다 :)
- 1
- 3
- 51
질문&답변
여기 수업에서 엘로우나 레드나 블루 이런 컬러들을 다양하게 만드는 이유가 뭔가요?
안녕하세요 지선님 😀 색상을 다양하게 만드는 이유는 디자인 시스템을 구성요소 중 컬러의 토큰을 지정할 때 한가지의 색상들만 정의해놓는다면 디자인하기 힘들 수 있습니다. (예를들어 지정된 gray 이외의 연한 회색이 필요한 경우 또 등록을 해야 하기 때문에) 그래서 미리 다양한 색상들을 지정후 필요할 때 마다 꺼내 사용하는 방식으로 진행됩니다. 이후 그 색상이 많이 사용된다면 다른 이름으로 매핑해 사용하는게 좋겠지요이는 구글의 머터리얼 디자인을 기반으로 많은 시스템들이 색상 토큰을 따라 지정하곤 합니다. 감사합니다 :)
- 0
- 2
- 25
질문&답변
토큰을 깃허브에 올리는 방법이 없어진거 같은데요
안녕하세요 지선님 😀 토큰을 깃허브에 올리는건 토큰 스튜디오의 핵심 기능이기 때문에 없어지지 않습니다 😅 settings 탭을 선택 후 Add new sync provider 버튼을 클릭하시면 됩니다.(사진) 이후 GitHub를 Choose버튼을 눌러 선택해주세요.(사진) 그 후 영상에 나오는것 처럼 빈칸을 하나씩 입력해주시면 동기화가 가능합니다.^-^ 감사합니다 :)
- 1
- 2
- 42
질문&답변
토큰 export 할때 어떻게 해야 하나요? 버전이 바뀌어서 그런지 못찾겠어요
안녕하세요 지선님 😀아래의 첨부 이미지처럼 토큰 스튜디오의 1번 아이콘을 누르신 후 2번 Export to file/folder를 선택하시면 내보내기 항목을 정할 수 있습니다.(사진) (사진) 감사합니다 :)
- 0
- 2
- 56
질문&답변
인프런 할때마다 짜증나는데 수업내용이 너무 오래된건 제발 삭제좀 하던지 다시 찍던지 해주세요
안녕하세요 지선님 😀피그마 버전이 맞지 않아 여러가지 불편함을 겪게 해드려 죄송합니다.토큰 스튜디오의 사용과 아토믹 디자인시스템, 디자인 토큰 설계에 대한 이론은 변함이 없기 때문에 해당 강의를 그대로 제공하고 있습니다.현재 버전과 UI가 달라 불편함을 드려 죄송합니다 🥹
- 1
- 1
- 46
질문&답변
tailwind color generator 이게 작동이 잘 안되네요
안녕하세요 지선님 😀 저렇게 그레이만 1개 나오는 경우는 보통 gray가 이미 있을 때 100번대 하나만 자동완성이 됩니다. 해당 항목을 지우시고 새로 제너레이팅 해보시거나 새로운 이름으로 제너레이팅 해보시면 잘 나올 것 같습니다. 혹시 몰라 저도 방금 다시 플러그인을 돌려 확인했는데, 문제 없이 잘 나오는것으로 확인이 됩니다! (사진) 감사합니다 :)
- 0
- 2
- 38
질문&답변
figma tokens플러그인 안나오는데요??
안녕하세요 지선님 😀 figma tokens는 현재 이름이 변경되어 tokens studio for figma로 검색하면 해당 항목을 확인하실 수 있습니다. (사진) 감사합니다 :)
- 0
- 2
- 56









