이 프로젝트는 Antigravity를 활용하여 개발된 실험적인 웹 기반 기타 앰프 시뮬레이터입니다. Next.js와 Web Audio API를 사용하여 별도의 플러그인 설치 없이 브라우저 환경에서 리얼타임 오디오 프로세싱을 구현했습니다.
이 애플리케이션은 실제 기타 앰프의 핵심 기능을 웹 브라우저 상에서 충실히 구현하는 것을 목표로 합니다. 사용자의 오디오 인터페이스를 통해 입력된 기타 신호를 받아, 프리앰프(Gain/Distortion), 톤 스택(EQ), 캐비닛 시뮬레이션 과정을 거쳐 실제 앰프와 유사한 사운드를 출력합니다.
- Real-time Audio Processing: Web Audio API를 활용하여 낮은 레이턴시로 오디오 신호를 처리합니다.
- Overdrive Circuit: 튜브 스크리머(Tube Screamer) 스타일의 미드 부스트(Mid-hump)와 게인 부스트를 시뮬레이션하는 오버드라이브 기능을 탑재했습니다.
- Interactive Amp Controls:
- Gain: 입력 신호의 증폭 및 디스토션 양을 조절합니다.
- 3-Band EQ: Bass(저음), Middle(중음), Treble(고음)을 각각 조절하여 원하는 톤을 만듭니다.
- Master Volume: 최종 출력 볼륨을 제어합니다.
- Cabinet Simulation: Convolution Reverb 기술과 합성된 Impulse Response(IR)를 사용하여 실제 기타 캐비닛의 공명과 질감을 재현합니다.
- Visual Feedback:
- Input Meter: 입력되는 오디오 신호의 레벨을 실시간으로 시각화하여 입력 상태를 확인할 수 있습니다.
- Output Visualizer: 앰프를 거쳐 출력되는 사운드의 파형(Waveform)을 실시간으로 보여줍니다.
- Responsive Design: Tailwind CSS를 활용하여 다양한 화면 크기에 대응하며, 실제 앰프를 연상시키는 직관적인 UI를 제공합니다.
- Framework: Next.js 14+ (App Router)
- Language: TypeScript
- Styling: Tailwind CSS, clsx, tailwind-merge
- Audio Engine: Web Audio API (Native Browser API)
- UI Components: Lucide React (Icons)
이 프로젝트는 Antigravity를 통해 다음 프롬프트를 기반으로 생성 및 발전되었습니다:
create a guitar amp simulator based on Next.js in the ampsimulator folder. It should receive input through an audio interface and output sound based on that. It must be able to do everything a real guitar amplifier can do.
-
프로젝트 클론 및 이동
git clone <repository-url> cd ampsimulator
-
의존성 패키지 설치
npm install
-
개발 서버 실행
npm run dev
-
브라우저 접속 웹 브라우저를 열고
http://localhost:3000으로 접속합니다.
- 장비 연결: 컴퓨터에 오디오 인터페이스를 연결하고, 기타를 인터페이스의 입력 단자에 연결합니다. (Hi-Z 또는 Instrument 모드 권장)
- 권한 허용: 브라우저에서 마이크(오디오 입력) 접근 권한을 요청하면 허용을 클릭합니다.
- 전원 켜기: 화면 우측 하단의 Power 스위치를 클릭하여 앰프를 켭니다.
- 입력 확인: 좌측의 Input Meter 게이지가 기타 연주에 반응하여 움직이는지 확인합니다.
- 톤 메이킹:
- Drive 스위치를 켜서 오버드라이브 톤을 추가할 수 있습니다.
- Gain, Bass, Middle, Treble 노브를 돌려 원하는 사운드를 만듭니다.
This project is an experimental implementation using Antigravity.