">
">
">
<head>
<meta property="og:url" content="<https://community.notefolio.net/designsystem_workshop>"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="두 달 만에 ‘뽑고 싶은’ 프로덕트 디자이너 되기! 디자인시스템 워크숍"/>
<meta property="og:description" content="프로덕트 디자이너로서 ‘커리어 점프’할 수 있는 기회를 만들어보세요."/>
<meta property="og:image" content="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/UyjTyUPKXCp6UZus.kakao%20banner-2.png>" />
</head>
<body class="body_programinfo">
<div class="contents-form-relative">
<div class="contens-title-box">
<div class="contents-title-text">두 달 만에 ‘뽑고 싶은’ 프로덕트 디자이너 되기! 디자인시스템 워크숍</div>
</div>
<div class="contents-status-box">
<div class="contents-status-1">신청 불가</div>
<div class="contents-status-2"></div>
</div>
<div class="contents-details">
<div class="contents-details-box">
<div class="contents-detail-header-text">기간</div>
<div class="contents-details-text">2023.10.17 - 12.04 (총 8주)</div>
</div>
<div class="contents-details-box">
<div class="contents-detail-header-text">시간</div>
<div class="contents-details-text">매주 월요일 19:00 - 23:00 (첫 주는 화요일 진행, 특강 주간은 19:00 - 21:00)</div>
</div>
<div class="contents-details-box">
<div class="contents-detail-header-text">일정</div>
<div class="contents-details-text"><a href="<https://docs.google.com/spreadsheets/d/1nQmNOoYQphIwmoZiCmd3-enLOAQed4dC85hBCYkgSrY/edit#gid=2143831866>" target="_blank">주차별 상세 일정 확인하기</a></div>
</div>
<div class="contents-details-box">
<div class="contents-detail-header-text">장소</div>
<div class="contents-details-text">온라인(줌 실시간 라이브)</div>
</div>
<div class="contents-details-box">
<div class="contents-detail-header-text">인원</div>
<div class="contents-details-text">최대 40명</div>
</div>
<div class="contents-details-box">
<div class="contents-detail-header-text">진행</div>
<div class="contents-details-text">이상효</div>
</div>
</div>
<div class="divider"></div>
<div class="contents-apply-form">
<div class="full-price-text">500,000원</div>
<div class="monthly-price-box">
<div class="monthly-price-text">월 약 83,000원</div>
<div class="monthly-text">6개월 할부 시</div>
</div>
</div>
</div>
</body>
<style>
/*노션 제목 없애기*/
.page-title {
display: none;
}
.width.padding {
margin: -20px;
}
.contents-form-relative {
width: 708px; height: 400px; padding: 20px; line-height: 16px;
border-style: none solid solid; border-width: 1px; border-color: #e5e5e5; border-radius: 0px 0px 8px 8px;
background-color: #fff;
}
.contents-title-text {font-size: 20px; font-weight: 700; line-height: 25px; color: #222;}
.contents-status-box {display: flex; flex-direction: row; margin-top: 10px; justify-content: flex-start; }
.contents-status-1 {
display: flex; justify-content: center;
width: 63.3px; height: 16px;
margin: 0px 6px 4px 0px;
border: 0.5px none #000; border-radius: 3px;
background-color: #ffe8e7;
font-size: 12px; font-weight: 400; color: #5d1715; text-align: center;
}
.contents-status-2 {
display: flex; justify-content: center;
width: 63.3px; height: 16px;
margin: 0px 6px 4px;
border: 0.5px none #000; border-radius: 3px;
background-color: #fff;
font-size: 12px; font-weight: 400; color: #fff; text-align: center;
}
.contents-details-box {display: flex;}
.contents-details {display: block; margin-top: 16px;}
.contents-detail-header-text {padding-top: 8px; padding-bottom: 8px; font-weight: 700;}
.contents-details-text {margin-left: 15px;padding-top: 8px; padding-bottom: 8px; padding-left: 0px;color: #222;}
.divider {width: 100%; margin-top: 15px; border-bottom: 1.5px solid #e5e5e5;}
.contents-apply-form {margin-top: 18px;}
.full-price-text {margin-top: 4px; margin-bottom: 4px; font-size: 14px; font-weight: 300; color: #737373;}
.monthly-price-box {display: flex; -webkit-box-pack: start; justify-content: flex-start; -webkit-box-align: center; align-items: center;}
.monthly-price-text {display: flex; color: #222; font-size: 20px; line-height: 30px; font-weight: 700;}
.monthly-text {display: block; margin-left: 6px; color: #737373; font-size: 14px; line-height: 15px; font-weight: 300;}
@media screen and (max-width: 991px) {
.contents-form-relative {width: 100%; height: 100%; max-height: 390px; max-width: 708px;}
.contents-title-text {font-size: 20px;}
.contents-status-box {margin-top: 8px;}
.divider {width: 100%;}
}
@media screen and (max-width: 767px) {
.contents-form-relative {max-height: 420px; max-width: 708px; border-style: none solid solid; border-radius: 0px 0px 3px 3px;}
.contents-detail-header-text {padding-top: 7px; padding-bottom: 7px;}
.contents-details-text {padding-top: 7px; padding-bottom: 7px;}
.divider {width: 100%;}
.contents-detail-header-text {white-space: nowrap; line-height:25px;}
.contents-details-text{line-height:25px;}
}
@media screen and (max-width: 479px) {
.contents-form-relative {max-height: 450px; margin-bottom: 20px; border-style: none solid solid; border-radius: 0px 0px 3px 3px;}
}
</style>
<body class="body_classinfo">
<div class="section_classinfo wf-section">
<div class="container_classinfo w-container">
<!--인트로-->
<div class="img_classinfo"><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/yyLsmBjkWxZxGKQf.system%20pc.png>" loading="lazy"
sizes="(max-width: 479px) 100vw, (max-width: 708px) 568px, 708px" alt="" class="img_classinfo">
</div><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/EZGNMxHX8CTpKmKU.system%20mo.png>" loading="lazy" alt="" class="img_classinfo_mobile">
</div>
<!--이미지1, 경쟁력-->
<div class="img_classinfo"><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/8Xu2Kc4PibSH5yzx.system%20pc-2.png>" loading="lazy"
sizes="(max-width: 479px) 100vw, (max-width: 708px) 568px, 708px" alt="" class="img_classinfo">
</div><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/j8FzVBegBqv4hLz6.system%20mo-2.png>" loading="lazy" alt="" class="img_classinfo_mobile">
</div>
</div>
</div>
</body>
<style>
.container_classinfo {max-width: 708px; margin-top: 20px;}
.img_classinfo {width: 100%;}
.img_classinfo_mobile {display: none;}
.classinfo_mp4{
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */
padding-top: 30px; /* IE6 workaround*/
height: 0;
overflow: hidden;
margin: 0;
}
@media screen and (max-width: 479px) {
.img_classinfo {display: none;}
.img_classinfo_mobile {width: 100%; display: inline-block;}
}
</style>
이런 사람에게 추천해요
- 현업에서 디자인시스템 도입을 고민하고 있는 디자이너
- 프로덕트 디자이너로서 경쟁력을 높이고 싶은 디자이너
- 커리어 점프를 하고 싶은 프로덕트 디자이너
- 나만의 디자인시스템을 구축해 업무 효율을 확 높이고 싶은 프로덕트 디자이너
- 디자인시스템 역량으로 돋보이는 포트폴리오를 만들고 싶은 디자이너
강사 소개
<body class="body">
<div class="section_profile wf-section">
<div class="profile_wrap">
<div class="profile"><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/VNNDQiycnm7Y99UG.profile_img_sanghyolee.png>" loading="lazy" alt="" class="profile_img"></div>
<div class="profile_info">
<div class="creator_name">이상효</div>
<div class="creator_desc">IT 프로덕트 디자이너로 일하고 있습니다. 즐겁게 일하고 잘 노는 삶을 지향합니다.</div>
</div>
</div>
<div class="creator_link">
<div class="sns1"><a href="<https://www.sanghyo.xyz/>" target=”_blank><img src="<https://center.stunning.kr/www/img/icons/editor_website.png>" loading="lazy" alt="" class="sns1_img"></a></div>
<div class="sns2"><a href="<https://brunch.co.kr/@artpen>" target=”_blank><img src="<https://center.stunning.kr/www/img/icons/editor_brunch.png>" loading="lazy" alt="" class="sns2_img"></a></div>
</div>
</div>
<style>
.section_profile {max-width: 708px;}
.profile_wrap {display: flex; align-items: flex-start; margin-top: 20px; margin-bottom: 20px;}
.profile {max-width: 80px; max-height: 80px;}
.profile_img {width: 100%; height: 100%;}
.profile_info {margin-left: 16px;}
.creator_name {margin-bottom: 8px; font-size: 16px; font-weight: 700;}
.creator_desc {margin-bottom: 16px; font-size: 14px;}
.creator_link {display: flex; align-items: flex-start; margin-top: 16px;}
.sns1 {width: 32px; height: 32px;}
.sns2 {width: 32px; height: 32px;}
.sns3 {width: 32px; height: 32px;}
.sns4 {width: 32px; height: 32px;}
.sns1_img {width: 100%; height: 100%;}
.sns2_img {width: 100%; height: 100%;}
.sns3_img {width: 100%; height: 100%;}
.sns4_img {width: 100%; height: 100%;}
@media screen and (max-width: 479px) {
.profile_wrap {margin-bottom: 0px;}
.profile {min-width: 80px;}
.creator_desc {line-height: 25px;}
.creator_link {margin-top: 0px;}
}
</style>
<body>
<div class="section_resume">
<div class="resume_subheading">강사 이력 소개</div>
<div class="resume_info">
현) 원티드랩 Product & Platform 디자이너<br>
현) 피그마 코리아 Community Organizer<br>
전) 버즈빌 Product Designer<br>
전) DICO Graphic Designer & Co-founder<br>
<br>
<strong>프로젝트<br></strong>
원티드랩 Wanted Design System 구축, 개선<br>
원티드랩 피그마 마이그레이션, UI 리팩토링<br>
버즈빌 BuzzAd Pop SDK 디자인<br>
버즈빌 Buzzvil Design System 구축, 개선<br>
DICO 앱, 웹 서비스 기획, 디자인<br>
<br>
<strong>강의 이력<br></strong>
노트폴리오 '프로덕트 디자이너 완성반' 강의<br>
원티드랩 '프리온보딩 프로덕트 디자인 코스' 강의<br>
노트폴리오 '디자인 시스템 워크숍' 강의<br>
패스트캠퍼스 '피그마를 활용한 모바일 UI 디자인' 강의<br>
<br>
<strong>집필 도서<br></strong>
Do it! 프로덕트 디자인 입문 with 피그마, 이지스퍼블리싱(2023)
<br>
</div>
</div>
</body>
<style>
.section_resume {max-width: 708px; margin-top:30px; margin-bottom: 15px;}
.resume_subheading {font-size: 16px; font-weight: 700;}
.resume_info {
margin-top:20px; font-size: 14px; line-height: 25px;
}
</style>
커리큘럼
<body>
<div class="session-section">
<div class="session-list">
<details>
<summary class="session">1회차. 디자인 시스템 & 피그마 이해하기<li></li></summary>
<div class="sub-session"><li>디자인 시스템이란? </li></div>
<div class="sub-session"><li>디자인 파편화, 디자인 시스템</li></div>
<div class="sub-session"><li>디자인 시스템을 배워야 하는 이유</li></div>
<div class="sub-session"><li>피그마 & 피그잼 소개</li></div>
<div class="assignment"><li>[과제] 피그마 사용 방법 관련 교보재 예습 / 리뷰용 작업물 제출</li></div>
<div class="assignment"><li>[과제] 피그마 UI구조 이해하기: 조 별로 시스템을 만들어 볼 메인 서비스 선정하기</li></div>
<div class="assignment"><li>[과제] 관심 있는 서비스 UI스크린샷 찍고, 핵심 화면을 피그마에서 만들어보기</li></div>
</details>
<details>
<summary class="session">2회차. 파운데이션 기초 공사하기 - 배리어블, 스타일<li></li></summary>
<div class="sub-session"><li>파운데이션, 클론 개선하기</li></div>
<div class="sub-session"><li>실무 시스템 파일 참고하기</li></div>
<div class="sub-session"><li>반복 작업 줄이기</li></div>
<div class="sub-session"><li>과제물 개선하기</li></div>
<div class="assignment"><li>[과제] 서비스에 필요한 파운데이션 제작하기, 기존 UI 컴포넌트 대체해보기</li></div>
</details>
<details>
<summary class="session"><li>3회차. 빠르게 프로젝트 만들어 보기 - 컴포넌트</li></summary>
<div class="sub-session"><li>디자인 시스템 기획하기</li></div>
<div class="sub-session"><li>아토믹 디자인 실습하기</li></div>
<div class="sub-session"><li>과제물 개선하기</li></div>
<div class="sub-session"><li>컴포넌트 활용해 화면 만들어 보기</li></div>
<div class="assignment"><li>[과제] 기존 UI 컴포넌트로 대체해보기, 개발자 세션 준비하기</li></div>
</details>
<details>
<summary class="session"><li>4회차. 디자인 시스템 바꿔서 써 보기</li></summary>
<div class="sub-session"><li>페어링 실습</li></div>
<div class="sub-session"><li>디자인 시스템 전파하기</li></div>
<div class="sub-session"><li>다른 조 컴포넌트 계승해서 프로덕트 디자인하기</li></div>
<div class="assignment"><li>[과제] 최종 발표 준비하기, 플랫폼 디자이너 세션 준비하기</li></div>
</details>
<details>
<summary class="session"><li>5회차. 컴포넌트 발전시키기 - 인터랙션, 프로토타입 적용</li></summary>
<div class="sub-session"><li>최종 발표 준비 사항 피드백</li></div>
<div class="sub-session"><li>플랫폼 디자이너 관점으로 팀별 프로젝트 리뷰 및 피드백</li></div>
<div class="sub-session"><li>사전 질문 QnA</li></div>
</details>
<details>
<summary class="session"><li>1회차 특강| UX 라이터 세션</li></summary>
<div class="sub-session"><li>UX Writer가 바라보는 좋은 UX 디자인이란 무엇인지, UX 라이팅 잘 하는 방법은 무엇인지를 알아봅니다. </li></div>
</details>
<details>
<summary class="session"><li>특강 2 | 개발자 세션</li></summary>
<div class="sub-session"><li>지금까지 만든 컴포넌트가 개발 관점에서 얼마나 유용한지, 구현 가능한 상태인지, 개발자 입장에서는 프로젝트를 보았을 때 어떻게 받아들일 수 있을지 확인해봅니다. 참관 개발자는 이를 위해 지금까지 진행한 문서와 컴포넌트를 현장에서 리뷰 후, 구현에 걸리는 시간, 배포 방식, 비현실성 등에 대해 조별로 리뷰하게 됩니다.</li></div>
</details>
<details>
<summary class="session"><li>6회차. 최종 발표 및 마무리</li></summary>
<div class="sub-session"><li>팀별 디자인 시스템 프로젝트 최종 발표</li></div>
<div class="sub-session"><li>[마치며] 툴은 툴일 뿐입니다</li></div>
</details>
</div>
</div>
<script src="<https://kit.fontawesome.com/70e0dc75f1.js>" crossorigin="anonymous"></script>
</body>
<style>
details > summary::after {
content: "+";
}
details[open] > summary::after {
content: "-";
}
.section_session {
width: auto;
max-width: 708px;
margin-right: 0px;
margin-left: 0px;
margin-top: 20px;
padding-right: 0px;
padding-left: 0px;
-webkit-box-pack: start;
justify-content: flex-start;
}
.session-list {
display: block;
margin-top: 0px;
margin-bottom: 0px;
border-style: solid solid none solid;
border-width: 0.5px;
border-color: #e5e5e5;
border-radius: 3px;
}
details {
position: static;
width: 100%;
max-width: 708px;
margin-top: 0px;
padding: 0;
background-color: #f7f7f7;
}
summary {
list-style: none;
}
.session {
padding: 15px;
margin: 0;
outline: none;
cursor: pointer;
display: flex;
overflow: visible;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
color: #222;
font-size: 16px;
font-weight: 600;
border-style: none none solid none;
border-width: 0.5px;
border-color: #e5e5e5;
border-radius: 0px;
}
.session > li {
text-align: left; margin-right: auto;
}
.sub-session {
position: static;
width: 100%;
max-width: 708px;
margin-top: 0px;
padding: 12px 15px 12px 25px;
border-style: none none solid none;
border-width: 1px;
border-color: #e5e5e5;
border-radius: 0px;
background-color: #ffffff;
font-family: 'Noto Sans KR', sans-serif;
color: #222;
font-size: 16px;
font-weight: 400;
}
.sub-session > li{
list-style-type: disc;
}
.assignment {
position: static;
width: 100%;
max-width: 708px;
margin-top: 0px;
padding: 12px 15px 12px 25px;
border-style: none none solid none;
border-width: 1px;
border-color: #e5e5e5;
border-radius: 0px;
background-color: #ffffff;
font-family: 'Noto Sans KR', sans-serif;
color: #222;
font-size: 16px;
font-weight: 400;
}
details[open] summary~* {
animation: anim .3s ease-in;
}
@keyframes anim {
0% {
opacity: 0;
margin-top: 0px;
}
100% {
opacity: 1;
margin-left: 0;
}
}
@media screen and (max-width: 479px) {
.session {
font-size: 14px;
}
.sub-session {
font-size: 14px;
padding: 12px 15px 12px 20px;
}
details[open] summary~* {
list-style: none;
}
.assignment {
font-size: 14px;
padding: 12px 15px 12px 20px;
}
}
</style>