본문 바로가기
반응형

전체 글59

웹앱은 어떻게 동작할까? 프론트엔드와 백엔드를 이해하면 개발이 쉬워진다 웹앱을 처음 만들기 시작하면 가장 많이 듣는 단어가 있습니다. 바로 프론트엔드, 백엔드, 그리고 API입니다.저도 처음 AI와 함께 웹앱을 만들기 시작했을 때는 이 단어들이 어렵게 느껴졌습니다. ChatGPT나 Claude가 코드를 만들어 주는데도, 막상 오류가 발생하면 어디를 수정해야 하는지 알 수 없었습니다.며칠 동안 직접 만들고 수정하는 과정을 반복하면서 한 가지를 깨달았습니다.웹앱은 하나의 프로그램이 아니라 여러 역할이 동시에 움직이는 구조라는 점입니다.오늘은 실제 웹앱을 만들면서 가장 먼저 이해해야 하는 '큰 그림'을 이야기해 보려고 합니다. 웹앱은 화면 하나로 만들어지지 않는다쇼핑몰에서 상품을 주문한다고 생각해 보겠습니다.상품을 장바구니에 담고 결제를 완료하면 주문 내역이 저장됩니다.몇 시간 .. 2026. 7. 21.
바이브 코딩(Vibe Coding)이란? AI가 개발의 방식을 바꾸고 있는 이유 "AI가 코드를 대신 써주는 시대가 왔다."최근 몇 년 동안 가장 많이 들리는 이야기 중 하나입니다. 하지만 정말 중요한 변화는 AI가 코드를 작성한다는 사실이 아닙니다. 더 큰 변화는 사람이 프로그램을 만드는 방식 자체가 달라지고 있다는 것입니다.이러한 변화를 설명하는 키워드가 바로 바이브 코딩(Vibe Coding)입니다. 개발은 원래 '생각보다 훨씬 어려운 일'이었다우리는 매일 수십 개의 앱과 웹사이트를 사용합니다.쇼핑몰에서 상품을 주문하고, 은행 앱으로 송금하며, 메신저로 대화를 나누는 일이 너무 자연스럽습니다. 하지만 이런 서비스를 하나 만들기 위해서는 생각보다 많은 기술이 필요합니다.예전에는 간단한 웹 서비스 하나를 만들기 위해서도 HTML과 CSS를 배우는 것에서 시작해 JavaScript,.. 2026. 7. 20.
AI 웹앱 제작기 | 왜 Supabase를 선택했을까? 비개발자의 실제 경험 AI 웹앱을 만들기 위해 Supabase를 선택한 이유와 실제 사용 경험을 정리했습니다.비개발자의 입장에서 데이터베이스, 회원가입, 로그인, Storage, RLS까지 경험하며 느낀 장점과 어려움을 소개합니다. 프로그램보다 데이터가 먼저였습니다.웹앱을 만들기 시작했을 때 가장 먼저 고민했던 것은 화면 디자인도 아니었고, 코드를 어떻게 작성할지도 아니었습니다."이 데이터를 어디에 저장하지?"라는 질문이 가장 먼저 떠올랐습니다.엑셀에서는 모든 데이터가 파일 안에 있었습니다.작업을 등록하면 엑셀에 저장했고, 수정도 엑셀에서 했습니다.하지만 웹앱은 달랐습니다.브라우저를 닫아도 데이터가 남아 있어야 했고, 다른 컴퓨터에서도 같은 정보를 볼 수 있어야 했습니다.그 순간 처음으로 데이터베이스라는 개념을 진지하게 .. 2026. 7. 14.
ChatGPT에게 일을 잘 시키는 방법, 질문 하나 바꿨을 뿐인데 결과가 달라졌습니다 ChatGPT를 오래 사용할수록 프롬프트보다 중요한 것이 보였습니다.처음 ChatGPT를 사용했을 때는 좋은 프롬프트만 있으면 원하는 결과를 얻을 수 있다고 생각했습니다.인터넷에는 '최고의 프롬프트', '만능 프롬프트' 같은 글이 정말 많았습니다.저도 그대로 따라 해봤습니다.하지만 시간이 지날수록 이상한 점이 보였습니다.같은 프롬프트를 사용해도 원하는 답이 나오는 날이 있는가 하면, 전혀 다른 결과가 나오는 경우도 있었습니다.특히 AI를 활용해 업무용 웹앱을 만들기 시작하면서 그 차이는 더 크게 느껴졌습니다.그때 깨달은 것이 하나 있습니다.좋은 프롬프트보다 더 중요한 것은 '질문하는 방법'이었습니다.처음에는 AI에게 너무 적게 설명했습니다.웹앱을 만들기 시작했을 때 저는 ChatGPT에게 이렇게 질문했습.. 2026. 7. 13.
AI 웹앱 제작기 ② | ChatGPT만으로는 부족했습니다. Claude를 함께 사용한 이유 ChatGPT만으로는 부족했습니다.웹앱을 만들기 시작했을 때는 모든 작업을 ChatGPT 하나로 해결할 수 있을 거라고 생각했습니다.기획도 가능했고, HTML과 CSS도 만들어줬으며 JavaScript 코드도 작성해 주었습니다. 처음에는 정말 신기했습니다.하지만 프로젝트 규모가 커질수록 조금씩 한계를 느끼기 시작했습니다.코드가 길어질수록 원하는 부분만 수정하는 것이 어려워졌고, 이전에 수정했던 내용이 다시 원래대로 돌아가는 경우도 있었습니다.한 가지 오류를 해결하면 다른 부분에서 새로운 문제가 생기는 일도 자주 발생했습니다.처음에는 AI가 틀렸다고 생각했습니다.하지만 시간이 지나면서 문제는 AI보다 제가 프로젝트를 관리하는 방식에 있다는 것을 알게 됐습니다.AI는 현재 상황을 정확하게 이해해야 좋은 결과.. 2026. 7. 12.
AI 웹앱 제작기 ①엑셀 업무 자동화를 위해 AI 웹앱을 만들었습니다 반복되는 엑셀 업무와 수기 관리에 지쳐 AI를 활용한 업무용 웹앱을 직접 만들었습니다.개발 경험이 없었던 제가 ChatGPT와 Claude를 이용해 업무 자동화를 시작하게 된 과정과 실제 변화, 느낀 점을 자세히 소개합니다. 엑셀은 편했지만 오래 사용할수록 불편했습니다.처음부터 웹앱을 만들겠다는 생각은 하지 않았습니다.오히려 저는 엑셀이 가장 익숙했습니다.쇼핑몰 업무를 하면서 외주 작업을 관리할 때도 엑셀을 사용했고, 필요한 내용을 직접 입력하거나 수정하면서 업무를 진행했습니다.엑셀은 누구나 사용할 수 있고, 별도의 프로그램을 만들 필요도 없습니다.처음에는 이것만으로 충분하다고 생각했습니다.하지만 시간이 지날수록 엑셀은 점점 불편해지기 시작했습니다.파일은 계속 늘어났고, 수정해야 할 내용도 많아졌습니다... 2026. 7. 9.
새출발기금 신청자격 및 방법, 우대감면 확인하기 경제적 어려움을 겪고 채무상환이 어려운 소상공인과 부실차주를 위한 새출발기금!대출 상환기간을 늘려주고 금리부담을 낮추거나 원금조정이 가능한 새출발기금의 신청자격과 신청방법, 우대감면대상자에 대해 자세히 알아보겠습니다. 새출발기금 새출발기금은 금융권 대출에 대해 대출 상환 기간을 연장하고, 금리 부담을 낮추며, 부실차주의 경우 원금 조정을 통해 채무 조정을 도와주는 금융 프로그램입니다.  주로 경제적 어려움을 겪고 있는 소상공인 및 개인사업자를 지원하며, 채무 부담을 줄여주는 역할을 합니다. 새출발기금 지원내용 새출발기금의 지원내용은 크게 대출 지원과 채무 조정으로 나뉩니다.대출 지원사업 관련 대출 및 가계대출에 대해 최대 15억원까지 지원 가능 (담보 10억원, 무담보 5억원)단, 매입에 하자가 있거나 .. 2024. 9. 13.
하나은행 자선축구대회 유니폼, 임영웅 유니폼 구매 방법 임영웅이 직접 유니폼 디자인에 참여한 하나은행 자선축구대회 유니폼이 판매됩니다!임영웅 팀의 팀 히어로 풋볼 저지와 기성용 팀의 캡틴 키 풋볼 저지!! 구매방법과 무료 마킹 일정까지 알아보겠습니다! 임영웅 축구 유니폼 구매 방법 이번 10월 12일(토) 오후 7시에 대전월드컵경기장에서 열리는 하나은행 자선축구대회의스페셜 유니폼이 출시됩니다!!푸마 온라인몰에서 구입이 가능하며, 팀 유니폼 구매 고객 대상으로 참가선수 이름과 등번호를 무료로 마킹할 수 있는 프로모션도 진행합니다!! 임영웅 축구 유니폼 구매상품 : 하나은행 자선축구대회 스페셜 유니폼판매시작일 : 2024.09.13(금)구매처 : 푸마 공식 온라인몰(바로가기)무료 마킹 프로모션 : 09.13(금) ~ 09.25(수), 팀 유니폼 구매 고객 대상 .. 2024. 9. 12.
하나은행 자선축구대회 생중계!! 10월 12일(토) 오후 7시에 대전월드컵 경기장에서 열리는 하나은행 자선축구대회!!티켓팅 방법 및 일정과 생중계로 보는 방법을 자세히 알아보겠습니다!! 하나은행 자선축구대회 생중계 10월 12일 대전월드컵 경기장에 미처 가지 못하는 분들은 생중계로 함께하실 수 있는데요,쿠팡플레이에서 독점 생중계이니 꼭 확인하시기 바랍니다! 생중계 일정2024.10.12(토) 오후 8시쿠팡플레이 독점 생중계  티켓팅 일정하나은행 자선축구대회 티켓팅 일정이 공개되었습니다! 2024.09.20(금) 오후 8시쿠팡플레이 모바일 앱쿠팡 와우회원만 예매가 가능하며, 쿠팡플레이 앱에서만 예매하실 수 있습니다.쿠팡플레이 PC버전 에서는 예매가 불가하니 꼭 앱으로 신청하세요!!  티켓팅 일정과 방법, 생중계 시청방법을 알아보았습니다!.. 2024. 9. 12.
반응형

티스토리툴바