Coder Island

[AWS] 유니티 게임 서버(NestJS) 무중단 배포

rud_Island — Fri, 27 Mar 2026 17:21:43 +0900

이번 글은 개인 프로젝트로 진행했던 방치형 게임의 백엔드 시스템을 AWS EC2에 올린 과정을 정리합니다.

AWS 계정 보안: 권한 분리 및 MFA 설정

처음 가입했을때 root 계정으로 사용하게 되는데 root 계정은 모든 권한을 가진 '마스터 계정' 이라서 사용자계정을 분리 시켜야합니다.

IAM 콘솔 접속: AWS 상단 검색창에 IAM을 입력하고 이동합니다.
사용자 생성 시작: 왼쪽 메뉴에서 사용자 -> 사용자 생성 버튼을 클릭합니다.
사용자 세부 정보 설정:
- 사용자 이름: Admin-Dev (본인이 알아보기 쉬운 이름)
- AWS 관리 콘솔에 대한 사용자 액세스 권한 제공: 체크
- 사용자 유형: IAM 사용자를 생성하고 싶음 선택
- 비밀번호 설정: 사용자 지정 비밀번호로 안전하게 설정합니다.

권한 설정:
- 직접 정책 연결 선택
- 권한 정책 검색창에 AdministratorAccess 입력 후 체크 (관리자 권한 부여)
검토 및 생성: 설정을 확인하고 사용자 생성을 완료합니다.
- 중요: 생성 직후 나오는 로그인 URL, 사용자 이름, 암호가 담긴 .csv 파일을 다운로드하거나 안전한 곳에 기록해 두세요.

MFA(2단계 인증) 설정 (보안의 핵심)

비밀번호가 유출되더라도 스마트폰 OTP 없이는 로그인이 불가능하게 만듭니다. Root 계정과 새로 만든 IAM 계정 둘 다 설정하는 것이 필수입니다.

사용자 선택: IAM 리스트에서 방금 만든 Admin-Dev 사용자를 클릭합니다.
보안 자격 증명 탭: 중간에 있는 보안 자격 증명 탭으로 이동합니다.
MFA 할당: MFA 장치 할당 버튼을 클릭합니다.
장치 선택:
- 장치 이름: MyPhone
- MFA 장치 유형: 인증 앱 (Google Authenticator 등) 선택
앱 연동:
- 스마트폰에서 Google Authenticator 앱을 실행합니다.
- QR 코드 표시를 누르고 앱으로 스캔합니다.
- 앱에 뜨는 6자리 번호 2개를 차례대로 입력(코드 1, 코드 2)하고 MFA 추가를 누릅니다.

Root 계정 보안 조치 (마무리)

이제 Root 계정은 더 이상 쓰지 않도록 잠궈야 합니다.

Root 계정 로그아웃 후, 아까 저장한 IAM 사용자 전용 로그인 URL로 접속하여 Admin-Dev로 로그인합니다.
앞으로는 이 계정으로만 서버를 관리합니다.
Root 계정 관리: Root 계정은 결제 수단 변경 등 아주 중요한 작업 외에는 절대 로그인하지 마세요.

이렇게 MFA가 인증됩니다.

앞으로 로그인할때마다 휴대폰에 6자리 입력하면서 로그인하게 됩니다.

EC2 인스턴스 생성 (골격 만들기)

AWS 콘솔 접속 > EC2 서비스 선택 > 인스턴스 시작 클릭
이름 및 태그: auto-game-server (관리하기 편한 이름)
OS(AMI): Ubuntu Server 24.04 LTS (64비트) 선택 (가장 안정적임)
인스턴스 유형: t2.micro (프리티어 확인)
키 페어: 새 키 페어 생성 > RSA 방식, .pem 형식으로 다운로드 (보관 필수!)

스토리지(EBS) 30GB 증설 (근육 붙이기)

설정 위치: 인스턴스 생성 화면 하단의 스토리지 구성
변경 내용: 기본값 8 GiB를 **30 GiB**로 수정합니다.
주의: 30GB를 초과하면 비용이 발생하므로 정확히 30으로 맞추는 것이 포인트입니다.

3. 네트워크 및 보안 그룹 (방어선 구축)

인스턴스 생성 시 네트워크 설정에서 보안 그룹 생성을 선택하고 아래 규칙을 추가합니다.

유형	포트 범위	소스 유형	설명
SSH	22	내 IP	내 PC에서만 터미널 접속 허용 (보안)
사용자 지정 TCP	3000	위치 무관(0.0.0.0/0)	NestJS 서버 포트 (유니티 클라이언트용)
사용자 지정 TCP	6379	사용자 지정	(선택) 외부에서 Redis 접속이 필요할 때만 개방

탄력적 IP(Elastic IP) 할당 및 연결 (필수)

EC2는 기본적으로 '동적 IP'를 사용합니다. 즉, 서버를 재부팅하거나 인스턴스를 중지 후 다시 시작하면 IP 주소가 바뀝니다. 유니티 클라이언트에 서버 주소를 고정해두려면 '고정 IP'가 반드시 필요합니다.

메뉴 이동: EC2 대시보드 왼쪽 사이드바 -> 네트워크 및 보안 -> 탄력적 IP 클릭.
IP 할당: 오른쪽 상단 탄력적 IP 주소 할당 클릭 -> 할당 버튼 클릭.
인스턴스 연결: 생성된 IP 주소를 체크 -> 작업 메뉴 -> 탄력적 IP 주소 연결 선택.
- 인스턴스: 내가 만든 auto-game-server 선택.
- 프라이빗 IP 주소: 해당 인스턴스의 내부 IP 선택.
확인: 이제 서버를 껐다 켜도 이 IP 주소는 절대 바뀌지 않습니다.

인스턴스 생성 시 '보안 그룹 생성' 상세 설정 (Step-by-Step)

인스턴스 시작(Launch Instance) 화면 중간의 [네트워크 설정] 부분에서 아래 순서대로 세팅하세요.

1. 보안 그룹 생성 선택

보안 그룹 생성 항목을 체크합니다.
보안 그룹 이름: auto-game-sg (나중에 찾기 쉽게 이름을 꼭 지어주세요)
설명: Game server security group for NestJS and Redis

2. 인바운드 보안 그룹 규칙 구성 (여기가 핵심!)

기본으로 하나가 떠 있을 텐데, 오른쪽의 [보안 그룹 규칙 추가] 버튼을 눌러 총 3개를 만듭니다.

Rule 1: SSH (내 접속용)

유형: SSH
프로토콜/포트: TCP / 22
소스 유형: 내 IP (가장 중요!)
설명: Admin SSH Access

Rule 2: NestJS (게임 통신용)

유형: 사용자 지정 TCP
프로토콜/포트: TCP / 3000
소스 유형: 위치 무관(Anywhere) (0.0.0.0/0)
설명: Unity Client Communication

Rule 3: Redis (내부 DB용)

유형: 사용자 지정 TCP
프로토콜/포트: TCP / 6379
소스 유형: 사용자 지정 * 소스: 칸을 클릭하면 나오는 리스트에서 **현재 생성 중인 보안 그룹 이름(또는 ID)**을 선택합니다. 만약 아직 안 뜨면 일단 내 IP로 해두고 생성 후에 수정하면 됩니다.
설명: Internal Redis Access

왜 '그냥' 만들 때 이 설정을 해야 하나요? (납득 포인트)

자동 생성의 함정: 아무 설정 없이 SSH를 허용하면 소스가 0.0.0.0/0(모두)으로 잡힙니다. 이러면 전 세계 해커들이 내 서버 대문에 매일 노크를 하게 됩니다.
한 번에 끝내기: 생성 단계에서 **내 IP**와 **3000번 포트**만 정확히 잡아줘도 보안의 80%는 성공입니다.

서버 원격 접속 및 초기 환경 구축 (Access & Runtime)

1. 내 PC에서 서버 접속하기 (SSH)

다운로드받은 .pem 키 파일이 있는 폴더에서 터미널(CMD 또는 PowerShell)을 열고 아래 명령어를 입력합니다.

터미널 명령어

# 1. (Windows 전용) 키 파일 권한 제한 (앞서 설명한 icacls 명령어)
icacls "your-key.pem" /inheritance:r
icacls "your-key.pem" /grant:r "%username%:R"

# 2. SSH 접속 실행
# ubuntu는 AWS 우분투 이미지의 기본 사용자 이름입니다.
ssh -i "your-key.pem" ubuntu@[탄력적 IP 주소]

성공 시: Welcome to Ubuntu... 라는 문구와 함께 커서가 ubuntu@ip-xxx-xx-xx-xx:~$ 로 바뀝니다.

2. 필수 런타임 설치 (Node.js & npm)

NestJS 서버는 Node.js 위에서 돌아갑니다. 최신 LTS 버전을 설치해 줍니다.

Bash

# 패키지 매니저 업데이트
sudo apt update && sudo apt upgrade -y

# Node.js 20.x (LTS) 설치 스크립트 실행
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 설치 확인
node -v
npm -v

3. Redis 인메모리 데이터베이스 구축

게임의 랭킹이나 실시간 세션 데이터를 빠르게 처리하기 위해 Redis를 설치합니다.

Bash

# Redis 설치
sudo apt install redis-server -y

# Redis 실행 및 자동 실행 설정
sudo systemctl start redis-server
sudo systemctl enable redis-server

# 작동 테스트 (PONG이 나오면 성공)
redis-cli ping

4. PM2 (Process Manager) 설치

우리가 터미널 창을 닫아도 서버가 죽지 않고 24시간 돌아가게 해주는 필수 도구입니다.

Bash

# 전역(global)으로 PM2 설치
sudo npm install -g pm2

PM2 프로세스 관리 및 모니터링 마스터하기

PM2는 서버가 예상치 못한 에러로 종료되어도 자동으로 재시작해주며, 터미널을 닫아도 백그라운드에서 서비스를 유지해주는 든든한 관리자입니다.

1. 서버 실행 및 등록

처음 프로젝트를 빌드한 후 서버를 올릴 때 사용합니다.

Bash

# dist/main.js 파일을 "auto-game-server"라는 이름으로 실행
pm2 start dist/main.js --name "auto-game-server"

# 서버 재부팅 시에도 PM2가 이 프로세스를 기억하고 자동 실행하게 설정
pm2 save

2. 실시간 상태 모니터링 (가장 많이 사용)

서버가 잘 돌아가고 있는지, 에러는 없는지 확인할 때 필수입니다.

상태 요약: pm2 status
- online 상태인지, 메모리와 CPU 점유율은 어떤지 한눈에 보여줍니다.
실시간 로그 감시: pm2 logs auto-game-server
- 가장 중요합니다. 유니티 클라이언트에서 접속 에러가 나거나 서버 내부 로직 오류(500 Error 등)가 발생하면 여기서 실시간으로 확인할 수 있습니다.
대시보드 모드: pm2 monit
- 터미널 화면을 화려한 대시보드로 바꿔줍니다. 리소스 사용량을 시각적으로 모니터링할 때 유용합니다.

3. 프로세스 제어 (업데이트 및 수정 시)

코드를 수정하거나 서버 설정을 바꿨을 때 사용합니다.

재시작: pm2 restart auto-game-server
- git pull로 코드를 업데이트하거나 .env 파일을 수정한 후 즉시 반영할 때 사용합니다.
중지 및 삭제:
- pm2 stop auto-game-server: 잠시 서버를 끕니다.
- pm2 delete auto-game-server: 관리 목록에서 완전히 삭제합니다.

4. PM2 관리 명령어 요약표

상황	실행 명령어	비고
최초 실행	pm2 start [경로] --name [이름]	프로세스 이름 지정 권장
에러 추적	pm2 logs [이름]	트러블슈팅의 1순위
상태 확인	pm2 status	서비스 생존 여부 확인
코드 반영	pm2 restart [이름]	수정사항 즉시 적용
부팅 자동화	pm2 save	AWS 인스턴스 재부팅 대비

[웹] AI를 활용한 웹 사이트 제작 및 자동배포 CI/CD

rud_Island — Sat, 21 Feb 2026 17:35:58 +0900

최근 AI를 활용한 코딩이 부쩍 늘었기에 이 기술을 활용해 나만의 사이트를 제작해보고자 했다.

사용한 기술은

웹 사이트 언어: TypeScript, React, Next.js
AI Assist : Gemini Code Assist
CI/CD: Git, Vercel

언어는TypeScript와 JSX가 결합된 React(Next.js)로 진행했다.

npm run dev

위 명령어는 개발자 모드로 실행하는 명령어다.

만드는 웹이 어떤 모습을 해 나가고 있는지 볼 수 있다.

코드 화면

난 여태 게임개발을 위주로 해왔기에 바로 실전으로 들어가지 못한다. 하지만 AI가 있기에 가능하다.

Gemini Code Assistant

AI에게 자연어로 "기능이나 페이지를 구현해줘" 라고하면 대강 틀을 잡아주며 프로젝트 전체를 훑어서 다른 파일에 호환도 유지시키며 만들어준다.

쓰면서 느낀거지만 프로그래밍 "언어"라고 느끼는게 우리가 쓰는 언어와 가장많이 가까워진 것 같다.

우리가 애니를 많이 봐와서 일본어 청해가 되지만 직접 말하려고 하면 듣던 것 처럼 나오지 않는다.

AI가 짜준 코드를 보면 이게 어떤 기능을 하는지 이해할 순 있지만 막상 똑같이 코딩 하려하면 하지 못하는 것처럼

일반 언어를 공부하는 것 처럼 너무 흡사하다.

난 AI가 짜준 코드를 보고 이런 기능을 하겠구나~ 하며 쓱 훑어본 뒤 수정할 것만 추가로 프롬프트로 요청하며 웹을 만들어나갔다.

홈페이지 화면

이렇게 웹이 거의다 완성이 되었다.

이제 Git 에 올리기만 한다.

프로젝트 파일 자체를 Root에 모두 배치한다.

이제 Vercel로 배포를 시작하면된다.

vercel 로그인 페이지

원하는 방법으로 로그인을 해주면 된다. 웬만하면 구글이나 깃허브 로그인을 추천한다.

깃 리포지토리 연동

처음 저 빨간 테두리에 깃을 연결하라고 뜰것이다. 거기서 리포지토리를 하나만 가져오게 토글설정을 바꿔주어 아까 올린 깃의 레포지토리를 선택한 뒤 저 Import를 클릭해주면 된다.

프로젝트 생성 마무리

저 가려진것들은 신경쓸 필요 없다.

Root Directory를 우리가 Repository의 Root에 넣었으니 따로 설정해줄 필요 없다. 밑에 Deploy를 바로 눌러주고 1~2분 기다리면 바로 배포된다.

이제 끝이다. 수정 할게 있으면 깃에 push만 시켜줘도 Vercel이 이를 감지해서 자동으로 변경사항을 적용해준다.

깃을 통해 버전관리도 하고 Vercel로 자동배포까지 모두 한 셈이다. CI/CD를 구축했다.

로그 확인

그저 "딸깍" 몇번으로 홈페이지도 만들고 CI/CD도 모두 구축했다.

https://rudisland-portfolio.vercel.app/

김경훈 포트폴리오 rud_island-Portfolio

About Me 위치 제주, 대한민국 이메일 rudgns4541@gmail.com 학력 공주대학교 컴퓨터공학전공 전화번호 010-9345-7509 게임 개발로 시작해서 앱, 웹 개발까지 다양한 작품을 만들어온 개발자입니다. 다양한

rudisland-portfolio.vercel.app

도메인도 매년 일정 금액을 지불하면 구매할 수 있다. 1~10만원대 하니까 참고!

.....

진짜 개발자는 끝장났나보다.

[앱 배포] Work_Island 근무관리 앱 출시

rud_Island — Tue, 10 Feb 2026 12:31:34 +0900

첫 앱 출시

처음으로 앱을 출시하게 되었습니다. 뿌뿌~~

Kasi-Koi Jpop 노래 번역 앱을 만들고나서 Flutter의 가능성을 느꼈고, 안해본 것들을 해보고자 시작했었습니다.

Kasi-Koi : https://codingisland.tistory.com/118

[Flutter] AI로 노래가사 해석하는 앱개발 - 3 (마무리)

지난글 링크https://codingisland.tistory.com/116 평소 Jpop 많이 들음.영감: 유튜브 쇼츠 카지노 차무식이 팝송 500곡 외웠다길래 " data-og-host="codingisland.tistory.com" data-og-source-url="https://codingisland.tistory.com/116"

codingisland.tistory.com

1. 기획단계

Kasi-koi를 개발할때 기획서가 없으니 개발과정에서 자꾸 기능이 추가되고 이거였나? 싶고 하다보니 개발시간이 늘어났던 경험때문에 반드시 기획부터 제대로 잡고가자는 생각으로 Word 부터 켰습니다.

상세히 만들어낼 기획능력은 없기에.. 글로만 먼저 "기능 명세서" 만 작성하고 개발 단계로 진입했습니다.

2. 개발단계

저는 Visual Studio Code(VSCode)로 AI를 적극 활용해 개발했습니다. 바이브 코딩 열심히 한거죠

지난 Kasi-koi에서 느꼈던 소스코드들의 구조문제를 이번 프로젝트에선 제대로 하고자

직관적으로 찾을 수 있게 각 기능의 화면을 기준으로 구조를 잡았습니다.

예를 들어 첫화면, 근무탭, 스케줄탭, 기록탭 이 있다면

첫화면 - Intro/위젯, 화면, DAO
근무탭 - Work/위젯,화면, DAO
스케줄탭- Schedule/위젯, 화면, DAO
기록탭 - WorkLog/위젯,화면, DAO

각 화면마다 나누어 그 화면에 필요한 소스코드들로만 배치하여 협업했을때 각 화면을 담당하게 되었을때의 구조라는 점에 신경썼습니다.

그리고

여태 AI를 인터넷창 켜서 소스코드와 의도를 전달하며 하나씩 만들어나갔는데 VSCode로 Gemini Code Assist를 연결하니 제 프로젝트 파일을 모두 보며 제 의도를 제대로 잡더라고요 코드들도 알아서 고쳐주고

진짜 블리츠크랭크의 대사가 조만간인듯합니다. "인간 시대의 끝이 도래했다"

3. 테스트 단계

테스트 해볼게 너~무 많아서 혼자 해보기 너무 싫어서 자동화 QA 시키는 방법이 없나 찾아봤는데

Firebase Test Lab이란게 있더라고요 그래서 바로 넣었죠.

사용방법은 아래 링크

https://codingisland.tistory.com/119

[AI] 앱 테스트 자동화 Firebase Test Lab 사용해보기

Firebase Test Lab 이란앱을 등록하면 구글의 AI가 알아서 버튼들을 눌러보며 크래시(앱꺼짐)이 발생하는지 테스트해주는 로봇(?)설정하는 방법1. 구글 콘솔에 프로젝트 생성 프로젝트 이름은 직관적

codingisland.tistory.com

프로젝트를 깃에 push하면 Action에서 이를 감지해서 Firebase 콘솔에 Test Lab에 가면 어떤 테스트를 했는지 스크린샷과 동영상 등 기록이 남아 보입니다. 그걸로 체크할 수 있습니다.

4. 배포단계

플레이 스토어에 올리려 했으나... 비공개 테스트로 12명?을 데려와서 2주동안 테스트를 진행해야 겨우 공개 배포로 바꿀 수 있다기에... 친구도 없고 시간도 촉박해서 다음에..하기로... 12명은 크몽에서도 돈 내고 해주는게 있긴하던데 당장 돈도 없어서 전부 무료인 것만 썼다...예요...

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

마지막 원스토어 링크

https://m.onestore.co.kr/v2/ko-kr/app/0001004309

Work Island - 사장님과 알바생을 위한 똑똑한 급여정산 - 원스토어

복잡한 주휴수당, 야간수당, 세금까지 한 번에! 시급·일급·월급 계산과 근무 일정 관리를 워크아일랜드에서 시작하세요.

m.onestore.co.kr

만괂부

갤럭시 스토어도 가능하면 출시 예정.

[AI] 앱 테스트 자동화 Firebase Test Lab 사용해보기

rud_Island — Fri, 6 Feb 2026 18:38:02 +0900

Firebase Test Lab 이란

앱을 등록하면 구글의 AI가 알아서 버튼들을 눌러보며 크래시(앱꺼짐)이 발생하는지 테스트해주는 로봇(?)

설정하는 방법

1. 구글 콘솔에 프로젝트 생성

프로젝트 이름은 직관적이게 만듭니다. 어떤 프로젝트인지 구분 잘하게 지으면됨.

2. Firebase 콘솔에서 프로젝트 생성

Firebase콘솔 사이트에 들어가서 [새 Firebase 프로젝트 만들기]를 클릭 후 밑에 Google console 프로젝트에서 가져오기로 위에서 생성한 프로젝트를 선택해 계속 생성을 진행합니다.

3. 프로젝트에 Firebase 관련 연결

아마 저 만들기 들어가면 패키지명을 입력하라고 할텐데

안드로이드는 프로젝트파일명/android/app/build.gradle.kts 에

android {
    namespace = "com.xxxxxx.패키지명"
    .....
  }

이런식으로 이름이 있을겁니다 저 namespace 옆에 ""안에 있는 것을 입력합니다

그리고 build.gradle.kts에 뭔가 추가하라고 2개 있을텐데

android/build.gradle.kts 에는 아래 코드를 추가하고

plugins {
    // Google 서비스 플러그인 버전을 정의합니다.
    id("com.google.gms.google-services") version "4.4.4" apply false
}

android/app/build.gradle.kts 에는

plugins {
    id("com.android.application")
    id("kotlin-android")
    // The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
    id("dev.flutter.flutter-gradle-plugin")

    id("com.google.gms.google-services") #추가해야될거
}

dependencies {
    // Firebase BoM (버전 관리자) 추가
    implementation(platform("com.google.firebase:firebase-bom:33.1.2"))
    
    // 사용하고 싶은 서비스 추가 (예: 분석기)
    implementation("com.google.firebase:firebase-analytics")
}

이렇게 2개를 추가해주면 됩니다.

추가하게되면 google-service.json 을 설치받게 될텐데 이걸

"프로젝트명/android/app/google-serivce.json" 으로 저장해둡니다

이건 나중에 깃허브 설정에서 다시 봐야합니다.

4. 구글 콘솔 서비스 계정 만들기

여기에 권한으로 기본 > 편집자 가 있을겁니다 추가해주고 구성원은 패스하고 [완료]를 누릅니다

만들어진 애를 클릭하면 이 키 탭을 선택할 수 있는 화면이 나옵니다.

[새 키 만들기] 를 눌러주고

JSON으로 만들어줍니다. 이걸 깃허브 Secrets에 등록해야 합니다. 이때 같이 등록할 3가지가 있습니다.

5. 깃허브 설정

우선 깃허브에 프로젝트를 올려야합니다.

Repository 생성 설명은 건너뛰고

Repository폴더에 .github/workflows/robo_test.yml 을 생성해 줍니다. 그리고 아래 코드를 넣어줍니다.

name: Automated Robo QA

on:
  workflow_dispatch: # 수동 실행 버튼 활성화 (무료 횟수 관리용) [cite: 2026-01-24]
  # push: 
  #   branches: [ main, develop ] # 자동 실행을 막기 위해 주석 처리함 [cite: 2026-01-22]

# [추가] 같은 테스트가 여러 번 눌려도 하나만 실행함 (자원 낭비 방지)
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  run-robo-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # 1. Flutter 환경 설정
      - name: Set up Flutter
        uses: subosito/flutter-action@v2
        with:
          channel: 'stable'

    # [추가되는 부분] 금고에서 설정을 꺼내 파일을 만듭니다.
      - name: Create google-services.json
        run: echo '${{ secrets.GOOGLE_SERVICES_JSON }}' > android/app/google-services.json

      # 2. 앱 빌드 (테스트용 APK 생성)
      - name: Build Debug APK
        run: |
          flutter pub get
          flutter build apk --debug

      # 3. 구글 클라우드 인증 (금고에서 열쇠 꺼내기)
      - name: Authenticate to Google Cloud
        uses: google-github-actions/auth@v2
        with:
          credentials_json: ${{ secrets.GCP_SA_KEY }}

      # 4. Firebase Test Lab 로봇 출동
      - name: Run Robo Test
        run: |
          gcloud firebase test android run \
            --type robo \
            --app build/app/outputs/flutter-apk/app-debug.apk \
            --device model=oriole,version=33,locale=ko,orientation=portrait \
            --timeout 1m \
            --project ${{ secrets.이름맞추기 }}

이걸 그대로 복붙해서 넣습니다.

그리고 프로젝트들도 기존 프로젝트폴더에서 다 꺼내서 Repository 최상위 폴더로 넣습니다.

그럼 main이 이렇게 보일겁니다.

이러면 폴더 설정은 끝입니다.

그 후 깃허브 홈페이지에 프로젝트>설정에 가면 이 페이지가 나옵니다.

왼쪽 탭에 Secrets and variables > Actions에서 New repository secret으로 3가지를 추가합니다.

1. 구글 콘솔에서 받은 json 내용 복붙
name: GCP_SA_KEY
Secret: json내용 열어서 그대로 복붙

2. 위에서 firebase연결하면서 저장한 google-service.json 내용 복붙
Name: GOOGLE_SERVICES_JSON
Secret: google-service.json 내용 그대로 복붙

3. 서비스계정 키에서 확인
위에서 만든 서비스계정에 보면 @다음에 서비스이름-123456 이런식으로 이름이 있었습니다.
Name: 위 코드 가장 마지막줄에 secrets.이름맞추기 << 이름맞추기를 수정해줍니다.
Secret: 서비스이름-123456 으로 넣어줍니다. 아마 숫자다음에 .iam... 뭐시기들은 무시하면됩니다.

추가하면 이렇게 3가지가 추가됩니다.

6. Action 에서 Automated Robo QA 돌리기

위에 설정들을 모두 제대로 했다면 [Run workflow] 라는 버튼이 있을텐데 run이라고 보이는 버튼을 클릭하고 좀 오래 기다리면

프로젝트와 설정들이 제대로 되었는지 확인하며 성공합니다.

7. Firebase Test Lab에서 자동으로 테스트한 결과 확인

Test Lab 탭을 찾아 들어가면 AI가 어떤 테스트를 수행했는지 확인할 수 있습니다.

Main에 Brunch될때마다 이게 수행되는걸로 아는데 이거 많이 돌리면 돈나가서 제가 robo_test.yml에 자동수행 막아놓고 수동으로 돌리게 해놨으니 테스트할려면 깃허브 Action가서 알아서 눌러주면됩니다.

히힛 자동으로 돌아간다~~~

근데 눌러볼거 많은데 다 하질않네... 생각보다 테스트 퀄은 떨어지는구나...

[Flutter] AI로 노래가사 해석하는 앱개발 - 3 (마무리)

rud_Island — Thu, 29 Jan 2026 18:29:59 +0900

지난글 링크

https://codingisland.tistory.com/116

[Flutter] AI로 노래가사 해석하는 앱개발

앱을 만들게 된 과정1. 앱을 왜 만들고 어떻게 시작했는가?앱을 만들게 된 이유동기: 일본어 공부가 하고 싶어짐 -> 평소 Jpop 많이 들음.영감: 유튜브 쇼츠 카지노 차무식이 팝송 500곡 외웠다길래

codingisland.tistory.com

https://codingisland.tistory.com/117

[Flutter] AI로 노래가사 해석하는 앱개발 - 2

지난 글 요약개발 동기: J-Pop을 즐겨 듣다 노래를 통째로 외워 일본어를 마스터하고 싶다는 생각에 개발을 시작했다제작 방식: Flutter의 중첩 구조가 낯설어 **AI와 협업하는 '바이브 코딩'**으로 Fi

codingisland.tistory.com

깃허브링크: https://github.com/rudIsland/AI_japaness_Lyrics_study

가명: 카시코이

Kasi-AI 일본어로 '카시코이(賢い)'는 '똑똑하다'라는 뜻입니다. AI가 똑똑하게 가사를 풀어준다

개발하며 터진 문제와 해결한 방안

1. 노래 가사 불러오기: "AI가 다 해줄 줄 알았지"

나는 평생 프로그래밍만 해서 기획에는 전혀 아는게 없었다. 처음엔 그냥 유튜브 영상 제목만 AI한테 주면, 얘가 알아서 원곡 제목이랑 가수명을 찾고 가사까지 싹 긁어올 줄 알았다. 근데 AI한테 커버곡 영상을 주니까 커버한 사람을 원곡 가수로 착각하고 가사도 엉뚱한 걸 가져온다. 전혀 도움이 안됐다.

해결: 결국 가수명과 제목을 사용자가 직접 입력하게 만들었다. 그리고 Netease와 LrcLib라는 두 종류의 API를 섞어 썼다. 하나만 쓰면 못 가져올 때가 있는데, 2개를 같이 돌리니까 성공률이 확 올라갔다. 가사를 못가져온 일은 그 뒤로 없었다. 덕분에 가사 싱크(타임스탬프)까지 가져와서 실시간 강조 기능도 넣을 수 있었다.

2. 소형 플레이어 (Mini Player) 개발 포기

유튜브 뮤직처럼 노래를 듣다가 화면을 나가도 하단에 작게 남아서 계속 재생되는 기능을 넣고 싶었다. 간지 나고 노래듣다가 흐름도 끊기지 않으니 말이다. 그런데 플러터의 위젯 트리 구조상 부모-자식 위젯 사이에 노래가 끊기지 않게 연결하는 게 생각보다 너무 빡셌다.

해결: 고민하다가 깨달았다. 내 앱의 목적은 '노래 감상'이 아니라 '가사 번역 공부'다. 주객전도가 되면 안 되겠다 싶어서 과감히 포기했다.

3. AI 해석 문제: "컴퓨터는 시키는 것만 한다"

AI는 똑똑해 보이지만 결국 시키는 것만 하는 기계다. 프롬프트(명령어)를 대충 주면 지 멋대로 번역을 하거나 형식을 망가뜨린다. 자연스러우면서도 공부하기 좋게 번역 시키려고 이 모델 저 모델 써보면서 토큰만 엄청 날렸다. 그렇게 2~3일은 명령만 내리다 날 샜다.

해결: AI는 AI로 맞대응했다. 다른 똑똑한 AI 모델한테 "야, 얘한테 어떻게 지시해야 번역 잘하냐?"라고 물어보고, 거기서 나온 프롬프트를 그대로 꽂아 넣었더니 훨씬 잘 한다.. 몇 번 시켜보니 완벽하게 잘하더라

4. FirebaseDB 추가 및 로그인 기능 추가에 대한 문제

원래는 로컬 DB인 Drift만 쓰려고 했다. 친구가 "로컬로 충분해"라고 하기도 했고. 근데 만들다 보니 욕심이 생겼다. 구글 로그인도 넣고 싶고, 클라우드 동기화도 하고 싶어서 Firebase를 추가하기로 했다. 여기서 지옥이 시작됐다.

1) DriftDB(로컬) 와 FirebaseDB(클라우드), 두 DB의 공존 전략 문제

로그인을 안하고 사용하는 사람과 로그인을 하고 사용하는 사람간에 권한차이를 둬야겠단 생각이 들었다.

그래서 비로그인은 로컬DB만 사용 / 로그인사용자는 클라우드DB로 관리되게끔 하려했다.

Drift는 SQL이고 Firbase는 NoSQL이라서 같은 기능이지만 코드구현은 달라야 하기에 두 로직을 어떻게 나누고, 어떻게 접근시키지란 고민이 많았다.

그 과정에서 기존 로직이 꼬여서 하루는 앱을 못키기도 했다.

나는 Flutter가 자연어에 가까운 언어라는 것을 생각했다. 바로 Implements(위임)을 활용하기로 했다.

abstract class DatabaseRepository {
  /// ⚙️ 초기화
  Future<void> saveInitialize();

  ///   [Group: Get] 조회
  Future<AccountData?> getAccount(String uid);
  Stream<List<VideoInfo>> getFrequentlyVideos();
  Future<int> getTodayCompletedCount();
  Future<bool> isVideoCompletedToday(String youtubeVideoId);
  Future<List<VideoInfo>> getFavoriteVideos();
  Stream<List<StudiedVideoUI>> getStudiedVideosUI();
  Future<VideoInfo> getVideoFromYoutube(YoutubeVideo video);
  Future<List<Lyric>> getLyricsForVideo(String youtubeVideoId);
  Future<GlobalVideoInfo?> getGlobalVideo(String youtubeVideoId);

  ///   [Group: Save/Insert] 생성 및 저장
  Future<void> saveAccount(User user, String? deviceId);
  Future<void> saveFrequentlyVideo(VideoInfo video);
  Future<void> saveGlobalVideo(GlobalVideoInfo video);
  Future<void> saveStudyRecord(String youtubeVideoId);
  Future<void> insertLyricsData(String youtubeVideoId, List<Lyric> lyrics);
  Future<bool> getFavoriteStatus(String videoId);

  ///  ️ [Group: Update] 수정
  Future<void> updateFavoriteStatus(VideoInfo video, bool status);
  Future<void> updateAnalyzedLyrics(String youtubeVideoId, List<Lyric> lyrics);
  Future<void> updateLyricsData(String youtubeVideoId, List<Lyric> lyrics);
  Future<void> updateIsAnalyzed(String youtubeVideoId, bool status);
  Future<void> updateIsLyrics(String youtubeVideoId, bool status);
  Future<void> updateSearchedInfo({
    required String youtubeVideoId,
    required String searchedArtist,
    required String searchedTitle,
  });

  ///  ️ [Update] 특정 필드의 카운트를 1 올리고 날짜를 오늘로 기록
  Future<void> updateDailyCount(String fieldName);

  ///  ️ [Group: Delete] 삭제
  Future<void> deleteStudiedRecord(int recordId);
}

이렇게 추상 클래스로 뼈대를 만들고, Drift와 Firebase 클래스가 각각 이걸 구현하게 했다. 그리고 ManagerDatabase라는 관리자 클래스를 만들어서 로그인 상태면 Firebase를, 아니면 Drift를 호출하게 위임시켰다. 덕분에 UI 코드에서는 로그인 여부를 일일이 따질 필요 없이 관리자 인스턴스만 부르면 되니까 훨씬 깔끔해졌다.

그 결과 ManagerDB클래스의 싱글톤 instance에 접근해서 필요한 함수를 호출하면 로그인 여부는 관리자클래스가 알아서 해주니 헷갈릴 일 없이 쉽게 구현할 수 있었다.

2) 로그인 여부에 따른 권한 문제

아무래도 로그인을 했느냐 안했느냐에 권한을 줘야했다. 로그인을 하면 다른 기기에서 같은 아이디로 로그인 했을때 기록이 동기화되어야 했고, 할 수 있는 권한도 차별화를 두고 싶었다.

구분	기능 (Feature)	비로그인 (Guest)	로그인 (User)	비고
핵심기능	AI 가사 분석	❌ 불가	⭕ 사용 가능	AI 토큰 비용 관리 목적
	가사 검색(불러오기)	❌ 불가	⭕ 사용 가능	정확한 가사 매칭 기능
	유튜브 영상 재생	⭕ 가능	⭕ 가능	기본 학습 기능은 모두 제공
데이터	저장위치	내 휴대폰	클라우드 서버
	공부기록/즐겨찾기	기기에만 저장	계정에 저장(동기화)
	데이터 보존	앱 삭제시 초기화	앱 삭제해도 유지
	기기연동	불가(기기 변경시 끝)	가능(다른 폰 연동가능)
기타	자주 듣는 곡 / 공부기록	로컬 기록 기반	서버 기록 기반

권한은 이렇게 부여했다.

핵심은 클라우드 집단지성이다. 로그인 유저가 AI로 가사를 한 번 분석해서 클라우드에 올려두면, 나중에 비로그인 유저가 그 노래를 들을 때 그 정보를 가져다 쓸 수 있다.

Ex)

1) 비로그인 유저가 노래A를 원함. -> 클라우드에는 노래A가 없어서 가사 정보도 없음. -> 노래는 들을 수 있지만 가사는 못봄

2) -> 로그인유저가 노래A를 원함 -> AI와 가사불러오기를 활용해 가사 정보를 불러와 클라우드에 저장됨.

3) -> 비로그인유저가 노래A를 다시 들으러 클릭함. -> 클라우드에 가사 정보가 있으니 가사를 볼 수 있음. -> 가사 정보를 로컬에 저장. -> 나중에 다시 들어와도 볼 수 있음.

이렇게 되면 로컬(Drift)유저도 Firebase에 접근이 필요하게 되긴한다. 하지만 이런 기능을 꼭 구현하고 싶었다.

5. 코드의 구조와 성능: 바이브 코딩의 한계

AI가 짜주는 대로 갖다 붙이다 보니 성능은 뒷전이었다. 근데 테스트를 해보니 동기화가 묘하게 느리더라. 범인은 Stream 남발과 StatefulWidget의 남용이었다.

Future vs Stream: 유니티로 치면 Awake와 Update 차이다. 1회성 데이터는 Future면 충분한데 무지성으로 Stream을 꽂아놔서 데이터가 꼬였던 것이다. 호출 시점에만 딱 부르는 Future로 바꾸니 깔끔해졌다.
Stateful 위젯: 플러터는 위젯 단위로 다시 그린다. 근데 화면 전체를 Stateful로 감싸버리니 텍스트 하나 바뀔 때 화면 전체를 다시 그리는 비효율이 발생했다. 변화가 필요한 부분만 쏙 빼서 Stateful로 만들고 나머지는 Stateless로 박아버리는 게 성능의 핵심이었다.

초록 테두리를 Stateless로 두어 변하지 않게 두었고, 그 화면 내에 변화가 필요한 위젯들인 빨간테두리에만 Stateful을 하여 구현해야했다. 하지만 나는 홈-기록-즐겨찾기 탭을 슬라이드로 넘기는 방식을 구현하고자 Stateful을 해야했다. 그래도 앱의 규모가 작아서 속도로 문제되진 않았다. 하지만 앞으로의 Flutter에서는 필요한 곳만 Stateful을 사용해야 할 것이다.

개발을 마친 후 앱 화면

마무리 소감

무언가를 만들어낸다는 감각은 언제나 재밌고 짜릿하다.

그게 내 순수 능력으로 만드는 것은 아닐지라도, 내 능력보다 더 엄청난 것을 만들어 줄 수 있게 해주는게 "AI"이다.

나는 그 AI를 활용하는 능력을 나쁘게 보진 않는다.

1. "AI가 다 해준 거 아냐?"라는 시선에 대해

하지만 당장 무언가를 완성하고 싶은 열망에 비해 내 능력치가 벅찰 때가 있고, 무엇보다 AI의 발전 속도는 내 성장 속도보다 훨씬 빠르다. 나는 이 흐름을 거부하기보다 적극적으로 올라타기로 했다.

이번 개발을 통해 느낀 건, AI가 앱을 완성시킬 수 있는 비중은 딱 60% 정도라는 것이다. 나머지 40%는 결국 사람이 채워야 한다. 내가 기초적인 Dart 문법을 알고, 유니티(C#)를 통해 객체지향 개념을 잡고 있었기에 이 앱도 완성될 수 있었다.

2. 왜 여전히 '개발자'가 필요한가

AI는 편리하지만 치명적인 단점이 있다. 앱이 커지면 AI는 이전에 짰던 로직들을 하나둘 잊어버리거나 배제하기 시작하고, 결국 거기서 심각한 버그가 터진다.

기획서의 의도에 맞게 전체 클래스를 설계하고, 유지보수가 가능한 구조를 짜는 건 여전히 사람의 몫이다. 이번 프로젝트에서 내가 직접 한 일들도 바로 그런 것들이다.

아키텍처 설계: 로그인 여부에 따라 DB를 갈아끼우는 Repository 패턴 도입
코드 가독성 리팩토링: AI가 뭉뚱그려 짠 코드를 위젯과 함수 단위로 분리
버그 체커: AI가 불필요하게 구현하거나 놓친 예외 상황들을 체크

위젯이 뭔지, 추상 클래스가 뭔지 모르는 상태에서 AI에게 떠맡기기만 했다면, 아마 이 앱은 중간에 스파게티 코드가 되어 터져버렸을 것이다.

3. 반성: 구조에 대한 아쉬움

나름 유지보수를 생각해서 Database, Screen, Widget, Service 같이 카테고리별로 폴더를 나누어 배치했다. 그런데 파일이 많아지다 보니 정작 필요한 파일을 찾기가 점점 힘들어졌다.

예전에 Spring 프로젝트를 할 때는 엔티티(Entity)별로 나눠서 관리하는 게 편했는데, Flutter는 기능(Feature)이나 화면(Screen)별로 로직과 위젯을 묶어서 관리하는 게 훨씬 효율적일 것 같다는 생각이 든다. 다음 프로젝트 때는 이 '폴더 구조'부터 제대로 잡고 시작해야겠다.

이번 시리즈의 핵심 요약:

기획의 본질: AI는 도구일 뿐, 목적지는 사람이 정해야 한다.
기술의 융합: 유니티의 생명주기 개념이 플러터 이해에 큰 도움이 됐다.
구조의 중요성: 바이브 코딩을 하더라도 '유지보수'를 위한 아키텍처는 필수다.

개인적으로 매우 만족스러운 개발이였고, 취업하고싶다..

[Flutter] AI로 노래가사 해석하는 앱개발 - 2

rud_Island — Sun, 25 Jan 2026 17:47:44 +0900

지난 글 요약

개발 동기: J-Pop을 즐겨 듣다 노래를 통째로 외워 일본어를 마스터하고 싶다는 생각에 개발을 시작했다
제작 방식: Flutter의 중첩 구조가 낯설어 **AI와 협업하는 '바이브 코딩'**으로 Figma 디자인부터 기능 구현까지 신속하게 진행했다.
기술 스택: YouTube API와 가사 전문 API(Netease, LrcLib)를 조합해 정확도를 높였고, Gemini로 가사 해석을 처리했다.
문제 해결: AI의 오역과 싱크 불일치 문제를 집요한 프롬프트 수정과 외부 데이터 연동을 통해 해결하며 완성도를 높였다.
최종 결과: 약 6일간의 집중 개발 끝에 탄생한 순수 개인 공부용 앱으로, 열정만으로 기획부터 결과물까지 만들어냈다.

링크: https://codingisland.tistory.com/116

2번째 글을 쓰게 된 이유

앱을 만들다 보니 조금씩 더 욕심이 생겼다.

기능이 한 두개 더 추가됐으면 좋겠다는 생각이 들어 추가로 구현하게 되었다.

단지 그 뿐, 그저 개발이 재밌다.. ~~코드 성능은 모르겠다~~

지금까지 넣은 기술 요약

- YoutubeAPI: 유튜브 영상을 가져와 노래인 영상들을 가져오기 위함. + 영상 플레이어로 노래 듣기

- Netease + LrcLib: 노래 가사를 가져오기 위해 Http 통신으로 소스코드에 있는 가사와 타임스탬프를 가져옴.

- Gemini API: 가져온 가사를 일본어로 해석

- Drift: 로컬DB용으로 사용

난 여기서 계정 로그인 기능을 추가하여, 오프라인일때는 로컬DB를, 온라인일 때는 클라우드 DB의 정보를 가져오고 싶었다.

유튜브에서 보면 오프라인일때는 로컬의 알고리즘으로 영상추천이 나오고, 로그인하면 어느 기기든 동일한 알고리즘이 나오는 것을 보고, 나도 그렇게 만들고싶었다.

추가한 기술

Firebase

FireBase는 구글 계정 로그인도 API로 지원해준다. 마침 Gemini와 Youtube API를 사용중이던 나에게 맞는 기술이였다.

처음에 연결하려고 프로젝트 폴더에서 android에 build.gradle에 뭘 자꾸 추가해야된다... 그랬지만 우리 킹갓 Gemini님께서 다 설명해주신다. 그래서 금방 연결했다.

구글 계정 연동

구글 계정을 연동시켜서 로그인하면 클라우드에 정보를 통해 들었던 노래들을 보여주고, 오프라인일때는 로컬에서 들었던 정보만 보이게 만들었다.

팁 메모장 추가

가사를 '톡' 터치하면 타임스탬프에 따라 해당 가사가 재생되는 위치로 가고, '꾹~' 누르면 이렇게 단어와 문법을 설명해주는 메모를 추가했다.

앞으로 해야할 작업

영상으로는 계정들이 나와서 보여주진 못하지만 전 글에 AI가 번역하고나서 일본어랑 한국어가 섞여 나오는 경우가 있었길래 그 부분도 프롬프트를 수정해서 이제는 잘 가져오고있다. 하지만 DB와 API호출로 수정해야할 점이 있다.

1. DB문제

지금은 앱을 완성시키려고만 막 만든 형태다. 그러다 보니 DB의 정규화라던가 문제가 있다. Firebase가 Nosql이라서 DB로직을 수정하느라 하루 애먹긴했었다. Repository클래스를 만들어 Drift와 Firebase에서 수행할 공통에 로직들을 정의해 위임시켜 로그인 여부로 어느 DB에서 sql을 수행할지 나눈상태다.

2. API 호출문제

한 번 가사를 호출하고 번역했으면 이미 DB에 그 정보가 있기에 나중에 또다시 생성하지 않아도 된다. 하지만, 다른 사람이 같은 노래를 번역시키게 되면 각각 API호출로 번역시키는 상태이다. 이를 DB에 공통정보를 담을 데이터를 저장시켜 이미 노래를 해석해둔게 있다면 API를 호출하지않고 DB에서 불러오게 할 계획이다.

ex)

A씨와 B씨가 앱을 사용한다. 노래1과 노래2가 DB에 있다.

A씨는 노래3을 원한다. -> API호출로 노래를 번역하고 공통의 클라우드 DB에 저장한다.

후에 B씨가 노래3을 원한다 -> 전에 저장해뒀던 DB정보를 불러와 그대로 보여준다. (API 호출X)

이렇게 수정하기 위해 DB를 고쳐야한다.

[Flutter] AI로 노래가사 해석하는 앱개발

rud_Island — Sun, 18 Jan 2026 15:52:40 +0900

앱을 만들게 된 과정

1. 앱을 왜 만들고 어떻게 시작했는가?

앱을 만들게 된 이유

동기: 일본어 공부가 하고 싶어짐 -> 평소 Jpop 많이 들음.
영감: 유튜브 쇼츠 카지노 차무식이 팝송 500곡 외웠다길래 나도? 싶음.
결론: 500곡까진 아니어도 노래 통째로 외워보려는데 일일이 찾기 귀찮음 -> "앱 하나 만들어서 AI한테 번역시키고 편하게 보자!"

평소 C#으로 Unity 개발을 해왔기에 언어는 익숙한데... 디자인을 꾸미는게 html같아서 너무 헷갈린다.

위젯안에 위젯안에 위젯안에...

디자인도 제대로 못하고 기획도 제대로 못하고 해석도 제대로 못하는데 처음부터 끝까지 AI한테 시키자 싶어서

내가 직접 한건 예시화면 그리기, 기능 설명 밖에 없다. 그저 바이브코딩

우선 Figma로 예시화면을 그렸다

Figma 예시화면 그리기

피그마를 처음써본건 아닌데 그렇다고 제대로 써본적도 없다. 그냥 손만 대봤다 수준이였어서 대충 막그렸다

평소 Youtube Music 앱을 자주써서 복붙수준으로 그렸다

근데 Figma도 AI기능이 있고 알아서 그려준다네? 그래서 AI한테 디자인을 시켰다.

세상 참 좋고 편하다

이렇게 만들어 주는게 아닌가 너무 예쁘게 잘 만들어줬다. 그래서 가사를 볼땐 이 화면을 많이 따라하려 했다.

그러고 시작된 (바이브)코딩

Flutter는 모두 Widget으로 이루어져있다.. 라고만 알고 싹다 AI한테 시켰다. 내가 한 것이라곤 나온 코드를 보고 유지보수나 가독성이 안좋은 네이밍 코드들은 직접 바꾼 것 밖에 없다.

AI가 로컬DB로 Drift를 소개해주길래 연결도 해줬고, 위젯도 알아서 만들어주고 얼마나 편한가

대신 지멋대로 바꾸거나 없애거나 하는게 꽤 있어서 조금씩 울컥했지만 내가 할 수 있는건 없었다.

초기 홈 화면

초기 노래 검색 화면

2. 사용한 기술들

사용한 기술 목록

로컬 DB (Drift): AI가 소개해주길래 연결함.
AI (Gemini 2.5 Flash-lite): 결제한 게 이거라 선택지 없었음. 지시만 똑바로 하면 번역 나쁘지 않음.
네트워크 (Http): 가사 사이트 소스 긁어오려고 씀.
가사 수집 (Netease + LrcLib): 아시아권 가사 제일 많고 싱크까지 줘서 선택함. 유튜브 API만으로는 가사 안 나오길래 이거 2개로 정확도 높임.
미디어 (Youtube API): 썸네일, 영상 정보 가져오기 부족함이 없음.

왜 이렇게 썼는가 Why?

Youtube API

처음 노래를 어디서 가져올지 찾아봤다. 난 국내음악도 일본어로 보고싶고, Jpop들도 필요했기에 아시아권에서 주는 API나 세계적인 음원사이트가 유리하겠구나 싶었다.

멜론이나 지니를 쓰고싶었는데 공개적으로 주는 api는 없었다.. 그래서 자주쓰는 유튜브API를 선택했다.

유튜브 API는 관련검색어, 썸네일이미지, 노래관련 정보들 등 많은 것을 주기에 부족함이 없었다. 초반에는 좋다 생각했다.. 하지만 그 뒤가 문제였다.

Netease + LrcLib

난 처음에 가사도 AI가 유튜브 링크를 전달해서 영상에 자막이나 음성을 통해 알아서 가져와주는줄 알았다. 근데 안되더라? 그래서 영상 제목과 채널명을 가지고 가사를 제공해주는 외부 API를 써야겠다 생각이 들었다. 그래서 찾아본 곳이 이 두 곳이였다. 심지어 가사 싱크도 맞출 수 있어서 굉장히 좋다.

처음에는 Genius도 했었는데 하다보니 저 2개면 충분히 가사를 가져오기에 모자람이 없기에 내동댕이쳤다.

Http

얘는 Netease와 LrcLib가 API Key를 주지 않고 Http로 쏘면 그 소스코드에서 가져오는거 같았다. 그래서 얘가 필요하단다 그러고 json형식에 맞추서 가져오게 시켰다.

Gemini AI

최근 결제한 AI가 얘라서 그냥 선택지가 없었다. 그리고 얘가 번역도 나쁘지 않게 하더라 지시만 똑바로 하면.

3. 하면서 터진 문제들

1. 가사 가져오기

위에도 적었지만 영상만 가져오면 AI가 알아서 가사들을 가져와주는 줄 알았다... 그게 아니더라 다른 API 찾고 제대로 못가져오면 다른곳 찾고 하느라 3시간은 썼다.

근데 한 곳만 하기엔 가져오는 정확도가 낮았다. 그래서 Netease와 LrcLib 2개로 원곡의 가사를 가져올 정확도를 높였다.

그리고 가사를 가져올땐 원곡자의 가수명과 노래제목을 똑바로 써야했다. 그러기 위해 가사 가져오기 버튼을 추가해 저 2가지를 입력하게 시킨 뒤 가져오게 했다. 그랬더니 확실히 가져오는데 문제는 사라졌다.

추가 문제는 유튜브에서는 뮤비라던가 커버곡이라던가 노래는 원곡이더라도 개인이 만든 영상이다보니 저 사이트들에서 제공하는 가사 싱크 시간과 영상 시간이 일치하지 않는 경우가 대부분이다. 이건 어쩔 수 없다.

잘 가져와 주시잖아..한잔해

2. 소형 플레이어?

Youtube Music을 따라 만들려다보니 기존 노래를 나가면 노래가 끊기는게 싫어서 밑에 소형 플레이어가 생기게 하고 노래가 안끊기게 하고싶었다. 그렇게 코드에 끼워넣다보니 자꾸 예외가 터지면서 가사 해석이라는 앱의 목적에서 멀어지려는게 아닌가.. 그래서 이건 과감히 제거했다.

3. AI 해석문제

유튜브 API다보니 커버곡들이 너무 많았다. 그래도 원곡의 가사를 가져올 수 있어서 그건 좋았다.

하지만 얘가 가사를 자기 멋대로 해석하거나 바꿔버리는게 많았다. 그래서 가져올때 마다 문제점들을 계속 추가하며

그거하지마. 이거하지마. 이렇게 해. 프롬프트가 추가되었다.

근데 그걸 테스트하면서 모델의 사용량을 초과시켜버려서 이틀이 걸렸다..

그래도 이젠 잘 번역해주긴한다..

몇몇은 아직 잘 안되지만 만족할 만큼 된다

4. 결과 화면들

홈 탭

기록 탭

즐겨찾기 탭

가사 불러오기

AI가 가사 일본어로 바꿔준 후

앱 개발까지 기간으로는 7일 일수로는 6일 걸렸다.

2026.01.12(월) ~ 2026.01.18(일) 수요일은 쉼.

대단한 앱도 아니고 그저 내가 하고싶어서 만든 앱. 절대 상업목적 없음을 밝히는 바입니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

[컴퓨터 구조] 컴퓨터 구조의 큰그림

rud_Island — Sun, 7 Sep 2025 15:23:07 +0900

컴퓨터가 이해하는 정보

컴퓨터는 작성한 소스코드를 데이터와 명령어 형태로 변환 뒤 실행

명령어: 컴퓨터에게 행동 지시를 내리는 말
데이터: 명령의 대상, 명령어의 재료

※ CPU의 종류에 따라 실행가능한 명령어의 종류나 처리방식이 달라진다.

컴퓨터의 핵심부품

- CPU

- 메모리

- 캐시 메모리

- 보조기억장치

- 입출력 장치

CPU

CPU

명령어를 읽고 해석하고 실행하는 부품

구성요소

1. ALU(산술연산장치): 연산을 수행하는 회로로 구성된 계산기

2. CU(제어장치): 명령어를 해석해 전기신호로 내보내는 장치

- 전기신호: 부품을 작동시키기 위한 신호

3. 레지스터: 명령어를 처리하며 중간값을 저장

주기억 장치

주기억장치

"실행중"인 프로그램의 데이터와 명령어를 저장하는 부품으로 휘발성이다.
RAM과 ROM이 주기억 장치이다.

메모리에는 주소와 휘발성이라는 개념이 사용되며,

주소는 명령어를 찾기 위해 정돈시킨 정보이며

휘발성은 전원이 꺼지면 사라지는 개념이다.

+ 캐시메모리: CPU가 조금이라도 빠르게 메모리에 저장된 값을 접근하기 위해 사용하는 저장장치. 빠른 메모리 접근을 보조

보조기억 장치

보조기억장치

주기억장치를 보조하기 위한 장치로, 비휘발성 저장장치이다. 보관할 프로그램을 저장한다.

ex) CD-ROM, 하드디스크, 플래시메모리(SSD, USB메모리), 플로피 디스크

비휘발성은 전원이 꺼져도 정보가 사라지지 않는 것.

※ CPU는 보조기억장치에 저장된 프로그램을 곧장 가져와 실행할 수 없기 때문에 보조기억장치에 있는 프로그램을 주기억장치로 복사하여 가져온 뒤 사용할 수 있다.

저장장치는 작고, 빠르면 비싸며, 크고 느리면 싸다

입출력 장치

입출력장치

컴퓨터 외부에 연결되어 내부와 정보를 교환하는 장치, 주변장치라고 통칭하기도 한다.

입력장치: 마우스, 키보드
출력장치: 모니터, 프린터, 스피커

메인보드: 여러 부품들을 연결하는 슬롯과 단자들로 구성되어 있는 장치

이 장치들이 정보를 교환하기 위한 통로를 버스라고 부르며, 핵심 부품들을 연결하는 시스템 버스가 중요하다.

[알고리즘] 이분 탐색 Binary Search

rud_Island — Sat, 5 Jul 2025 11:01:28 +0900

이분 탐색

데이터들이 "정렬되있는 상태"에서 시작점과 끝점을 반씩 줄여나가며 원하는 데이터를 찾는 탐색 알고리즘이다.

시간복잡도는 O(logN)을 갖는다
why? 반씩 덜어내며 탐색하기 때문이다.

공간 복잡도는 O(N)
why? 별도의 메모리 공간을 더 확보하지 않기 때문이다.

코드

#include <iostream>
using namespace std;

//비교 횟수 기록용
int gCount = 0;

//이분 탐색 검색
void BinarySearch(int tArray[], int Begin, int End, int data) {
    if (Begin > End) {
        cout << gCount << "번의 비교만에 찾지 못함!" << endl;
        cout << "검색 실패" << endl;
        return;
    }

    int tMiddle = (Begin + End) / 2;
    gCount++;

    if (data == tArray[tMiddle]) {
        cout << gCount << "번의 비교만에 찾음!" << endl;
        cout << "검색 성공" << endl;
    }
    else if (data < tArray[tMiddle]) {
        BinarySearch(tArray, Begin, tMiddle - 1, data);
    }
    else {
        BinarySearch(tArray, tMiddle + 1, End, data);
    }

}

int main() {
	int tArray[7] = { 1,2,8,9,11,19,29 };

	gCount = 0;
	BinarySearch(tArray, 0, 6, 29);

	gCount = 0;
	BinarySearch(tArray, 0, 6, 9);

	gCount = 0;
	BinarySearch(tArray, 0, 6, 777);

	return 0;
}

결과

[STL] 스택 Stack

rud_Island — Sat, 5 Jul 2025 10:50:04 +0900

스택

FILO 형태로 동작하며 가변형태를 가지는 자료구조이다.

원시배열은 크기가 고정되어 있기 때문에, 가변배열이며 스택의 출입구는 한 곳이므로 단방향 연결리스트로 구현하는 것이 좋다.

스택은 메모리 저장에서 활용된다. 이런 형태를 구현하기 위해선 포인터의 이해가 필수이다.(나도 가끔 헷갈린다)

코드

/*
스택Stack
FILO Frist In Last Out 형태로 동작하며, 가변형태를 가지는 자료구조이다.

원시배열은 크기가 고정되어 있기때문에,
가변 배열인 Single Linked List로 구현하는것이 적합하다.

Why?
스택은 출입구가 하나이므로 Single연결리스트로 push, pop시에 O(1)로 가능하기 때문이다.

*/

#include <iostream>
using namespace std;

struct SNode {
    //데이터
    int Data = 0;
    
    //다음 노드
    SNode* next = nullptr; //다음 노드(위에 아래로 내려가는 노드로 보면 된다.)
};

struct Stack {
    SNode* Head = nullptr; //스택은 가장 위에것만 사용

    // 삽입
    void Push(int x) {
        SNode* newNode = new SNode();
        newNode->Data = x;
        newNode->next = Head;
        Head = newNode;
    }

    //꺼내기
    void Pop() {
        //만약 스택의 헤드가 없으면 리턴. (스택이 비어있단 뜻)
        if (Head == nullptr) return;

        //여기왔다면 값이 있단 뜻
        //스택의 Head를 SNode의 next로 설정하고 기존 Head를 동적할당 해제한다.
        SNode* PopNode = Head;
        Head = PopNode->next;

        delete PopNode;
    }

    void DisplayStack() {

        SNode* node = Head; //스택의 헤드를 가져온다.

        //nullptr이 아닐때까지 반복
        while (node != nullptr) {
            cout << "Stack값: " << node->Data << endl; //값 출력 후
            node = node->next; //노드를 아래로 내린다.
        }
    }

    void Top() {
        cout << "Top값: " << Head->Data << endl;
    }

    bool isEmpty() {
        //헤드가 없으면 비어있단 뜻
        if (Head == nullptr) {
            return true;
        }
        return false;
    }

    //소멸자
    ~Stack() {
        while (!isEmpty()) {
            Pop(); //하나씩 꺼내며 해제
        }
    }

};


int main()
{
    Stack stack;
    stack.Push(3);
    stack.Push(5);
    stack.Push(6);
    stack.Push(2);
    stack.Push(4);

    stack.DisplayStack(); // 4 2 6 5 3
    cout << "-------------" << endl;

    stack.Pop(); //4꺼내기
    stack.Top(); //2값만 출력
    stack.Pop(); //2꺼내기

    stack.DisplayStack();// 6 5 3


    return 0;
}

결과