<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>
패스트캠퍼스 '피그마를 활용한 모바일 UI 디자인' 강의 진행<br>
버즈빌 사내 '피그마 디자인 스터디','모션 디자인 스터디' 진행<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="assignment"><li>[실습 및 과제] 피그마 클라이언트 설치 후 예제 파일 따라 만들어보기</li></div>
</details>
<details>
<summary class="session">2주차. 피그마 이해하기<li></li></summary>
<div class="sub-session"><li>좌측 패널: Layer Panel, Asset Panel</li></div>
<div class="sub-session"><li>상단 Mouse Tool, Contextual Tool</li></div>
<div class="sub-session"><li>우측 패널: share and viewing</li></div>
<div class="sub-session"><li>우측 패널: design, prototype, inspect</li></div>
<div class="sub-session"><li>Frame, Auto Layout</li></div>
<div class="sub-session"><li>Constraints & Resizing</li></div>
<div class="sub-session"><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="sub-session"><li>스타일 고도화하기: Fonts, Shadow, Grid 등</li></div>
<div class="sub-session"><li>기존 컴포넌트 구조의 이해와 적용, 컴포넌트 수정 및 통합</li></div>
<div class="sub-session"><li>추가 기능 정의, 커뮤니케이션 최적화</li></div>
<div class="sub-session"><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="sub-session"><li>로컬 스타일 응용, 셀렉션 컬러</li></div>
<div class="sub-session"><li>필요한 컴포넌트 검색하여 가져오기</li></div>
<div class="sub-session"><li>에셋 종류별로 묶기 - 아토믹 디자인(Atomic Design) 기반</li></div>
<div class="sub-session"><li>초간단 프로토타이핑 해보기</li></div>
<div class="sub-session"><li>[실습 및 과제] 2인 1조로 담당 컴포넌트 영역 설정, 기존 UI 컴포넌트로 대체해보기</li></div>
</details>
<details>
<summary class="session"><li>5주차. 컴포넌트 발전시키기 1</li></summary>
<div class="sub-session"><li>시스템 구축의 배경, 목적, 원칙 등 문서화</li></div>
<div class="sub-session"><li>Similayer, Google Sheet Sync 플러그인 이해 및 활용하기</li></div>
<div class="sub-session"><li>유지보수와 협업을 위한 네이밍 규칙: Snake case, Camel case</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="sub-session"><li>[실습 및 과제] 팀별로 컴포넌트 리뷰 및 병합하기</li></div>
<div class="sub-session"><li>[실습 및 과제] 디자인 시스템 문서 구체화하기</li></div>
</details>
<details>
<summary class="session"><li>6주차. 컴포넌트 발전시키기 2 (*개발자 특별 세션)</li></summary>
<div class="sub-session"><li>개발자 참관 하에 팀별 프로젝트 리뷰 및 피드백</li></div>
<div class="sub-session"><li>[실습 및 과제] 피드백을 바탕으로 디자인 시스템 완성도 높이기</li></div>
</details>
<details>
<summary class="session"><li>7주차. 디자인 시스템 써 보기</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>
</details>
<details>
<summary class="session"><li>8주차. 최종 발표 및 마무리</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>
</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;
}
.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;
}
.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>
자주 묻는 질문
<body>
<div class="session-section">
<div class="session-list">
<details>
<summary class="question">Q. 현재 학생인데 강의를 수강해도 괜찮을까요?</summary>
<div class="answer"><p>이번 디자인 시스템 워크숍은 프로덕트 및 플랫폼 디자이너 또는 UI/UX 디자이너로 취업 또는 커리어 전환을 고민하는 분들을 주 대상으로 하고 있습니다. </p><p>특히, 기존의 UI 관련 툴을 다뤄봤거나, UI/UX 강의를 들었음에도, 실무 업무를 보는데 있어 막막하시거나 어려움을 느끼는 분들에게 도움이 될 수 있는 강의입니다.</p></div>
</details>
<details>
<summary class="question">Q. 강의 진행은 어떤 식으로 이루어지나요?</summary>
<div class="answer">모든 강의는 녹화본이 아닌 줌 온라인을 통해 매주 저녁 7시부터 실시간으로 진행되며, 일반적인 강의 뿐만 아니라 팀별 실습 진행 및 상호 피드백 등이 활발하게 진행될 예정입니다.</div>
</details>
<details>
<summary class="question"><li>Q. 강의를 듣지 못했을 경우 강의 녹화본을 볼 수 있나요?</li></summary>
<div class="answer">피치 못할 사정으로 강의에 참석하지 못한 수강생 분들을 위해 강의 이후 강의 녹화본이 제공될 예정입니다. (단, 강의 녹화본은 외부로의 유출 및 공유가 불가능합니다.)</div>
</details>
<details>
<summary class="question"><li>Q. 팀 프로젝트는 어떻게 진행되나요? 반드시 참여해야 하나요?</li></summary>
<div class="answer"><p>이번 디자인 시스템 워크숍은 모든 수강생이 팀 프로젝트를 반드시 참여해야 수료가 가능하도록 설계되었습니다.</p><p>팀 프로젝트는 기본 4인 1조로 나누어 진행되며, 팀원 간 협업을 통해 실제로 가상의 디자인 시스템을 만들어 보게 됩니다. 또한 완성한 디자인 시스템을 바탕으로 상대 팀이 제품을 디자인해봄으로써 문제점과 보완점을 발견하도록 되어있습니다.</p><p>이러한 팀 간의 상호 피드백과 함께 현업 디자이너와 현업 개발자의 피드백에 함께 제공되며, 이를 통해 프로덕트 디자이너가 실무에서 협업하는 방식을 그대로 체험할 수 있습니다.</p></div>
</details>
<details>
<summary class="question"><li>Q. 강의 이외에 피드백을 따로 받을 수 있나요?</li></summary>
<div class="answer"><p>이번 디자인 시스템 워크숍은 줌 온라인을 통한 강의 외에 슬랙을 통한 온라인 수강생 커뮤니티가 활성화됩니다.</p><p>수강생 커뮤니티는 개강 직후 참여 링크가 발송되며, 수강생 커뮤니티 내에서 질의 응답, 자료 공유, 프로젝트 협업 등이 상시로 진행될 예정입니다.</p></div>
</details>
<details>
<summary class="question"><li>Q. 우수 수강생 선정 및 추천서 제공은 어떤 기준으로 진행되나요?</li></summary>
<div class="answer"><p>이번 워크숍에서는 우수 수강생 1명 그리고 우수 팀 1팀을 선정하여 이력에 활용하실 수 있도록 강사가 직접 작성한 추천서를 제공합니다.</p><p>우수 수강생 및 팀의 선정은 강의 동안 적극적으로 참여하고 성실히 수강함과 동시에 뛰어난 역량 및 성장을 보인 분들에 한해 진행될 예정입니다.</p></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;
}
.question {
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;
}
.answer {
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: 14px;
font-weight: 400;
line-height; 1.8;
}
p {
margin-block-start: 10px;
margin-block-end: 10px;
}
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) {
.question {
font-size: 14px;
}
.answer {
font-size: 14px;
padding: 12px 15px 12px 20px;
}
details[open] summary~* {
list-style: none;
}
}
</style>
