이젠아카데미DX교육센터 - AI캠퍼스 - UXUI디자인 웹 프론트엔드 개발 부트캠프(피그마AI,클로드)

Curriculum

1. 개발 환경 & UX·UI 설계 디자인

   비쥬얼스튜디오, GitHub, 피그마, Clude

   

2. 프론트엔드 기초 & 심화

   HTML5, CSS3, JS,React

   

3. Claude 바이브코딩

   Claude,바이브 코딩, 프롬프트 설계, AI 코드리뷰

   

4. API & Cloud + AI 포트폴리오

   Node.js, API, AWS, AI 포트폴리오

   

1. UX/UI
   디자인 제작

   UX/UI 정의 및 개발 프로세스,
   디지털 컴포넌트, Web/Mobile
   UX 기획
   및 설계, 종합적인
   UX/UI 디자인 제작을 학습합니다.

   56시간
   미니
   프로젝트

   1. UX/UI 정의 및 개발 프로세스 UX는 사용자의 경험을 설계하고, UI는 그 경험을
      시각적으로 구현하는 과정으로, 사용자 요구를
      중심으로 개발 프로세스를 학습합니다.

      • Lv.1 (초급)

   2. UX/UI Digital Component 디스플레이 특성, 그리드 시스템, 레이아웃 등
      피그마를 활용하여 컴포넌트를 제작, 프로토타입을
      실습 및 Claude AI 기반 이미지 생성·디자인 제안을
      실습합니다.

      • Lv.1 (초급)
      • 피그마, Claude AI 입문

   3. Web/Mobile UX Planing 브랜드 콘텐츠 UX 현황 분석과 벤치마킹,
      생성형 AI를 활용한 사용자 연구, 모델링(페르소나,
      Journey map), 유저 플로우작성 등 을 포함한
      종합적인 UX 설계를 합니다.

      • Lv.2 (중급)
      • Claude AI 활용

   4. Web/Mobile UI Style Design Claude AI를 활용한 UI 콘셉트 아이디어 도출,
      기능 정의, 화면 설계 등 UI 디자인 시스템 및
      스타일 가이드 작성 과정을 포함하여 전체
      UI 디자인 개발을 체계적으로 접근합니다.

      • Lv.2 (중급)
      • UI 컴포넌트 제작

   5. 미니 프로젝트 I - 브레인스토밍

      • 프로젝트 주제 및 목표선정
      • 참여자 선정 및 역할분담
      • Claude AI 활용 브레인스토밍 생성형 활용 및 실습
      • 아이디어 평가및 선별/구체화 및 피드백
      • 실행단계별 계획 수립과 사용자 요구분석
      • 페르소나 및 Journey map 작성
      • 워크플로우 및 와이어프레임 작성
      • UX/UI 가이드 작성 및 프로토타입 제작

      • 팀 프로젝트 (중급)
      • Claude AI 활용
      

2. 프론트엔드
   기초

   프론트엔드 기본 지식을 활용하여
   실전 프로젝트에서 UX·UI 설계와
   HTML/CSS 기반의 반응형 웹디자인을
   구현합니다.

   1. 프론트엔드 개발환경 설정 프론트엔드 개념과 개발환경 설정, VS Code 사용, Git/GitHub 기초(설치, 브랜치 관리, 협업, 저장소 및 이슈 관리) 및 Claude 설치와 기본 활용 환경 세팅을 학습합니다.

      • Lv.1 (초급)
      • Claude 환경 세팅

   2. HTML/CSS 웹/모바일 브라우저 이해, HTML/CSS 기초,
      반응형 웹, Claude로 HTML/CSS 초안 생성 실습을 학습합니다.

      • Lv.1 (초급)
      • Claude 바이브코딩 입문

   3. Javascript 기초 기본 개념과 문법 학습, DOM 조작을 통한 동적
      변경, 배열과 객체를 통한 데이터 관리 등
      Javascript를 활용할 수 있는 기초를 다집니다.

      • Lv.2 (중급)
      

3. 프론트엔드 심화

   역량 심화를 위한 JavaScript, TypeScript,
   React를 집중적으로 학습,
   Claude 바이브코딩을 활용한
   클론 코딩 미니 프로젝트를 통해
   실제 구현 경험을 쌓으며
   실습합니다.

   40시간
   미니
   프로젝트

   1. Javascript 심화 외부 데이터 호출 및 처리, 객체 지향 프로그래밍,
      정규표현식 활용, ES6 문법 및 고급 기능을
      학습 및 활용합니다.

      • Lv.2 ~3 (중·고급)

   2. TypeScriptTypeScript 개요, 문법, 자료형, 함수, 인터페이스, 클래스, 에러 처리 및 Claude 바이브코딩을 활용하여 코딩합니다.

      • Lv.3 (고급)
      • Claude 바이브코딩

   3. 미니 프로젝트 II - UX/UI 클론 코딩

      • 프로젝트 주제 및 목표선정
      • Web/Mobile 클론코딩
      • Claude 바이브코딩으로 Web/Mobile 클론코딩 실습
      • 문서내 동적 기능 구현을 위한 Javascript 작성
      • Javascript & Dom을 활용한 UI 구현
      • Claude와 함께하는 React 컴포넌트 설계 실습
      • 팀 프로젝트 (중급)
      • Claude 바이브코딩
      

   4. React,AWS React의 개념과 컴포넌트, 상태 관리, 라이프 사이클 최적화 기법을 학습하고, Claude 바이브코딩으로 React 코딩을 실습합니다. 또한 AWS EC2 인스턴스 생성, 서버 연결, 도메인 연결 및 배포 과정을 포함한 배포 작업을 다룹니다.

      • Lv.3 (고급)
      • AWS 활용
      

4. WEB / MOBILE
   UX / UI
   프로젝트

   프론트엔드 개발을 위한 SPA 구현,
   클라우드 배포 및 관리,
   그리고
   Claude 바이브코딩을 활용한
   프로젝트
   기획과 코딩 기술을
   다룹니다.

   320시간
   프로젝트
   With 현직 개발자

   1. 웹&모바일 UX/UI 프로젝트 I

      K-Brand Contents 프로젝트

      • 팀 빌딩, 주제 선정 및 경쟁사 UX/UI 분석과 벤치마킹.
      • Claude AI를 활용한 사용자 분석(페르소나, Journey Map), 리서치 및 인사이트 도출.
      • UI/UX 콘셉트 기획, 어피니티 다이어그램, 정보 구조(IA) 설계, 유저 플로우 작성.
      • 서비스 기능 정의 및 핵심 인사이트 도출, UX/UI 및 인터랙티브 디자인.
      • Web/Mobile 프로토타입, Claude Code를 활용한 UI 컴포넌트 제작, 서비스 환경 구축, 프론트엔드 및 퍼블리싱.
      • 웹/모바일 빌드, 모션 그래픽 제작 및 프로젝트 배포.
      • Claude 바이브코딩 과정을 AI 포트폴리오로 기록 및 정리.
      • 팀 프로젝트 (고급)
      

   2. 모바일 UX/UI 프로젝트 II

      Claude AI 챗봇 지원 팬덤 커뮤니티

      • 팀 빌딩, 주제 선정 및 경쟁사 UX/UI 분석과 벤치마킹.
      • Claude AI를 활용한 사용자 분석(페르소나, Journey Map), 리서치 및 인사이트 도출.
      • UI/UX 콘셉트 기획, 어피니티 다이어그램, 정보 구조(IA) 설계, 유저 플로우 작성.
      • 서비스 기능 정의 및 핵심 인사이트 도출, UX/UI 및 인터랙티브 디자인.
      • Mobile 프로토타입, Claude Code 바이브코딩으로 UI 컴포넌트 제작, 서비스 환경 구축, 퍼블리싱/프론트엔드 구현.
      • 모션 그래픽, SPA 구현, Mobile 빌드 및 프로젝트 배포.
      • AI 포트폴리오 완성 및 취업 연계 매칭.
      • 팀 프로젝트 (고급)