프론트엔드 기반 프로덕트 디자이너 국비지원 - 구름톤 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 BasicPrototyping["기본 프로토타이핑"]
        direction LR
        C["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>Figma를 활용하여<br />가상의 모바일 앱<br />와이어프레임을<br />제작하고 프로토타입을<br />만들어 사용성 테스트<br />계획 수립하기</div><span class='nodeMissionEXP'>350</span><span class='nodeMissionDifficulty'>★</span>"]
        C -.-> D["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 UX 개선<br />프로젝트에 User<br />Flow를 작성하고<br />사용자 경험을<br />효과적으로 개선</div><span class='nodeMissionEXP'>600</span><span class='nodeMissionDifficulty'>★★★</span>"]
        C -.-> E["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />UI 개선을 위해<br />사용성 평가 도구를<br />활용하여 현재 UI를<br />분석하고 Figma로<br />개선안 디자인하기</div><span class='nodeMissionEXP'>1,050</span><span class='nodeMissionDifficulty'>★★★</span>"]
    end

    subgraph InteractiveDesign["인터랙티브 디자인"]
        direction LR
        F["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>Figma의 프로토타이핑<br />기능을 사용하여<br />간단한 인터랙션을<br />구현하고 사용자<br />플로우를 시각화</div><span class='nodeMissionEXP'>250</span><span class='nodeMissionDifficulty'>★</span>"]
        F -.-> G["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma의 프로토타이핑<br />기능을 활용하여<br />E-커머스 앱의 결제<br />프로세스를 구현하고<br />사용성을 최적화</div><span class='nodeMissionEXP'>500</span><span class='nodeMissionDifficulty'>★★</span>"]
        F -.-> H["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />사용자 온보딩<br />프로세스를 개선하기<br />위해 행동 분석<br />도구를 활용하여 현재<br />프로세스를 분석하고<br />Figma로 새로운<br />온보딩 플로우<br />디자인하기</div><span class='nodeMissionEXP'>1,090</span><span class='nodeMissionDifficulty'>★★★</span>"]
    end

    subgraph AdvancedPrototyping["고급 프로토타이핑"]
        direction LR
        I["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>사용성 테스트<br />방법론을 적용하여<br />가상의 제품<br />프로토타입을<br />평가하고 Figma로<br />개선된 UI 디자인<br />만들기</div><span class='nodeMissionEXP'>360</span><span class='nodeMissionDifficulty'>★</span>"]
        I -.-> J["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 디자인<br />시스템 프로젝트에<br />User Flow를<br />설계하고 인터랙티브<br />프로토타입을 제작</div><span class='nodeMissionEXP'>750</span><span class='nodeMissionDifficulty'>★★★★</span>"]
        I -.-> K["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma의 고급<br />프로토타이핑 기능을<br />활용하여 금융 서비스<br />앱의 전체 사용자<br />여정을 시뮬레이션</div><span class='nodeMissionEXP'>1,500</span><span class='nodeMissionDifficulty'>★★★★</span>"]
    end

    subgraph ComplexInteractions["복잡한 인터랙션 구현"]
        direction LR
        L["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>Figma와 React를<br />활용하여 고급<br />인터랙션이 포함된<br />프로토타입 제작</div><span class='nodeMissionEXP'>900</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
        L -.-> M["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma의 고급<br />프로토타이핑 기능을<br />활용하여 음성 인식<br />기반의 스마트홈<br />컨트롤 시스템<br />인터페이스를<br />디자인</div><span class='nodeMissionEXP'>1,500</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
        L -.-> N["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma를 활용하여<br />AI 기반 개인화 여행<br />플래너 앱의 UI를<br />디자인하고 사용자<br />시나리오를 개발</div><span class='nodeMissionEXP'>1,600</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
    end

    subgraph TeamProject1["팀 프로젝트 1"]
        direction LR
        O["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>팀 프로젝트에서<br />Figma를 사용하여<br />복잡한 대시보드<br />인터페이스를<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 />Figma와 Adobe<br />Creative Suite를<br />사용하여 마케팅<br />캠페인용 랜딩<br />페이지를 디자인하고<br />A/B 테스트를 위한<br />변형을 제작</div><span class='nodeMissionEXP'>1,100</span><span class='nodeMissionDifficulty'>★★</span>"]
        O -.-> Q["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma를 사용하여<br />반응형 이커머스<br />웹사이트를 디자인하고<br />모바일부터<br />데스크탑까지 모든<br />중단점에 대응</div><span class='nodeMissionEXP'>1,300</span><span class='nodeMissionDifficulty'>★★★</span>"]
    end

    subgraph TeamProject2["팀 프로젝트 2"]
        direction LR
        R["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>팀 프로젝트에서<br />React와 Figma를<br />활용하여 전체 앱의<br />프로토타입을 구현하고<br />사용성 테스트를 진행</div><span class='nodeMissionEXP'>1,000</span><span class='nodeMissionDifficulty'>★★★</span>"]
        R -.-> S["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma의 변수 기능을<br />활용하여 다국어 및<br />다중 브랜드를<br />지원하는 화이트라벨<br />제품의 UI 키트를<br />개발</div><span class='nodeMissionEXP'>1,400</span><span class='nodeMissionDifficulty'>★★★</span>"]
        R -.-> T["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />React 컴포넌트<br />라이브러리를 개발하고<br />Storybook을<br />사용하여 문서화</div><span class='nodeMissionEXP'>1,200</span><span class='nodeMissionDifficulty'>★★★</span>"]
    end

    subgraph TeamProject3["팀 프로젝트 3"]
        direction LR
        U["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>단독형</span><div class='nodeMissionName'>팀 프로젝트에서<br />Figma를 사용하여<br />정부 서비스 포털의<br />정보 아키텍처를<br />설계하고 주요<br />페이지의 프로토타입을<br />제작</div><span class='nodeMissionEXP'>1,500</span><span class='nodeMissionDifficulty'>★★★★</span>"]
        U -.-> V["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma를 사용하여<br />다국어 지원이 가능한<br />글로벌 전자상거래<br />플랫폼의 디자인<br />시스템을 구축</div><span class='nodeMissionEXP'>1,600</span><span class='nodeMissionDifficulty'>★★★★</span>"]
        U -.-> W["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트의<br />디자인 시스템을<br />React 컴포넌트<br />라이브러리로 구현하고<br />Storybook으로<br />문서화</div><span class='nodeMissionEXP'>1,900</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 />디자인 시스템을<br />개발하고 프로토타입<br />제작</div><span class='nodeMissionEXP'>2,000</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
        X -.-> Y["<span class='nodeMissionKind'>팀</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma의 고급<br />프로토타이핑 기능을<br />활용하여 금융 서비스<br />앱의 전체 사용자<br />여정을 시뮬레이션</div><span class='nodeMissionEXP'>1,500</span><span class='nodeMissionDifficulty'>★★★★</span>"]
        X -.-> Z["<span class='nodeMissionKind'>개인</span><span class='nodeMissionType'>연계형</span><div class='nodeMissionName'>진행 중인 프로젝트에<br />Figma의 고급<br />프로토타이핑 기능을<br />활용하여 제스처 기반<br />인터페이스 디자인을<br />위한 모션 디자인<br />시스템을 개발하고<br />사용성을 평가</div><span class='nodeMissionEXP'>1,900</span><span class='nodeMissionDifficulty'>★★★★★</span>"]
    end

    A ==> BasicPrototyping
    BasicPrototyping ==> InteractiveDesign
    InteractiveDesign ==> AdvancedPrototyping
    AdvancedPrototyping ==> ComplexInteractions
    B ==> TeamProject1
    TeamProject1 ==> TeamProject2
    TeamProject2 ==> TeamProject3
    TeamProject3 ==> TeamProject4