프론트엔드 개발자 국비지원 - 구름톤 DEEP DIVE

%%{
  init: {
	  'theme': 'base',
    'themeVariables': {
	    'darkMode': true,
      'primaryColor': 'rgba(0,0,0,0.5)',
      'primaryBorderColor': 'rgba(255,255,255,0.5)',
      'lineColor': 'rgba(255,255,255,0.5)',
      'secondaryColor': '#ffffff',
      'tertiaryColor': '#ffffff',
      'fontSize': '13px'
    },
    'flowchart': {
	    'useWidth': 300,
	    'useMaxWidth': true,
	    'htmlLabels': true,
	    'curve': 'basis',
	    'padding': 20,
	    'nodeSpacing': 20,
	    'rankSpacing': 30,
	    'diagramPadding': 10
	  }
	}
}%%
flowchart TD
    subgraph Start["<span style='display: none;'>시작점</span>"]
        A["개인 미션 시작"]
        B["팀 미션 시작"]
    end

    subgraph HTMLCSSBasics["HTML/CSS 기초"]
        direction LR
        C["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>HTML과 CSS를 사용하여<br />유튜브 메인 페이지를<br />클론 코딩하고 웹 레이아웃<br />구현 능력을 향상시키기</div><span class='nodeMissionEXP'>300</span><span class='nodeMissionDifficulty'>★</span>"]
        C -.-> D["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />CSS Flexbox와 Grid를<br />적용하여 반응형 레이아웃<br />구현하기</div><span class='nodeMissionEXP'>300</span><span class='nodeMissionDifficulty'>★★</span>"]
        C -.-> E["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />CSS 애니메이션과<br />트랜지션을 사용하여<br />인터랙티브한 UI 요소를<br />구현하기</div><span class='nodeMissionEXP'>500</span><span class='nodeMissionDifficulty'>★★</span>"]
    end

    subgraph JavaScriptBasics["JavaScript 기초"]
        direction LR
        F["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>JavaScript를 사용하여<br />간단한 투두 리스트 앱을<br />만들고 DOM 조작 능력을<br />향상시키기</div><span class='nodeMissionEXP'>400</span><span class='nodeMissionDifficulty'>★</span>"]
        F -.-> G["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />이벤트 위임을 적용하여<br />이벤트 핸들링 로직을<br />최적화하기</div><span class='nodeMissionEXP'>450</span><span class='nodeMissionDifficulty'>★★</span>"]
        F -.-> H["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />LocalStorage를<br />사용하여 사용자 설정을<br />저장하고 불러오는<br />기능을 구현하기</div><span class='nodeMissionEXP'>550</span><span class='nodeMissionDifficulty'>★★</span>"]
    end

    subgraph ReactBasics["React 기초"]
        direction LR
        I["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>React를 사용하여<br />간단한 메모 앱을 만들고<br />컴포넌트 기반 개발의<br />기초를 익히기</div><span class='nodeMissionEXP'>600</span><span class='nodeMissionDifficulty'>★★</span>"]
        I -.-> J["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 React<br />프로젝트에 PropTypes를<br />적용하여 타입 검사를<br />구현하고 버그 예방하기</div><span class='nodeMissionEXP'>500</span><span class='nodeMissionDifficulty'>★★</span>"]
        I -.-> K["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 React<br />프로젝트에 React<br />Hooks를 도입하여<br />상태 관리를 최적화하고<br />코드 가독성 향상하기</div><span class='nodeMissionEXP'>650</span><span class='nodeMissionDifficulty'>★★</span>"]
    end

    subgraph AdvancedUI["고급 UI/UX"]
        direction LR
        L["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>접근성 가이드라인을<br />적용하여 가상의 웹<br />애플리케이션의 UI를<br />개선하고 Figma로<br />접근성이 개선된 UI<br />디자인하기</div><span class='nodeMissionEXP'>1,600</span><span class='nodeMissionDifficulty'>★★★★</span>"]
        L -.-> M["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />UI 개선을 위해 사용성<br />평가 도구를 활용하여<br />현재 UI를 분석하고<br />Figma로 개선안<br />디자인하기</div><span class='nodeMissionEXP'>800</span><span class='nodeMissionDifficulty'>★</span>"]
        L -.-> N["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />사용자 온보딩<br />프로세스를 개선하기<br />위해 행동 분석 도구를<br />활용하여 현재<br />프로세스를 분석하고<br />Figma로 새로운 온보딩<br />플로우 디자인하기</div><span class='nodeMissionEXP'>1,500</span><span class='nodeMissionDifficulty'>★★★</span>"]
    end

    subgraph TeamProject1["팀 프로젝트 1"]
        direction LR
        O["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>React와 Figma를<br />활용하여 전체 앱의<br />프로토타입을 구현하고<br />사용성 테스트를 진행</div><span class='nodeMissionEXP'>1,000</span><span class='nodeMissionDifficulty'>★★★</span>"]
        O -.-> P["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />사용자 인터뷰를<br />계획하고 실행하여<br />깊이 있는 인사이트를<br />도출</div><span class='nodeMissionEXP'>600</span><span class='nodeMissionDifficulty'>★★★</span>"]
        O -.-> Q["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />사용자 여정 지도를<br />작성하고 주요<br />접점에서의 경험을 개선</div><span class='nodeMissionEXP'>700</span><span class='nodeMissionDifficulty'>★★★★</span>"]
    end

    subgraph TeamProject2["팀 프로젝트 2"]
        direction LR
        R["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>Figma를 사용하여<br />모바일 앱의 프로토타입을<br />제작하고 사용성 테스트<br />계획 수립하기</div><span class='nodeMissionEXP'>800</span><span class='nodeMissionDifficulty'>★</span>"]
        R -.-> S["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />UI 개선을 위해 사용성<br />평가 도구를 활용하여<br />현재 UI를 분석하고<br />Figma로 개선안<br />디자인하기</div><span class='nodeMissionEXP'>800</span><span class='nodeMissionDifficulty'>★</span>"]
        R -.-> T["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />사용자 온보딩<br />프로세스를 개선하기<br />위해 행동 분석 도구를<br />활용하여 현재<br />프로세스를 분석하고<br />Figma로 새로운 온보딩<br />플로우 디자인하기</div><span class='nodeMissionEXP'>1,500</span><span class='nodeMissionDifficulty'>★★★</span>"]
    end

    subgraph TeamProject3["팀 프로젝트 3"]
        direction LR
        U["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>사용자 중심 디자인<br />프로세스를 적용하여<br />제품의 UX를 개선하고<br />Figma로 새로운 UI<br />키트 제작하기</div><span class='nodeMissionEXP'>1,800</span><span class='nodeMissionDifficulty'>★★★★</span>"]
        U -.-> V["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />고객 피드백 관리<br />시스템을 구축하여<br />사용자 의견을 수집하고<br />Figma로 피드백<br />대시보드 디자인하기</div><span class='nodeMissionEXP'>1,400</span><span class='nodeMissionDifficulty'>★★★</span>"]
        U -.-> W["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />접근성을 평가하고<br />개선하기 위해 WCAG<br />가이드라인을 적용하여<br />UI를 개선하고 Figma로<br />접근성이 개선된 UI<br />디자인하기</div><span class='nodeMissionEXP'>1,600</span><span class='nodeMissionDifficulty'>★★★★</span>"]
    end

    subgraph TeamProject4["팀 프로젝트 4"]
        direction LR
        X["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>디자인 시스템을<br />구축하고 Figma로<br />컴포넌트 라이브러리<br />제작하기</div><span class='nodeMissionEXP'>2,500</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
        X -.-> Y["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />대한 종합적인 UX 분석을<br />수행하고 개선 전략<br />수립 및 적용하기</div><span class='nodeMissionEXP'>1,900</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
        X -.-> Z["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />브랜드 아이덴티티를<br />강화하기 위한 UI/UX<br />가이드라인을 개발하고<br />Figma로 스타일 가이드<br />제작하기</div><span class='nodeMissionEXP'>2,000</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
    end

    A ==> HTMLCSSBasics
    HTMLCSSBasics ==> JavaScriptBasics
    JavaScriptBasics ==> ReactBasics
    ReactBasics ==> AdvancedUI
    B ==> TeamProject1
    TeamProject1 ==> TeamProject2
    TeamProject2 ==> TeamProject3
    TeamProject3 ==> TeamProject4