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

최근 AI를 활용한 코딩이 부쩍 늘었기에 이 기술을 활용해 나만의 사이트를 제작해보고자 했다. 사용한 기술은웹 사이트 언어: TypeScript, React, Next.jsAI Assist : Gemini Code AssistCI/CD: Git, Vercel 언어는TypeScript와 JSX가 결합된 React(Next.js)로 진행했다.npm run dev 위 명령어는 개발자 모드로 실행하는 명령어다.만드는 웹이 어떤 모습을 해 나가고 있는지 볼 수 있다. 코드 화면 난 여태 게임개발을 위주로 해왔기에 바로 실전으로 들어가지 못한다. 하지만 AI가 있기에 가능하다.Gemini Code Assistant AI에게 자연어로 "기능이나 페이지를 구현해줘" 라고하면 대강 틀을 잡아주며 프로젝트 전체를 훑..

• format_list_bulleted 프로젝트/웹프로그래밍
• · 2026. 2. 21.
• textsms

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

첫 앱 출시처음으로 앱을 출시하게 되었습니다. 뿌뿌~~ 🎉 🎉 🥂 🥂 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"codingisla..

• format_list_bulleted 프로젝트/출시물
• · 2026. 2. 10.
• textsms

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

Firebase Test Lab 이란앱을 등록하면 구글의 AI가 알아서 버튼들을 눌러보며 크래시(앱꺼짐)이 발생하는지 테스트해주는 로봇(?)설정하는 방법1. 구글 콘솔에 프로젝트 생성 프로젝트 이름은 직관적이게 만듭니다. 어떤 프로젝트인지 구분 잘하게 지으면됨.2. Firebase 콘솔에서 프로젝트 생성Firebase콘솔 사이트에 들어가서 [새 Firebase 프로젝트 만들기]를 클릭 후 밑에 Google console 프로젝트에서 가져오기로 위에서 생성한 프로젝트를 선택해 계속 생성을 진행합니다.3. 프로젝트에 Firebase 관련 연결아마 저 만들기 들어가면 패키지명을 입력하라고 할텐데안드로이드는 프로젝트파일명/android/app/build.gradle.kts 에android { namespa..

• format_list_bulleted 프로젝트/AI
• · 2026. 2. 6.
• textsms

[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" data-og-url="https://codingisland.tistory.com/116" data-og-image="https://blog.kakaocdn.net/dna/bbZ0PF/dJMb8WeultL/AAAAAAAAAAAAAAAAAAAAAILW_Mv35Gda7tjMnZIg168Rja-zLrXFvZual7b9CtnA/img.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1772290799&allow_ip=&allow_referer=&signature=6%2BUk5eXLntrmofZpE5QpP4KjfyM%3D

• format_list_bulleted 프로젝트
• · 2026. 1. 29.
• textsms

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

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

• format_list_bulleted 프로젝트
• · 2026. 1. 25.
• textsms

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

앱을 만들게 된 과정1. 앱을 왜 만들고 어떻게 시작했는가?앱을 만들게 된 이유동기: 일본어 공부가 하고 싶어짐 -> 평소 Jpop 많이 들음.영감: 유튜브 쇼츠 카지노 차무식이 팝송 500곡 외웠다길래 나도? 싶음.결론: 500곡까진 아니어도 노래 통째로 외워보려는데 일일이 찾기 귀찮음 -> "앱 하나 만들어서 AI한테 번역시키고 편하게 보자!" 평소 C#으로 Unity 개발을 해왔기에 언어는 익숙한데... 디자인을 꾸미는게 html같아서 너무 헷갈린다.위젯안에 위젯안에 위젯안에... 디자인도 제대로 못하고 기획도 제대로 못하고 해석도 제대로 못하는데 처음부터 끝까지 AI한테 시키자 싶어서내가 직접 한건 예시화면 그리기, 기능 설명 밖에 없다. 그저 바이브코딩 우선 Figma로 예시화면을 그렸다Figm..

• format_list_bulleted 프로젝트
• · 2026. 1. 18.
• textsms

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

컴퓨터가 이해하는 정보컴퓨터는 작성한 소스코드를 데이터와 명령어 형태로 변환 뒤 실행명령어: 컴퓨터에게 행동 지시를 내리는 말데이터: 명령의 대상, 명령어의 재료 ※ CPU의 종류에 따라 실행가능한 명령어의 종류나 처리방식이 달라진다. 컴퓨터의 핵심부품- CPU- 메모리- 캐시 메모리- 보조기억장치- 입출력 장치 CPUCPU명령어를 읽고 해석하고 실행하는 부품 구성요소1. ALU(산술연산장치): 연산을 수행하는 회로로 구성된 계산기2. CU(제어장치): 명령어를 해석해 전기신호로 내보내는 장치 - 전기신호: 부품을 작동시키기 위한 신호3. 레지스터: 명령어를 처리하며 중간값을 저장 주기억 장치주기억장치"실행중"인 프로그램의 데이터와 명령어를 저장하는 부품으로 휘발성이다.RAM과 ROM이 주기억..

• format_list_bulleted 컴퓨터과학(CS)
• · 2025. 9. 7.
• textsms

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

이분 탐색데이터들이 "정렬되있는 상태"에서 시작점과 끝점을 반씩 줄여나가며 원하는 데이터를 찾는 탐색 알고리즘이다.시간복잡도는 O(logN)을 갖는다why? 반씩 덜어내며 탐색하기 때문이다.공간 복잡도는 O(N)why? 별도의 메모리 공간을 더 확보하지 않기 때문이다. 코드#include using namespace std;//비교 횟수 기록용int gCount = 0;//이분 탐색 검색void BinarySearch(int tArray[], int Begin, int End, int data) { if (Begin > End) { cout 결과

• format_list_bulleted C++/알고리즘
• · 2025. 7. 5.
• textsms

[STL] 스택 Stack

스택FILO 형태로 동작하며 가변형태를 가지는 자료구조이다.원시배열은 크기가 고정되어 있기 때문에, 가변배열이며 스택의 출입구는 한 곳이므로 단방향 연결리스트로 구현하는 것이 좋다.스택은 메모리 저장에서 활용된다. 이런 형태를 구현하기 위해선 포인터의 이해가 필수이다.(나도 가끔 헷갈린다) 코드/*스택StackFILO Frist In Last Out 형태로 동작하며, 가변형태를 가지는 자료구조이다.원시배열은 크기가 고정되어 있기때문에,가변 배열인 Single Linked List로 구현하는것이 적합하다.Why?스택은 출입구가 하나이므로 Single연결리스트로 push, pop시에 O(1)로 가능하기 때문이다.*/#include using namespace std;struct SNode { //데이터..

• format_list_bulleted C++/자료구조
• · 2025. 7. 5.
• textsms