240513 Alex Ziskind - 내가 이제 앱을 거꾸로 만드는 이유
- - 만약 저처럼 소프트웨어 개발자이시라면, 이 말에 공감하시는지 알려주세요. 저는 소프트웨어 개발을 좋아하고 코딩하는 것을 좋아합니다. 제가 싫어하는 것은 바로 배포입니다. 코드를 다 작성하고 앱이 만들어진 후, 모바일 앱이든 안드로이드 앱이든, 안드로이드 앱을 배포해보신 적 있으신가요? 재미없죠. 아니면 웹 앱이든요. 그 앱을 어디엔가 배포해야 합니다. 내 컴퓨터에서는 잘 작동하지만, 호스팅 제공업체에서는 잘 작동할까요? 어떤 종류의 설정을 해야 할까요? 얼마나 시간이 걸릴까요? 이런 모든 것들은 수없이 많이 해봤고 동일한 스택을 사용하지 않는 한 예측할 수 없습니다.
- - 그러나 요점은 그게 아닙니다. 제가 최근에 해온 방식은 이렇습니다. 이것은 제가 최근에 배포한 앱입니다. 단일 페이지 LLM 추론 하드웨어 계산기입니다. 채널에서 제가 이 앱을 보여드린 것을 보셨을 수도 있습니다. 그리고 여기 다른 앱이 있습니다. 이 앱은 YouTube 댓글을 가져옵니다. 궁극적으로 저는 채널에서 동영상 관련 추첨을 진행할 때 이 앱을 사용하고 싶습니다. 다른 사람에게 의존하여 정책을 변경하고 요금을 부과하기 시작하는 대신, 제 도구를 사용하여 많은 댓글을 가져오고 무작위 댓글을 선택할 수 있기를 바랍니다. 저는 이 모든 것을 Savala에 호스팅하고 있습니다. Savala는 정적 사이트를 호스팅합니다. 저기 보이는 것이 제 LLM 추론 계산기입니다. 제 YT 댓글 프론트엔드는 Vit으로 작성되었고, 백엔드는 Express 앱을 사용하는 Node.js 애플리케이션입니다. 저는 여기에 객체 스토리지를 사용할 수 있고, 데이터베이스도 사용할 수 있습니다. 또한 일부 자동화를 위해 n8n도 사용하고 있습니다.
- - 그래서 이 모든 다른 앱들을 가져와 호스팅하는 대신, 저는 하나의 앱만 가질 것입니다. 프론트엔드와 백엔드가 모두 함께 호스팅될 것이고, 이를 위해 Next.js를 사용할 것입니다. 저는 2015년부터 React 앱을 개발해왔지만, Next.js를 실제로 사용해본 적은 없습니다. 하지만 20분 만에 Next.js를 빠르게 설정하고 사용할 수 있었습니다. 이것이 제가 사용하기 시작한 접근 방식인데, 앱의 껍데기를 먼저 배포하여 배포가 정말 원활한지 확인하는 것입니다. 왜냐하면 GitHub에 푸시하면 자동으로 감지되어 배포되고 작동하기를 원하기 때문입니다. 그렇게 하면 애플리케이션의 나머지 부분을 구체화하는 데 방해가 되는 것이 없다는 것을 마음속으로 알 수 있습니다.
- - 어쨌든, 이 영상이 정말 지루해지기 전에, 제가 어떻게 하는지 보여드리겠습니다. Savala에는 템플릿이라는 것이 있는데, 다양한 템플릿이 있습니다. 크롤링을 위한 Firecrawl, CMS를 위한 Ghost, Laravel 프로젝트, MongoDB와 클라이언트, 그리고 n8n도 있습니다. n8n은 자동화 도구인데 바로 실행할 수 있습니다. 그리고 여기 Next.js가 있습니다. 저는 '지금 배포'를 클릭하고 가장 가까운 지역을 선택한 다음 템플릿을 배포할 수 있습니다. 저는 제가 이걸 생각해냈다고 생각했고, 제가 똑똑하다고 생각했습니다. 배포 중심 개발(deployment driven development)이라고 생각했는데, 알고 보니 그 용어는 이미 존재했습니다.
- - 그래서 제가 그렇게 똑똑한 건 아니지만, 그래도 제가 발견한 것이니 공로를 인정받을 수 있을까요? 앱은 배포되었습니다. 그리고 버튼 클릭만으로 이 모든 기능을 사용할 수 있습니다. CDN을 활성화할 수 있고, 엣지 캐싱 상태를 활성화할 수 있습니다. 개발 중에는 캐싱을 원하지 않기 때문에 모든 작업이 완료된 후에 그렇게 할 것입니다. 개발 중에 캐싱이 있으면 정말 미쳐버릴 것 같습니다. 네트워킹을 설정할 수 있고, 디스크를 변경할 수 있으며, 사용자 관리 기능도 있습니다. 데이터베이스와 환경 변수에 연결할 수도 있습니다.
- - 그러나 여기서부터 실제로 개발을 시작할 수 있습니다. 먼저 이 앱을 방문해 봅시다. Next.js 템플릿이라 아무것도 없지만, 이제 백엔드와 프론트엔드가 모두 함께 작동하는 기능을 가지고 있습니다. 그렇다면 여기서 무엇을 해야 할까요? GitHub에서 복제된 이 저장소를 가지고 있는데, 이것이 핵심이 될 것입니다. Next.js 데모 저장소로 가서 포크하겠습니다. 그리고 이것을 YT 댓글이라고 부르겠습니다. 아니, 그냥 YT 댓글이 아니라 YT 도구라고 하겠습니다. 좀 더 설명적이어야 할 것 같지만, 아무튼요. 포크 생성. 일단 포크되면, 이 포크에 대해 코드를 작성할 수 있도록 복제할 것입니다. Git clone YT tools. 선택한 편집기로 이것을 열어보세요. 이제 로컬에 앱이 있습니다. Next.js 프로젝트이므로 npm과 node 등이 필요해서 npm install만 하면 됩니다. 이제 npm run dev를 실행합니다. Next.js 프로젝트 템플릿이 로컬에서 작동합니다. IP 주소를 보세요. 로컬입니다. 이제 마음껏 해보세요. 원하는 대로 테스트할 수 있습니다. 저는 처음에 푸시가 어떻게 작동하는지 보기 위해 간단한 'Hello' 예제를 만들었지만, 결국에는 모든 것이 함께 작동하는 프론트엔드와 백엔드 애플리케이션을 갖게 될 것입니다.
- - Next.js 프로젝트에서 모두 함께 작동하는 프론트엔드와 백엔드 애플리케이션을 갖게 될 것입니다. 저는 '바이브 코딩(vibe coding)'을 좀 했습니다. 인정합니다만, 덕분에 많이 진행되었습니다. YT 도구는 나중에 마무리하겠지만, 제가 얼마나 진행되었는지 보여드리겠습니다. 바로 여기입니다. 이 모든 것은 VS Code 내에서 Claude Sonnet 4를 사용하여 에이전트와 함께 코딩되었습니다. 정말 환상적인 작업을 해냈습니다. 저는 Claude Sonnet 4가 정말 마음에 듭니다.
- - 그러나 저는 25년 이상의 소프트웨어 개발 경험, 특히 웹 개발 경험이 있기 때문에, 이제 막 시작하는 사람은 묻지 않을 수도 있는 특정 사항들을 에이전트에게 요청할 수 있었습니다. 프로젝트를 시작할 때는 단순히 'Hello World'일 뿐이지만, 장기적으로 더 유지보수하기 쉬운 방식으로 에이전트에게 아키텍처를 설계하도록 지시해야 합니다. 비밀 키와 API 키 등이 코드에 포함되지 않고 GitHub 또는 Git 저장소에 커밋되지 않도록 해야 합니다. 그래서 에이전트는 그렇게 했고, 제가 나중에 실제로 프로덕션에 배포할 때 사용할 수 있도록 환경 변수에 넣어두었습니다. 로컬에서는 저 env.local 파일에서 읽게 됩니다. 그래서 제 Google 서비스 계정의 비밀 키가 거기에 있습니다. 나머지는 보이지 않으므로 괜찮습니다. 가져갈 수 없을 겁니다. 또한, 에이전트에게 base64로 변환하도록 했습니다. 그래서 일반 JSON 형태가 아닙니다. 이는 읽기 쉽게 할 뿐만 아니라 코드 내에서 변환하기 쉽게 합니다.
- - 그래서 이제 저는 Google API에 연결하여 YouTube 댓글을 가져오기 위한 모든 비밀 키를 포함하는 이 Google 서비스 계정 base64 환경 변수만 있으면 됩니다. 다음은 라이브러리 서비스 섹션으로, 기본적으로 프론트엔드와 백엔드 비즈니스 로직을 위한 서비스를 포함합니다. 그리고 마지막으로 프론트엔드 페이지도 여기에 있습니다. 이것들은 단지 React 컴포넌트입니다. 아마 더 세분화할 수도 있겠지만, 매우 간단한 페이지입니다. 좋은 점은 이미 배포했기 때문에 얻는 마음의 평화입니다. 이제 제 동영상 중 하나로 가서 URL을 복사하여 여기에 붙여넣어 보겠습니다. 최대 댓글 수를 100으로 설정하고 댓글을 가져와 보겠습니다. 댓글이 있습니다. 사람들은 제가 Bear Grylls처럼 생겼다고 생각합니다. 정말인가요? 맞나요? 하지만 보통 저는 100개 이상의 댓글을 받습니다. 그래서 댓글 수를 늘려보겠습니다. 현재 제 댓글은
- - 현재 최대 100개의 댓글로 제한되어 있습니다. 저는 10,000개의 댓글을 선택할 수 있기를 원합니다. 제 동영상은 아직 10,000개를 넘지 않습니다. 그러나 프론트엔드 UI에 10,000개까지의 값을 나타내는 드롭다운이 있는지 확인해야 합니다. 그리고 YouTube API의 페이지네이션을 살펴보는 것이 좋을 것입니다. 10,000개의 댓글을 한 번에 다운로드할 수 있는지 모르기 때문입니다. 그래서 저는 이 부분을 에이전트에게 맡길 명령으로 남겨두고 여기에서 실행 버튼을 누르겠습니다. Bob 코딩입니다, 여러분. 이렇게 작동합니다.
- - 그래서 에이전트가 여러 작업을 수행했습니다. 제가 생각하지 못했던 일부 작업도 포함해서요. 또한, 저는 VS Code에 간단한 브라우저가 내장되어 있다는 것을 전혀 몰랐습니다. 정말 멋지네요. 에이전트가 변경한 UI는 여기 있습니다. 그리고 여기에는 최대 10,000개가 있습니다. 저는 실제로 브라우저를 열고 500개의 댓글을 가져오도록 해보겠습니다. 오, 새 메시지! 성공했습니다! 그리고 답글도 가져왔습니다. 보세요! 페이지네이션을 처리했습니다. 180개의 댓글이 가져와졌습니다. 제 동영상에는 131개의 최상위 댓글이 있으니, 나머지는 답글이었던 것 같습니다. 여기서 CSV를 다운로드할 수 있습니다. 좋습니다. 모든 댓글이 여기 있습니다.
- - 그래서 이것은 제가 당첨자를 선택하고 감성 분석 같은 작업을 수행하는 데 더 쉽게 해줄 것입니다. 그러니 댓글을 남겨주시면 분석할 수 있습니다. 또는 사람들이 동영상을 좋아하면 '좋아요'를 누르거나, 아래 댓글에 다른 동영상에 대한 제안을 남겨줄 것입니다. 항상 감사합니다. 그렇게 해주셔서 정말 감사합니다. 이제 커밋할 변경 사항이 있습니다. 저는 추가된 댓글 페이지네이션을 모두 추가할 것입니다. 여기서 페이지네이션이란 API를 위한 서버 측 가져오기 페이지네이션을 의미하며, 프론트엔드 페이지네이션이 아닙니다. 그래서 변경 사항을 커밋하고 동기화합니다.
- - 이제 Savala의 제어판으로 돌아가서 '배포'를 누를 수 있습니다. GitHub에서 커밋이 발생할 때마다 자동으로 감지하여 배포하도록 설정할 수도 있습니다. 저는 LLM 추론 계산기에서는 그렇게 하고 있지만, 여기서는 수동으로 배포하고 싶습니다. 여러 커밋이 있을 수 있고, 단일 페이지 앱보다 큰 애플리케이션이기 때문입니다. 그래서 수동으로 제어하고 싶습니다. 그렇게 할 수 있습니다.
- - 그러나 여기 핵심이 있습니다. 제가 Google API 비밀 키를 커밋하지 않는다고 말했던 것을 기억하시나요? GitHub나 어떤 종류의 소스 제어 시스템에도 비밀 키를 절대 커밋하지 마세요. 여기에 환경 변수가 있고, 여기에 제 Google 서비스 계정 base64를 넣었습니다. 그리고 JSON이 있습니다. 저것은 오래된 것이고 삭제할 수도 있지만, 여기에 제 비밀 키가 있습니다.
- - 이제 사용자 지정 도메인 이름을 활성화할 수도 있습니다. 그래서 alexziskind.com/youtubecomments 같은 것을 원한다면, 그곳으로 연결할 수 있습니다. 제가 그 도메인을 소유하고 있나요? 아니요. 누가 그 도메인을 소유하고 있나요? 이미 사용 중입니다. 제가 기회를 놓쳤네요. 이제 모든 것이 배포되었습니다. 1분 43초가 걸렸습니다. 앱을 방문해 봅시다. 앱이 있습니다. 제 작은 테스트인 'Hello'도 있지만, 이 모든 UI는 Claude 4가 만들었습니다. 최고의 UI는 아니지만, 이전에 제가 가지고 있던 것보다는 훨씬 낫습니다. 여기에 붙여넣고 500개의 댓글을 가져와 보겠습니다. 댓글이 있습니다. 정말 멋집니다.
- - 그래서 이제 이 앱이 호스팅되었습니다. 제 파이프라인이 작동한다는 것에 대해 매우 자신감을 가지고 있으며, 배포에 어떤 영향을 미칠지 걱정하지 않고 많은 기능을 추가할 수 있습니다. 심지어 이런 것들을 저장하기 위한 데이터베이스 기능도 추가하기 시작할 수 있는데, 이것은 다음으로 추가할 것입니다. 별도의 영상으로 보고 싶으시다면 알려주세요. 하지만 정적 사이트의 경우, 이것은 정말 쉬운 일입니다. 이런 것들을 배포하는 것은 너무나 쉽습니다. Savala를 확인하고 그들의 템플릿 섹션으로 가서 무엇을 만들어내는지, 그리고 이 DDD(배포 중심 개발)가 여러분에게도 잘 맞는지 알려주세요. 아니면 이미 하고 계셨다면 댓글로 알려주세요. 시청해 주셔서 감사합니다. 다음에 뵙겠습니다.
---
-