Blog
//
Blog
About Me
//
🧳

Programming Study

# of Posts
10
1 more property
Search

3일차 - 프론트엔드 개발: React 기초

부제: JavaScript 핵심 문법, React 컴포넌트, Hooks를 활용한 딥페이크 탐지 웹 UI 구현

Agenda: 3일차 학습 목표 및 일정

1.
JavaScript Core (이론): ES6+ 주요 문법, 비동기 처리 (Promise, async/await).
2.
React Core (이론): SPA, JSX, Component, Props, State 개념.
3.
실습 1 (환경 구축): React 개발 환경 구축 (Vite), 기본 컴포넌트 및 Props.
4.
실습 2 (상태 관리): React Hooks (useState), 이벤트 핸들링.
5.
실습 3 (UI/생명주기/라우팅): HTML/CSS in JSX, useEffect, React Router.

모듈 1: JavaScript Core (이론)

1. Why JavaScript?

•
웹 브라우저를 제어하는 유일한 프로그래밍 언어.
•
React, NestJS(Node.js) 모두 JavaScript(TypeScript) 기반으로 동작함.
[AI딥페이크] 3. 프론트엔드 프로그래밍 언어 및 개발 환경 구축 (React)

2일차: 스마트시티 산업 동향 및 딥페이크 탐지 프로젝트 설계

부제: 딥페이크 탐지 기술의 스마트시티 적용 방안 모색 및 웹 서비스 기획

2일차 학습 목표 및 일정

1.
이론 (2H): 스마트시티 산업 동향 및 딥페이크 탐지 기술 적용 방안
2.
실습 (6H): 딥페이크 탐지 웹 애플리케이션 프로젝트 설계
3.
발표 및 피드백: 팀별 설계 내용 발표

모듈 1: 스마트시티 산업과 AI

1. 스마트시티 산업 동향

•
정의: ICT 기술을 도시 공간에 적용, 도시 자원을 효율적으로 활용함.
•
국내외 사례 분석 (HWP 기반)
•
핵심 기술: IoT, 빅데이터, AI, 그리고 디지털 트윈.
[AI딥페이크] ２. 스마트시티 산업과 AI

1일차: AI 혁신과 스마트시티: 딥페이크 탐지 첫걸음

부제: AI 기본기, 스마트시티 적용, 그리고 딥페이크 문제의 이해

Agenda: 1일차 학습 목표 및 일정

1.
AI/DL 이론: AI, 머신러닝, 딥러닝 개념 및 차이점 이해
2.
실습 1 (환경): Colab 및 Python 데이터 분석 도구 (Numpy/Pandas) 활용
3.
스마트시티 이론: 스마트시티 개념, AI 활용 방안
4.
딥페이크 이론: 딥페이크 기술 원리 및 사회적 문제점 인지
5.
실습 2 (분석): 딥페이크 샘플 데이터 분석 및 토론

모듈 1: AI 개요 및 딥러닝 (이론)

1. 인공지능(AI)의 정의

[AI딥페이크] 1. AI 및 스마트시티
1,2,3 장에서의 실습과 설명은 비전공, 웹개발 경험이 없는 대상을 위해 안내했지만, 이 과정도 다소 어렵게 느껴질 수 있는 왕초보들을 위한 AI 활용 방법이다.

1. AI에게 구성 만들도록 하기

•
Framer 홈페이지에서 Start with AI 선택
•
프로젝트 소개 페이지므로 Landing Page 선택 및 전송
•
알아서 에디터가 열리면서, 기본 레이아웃을 AI가 작성한다.
•
왼쪽 Ask Framer… 에서 원하는 것을 입력해보려고 한다.
•
실시간으로 AI가 페이지를 변경하기 시작한다.
•
간단한 레이아웃이나 설명 등을 통해 기본 레이아웃 정도를 빠르게 생성해주는 도움을 받을 수 있다.
•
AI는 지시한대로 움직이기 때문에 명령을 보다 명확하게 자세히 할 수록 좋은 결과를 만들어준다.
•
프로젝트를 홍보하고 영상, 이미지 등을 업로드하는 랜딩페이지 정도는 오히려 빠르게 구성 할 수 있음

2. 효과 등 수정해보기

•
원하는 이미지 등을 넣기만 해도 나만의 간단한 프로젝트 소개 홈페이지가 구성된다.
•
각 이미지나 텍스트, 레이아웃 프레임이 나타나거나 확대되는 각종 효과를 추가해보면서 꾸밀 수도 있다.
[Framer] 4. AI Framer를 활용 웹사이트의 만들기(초심자추천)

1. 웹 서비스의 동작에 대해 이해하기

•
홈페이지는 우리가 보여주는 것 말고도 클릭해서 눌렀을때 동작하는 것들이 포함된다. 이 홈페이지의 예시로는 아래 사진과 같다.
•
우리는 강제로 우리 프로젝트 이미지를 넣긴했지만, 저렇게 프로젝트 메뉴로 이동하니 우리가 수정하지 못했던 부분들이 있는 것을 확인했다.
•
실제 홈페이지들의 동작은 단순히 이미지를 교체하는 정도로는 한계가 있고,
•
하지만 Framer에서는 이러한 복잡함을 간단히 페이지 구성을 통해 해결할 수 있다.

2. 홈페이지의 콘텐츠를 변경해보기

•
우리는 단순히 이미지를 교체해보기도 했지만, 프로젝트나 슬라이드 이미지 사진을 누르면 나타나는 상세 정보도 넣어주고싶어졌다.
•
Framer 에디터를 켜고 왼쪽 메뉴를 살펴본다.
•
Edit in CMS를 들어가보면 다음처럼 등록된 프로젝트들이 실제로 보이게 된다.
•
이는 우리가 처음에 이미지를 단순히 바꾸는것 보다는 실제로 이 프로젝트 관리 부분에 들어와서 이미지를 교체하고 설명을 입력하면
•
홈페이지에서 동일하게 보일 것이다.
[Framer] 3. Framer를 활용 웹사이트의 콘텐츠를 바꿔보기 심화(콘텐츠관리시스템 CMS?)

1. Framer 회원가입

•
회원가입하기
•
구글로 간편 회원가입 하기
•
구글 회원 가입 진행, 알맞는 정보 입력하여 회원 가입 완료하기
•
회원가입 후 나타나는 메인 에디터 페이지

2. 테마 찾기

•
에디터에서 직접 템플릿을 디자인하고 레이아웃을 구성하거나 Figma 등의 웹디자인 툴을 통해 디자인한 것을 삽입 할 수도 있다.
•
하지만 웹 디자인에 익숙하지 않은 사람들을 위해서는 전문가들이 틀을 잡아둔 유용한 템플릿을 활용하는 것으로 시간을 절약 할 수 있다.
•
에디터 창에서 브라우저에서 아래 링크로 접속
•
템플릿들을 살펴보기 위해서 전체 목록을 살펴보기
•
“무료” 템플릿 모아서 살펴보기 및 고르기
•
원하는 템플릿 선택과 미리보기를 통해서 홈페이지가 완성된 모습을 미리 체험 할 수 있다.
•
해당 템플릿 사용을 원한다면, Use For Free 선택
[Framer] 2. Framer를 활용 웹사이트 디자인과 배포해보기

1. Framer란 무엇인가?

[Framer] 1. 초보, 비전공자를 위한 Framer로 홈페이지 만들기 소개

Python이란 무엇인가?

Python(파이썬)은 1991년 네덜란드의 프로그래머 귀도 반 로섬(Guido van Rossum)이 개발한 고급 프로그래밍 언어다. 'Monty Python's Flying Circus'라는 영국의 코미디 프로그램에서 이름을 따온 Python은 "간단하고 읽기 쉬운" 철학을 바탕으로 설계되었다.

Python의 핵심 특징

1. 간단하고 직관적인 문법

Python의 가장 큰 장점은 사람이 읽기 쉬운 문법이다. 다른 프로그래밍 언어에 비해 코드가 영어와 비슷하여 초보자도 쉽게 이해할 수 있다.

2. 인터프리터 언어

Python은 인터프리터 언어다. 이는 코드를 한 줄씩 실행하므로 즉시 결과를 확인할 수 있어 학습과 개발에 매우 유리하다.

3. 플랫폼 독립적

"Write Once, Run Anywhere" - Python으로 작성한 코드는 Windows, macOS, Linux 등 어떤 운영체제에서도 동일하게 실행된다.

4. 풍부한 라이브러리

Python은 표준 라이브러리와 서드파티 라이브러리가 매우 풍부하다. 웹 개발, 데이터 분석, 인공지능 등 다양한 분야의 라이브러리를 쉽게 사용할 수 있다.

Python의 주요 활용 분야

[Python] Python이란 무엇인가? - 프로그래밍 입문자를 위한

프로그래밍을 위한 Python 문법 기초

Python Tutorials
[Python] 0. Python 들어가기
Load more
　｜　Main Page　｜　Category　｜　 Tags　｜　About Me　｜　Contact　｜　Portfolio