안녕하세요, AI Matters입니다. 이번 영상에서는 바이브 코딩으로 인스타그램 계정을 액자처럼 볼 수 있는 아이패드 앱을 만든 과정을 보여드립니다. 코덱스와 Xcode를 연결해 Swift 기반 아이패드 앱을 만들고, 계정 추가, 사진 수집, 동기화 표시, 갤러리 모드, 배경 선택 같은 기능을 자연어 프롬프트로 하나씩 구현해가는 흐름을 다룹니다.

이 영상에서 만든 앱은 내가 좋아하는 인스타그램 계정의 사진과 영상을 아이패드 화면에서 액자처럼 볼 수 있게 만든 개인용 실험 앱입니다. 처음에는 “내가 좋아하는 인스타 계정들을 액자처럼 볼 수 있는 앱 만들어줘”라는 요청에서 시작했고, 이후 불편한 점과 필요한 기능을 AI에게 계속 설명하면서 앱을 다듬어갔습니다.

프롬프트 모음

개발 환경 연결하기: AI야 코덱스에 커서 연결해줘

인스타 액자 앱 만들기: 내가 좋아하는 인스타 계정들을 액자처럼 볼 수 있는 앱 만들어줘

인스타 콘텐츠 수집하기: 아 난 URL 모르겠고 네가 직접 가져와서 수집해

인스타 계정 추가하기: 인스타그램 계정 입력해서 추가하는 기능 넣어줘

메뉴 구조 개선하기: 메뉴 바 상하단으로 나눠서 스크롤할 수 있게 해줘

동기화 상태 표시하기: 오른쪽 상단에 동기화 퍼센티지 표시해줘

자동 전환 시간 선택하기: 전체 카드를 3초, 5초, 7초, 9초만에 넘어가도록 선택하는 버튼 넣어줘

사진 세트 자동 스크롤하기: 사진 세트를 3초, 5초, 7초, 9초마다 자동 스크롤 되게 해줘

플로팅 버튼으로 시간 표시하기: 3초, 5초 보기 등은 플로팅 버튼으로 표시해줘

카드 전환 일시정지하기: 다음 카드 세트로 넘어가지 않게 일시정지와 재생 버튼을 오른쪽 하단에 넣어줘

동영상 재생 제어하기: 동영상 카드 재생과 정지 버튼을 화면 상단에 만들어줘

갤러리 모드 만들기: 더블 탭하면 갤러리 모드로 진입해주고 하단에 썸네일 스크롤 가능하게 넣어줘

갤러리 썸네일 조작하기: 갤러리 모드에서 아래에 썸네일 나열해주고 아이패드 기본앱처럼 조작하게 해줘

그리드 보기 추가하기: 갤러리 모드에 썸네일로 보기 외에 그리드로 보기도 넣어줘

더블 탭 확대하기: 아이패드 기본 사진 앱처럼 더블 탭하면 확대해줘

스와이프 동작 개선하기: 갤러리 모드에서 사진을 스와이프로 넘겨 다른 사진으로 갈 때 기본 사진 앱처럼 만들어줘

사진 묶음 넘기기: 쓸어넘기기 시 다음 묶음으로 넘어가게 해주고 더블 탭 시 갤러리 모드로 진입하게 해줘

계정 정보와 링크 표시하기: 수집한 계정 사진 하단에 인스타 계정과 링크 넣어주고 추가된 계정은 추가됐다고 써줘

리퀴드 글래스 적용하기: 각 플로팅 버튼에는 리퀴드 글래스 적용해줘

갤러리 화면 정리하기: 갤러리 모드에서 앱 설명을 지워주고 배경을 흑백으로 해줘

배경 컬러 변경하기: 배경 컬러를 핑크, 그린, 옐로우로 변경할 수 있게 해주고 내 사진으로 배경 지정도 할 수 있게 해줘

사진 관리 기능 넣기: 메뉴바 하단에는 수집된 사진들을 보고 삭제할 수 있게 해줘

계정 추가 방식 확장하기: 계정 추가는 URL로도 할 수 있게 해주고 동기화 시작 버튼도 넣어줘

내 앨범 사진 등록하기: 내 앨범에 있는 사진으로도 액자 등록할 수 있게 해줘

이 영상의 핵심은 개발 실력보다 문제를 정의하는 능력이 더 중요하다는 점입니다. 스와이프가 불편하다, 동기화가 언제 끝나는지 모르겠다, 사진을 한 장씩 보고 싶다, 배경을 바꾸고 싶다처럼 원하는 기능과 불편한 점을 구체적으로 말하면 AI 코딩 도구가 구현 방향을 잡아줍니다.

다만 이 앱은 개인적인 실험용으로 만든 예시이며, 인스타그램 콘텐츠 수집과 관련해 사용약관과 적법성 문제가 있을 수 있어 출시하지 않는다는 점도 함께 설명합니다. 바이브 코딩은 AI에게 코드를 맡기고 끝내는 것이 아니라, 내가 필요한 기능을 계속 정의하고 수정하면서 원하는 앱에 가까워지게 만드는 과정입니다.

00:00 바이브 코딩으로 만든 악마의 앱 소개

00:12 인스타 계정을 액자처럼 보여주는 아이패드 앱 아이디어

00:44 코덱스에 처음 질문하고 앱 제작을 시작한 과정

01:00 Xcode와 Swift를 활용한 아이패드 앱 개발 환경 설명

01:20 코덱스와 커서 연결을 요청하는 프롬프트 소개

01:28 인스타 계정을 액자처럼 볼 수 있는 앱 제작 요청

01:56 URL을 직접 가져와 수집해달라고 요청한 과정

02:32 인스타그램 계정 입력과 추가 기능 구현

02:54 메뉴 바를 상하단으로 나누고 스크롤 기능 추가

03:17 오른쪽 상단에 동기화 퍼센티지 표시 기능 구현

03:44 3초, 5초, 7초, 9초 자동 전환 버튼 추가

03:59 카드 세트 전환을 멈추는 일시정지와 재생 버튼 구현

04:13 동영상 카드 재생과 정지 버튼 추가

04:36 더블 탭 갤러리 모드와 하단 썸네일 스크롤 구현

04:52 썸네일 보기와 그리드 보기 기능 추가

05:01 아이패드 기본 사진 앱처럼 더블 탭 확대 구현

05:13 수집한 계정의 인스타 링크와 추가 완료 표시 구현

05:38 쓸어넘기기, 갤러리 모드 진입, 썸네일 나열 방식 개선

05:53 플로팅 버튼에 리퀴드 글래스 디자인 적용

06:10 사진 세트 자동 스크롤 시간 세부 조정

06:18 자동 전환 시간을 플로팅 버튼으로 표시

06:30 갤러리 모드 스와이프 동작을 기본 사진 앱처럼 개선

06:39 갤러리 모드 앱 설명 제거와 흑백 배경 적용

07:08 즐겨찾기, 앱 잠금, 배경 선택, 와이파이 동기화 등 추가 기능

07:21 핑크, 그린, 옐로우 배경과 내 사진 배경 지정 기능

07:49 수집된 사진 확인과 삭제 기능 정리

07:55 URL 계정 추가와 동기화 시작 버튼 설명

08:17 Xcode에 생성된 코드와 실제 앱 결과 확인

08:51 내 앨범 사진으로 액자 등록하는 기능

08:55 악마의 앱이라고 부른 이유와 출시하지 않는 이유

09:37 바이브 코딩에서 중요한 것은 개발 실력이 아니라 문제 정의 능력

10:20 누구나 필요한 앱을 만들 수 있지만 꾸준한 수정이 필요하다는 조언

10:34 원하는 대로 안 될 때는 불편함을 그대로 AI에게 말하라는 조언

11:10 클로드 코드, 안티그래비티, 코덱스 등 AI 코딩 도구 활용 제안

11:39 시청자에게 만들고 싶은 앱을 댓글로 남겨달라는 요청

#바이브코딩 #코덱스 #AI코딩 #아이패드앱 #Xcode #Swift #앱개발 #AI리터러시

제공: AI 매터스