하나씩 배우고, 서비스로 만들어 보세요.
단계별로 따라가며 기획부터 개발·배포까지. 지금 읽을 가이드부터 시작하세요.
단계별로 따라가며 기획부터 개발·배포까지. 지금 읽을 가이드부터 시작하세요.
단계별로 따라가며 기획부터 개발·배포까지. 지금 읽을 가이드부터 시작하세요.
단계별로 따라가며 기획부터 개발·배포까지. 지금 읽을 가이드부터 시작하세요.
원하는 동작을 말로 설명하고 AI의 결과를 확인하며 소프트웨어를 만드는 방법을 배웁니다. 목표는 사람이 정하고, 결과도 사람이 확인합니다.
도구를 고를 때는 모델 점수보다 지금 하려는 작업과 파일·터미널·배포 환경에 맞는지를 먼저 봅니다. 대화형 AI, 코드 편집기, 코딩 에이전트, 브라우저 제작 도구는 서로 다른 작업 공간입니다.
앱을 식당에 비유하면 화면은 메뉴판, 서버는 주문을 처리하는 주방, 데이터베이스는 장부입니다. 서로의 역할을 나누어 이해하면 AI의 설명과 오류를 더 쉽게 읽을 수 있습니다.
MVP는 적게 만든 부실한 서비스가 아니라, 가장 중요한 가설을 확인할 수 있는 최소 기능 제품입니다. 누구의 어떤 문제를 해결했는지 관찰 가능한 기준이 있어야 합니다.
목적과 작업 환경에 맞는 AI 도구를 찾아보세요.
좋은 프롬프트는 AI가 이해할 작업 계약입니다. 장황한 역할극보다 목표·범위·제약·관찰 가능한 결과를 명확하게 적는 편이 수정과 검증에 도움이 됩니다.
집을 지을 때 설계와 배관을 확인한 뒤 벽을 세우듯, 개발도 순서를 정하면 되돌리는 비용이 줄어듭니다. 불확실성이 크거나 데이터에 영향을 주는 작업은 더 작게 나눕니다.
기술 스택은 화면·서버·데이터·배포 도구의 조합입니다. 인기보다 서비스가 요구하는 검색, 관계, 실시간, 사용자 환경과 운영 역량을 기준으로 선택합니다.
UI는 사용자가 보는 버튼과 화면이고 UX는 목표를 달성하는 전체 경험입니다. 화면이 아름다워도 저장 실패를 모르게 하거나 모바일에서 조작할 수 없으면 좋은 경험이 아닙니다.
처음부터 폴더를 많이 만드는 것이 좋은 설계는 아닙니다. 파일을 바꾸는 이유가 비슷한 기능을 묶고, 여러 곳이 쓰는 코드만 공통 영역으로 옮깁니다.
Git은 작업의 저장 지점을 만들고 무엇이 달라졌는지 비교하는 도구입니다. AI 수정 전에 돌아갈 지점이 있으면 실패를 두려워하지 않고 작은 변경을 검토할 수 있습니다.
버튼은 화면의 장식이 아니라 사용자의 결정을 실행하는 약속입니다. 문구·우선순위·크기와 진행 상태를 함께 설계하면 실수와 중복 요청을 줄일 수 있습니다.
카드는 정보를 같은 형태로 비교하게 만드는 틀입니다. 모든 내용을 상자에 넣기보다 사용자가 고를 때 필요한 정보와 행동을 일정한 위치에 배치하세요.
가입과 등록 화면에서 중요한 것은 입력칸 수보다 실수했을 때 회복하는 방법입니다. 입력 기준을 미리 알리고 실패해도 작성한 내용을 잃지 않게 만드세요.
미니멀한 화면은 정보를 흐리게 지운 화면이 아닙니다. 일관된 여백과 글자 위계, 읽을 수 있는 대비, 확실한 초점이 있어야 단순하면서도 사용하기 편합니다.
만들고 싶은 내용을 AI에게 정확하게 전달해요.
서버는 화면의 요청을 그대로 믿고 저장하는 장치가 아닙니다. 사용자의 신원과 권한, 입력 형식, 업무 규칙을 검사하고 일관된 결과를 돌려주는 경계입니다.
Firebase는 인증·문서 저장·파일·서버 함수를 함께 사용할 수 있는 관리형 서비스입니다. 서버 운영 부담은 줄지만 보안 정책과 사용량 설계는 개발자가 정해야 합니다.
둘 다 앱을 빠르게 만들 수 있지만 데이터의 모양과 조회 방법이 다릅니다. 문서 중심 모델과 관계형 모델 중 내 서비스의 질문에 답하기 쉬운 쪽을 고르세요.
데이터 모델링은 장부에 어떤 항목을 어떤 관계로 기록할지 정하는 일입니다. 먼저 화면에서 필요한 조회를 적은 뒤 키·관계·인덱스를 설계하면 데이터가 늘어도 전체를 매번 읽지 않을 수 있습니다.
로그인은 신원을, 권한은 행동의 허용 범위를 정합니다. 관리자 버튼을 숨기는 것은 화면 편의일 뿐 보안 장치가 아닙니다.
외부 API는 다른 서비스의 기능을 정해진 형식으로 빌려 쓰는 창구입니다. 성공 데이터뿐 아니라 사용 한도·시간 지연·응답 형식 변화·장애에도 화면이 동작하도록 설계해야 합니다.
배포는 내 컴퓨터에서 확인한 프로그램을 실제 사용자 환경에 전달하는 일입니다. 도메인은 주소, DNS는 주소가 어디를 가리킬지 정하는 안내판이며 HTTPS는 통신을 보호합니다.
개인·조직 계정 선택부터 Apple Developer Program 가입, 비용 확인, App Store Connect 접속까지 준비합니다.
Bundle ID·서명·빌드를 준비하고 TestFlight 테스트, 스토어 정보 입력, 심사와 출시를 진행합니다.
Google Cloud Console과 Play Console의 차이를 이해하고 개발자 계정·본인 확인·테스트 준비를 진행합니다.
서명된 AAB·Play App Signing·스토어 정보를 준비하고 내부·비공개 테스트와 프로덕션 출시를 진행합니다.
정적 웹사이트의 빌드 폴더를 확인하고 Firebase CLI 초기화·미리보기·배포를 단계별로 진행합니다.
SSR·서버 API가 있는 웹 앱을 GitHub와 연결하고 환경변수·비밀·빌드·운영 로그를 확인합니다.
Firebase Hosting을 기준으로 소유권 확인·DNS·인증서를 설정하고 로그인 콜백과 실제 서비스 주소를 점검합니다.
서버 실행 조건과 환경변수·권한을 준비하고 소스 배포·로그 확인·복구까지 진행합니다.
비용 최적화는 무조건 싼 서비스를 고르는 일이 아니라 불필요한 일을 줄이는 일입니다. 사용자 행동 하나가 발생시키는 DB·서버·전송·외부 요청을 세어 보세요.
캐시는 자주 찾는 결과를 가까운 곳에 잠시 보관하는 복사본입니다. 복사본을 믿어도 되는 시간과 잘못된 복사본을 지우는 방법까지 정해야 안전한 캐시입니다.
조회 비용은 데이터 개수뿐 아니라 화면이 읽는 방식과 재연결 횟수에 좌우됩니다. 가장 자주 여는 화면의 쿼리부터 기록하고 최신성이 필요한 경로만 실시간으로 유지하세요.
성능은 파일 크기만이 아니라 첫 화면이 보이고 사용자의 입력에 반응하며 화면이 안정되는 경험입니다. 느린 구간을 재현하고 같은 조건으로 전후를 비교하세요.
리팩터링은 동작을 유지하면서 구조를 개선하는 일입니다. 줄 수를 줄이는 것보다 코드가 왜 바뀌는지와 어디에서 규칙을 찾을지 명확하게 만드는 것이 목적입니다.
테스트는 코드를 많이 실행하는 행위보다 중요한 약속이 지켜지는지 확인하는 도구입니다. AI가 통과했다고 말한 것과 실제 명령이 성공한 것은 다릅니다.
보안은 마지막에 추가하는 버튼이 아니라 데이터가 경계를 넘을 때마다 검증하는 습관입니다. 어떤 사용자가 어떤 자원에 어떤 입력을 보낼 수 있는지부터 정리하세요.
운영은 장애가 없기를 바라는 일이 아니라 장애를 알아채고 원인을 좁히고 복구하는 체계입니다. 사람이 지금 무엇을 해야 하는지 알 수 있는 알림부터 설계하세요.
브라우저에서 실행하는 코드는 사용자의 기기로 전달됩니다. 난독화만으로 숨기려 하기보다 서버에 남겨야 하는 로직과 저장소 접근 권한을 분리하는 것이 출발점입니다.
비밀키는 파일에서 지우는 것만으로 안전해지지 않습니다. 처음부터 기록을 막고, 노출됐다면 키를 폐기·교체한 다음 저장소 기록과 배포 환경을 정리해야 합니다.
라이브러리와 아이콘, 폰트도 다른 사람이 만든 저작물입니다. 무료로 내려받을 수 있다는 사실만으로 어떤 서비스에서든 제한 없이 사용할 수 있는 것은 아닙니다.
로그인 여부와 수정 권한은 다릅니다. URL이나 요청의 ID를 바꿔도 다른 사람의 데이터를 읽거나 수정할 수 없도록 자원마다 서버에서 권한을 확인해야 합니다.
파일 업로드는 외부 입력을 저장하고 다른 사람에게 전달하는 기능입니다. 확장자만 검사하지 말고 크기·내용·저장 위치·소유권·다운로드 권한을 함께 제한하세요.
챗봇이 답을 제안한다면 에이전트는 허용된 도구로 파일과 환경을 바꾸고 결과를 다시 관찰하는 작업 흐름을 가질 수 있습니다. 도구가 많아질수록 권한 경계와 검증이 중요해집니다.
하네스는 AI 에이전트가 작업하는 환경·도구·규칙·문서·테스트·피드백을 함께 설계하는 접근입니다. 좋은 요청 문장에 더해 반복 가능한 실행 조건을 만드는 일입니다.
AGENTS.md는 에이전트가 프로젝트에서 따라야 할 핵심 작업 안내를 담는 문서입니다. 파일 하나에 모든 지식을 복사하기보다 규칙과 자세한 문서의 위치를 연결합니다.
기존 프로젝트를 수정할 때는 새 코드의 품질뿐 아니라 이미 동작하던 약속을 유지해야 합니다. 변경 전의 구조·호출 경로·데이터 형식을 파악하고 필요한 부분만 고칩니다.
복잡한 작업은 계획을 한 번 적는 것으로 끝나지 않습니다. 각 단계가 무엇을 확인했고 무엇이 남았는지 남겨 다음 판단의 근거로 사용해야 합니다.
컨텍스트는 AI가 현재 참고할 수 있는 정보입니다. 긴 대화에 모든 결정이 묻히면 중요한 제약이 빠지거나 오래된 가정이 다시 적용될 수 있습니다.
AI 리뷰는 놓친 경로를 찾아내는 보조 수단입니다. 같은 가정을 공유한 다른 AI의 승인만으로 독립적인 실제 검증과 사람의 판단을 대신할 수 없습니다.
여러 에이전트는 서로 독립적인 일이 많을 때 도움이 됩니다. 작은 프로젝트에서 역할을 과하게 나누면 설명·충돌·통합 비용이 구현보다 커질 수 있습니다.
자동화는 사람이 반복하던 판단과 실행 중 명확한 부분을 일관되게 수행하게 만드는 일입니다. 잘못된 규칙도 더 빠르게 반복할 수 있으므로 권한과 실패 처리부터 정합니다.
사용자가 늘었다는 이유만으로 서버를 잘게 나눌 필요는 없습니다. 어떤 요청·데이터·운영 문제가 병목인지 확인하고 단계적으로 책임과 자원을 분리하세요.
토큰은 AI가 읽고 생성하는 텍스트의 처리 단위입니다. 무작정 짧게 말하기보다 필요한 맥락과 완료 기준을 정확히 주어 불필요한 재작업을 줄이는 것이 먼저입니다.
AI 기능을 서비스에 넣으면 사용자가 늘수록 호출 비용도 늘 수 있습니다. 작업 난이도에 맞는 모델과 출력 제한, 캐시, 요청 상한을 함께 설계하세요.
나를 소개하고 작업물을 보여주는 정적 사이트를 만듭니다. 로그인과 데이터베이스 없이 첫 페이지를 완성해 기획→프롬프트→디자인→반응형→배포의 전 과정을 경험합니다.
React와 Firebase를 예시로 로그인한 사람이 자신의 게시글과 프로필을 관리하는 작은 서비스를 만듭니다. 화면과 Rules를 함께 작성해 데이터가 사용자별로 분리되는지 확인합니다.
실제 외부 데이터를 서버에서 수집해 목록·검색·필터로 보여주는 서비스를 만듭니다. BACOMO AI 순위처럼 API 호출 비용과 데이터 최신성을 함께 설계합니다.
회원 웹앱을 실제 커뮤니티로 확장합니다. 게시물 수를 늘리는 것보다 악용·신고·관리자·권한·복구를 운영할 수 있게 만드는 데 집중합니다.
작은 앱 하나를 대상으로 에이전트가 반복해서 안전하게 작업할 환경을 만듭니다. 지침·문서·검사·리뷰·기록이 연결돼야 새 세션과 다른 사람도 이어갈 수 있습니다.
무료 요금제도 사용량 제한과 별도 유료 제품이 있을 수 있습니다. 비용은 가입자 수보다 실제 요청·저장·전송 패턴을 기준으로 계산해야 합니다.
성장 단계는 회원 수 하나로 정해지지 않습니다. 요청 집중·데이터 크기·실시간 연결·업무 복잡도·팀 운영 역량을 함께 보고 다음 개선을 정하세요.
실수 목록은 남을 평가하기 위한 규칙이 아니라 반복 실패를 줄이는 도구입니다. 원인과 직접 확인할 해결 기준을 한 쌍으로 기록하세요.
출시는 화면을 공개하는 순간뿐 아니라 실제 계정·데이터·비용에 책임을 지기 시작하는 시점입니다. 예/아니요만 체크하기보다 어떤 환경에서 누가 무엇으로 확인했는지 남기세요.
개인정보 처리방침은 서비스가 실제로 개인정보를 어떻게 다루는지 공개하는 문서입니다. 다른 사이트의 문장을 복사하기 전에 수집 항목과 외부 전송 경로부터 조사하세요.
동의 화면은 체크 표시를 얻는 화면이 아니라 무엇에 동의하는지 이해하고 선택하게 하는 화면입니다. 가입에 꼭 필요한 처리와 선택 기능·마케팅을 구분하세요.
탈퇴 버튼을 누른 뒤 인증 계정만 지우면 개인정보가 댓글·파일·로그·외부 서비스에 남을 수 있습니다. 데이터가 생기는 순간부터 보관과 삭제 경로를 함께 설계하세요.