모집마감

인프런 워밍업 클럽 스터디 3기 - 프로덕트 디자인 (Figma)
무료
초급 / Figma, figma variable, 디자인 시스템, Figma Tokens, 아토믹 디자인
신청
25. 02. 11 ~ 25. 02. 25
일정
25. 02. 28 ~ 25. 04. 04
초급
Figma, figma variable, 디자인 시스템
저는 런던에서 Sr.프로덕트 디자이너로 일하는 볼드입니다.
제 경력은 리서처로 시작하여 프로덕트 디자이너로 커리어 전환 후 핀테크, 클라우드 테크, 마케팅 등 다양한 분야에서 경험을 쌓고 있습니다. 국내 석사 출신으로 해외교육 없이 런던에서 바로 취업하여 다양한 실무 경험을 하고 있으며, 실무에서 아래의 내용을 진행해왔습니다.
사용자 리서치 시스템 구축, 관리
디자인 시스템 구축, 관리,
피그마 UI/프로토타이핑
디자인 역량 코칭, 멘토링
인프런을 통해 제가 알고 있는 실무 노하우를 공유하고 이를 통해 저도 많이 배우고 싶습니다.
감사합니다.
경험 및 경력
(현) 런던 데이터 솔루션 회사, Sr. 프로덕트 디자이너
(전) 런던 글로벌 리서치 회사, Sr. 프로덕트 디자이너
(전) 런던 핀테크 회사, Sr. 프로덕트 디자이너
(전) 런던 클라우드 컴퓨팅 회사, UX/UI 디자이너
연세대 인지공학랩 리서처 출신
안녕하세요. 저는 런던에서 프로덕트 디자이너 겸 리서처로 일하고 있는 볼드라고합니다. 연세대 석사 출신으로 런던에서 에이전시, 스타트업, 대기업 등과 함께 일한 실무 경험이 있습니다. UX, UI, 프로덕트, 리서치 등 실무에서 통하는 팁, 노하우를 공유해 드립니다.
멘티분들의 성장을 돕는 맞춤형 멘토링을 추구합니다.
+ 멘토링 신청하신 분을 대상으로 디자인 역량 분석이 필요하신 분께 무료로 역량 분석을 도와드리고 있습니다.
사전에 받고 싶은 자세한 상담내용
멘티분께서 공개 가능한 상세 정보
이력서 또는 포트폴리오 첨삭의 경우 첨삭할 자료를 미리 보내주세요.
- Google Meet을 활용한 온라인 1:1 화상회의 방식
- 웹캠, 마이크, 이어폰은 필수로 미리 지참해주시기 바랍니다.
- 예약이 되면 기재하신 연락처로 필요한 내용들을 제공드릴 예정입니다.
모집마감
인프런 워밍업 클럽 스터디 3기 - 프로덕트 디자인 (Figma)
무료
초급 / Figma, figma variable, 디자인 시스템, Figma Tokens, 아토믹 디자인
신청
25. 02. 11 ~ 25. 02. 25
일정
25. 02. 28 ~ 25. 04. 04
초급
Figma, figma variable, 디자인 시스템
모집마감
스토리텔링을 활용하여 비즈니스 관점에서 디자인 설득하기
₩9,900
초급 / 프로덕트디자인, business, 커뮤니케이션, 문제해결능력, 프레젠테이션
신청
25. 01. 06 ~ 25. 01. 14
일정
25. 01. 16 ~ 25. 01. 16
초급
프로덕트디자인, business, 커뮤니케이션
모집마감
인프런 워밍업 클럽 스터디 2기 - 프로덕트 디자인 (Figma)
무료
초급 / Figma, figma variable, 디자인 시스템, Figma Tokens, 아토믹 디자인
신청
24. 09. 11 ~ 24. 09. 24
일정
24. 09. 27 ~ 24. 11. 01
초급
Figma, figma variable, 디자인 시스템
[인프런 X 볼드UX] 디자이너 성장 가이드와 피그마 활용 꿀팁 모음
무료
입문 / 프로덕트디자인, Figma, 포트폴리오, 커뮤니케이션, 디자인 시스템
4.8
(36)
인프런과 볼드UX가 함께한 이 강의는 최신 피그마 활용 꿀팁과 다양한 볼드UX만의 인사이트와 업무 노하우를 배울 수 있어요. 프로덕트 디자인 분야에서 9년의 실무 경험을 쌓은 볼드의 전문 지식과 함께, 피그마를 효과적으로 활용하는 방법에 대한 소중한 정보를 얻을 수 있는 기회입니다.
입문
프로덕트디자인, Figma, 포트폴리오
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
₩198,000
초급 / figma variable, Figma, Figma Tokens, 디자인 시스템, 아토믹 디자인, 웹 디자인, 프로덕트디자인
4.9
(126)
최신 UI3 인터페이스로 피그마의 배리어블을 활용하여 함께 디자인 시스템을 만들어보세요🔥 배리어블은 일관된 사용자 경험을 제공하고 디자인 프로세스를 혁신적으로 개선할 수 있는 열쇠🔑입니다.
초급
figma variable, Figma, Figma Tokens
질문&답변
베리어블 적용 중 문제
질문 주셔서 감사합니다. 우선, 타이포그래피 베리어블이 굉장히 어렵습니다. 이번 강의 업데이트할 때도 넣을까 말까 하다가 몇몇 분들이 요청을 하셔서 넣었습니다. 어렵지만, 차근차근 따라하시고 모르는 것 있을 때 이렇게 계속 질문 주시면 됩니다. 질문 주신 부분과 이미지를 살펴본 결과 이 경우는 스코핑(Scoping)이 잘 안되어서 그렇습니다. 스코핑은 말 그대로 어떤 범위를 정해서 그 범위 안 UI 요소에서만 보이도록 하는 것 입니다.텍스트 베리어블의 경우는 딱 세게 요소의 스코핑이 있고, 내가 만약 폰트 패밀리에서만 보여주고 싶으면 베리어블에서 세팅에서 폰트 패밀리만 선택하셔야 합니다. 아래 이미지 첨부해놓았습니다.(사진)그리고 제 추측으로는 시맨틱 강의 초반에 이렇게 많이 나와서 어려움이 있으신 경우는 보통 Primitive(원시) 배리어블에서 스코핑이 잘 안되어 있기 때문입니다. 특히 원시 배리어블의 경우는 전부다 꺼야 합니다. 왜냐하면 원시 배리어블은 시맨틱 배리어블 연결에만 사용되기 때문입니다. 그래서 반드시 스코핑이 전부다 꺼져 있는지 체크하시기 바랍니다. 두번째는 지금 여러개 라이브러리가 연결되어 있습니다. 사진으로 보기에 iOS도 연결되어 있네요. 이 경우는 지금 만드시는 로컬 라이브러리만 선택하시면 됩니다. 더 궁금하신 부분 있으면 질문 주세요. 피그마 파일 공유해주시면 더 자세하게 도와드릴 수 있습니다. 감사합니다.
질문&답변
문의
안녕하세요, 질문 주셔서 감사합니다. 강의에서 제가 md를 적어서 찾아보라고 말씀 드릴 때 전제 조건은,시맨틱 베리어블에Body/md/font size,Body/md/line height,Body/md/letter spacing 이 세개가 잘 들어가 있느냐입니다. 그래야 당연히 md를 찾을 수 있습니다. 사진으로 보기에 fontsize(14)와 lineheight(16)을 찾으신 걸 보고 추측해본 결과 제 생각에는 letter spacing이 로컬 베리어블 Body/md 그룹안에 있지 않은 것 같습니다.아니면 Scoping이 잘못되어 있을 수도 있으니 베리어블 세팅을 누르셔서 Scope를 체크해보세요.혹시 저에게 피그마 파일을 공유 해주시면 제가 더 자세하게 도움 드릴 수 있을 것 같습니다.boldplus.ux@gmail.com 감사합니다. 볼드 드림.
질문&답변
문의
안녕하세요, dasom won님질문 주셔서 감사합니다. 제가 플러그인을 살펴보았는데, 플러그인이 개인이 만들다 보니깐 UX가 완벽하게 구현되지 않은 경우가 빈번합니다.우선 저의 경우는 로컬 베리어블에 콜렉션이 아무것도 없는 상황에서 만들다 보니 이름을 넣은 것이구요. 하지만 dasom won님의 경우는 컬렉션이 이미 있어서 그 중에 하나를 선택하라고 하고 새롭게 이름을 먾어서 만드는 기능은 넣지 않은 것 같습니다이해를 돕기 위해 밑에 이미지를 첨부했는데, 위에는 컬렉션이 없는 경우(제 강의) 아래는 컬렉션이 있는 경우(Dasom won)입니다. 지금은 현재 Dasom won님은 이 경우이니, 원하시는 이름의 컬렉션을 로컬 베리어블에서 만드셔서 이 플러그인에서 선택하시면 됩니다.(사진) (사진).질문 있으시면 언제든지 남겨주세요. 감사합니다.
질문&답변
플러그인 질문
태인님 안녕하세요, Apply variable인 것 같습니다. 이 플러그인을 사용 예시는 다음과 같습니다. 예를 들어, 현재 있는 파일의 베리어블 값이 다른 파일과 연결되어 있다고 합시다. 그런데, 제가 지금 현재 있는 파일에 있는 로컬 베리어블과 연결하고 싶습니다. 무조건 베리어블 이름만 동일하면 자동으로 바꾸어줍니다.여러 시나리오에서 사용될 수 있으며, 제 강의에서는 아이콘 부분에서 제가 언급드렸습니다. 당시에, 아이콘이 다른 곳에서 가져오면서 베리어블이 연결되어 있는데, 이 베리어블을 로컬 베리어블로 바꾸기 위해서 사용했었습니다. 어떻게 사용하는지 궁금하시면 섹션 5 아이콘 파트에 가서 확인 해보세요. 궁금한 점 있으시면 언제든지 질문주세요. 인프런 인턴은 토큰 스튜디오라고 하는데, 누가 맞는지도 알려주세요. 🎯 감사합니다. 볼드 드림.
질문&답변
디스플레이 파트 Accordian 스트로크 질문
안녕하세요, 우선 제가 이미지만 봐서는 우선 이 경우는 바깥에 border radius가 적용 되어 있어서 그런 것 같습니다. border radius를 해제하면 일직선으로 만들 수 있을 것 같습니다. 지속적으로 문제가 있으면, 피그마에 링크를 걸어주시면 감사하겠습니다. 감사합니다. 볼드 드림.
질문&답변
베리언트 레이어 표기 ◑ 관련 문의건
안녕하세요, 보통 프로퍼티가 많은 경우 구분하기 위해서 글자 앞에 넣어두긴 합니다. 맥의 경우 control + command + space를 누르시면 특수문자/이모지 패널이 bullet icon이 나타나고 이 중에서 넣은 것으로 추정됩니다. 윈도우의 경우는 구글링해보시면 쉽게 단축키 찾으실 수 있을거에요. ◑ 아니면 이거 복사해서 붙이셔도 됩니다.감사합니다. (사진)
질문&답변
브레드크럼 인스턴스에서 Underline 넣는 방법
안녕하세요, 한석환님질문 주셔서 감사합니다. 제가 질문을 잘 이해 한게 맞는지 모르겠는데, 제 강의에서는 Style에서 Underline으로 적용이 되고 그 안에 텍스트는 Underline으로 추가하면 (1)이 이렇게 나타납니다. 따로 Underline 텍스트 스타일을 등록하셔도 되지만 이번에 새로운 기능이 나와서 구지 그렇게 안하셔도 됩니다. 제가 석환님 파일을 살펴보고, 제가 만든 부분도 살펴본 결과 텍스트 프로퍼티가 수정되어서 인스턴스에서 밑줄이 그대로 따라오긴 합니다. 만약 Underline을 부분적으로 없애거나 적용되지 않은 부분에 넣고 싶은 경우에는 현재 피그마에서는 불가능합니다. 감사합니다.볼드 드림
질문&답변
Lock Aspect Ratio 관련
질문 주셔서 감사합니다. 저도 찾아보니 강의 촬영 이후 플러그인이 없어진 것 같습니다.좋은 소식은 최근 피그마에서 업데이트가 있었는데, Lock ratio 기능을 플러그인 없이 피그마 안에서 구현했습니다. 아래 이미지 처럼 바로 프레임, 도형에서 Layout 안에서 제일 오른쪽버튼을 누르시면 길이가 정해진 비율대로 커지거나 작아집니다. 대신에 누르시기 전에 미리 계산을 하셔야합니다. 예를 들어, 4:3이면 400: 300으로 만들어 놓고 컴포넌트화를 하면 되겠죠. 그래서 이제 플러그인 대신에 피그마내 기능을 사용해보시는 것을 권장드립니다. 감사합니다. 볼드 드림. (사진)
질문&답변
Local variables
안녕하세요,그 이유는 페이지 안에 어떤 레이어도 베리어블이 없기 때문입니다. 아무데나 max-width, min-width 도는 padding 값을 적용하시면 뜰 것입니다. 보통 모드를 로컬베리어블에 등록해도 보이지 않는 이유는 로컬베리어블에 등록한 베리어블을 실제 캔버스에 사용하지 않았기 때문입니다. 한번 더 해보시고 안되시면 알려주세요! 감사합니다. 볼드 드림.
질문&답변
버튼 미작동
안녕하세요, 우선 한번 더 체크를 해보실 수 있을까요? 이건 피그마 자체의 문제인 것 같습니다. 제 피그마에서는 아래 이미지 처럼 잘 나타납니다. 또 다시 문제이면, 최신으로 업데이트 해보시기 바랍니다. 배리어블이 배타 딱지를 때도 가끔 문제가 있는 경우가 있습니다 . 계속해서 문제가 있으면 또 알려주세요. 감사합니다. 볼드 드림.(사진)(사진)
2024. 05. 05.
7
[인프런 워밍업 스터디 1기 디자인] 1주차 슬기롭게 보내기
발자국 1주차드디어 첫 주가 시작되었어요. 새로운 회사 일도 시작한 지 2주 차라 정신이 없었어요.조용하던 디자인 디스코드 채널이 드디어 활발해지기 시작했어요. 이번 주에는 코치로서 다음과 같은 일을 해야 했어요.폭발적인 강의 질문 대응하기미션 꼼꼼히 체크하기특별 강의 준비하기 첫째, 강의 질문 방에서는 수강생들이 강의를 듣기 시작하면서 질문이 쏟아졌어요. 조용하던 채널이 질문으로 가득 차는 것은 매우 바람직한 현상이에요. 둘째, 미션 제출이 시작되었어요. 평소에는 회사 일에 집중하고, 저녁 늦게나 새벽에 수강생들이 제출한 과제를 살펴봤어요. 처음에는 단순히 미션 여부만 확인하려고 했지만, 과제를 살펴보다가 몇 가지 흥미로운 점을 발견했어요.흥미로운 점 세 가지는 다음과 같아요:1. 같은 강의를 듣고도 실수를 반복하는 수강생이 있다는 것이에요. 이는 온라인 강의의 한계일 수 있어요.2. 이러한 실수가 일부 수강생에게만 나타나는 것이 아니라 반복적으로 나타난다는 점이고, 이것을 데이터로 정리해서 다른 수강생들에게도 요약 노트 등으로 알리면 좋을 것 같아요.3. 인프런 워밍업을 통해 수강생들의 작업 파일을 보고 코멘트를 남기며 피드백을 통해 서로 수정하고 올바르게 배울 수 있었어요. 셋째, 특별 강의를 준비했어요. 세 가지 주제로 구성하고, 강의 준비 과정은 쉽지 않았어요. 밤에 미션을 체크하고 남는 시간에 강의를 만들었어요. 특별 강의는 주로 새벽 5시에 일어나서 준비했고, 다음과 같은 주제로 구성되었어요.- 가장 많이 나오는 질문: 아이콘- 컴포넌트 네이밍 컨벤션- 멀티에딧 베리언츠인터랙티브한 강의를 만들기 위해 네이밍 컨벤션을 공유할 때는 혼동되는 용어에 대한 각 개인의 생각을 물어봤어요. 특별 강의는 기본 1시간을 넘어 20분 더 진행되었고, 많은 수강생이 마지막까지 남아 있었어요. 피드백을 부탁드렸는데, 마치고 나서 살펴보니 열심히 준비한 보람을 느꼈어요. (선정한 5개 수강평) 다음 주 월요일이 영국도 공휴일인이라 쉴 수 있어서 다행이에요. 그렇게 휴식을 취해야 회사 일과 인프런 코칭을 병행할 수 있을 것 같아요. 모두들 2주차도 파이팅입니다!
UX/UI
・
인프런워밍업
・
베리어블
・
스터디
・
디자인시스템
2024. 04. 27.
22
[인프런 워밍업 스터디 1기 디자인] 오리엔테이션 준비하기
안녕하세요! 지식공유자 볼드입니다. 최근에 인프런 워밍업 스터디 클럽 1기에서 프로덕트 디자인 코치로 참여하게 되었어요.준비 과정이 꽤 새로웠고, 많은 것을 배우는 시간이었습니다. 오늘은 제가 어떻게 러너분들과 첫 만남을 위해 준비를 하였는지 알려드리고자 해요. 첫 만남을 미리 계획하다저는 4주 전부터는 0기 코치님들이 남겨둔 자료들을 보며 어떻게 하면 더 좋은 오리엔테이션을 만들 수 있을지 고민했어요. 구조부터 차근차근 짜고, 내용을 채워 넣어서 빠르게 프레젠테이션을 완성했습니다. 첫만남인 만큼 어떻게 하면 더 재미있고, 참여자들과 적극적으로 소통할 수 있을까 고민을 많이 했어요. 그래서 피그잼을 사용한 워크샵 형태로 진행하기로 결정하고, 세 가지 큰 원칙을 세웠습니다:많은 정보를 빠르게 명확하게 전달하기최대한 재미있고 인터랙티브하게 이야기가 살아있는 컨셉 유지하기 다행히 ‘러너’라는 주제가 이미 있어서 그걸로 컨셉을 잡았고, 다음과 같은 여정으로 구성해 보았어요.🚀 출발: 워밍업 클럽을 시작하게 된 이유🗺 코스: 워밍업 클럽의 미션들🎯 도착: 워밍업 클럽을 마치고 받게 되는 혜택들 OT 시작 전에는 새 직장에서 바쁠 것 같아서 미리 인프런 담당자 셰리님과 자료를 공유하고 점검하는 시간을 가졌어요.그리고 막상 OT 주간이 되니, 예상대로 정신 없었습니다. OT 당일에는 반차를 내고, 오전에 교회에서 성경공부를 마치고 집에 돌아와 커피 한 잔 마시며 마지막 준비를 했죠. 러너 분들과 드디어 만나다영국시간으로 12시에 시작했어요.(한국 시간으로는 오후 8시), 제가 먼저 짧게 발표를 먼저 진행하고 러너 분들은 질문에 따라 각자 글을 작성하셨어요. 작성 후에는 서로의 글을 보며 하트를 남기는 시간을 가졌는데, 이게 생각보다 더 재미있었던 것 같아요. 미리 준비한 탭으로 미션 정보를 빠르게 효과적으로 보여드리고, 원래 OT 전까지 블로그 글을 쓰지 못했는데 셰리님의 빠른 대처로 발자국 미션 시연을 성공적으로 마칠 수 있었어요. OT 끝나고 난후워크샵이 끝난 후, 참가자분들의 피드백을 부탁드렸어요. 피드백을 보고 나니 제가 준비한 만큼 결과도 좋았다는 생각이 들더군요.(아래는 제가 몇개 선정한 감사한 피드백!) 2기에도 제가 참여할지는 아직 모르겠지만 2기에도 오리엔테이션 준비 경험을 살리거나 또 다른 코치님들이 사용할 수 있도록 이 피그잼 보드를 템플릿화하면 좋을 것 같아요. 또한, 이 방식을 다른 온라인 강의에서도 활용할 수 있을 것 같아요. (필요하신 분들은 알려주세요. 무료 나눔해드릴게요!) 마지막으로 인프런 워밍업 클럽 이전에 제가 진행한 인증샷 스터디에서 수강생과 교류가 있으면 좋을 것 같다는 의견이 있었어요. 처음엔 이걸 어떻게 개선해야할지 막막했는데, 인프런 워밍업 클럽을 참여하면서 이 문제를 해결할 수 있었어요. 그리고 셰리님을 포함한 인프런 팀이 없었다면 이 모든 게 불가능했을 거예요. 정말 감사드립니다! 인프런팀 만세! 앞으로 남은 세 번의 특강, 워크샵을 어떻게 준비할지 계획 중인데, 라이브 튜토리얼과 프레젠테이션을 어떻게 잘 조합할지, 함께 만들어가는 워크샵 과정이 어떨지 기대되네요. 인프런 워밍업 클럽 1기에 참여하신 모든 러너분들 다같이 파이팅해요 🔥
UX/UI
・
워밍업클럽
・
디자인시스템
・
피그마