Blog
Blog
About Me

citeFred’s Blog

Developer Inyong Kim’s Blog
Search

6일차: 최종 시스템 통합 및 데모 (FastAPI)

부제: 딥보이스/딥페이크 탐지 모델을 활용한 추론 API 서버 구축 및 전체 통합

Agenda: 6일차 학습 목표 및 일정 (8H)

•
모듈 1 (이론/실습): FastAPI 서버 환경 설정 및 프로젝트 구조 구성
•
모듈 2 (실습): 딥보이스 탐지 API 개발 (FastAPI)
•
모듈 3 (실습): 딥페이크 이미지 탐지 API 개발 (FastAPI)
•
모듈 4 (실습): 전체 프론트/백엔드 시스템 통합 및 연결
•
모듈 5 (최종): Docker 가상 컨테이너 기술을 활용한 통합 애플리케이션 구축 프로젝트 데모 및 Q&A

모듈 1: FastAPI 서버 환경 설정 및 프로젝트 구조

1. 환경 설정 및 라이브러리 설치

•
목표: FastAPI 웹 서버 환경을 구축하고, TensorFlow 모델을 로드할 수 있도록 준비.
•
필수 라이브러리: fastapi, uvicorn, tensorflow, librosa, opencv-python.
[AI딥페이크] 6. 딥페이크 탐지 프로젝트(2) - Inference API + Frontend + Backend → Docker 애플리케이션 통합

5일차: 딥페이크 탐지 앱 개발(1) 프로젝트

부제: 데이터 전처리, 딥보이스 및 딥페이크 이미지 모델 분석과 훈련

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

•
데이터 전처리: 개념 이해 및 딥페이크 탐지를 위한 기초 데이터 확보.
•
딥보이스 모델 분석: 음성 특징 학습 및 진위 판별 메커니즘 이해.
•
딥페이크 이미지 모델 탐색: 이미지 모델 아키텍처 비교 및 프로젝트 적용 모델 선정.
•
실습: Colab 환경에서 전처리, 모델 구축, 훈련 및 성능 평가 수행.

모듈 1: 데이터 전처리 및 개요

1. 데이터 전처리

[AI딥페이크] 5. 딥페이크 탐지 프로젝트(1) - AI 모델 학습

4일차: 백엔드 프로그래밍 (NestJS)

부제: Node.js, TypeScript, NestJS 핵심 개념과 RESTful API 서버 구축

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

1.
NestJS 이론 (1): 핵심 개념, 아키텍처 (DI, Module)
2.
NestJS 실습 (1): Nest CLI 환경 구축 및 프로젝트 생성 (Resource)
3.
NestJS 이론 (2): 데이터베이스와 ORM (TypeORM)
4.
NestJS 실습 (2): DB 연동, Entity/Repository, 서비스 로직 구현
5.
NestJS 이론 (3): REST API 리팩토링 (DTO, Pipe)
6.
요약 및 5일차 예고 (FastAPI AI 연동 준비)

모듈 1: NestJS 핵심 개념 (이론)

1. Why NestJS?

•
Problem: Node.js의 자유도. (Express, Koa)
[AI딥페이크] 4. 백엔드 프로그래밍 언어 및 개발 환경 구축 (NestJS)

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 들어가기

수정 필요 부분

AuthModule

auth.module.ts

AuthModule 확인 필요

auth.module.ts
TypeError: Cannot read properties of undefined (reading 'challenge')

클라이언트 약식 소셜 로그인(OAuth)을 백엔드 서버 중심 인증방식으로 변경

•
보안 및 관례상 프로덕션 환경에서는 Credential 획득 및 관리를 백엔드에서 처리하는 것이 일반적인 관례이자 더 안전한 방식
•
따라서 이전 클라이언트 사이드로 Credential을 전달하던 약식 구현에서 백엔드 중앙집중식 구현으로 변경하고자 한다.

1. 백엔드에서의 Passport를 통한 구글 로그인 전략 구성

•
백엔드의 기존 JWT 활용 인증/인가 구현의 방식처럼 Passport를 통한 Google Auth Strategy를 추가 구성하려고 한다.

1-1. Google Auth 라이브러리 설치

•
아래 명령어를 통해 Google 인증 모듈을 설치할 수 있다. 이는 카카오 로그인 처럼 해당 모듈에 이미 정의된 내장 함수들을 통해 쉽고 빠르게 구현 할 수 있다.

1-2. GoogleStrategy 생성

•
기존 인증전략 파일이 모여있는 곳에 아래 코드를 작성한다.
[OAuth2.0] Google Social Login 구현 - 백엔드 중앙 관리식 로직 구현

소셜 로그인은 모두 비슷한 과정

•
이전 카카오 로그인 구현과 결과적으로 동일한 과정을 거친다.
•
실제 애플리케이션에서 구현하는 과정을 정리

1. 구글에서 애플리케이션 생성

•
프로젝트 만들기

1-1. 동의화면 구성

•
콘솔에서 OAuth 동의화면을 먼저 생성해준다.
[OAuth2.0] Google Social Login 구현 - 클라이언트 사이드 약식

문제 인식

해결 방안 탐색

해결 시도와 결과

Refused to display in a frame because it set 'X-Frame-Options' to 'sameorigin'.

도메인 구매 후, DNS 관리페이지 -> A Record 설정 -> 서버 외부 IP 연결

•
두개의 접근 주소 HTTP 일반 배포 상태 확인 (이후 → SSL 발급 후 HTTPS 보안 배포로 연결)

포트포워딩 정리

[서버컴퓨터]
•
프론트엔드 Angular -> Nginx 웹서버 정적 서빙 내부 4200 포트 -> 외부(도메인) 80 포트 → SSL 443 포트
•
백엔드 NestJS -> Express 내장서버 동적 데이터 서빙(WAS) 내부 3100 포트 -> 외부(도메인) 3100 포트
•
데이터베이스 MySQL -> Docker 내부 네트워크 3306 포트 -> 내부 3306 포트 -> 백엔드와 통신
•
Pixel Streaming(UE) -> Turn/Stun Server 포트 -> 외부 85 포트 → SSL 외부 8443 포트
자체 서버(로컬) HTTPS 배포를 위한 WACS를 통한 자체 Let’s Encrypt 인증서 발급과 연결

샘플 모습

1.
프론트엔드의 파일 업로드 요청 시작
2.
백엔드 컨트롤러의 요청 흐름
3.
프론트엔드의 파일 데이터베이스 목록 조회 화면
4.
강의실의 시청 화면 진입 모습
5.
시청 화면 요청 시 NAS의 웹서버로부터 서빙되는 영상의 모습
백엔드서버→NAS API 파일 업로드→NAS 영상 서빙 뷰 페이지 반환까지의 구현 샘플

문제 인식

•
문제 상태 분석

해결 방안 탐색

•
특정 유저가 로그인하는 방식의 SSH 세션은 결국 해당 접속을 종료하면 세션이 종료되면서 관련 프로세스가 모두 종료됨
•
따라서, NAS가 계속하여 실행되는 root 유저로 접근하면 해결 할 수 있지만 root계정으로 터미널에 접근하는 것을 개방하는 것은 위험성이 있음
•
NAS 자체에서 제공하는 Docker를 통해 실행하면 root에서 실행하는것이므로 지속적인 프로세스를 유지 할 수 있음

문제 해결 과정

•
Docker를 활용하기 위한 순서

추가적인 문제의 발생

•
해당 프로젝트는 이제 Docker 가상환경 내에서 작동하기 때문에 상대경로로는 해당 컴퓨터의 정확한 video라는 폴더에 접근 할 수 없었다.
•
공유폴더로 지정하고있는 video의 절대경로를 입력하여 정확한 공유폴더로 찾아 갈 수 있도록 지정
•
컨테이너 설정에서 컨테이너 볼륨을 공유폴더와 맵핑하는 부분이 있는것으로 보아 이부분에서도 해결 가능 할 것으로 보인다.
NAS 내 파일업로드 애플리케이션의 특정 SSH에 종속된 세션 만료 문제 + Docker와 Host의 컨텍스트 인식 문제

NAS 파일 스토리지를 활용하기

•
NAS:
•
서비스 백엔드 서버:
•
서비스 프론트엔드 서버:
•
추가 고려 사항
•
개발 과정 중 문제 해결과 현재 상태
NAS 파일서버 구축과 웹서버(Nginx)를 통한 파일 서빙

Standalone?

Angular에서 "Standalone" 컴포넌트는 Angular 14 이상에서 도입된 기능으로, 모듈 없이 독립적으로 사용할 수 있는 컴포넌트를 의미합니다. 이는 컴포넌트의 재사용성과 관리성을 높이며, 더 간편하게 애플리케이션을 구성할 수 있게 해줍니다.
Standalone 컴포넌트의 특징
1.
모듈 불필요: 기존의 Angular 컴포넌트는 반드시 모듈에 포함되어야 했지만, Standalone 컴포넌트는 독립적으로 사용할 수 있습니다.
2.
간편한 사용: 컴포넌트를 다른 컴포넌트에서 직접 사용할 수 있어, 불필요한 모듈 의존성을 줄일 수 있습니다.
3.
Lazy Loading 지원: Standalone 컴포넌트는 Lazy Loading을 지원하여, 필요할 때만 로드할 수 있습니다.
Standalone 컴포넌트 생성 예시 다음은 Standalone 컴포넌트를 생성하는 방법입니다.
Standalone 컴포넌트 사용 이제 다른 컴포넌트에서 Standalone 컴포넌트를 사용할 수 있습니다. 예를 들어, 부모 컴포넌트에서 사용해 보겠습니다.
모듈에 등록하지 않고 사용 Standalone 컴포넌트는 모듈에 등록할 필요가 없으므로, 다음과 같이 사용할 수 있습니다.
컴포넌트의 standalone의 필요성과 적용 범위 고려

데이터 바인딩을 위한 @Input 데코레이터

Angular에서 데이터 바인딩을 위한 데코레이터는 주로 @Input()을 사용하여 부모 컴포넌트로부터 값을 받아오는 데 사용됩니다. 이 데코레이터는 자식 컴포넌트에서 부모 컴포넌트의 데이터를 바인딩할 수 있게 해줍니다.
다음은 Angular에서 @Input() 데코레이터를 사용하여 데이터 바인딩을 구현하는 간단한 예시입니다.
1.
자식 컴포넌트 생성 먼저 자식 컴포넌트를 생성하고, @Input()을 사용하여 데이터를 받을 준비를 합니다.
2.
부모 컴포넌트 생성 부모 컴포넌트에서 자식 컴포넌트를 사용하고, 데이터를 전달합니다.
3.
모듈에 컴포넌트 추가 모듈 파일에 자식 컴포넌트를 추가합니다.
4.
결과 이제 Angular 애플리케이션을 실행하면, 부모 컴포넌트에서 자식 컴포넌트로 데이터가 바인딩되어 표시됩니다. 자식 컴포넌트는 부모의 데이터를 받아서 화면에 출력하게 됩니다.
이렇게 @Input() 데코레이터를 사용하여 Angular에서 데이터 바인딩을 구현할 수 있습니다.
Angular의 @Input 데코레이터 사용 방법

1. 백엔드 NestJS+내장 Express 컨테이너화 및 실행

1.1 Dockerfile 및 .dockerignore 작성

•
MP_Project/Back-end/Dockerfile 생성
•
MP_Project/Back-end/.dockerignore 생성

1.2 이미지 빌드

•
터미널 MP_Project/Back-end/ 경로(Root)에서
•
Docker-Desktop에서 생성된 NestJS 백엔드 프로젝트가 빌드된 이미지 확인

1.3 컨테이너 실행

•
CLI를 통한 이미지→컨테이너 실행 명령어
[Docker] Docker VM 활용 통합 배포와 CI/CD 파이프라인 구축

1. 플러그인 설치

Marketplace에서 아래 키워드로 검색하여 각각 설치한다.
•
SQLTools
•
@tag:sqltools-driver

2. 설치 후 커넥션 추가

•
좌측 하단 원통형 DB 아이콘이 생성되고 Add New Connection으로 DB와 연결해야 한다.
•
드라이버 플러그인도 설치가 정상적으로 되었다면 아래와 같이 아이콘이 나타난다. MySQL 선택
[Node.js] 12. 데이터베이스 GUI VSCode 플러그인
Load more
About Me
Contact
Github
Search
Programming Study
Projects
Thoughts
Life
Search
Python&AI
7
Python&AI
7
Framer
4
Framer
4
Project [LMS Platform]
9
Project [LMS Platform]
9
NestJS 과정
27
NestJS 과정
27
TypeScript
10
TypeScript
10
CS Study
73
CS Study
73
Node.js
13
Node.js
13
Spring-LDW
24
Spring-LDW
24
Spring
144
Spring
144
Java
45
Java
45
Algorithm&DataStructure
35
Algorithm&DataStructure
35
Project [TEAM258]
128
Project [TEAM258]
128
Project [iLanD]
35
Project [iLanD]
35
Project [CafeService]
17
Project [CafeService]
17
Project [GameInsight]
6
Project [GameInsight]
6
Project [Toy]
46
Project [Toy]
46
MySQL
30
MySQL
30
JPA
19
JPA
19
MongoDB
11
MongoDB
11
Elasticsearch
8
Elasticsearch
8
Git
4
Git
4
AWS
16
AWS
16
HTML,CSS
7
HTML,CSS
7
JavaScript
12
JavaScript
12
NAS&Docker
14
NAS&Docker
14
Flask
58
Flask
58
Python
18
Python
18
Interesting
0
Interesting
0
Blogging
6
Blogging
6
Kafka
1
Kafka
1
Mac
4
Mac
4
ETC
10
ETC
10
Redis
2
Redis
2
citeFred All Copyright Reserved. 2025