"> "> ">
<head>
	<meta property="og:url" content="<https://community.notefolio.net/designsystem_workshop>"/>
	<meta property="og:type" content="website"/>
	<meta property="og:title" content="디자인 시스템 워크숍 by 이상효 디자이너"/>
	<meta property="og:description" content="실무 기반의 디자인 시스템을 배워봅니다."/>
	<meta property="og:image" content="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/pmEVgTtgnBUSDuWX.og_image.png>" />
</head>

new_Design System_섬네일_제목 수정_704X396.png

<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">2022.6.22 - 8.10 (8주)</div>
      </div>
      <div class="contents-details-box">
        <div class="contents-detail-header-text">시간</div>
        <div class="contents-details-text">매주 수요일 19:00 - 22:00</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">최대 32명</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">480,000원</div>
      <div class="monthly-price-box">
        <div class="monthly-price-text">월 80,000원</div>
        <div class="monthly-text">6개월 할부 시</div>
      </div>
    </div>

  </div>
<style>
	/*노션 제목 없애기*/
	.page-title {
		display: none;
	}
	
	.width.padding {
		margin: -20px;
	}

	.contents-form-relative {
		width: 708px; height: 365px; 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>
	<div class="section_lnb wf-section">
    <div class="container_lnb w-container">
      <a href="<https://community.notefolio.net/designsystem_workshop#1b6663d7-5343-4cc7-93bb-763e13082a9e>" class="program_info_nav">강의 소개</a>
      <a href="<https://community.notefolio.net/designsystem_workshop#5c948553-03c9-4bf8-9445-5da1b993480f>" class="creator_info_nav">강사 소개</a>
			<a href="<https://community.notefolio.net/designsystem_workshop#a9e64e21-ce76-4c98-bd96-aac1309f9952>" class="class_info_nav">커리큘럼</a>
      <a href="<https://community.notefolio.net/designsystem_workshop#05e0a29f-1466-4d46-8a90-365bbd665278>" class="faq_nav">자주 묻는 질문</a>
    </div>
  </div>
</body>

<style>
	.section_lnb {max-width: 708px;}
	.container_lnb {
		display: flex; justify-content: flex-start; align-items: stretch;
	  height: 60px; border-top: 1px none #e5e5e5; border-bottom: 1px solid #e5e5e5;
	}

	.program_info_nav {
	  height: 100%; padding: 20px 16px 16px;
	  color: #737373; font-size: 16px; font-weight: 400; text-decoration: none;
	}

	.creator_info_nav {
	  height: 100%; padding: 20px 16px 16px;
	  color: #737373; font-size: 16px; font-weight: 400; text-decoration: none;
	}
	
	.class_info_nav {
	  height: 100%; padding: 20px 16px 16px; 
	  color: #737373; font-size: 16px; font-weight: 400; text-decoration: none;
	}
	
	.faq_nav {
	  height: 100%; padding: 20px 16px 16px; 
	  color: #737373; font-size: 16px; font-weight: 400; text-decoration: none; 
	}

@media screen and (max-width: 768px) {
	.program_info_nav {height: 100%; padding: 20px 8px 0px;}
	.class_info_nav {height: 100%; padding: 20px 8px 0px;}
	.creator_info_nav {height: 100%; padding: 20px 8px 0px;}
	.faq_nav {height: 100%; padding: 20px 8px 0px;}
}

@media screen and (max-width: 478px) {
	.container_lnb {height: 50px; margin-top: -20px; border-top-style: none; line-height: 16px;}
	.program_info_nav {padding: 16px 5px 0px 5px; font-size: 14px;}
	.class_info_nav {padding: 16px 5px 0px 5px; font-size: 14px;}
	.creator_info_nav {padding: 16px 5px 0px 5px; font-size: 14px;}
	.faq_nav {padding: 16px 5px 0px 5px; font-size: 14px;}
}
</style>

강의 소개

<body class="body_classinfo">
  <div class="section_classinfo wf-section">
    <div class="container_classinfo_1 w-container">
      <div class="img_classinfo"><img src="<https://i.imgur.com/Aiv6N3g.png>" loading="lazy" 
						sizes="(max-width: 479px) 100vw, (max-width: 708px) 568px, 708px" 
					srcset="<https://i.imgur.com/Aiv6N3g.png> 500w, <https://i.imgur.com/Aiv6N3g.png> 708w" alt="" class="img_classinfo">
			</div><img src="<https://i.imgur.com/LRnGIDY.png>" loading="lazy" alt="" class="img_classinfo_mobile">
    </div>
  </div>
  <script src="<https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=626d6802d87e45c198f095ff>" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="<https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js>"></script><![endif] -->
</body>

<style>
	
	.container_classinfo_1 {
	  max-width: 708px;
		margin-top: 20px;
	}

	.img_classinfo {
		width: 100%;
	}
	
	.img_classinfo_mobile {
	  display: none;
	}
	
	@media screen and (max-width: 991px) {
	  .img_classinfo {
			width: 100%;
		}
		.img_classinfo_mobile {
		  display: none;
		}
	}
	
@media screen and (max-width: 767px) {
  .img_classinfo {
    width: 100%;
  }
	.img_classinfo_mobile {
		display: none;
	}
}

@media screen and (max-width: 479px) {
  .img_classinfo {
		display: none;
  }
	.img_classinfo_mobile {
		width: 100%;
		display: inline-block;
	}
}
</style>
<body class="body_classinfo">
  <div class="section_classinfo wf-section">
    <div class="container_classinfo w-container">

			
      <div class="img_classinfo1"><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/4xEJo7fDxG6VKfFa.classinfo1_web.png>" loading="lazy" 
						sizes="(max-width: 479px) 100vw, (max-width: 708px) 568px, 708px" 
					srcset="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/4xEJo7fDxG6VKfFa.classinfo1_web.png> 500w, <https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/4xEJo7fDxG6VKfFa.classinfo1_web.png> 708w" alt="" class="img_classinfo1">
			</div><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/WzD5xp69WMeTo3WV.classinfo1_mo.png>" loading="lazy" alt="" class="img_classinfo1_mobile">
	    </div>

			<div style="padding:75% 0 0 0;position:relative;" class="videoplayer"><iframe src="<https://player.vimeo.com/video/723959271?h=227a7cc4d8&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479?autoplay=1&loop=1&title=0&background=1>" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="classinfo2_gif_.mp4"></iframe></div><script src="<https://player.vimeo.com/api/player.js>"></script>

			
      <div class="img_classinfo2"><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/aPnqmHvwHKbeX8mi.classinfo3_web.png>" loading="lazy" 
						sizes="(max-width: 479px) 100vw, (max-width: 708px) 568px, 708px" 
					srcset="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/aPnqmHvwHKbeX8mi.classinfo3_web.png> 500w, <https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/aPnqmHvwHKbeX8mi.classinfo3_web.png> 708w" alt="" class="img_classinfo2">
			</div><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/DjHeFYtmcTPpZRYP.classinfo3_mo.png>" loading="lazy" alt="" class="img_classinfo2_mobile">
	    </div>

			
	  	<div style="padding:75% 0 0 0;position:relative;" class="videoplayer"><iframe src="<https://player.vimeo.com/video/723964729?h=9de80ba0c8&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479?autoplay=1&loop=1&title=0&background=1>" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="classinfo4_gif_.mp4"></iframe></div><script src="<https://player.vimeo.com/api/player.js>"></script>

			
      <div class="img_classinfo3"><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/AA938eaNKMZaZcn3.classinfo5_web.png>" loading="lazy" 
						sizes="(max-width: 479px) 100vw, (max-width: 708px) 568px, 708px" 
					srcset="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/AA938eaNKMZaZcn3.classinfo5_web.png> 500w, <https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/AA938eaNKMZaZcn3.classinfo5_web.png> 708w" alt="" class="img_classinfo3">
			</div><img src="<https://cdn-bastani.stunning.kr/prod/portfolios/1f03bac6-b505-42a5-9b63-6a6ed059d216/contents/sbYkLCNLX7xUmFst.classinfo5_mo.png>" loading="lazy" alt="" class="img_classinfo3_mobile">
	    </div>

		</div>
  </div>
</body>

<style>
	.container_classinfo {max-width: 708px; margin-top: 20px;}

	.img_classinfo1 {width: 100%;}
	.img_classinfo1_mobile {display: none;}

	.img_classinfo2 {width: 100%;}
	.img_classinfo2_mobile {display: none;}

	.img_classinfo3 {width: 100%;}
	.img_classinfo3_mobile {display: none;}

	.videoplayer {margin-top: -10px;}

@media screen and (max-width: 479px) {
  .img_classinfo1 {display: none;}
	.img_classinfo1_mobile {width: 100%; display: inline-block;}

  .img_classinfo2 {display: none;}
	.img_classinfo2_mobile {width: 100%; display: inline-block;}

  .img_classinfo3 {display: none;}
	.img_classinfo3_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 &amp; Platform 디자이너<br>
			현) 피그마 코리아 Community Organizer<br>
			전) 버즈빌 Product Designer<br>
			전) DICO Graphic Designer &amp; 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>
			패스트캠퍼스 &#x27;피그마를 활용한 모바일 UI 디자인&#x27; 강의 진행<br>
			버즈빌 사내 &#x27;피그마 디자인 스터디&#x27;,&#x27;모션 디자인 스터디&#x27; 진행<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>