공업수학 2
DFT/FFT/IFFT 실습
푸리에 변환을 소리와 이미지로 직접 만나보세요. 웹 데모에서 실시간으로 신호 처리의 원리를 시각화하고, Claude Code로 이 데모를 어떻게 만드는지 배워봅시다.
시작하기
핵심 개념
DFT (이산 푸리에 변환)
시간 영역의 신호를 주파수 영역으로 변환합니다. 신호가 어떤 주파수 성분들로 이루어져 있는지 알 수 있습니다.
FFT (고속 푸리에 변환)
DFT를 분할 정복으로 빠르게 계산하는 알고리즘입니다. O(N log N)의 시간복잡도로 실시간 신호 처리를 가능하게 합니다.
IFFT (역 푸리에 변환)
주파수 영역의 신호를 다시 시간 영역으로 돌려줍니다. 이를 이용해 잡음을 제거하거나 신호를 필터링할 수 있습니다.
Claude Code로 만들기
아래는 이 데모를 만든 과정을 단계별로 재구성한 프롬프트 예시입니다(실제 대화를 그대로 옮긴 것은 아닙니다). 수업 중 이런 식으로 단계별로 요청하고 개선해 나갑니다.
1
소리의 FFT/IFFT 데모 만들기
피아노 건반을 누르면 소리를 재생하고, 푸리에 변환된 스펙트럼을 실시간 그래프로 보여주는 기본 기능 요청
소리 피아노 건반을 눌렀을 때 FFT 스펙트럼을 실시간으로 보여주는 웹 데모를 만들어줄래? Canvas에 시간 영역과 주파수 영역 그래프를 나란히 그리고, 건반별로 주파수가 달라지는 걸 시각화해야 해.
2
이미지 2D 푸리에 변환 추가
새로운 탭에서 이미지 패턴(줄무늬, 격자, 대각선)의 2D 푸리에 스펙트럼을 비교할 수 있도록 확장
이미지 탭을 추가해서 세로 줄무늬, 격자무늬, 대각선 줄무늬 패턴의 2D 푸리에 변환 결과를 보여줄래? 좌측은 원본 이미지, 우측은 로그 스케일로 정규화된 스펙트럼이어야 해.
3
FFT 잡음 제거 필터 구현
음성 신호에 노이즈를 섞고, FFT 구간을 처리해 고주파를 감쇠한 후 IFFT로 돌아오는 필터링 시연
소리에 화이트 노이즈를 섞고 FFT로 분석하는 기능을 추가해줄래? 사용자가 고주파 감쇠 시작점을 슬라이더로 조절하면, 그 이상의 주파수 bin을 8%로 줄인 후 IFFT로 역변환해서 깨끗한 소리를 들려줄 수 있게.
4
디자인 통일 및 UI 개선
색상 팔레트 통일, 학습 포인트 섹션 추가, 모바일 반응형 개선
전체 색상을 파란색, 보라색, 흰색으로 통일해줄래? 각 실험 아래에 "비교 방법"·"관찰 포인트" 같은 학습 팁을 추가하고, 모바일에서도 그래프가 제대로 보이도록 반응형으로 만들어줘.
💡 수업 중 재연: 강의실에서는 이 과정을 단계별로 보여드리겠습니다. Claude Code 입력창에 프롬프트를 입력하고, 각 단계별로 데모가 어떻게 개선되는지 실시간으로 볼 수 있습니다.