바이브코딩 25

바이브코딩으로 워드프레스 테마 만들기

워드프레스로 이전하자기존 블로그는 프로그래밍 중심이었으나, 개인일상사를 포스팅하던 다른 계정과 합치면서 블로그의 성격이 모호해졌습니다.그래서, 고민 끝에 일부 카테고리(라이프로그, 여행, 북리뷰)를 워드프레스로 옮기기로 했습니다.제미나이로 워드프레스 테마 만들기처음엔 티스토리 스킨을 포팅하면 되지 않을까 하고 제미나이에게 현재 쓰고 있는 스킨 파일을 던져주고 워드프레스 테마를 만들어달라고 했는데 생각보다 잘 못만들더군요.(요새 제미나이가 멍청해졌다는데 잘 못느꼈는데 답답함을 느꼈습니다.)결국, 챗GPT 유료결제하다제미나이도 AI PRO로 사용하고 있었는데, 이상하게 티스토리 스킨은 잘 만들면서 워드프레스 테마는 왜 잘 못만드는지 답답함을 느껴 챗GPT 무료버전에서 시켜봤더니 그럭저럭 잘 만들었습니다.하지..

바이브코딩 2026.09.16

2026-09-16 티스토리 스킨 에디션2 소스 공개(깃허브)

1. 💜 에디션2 무료 스킨 소스 공개! 💜현 블로그에서 사용하고 있는 스킨입니다.기존 Odyseey 스킨을 기반으로 수정된 소스로 바이브코딩을 통해 생성되었습니다.2. 특징📰 신문/뉴스 포털형 최신글 5개 헤드라인 레이아웃🏆 포스팅 본문 우측 카테고리 최신글 10개 랭킹 위젯깔끔한 타이포그래피: 본문에는 가독성이 뛰어난 Pretendard, 제목에는 단정한 세리프(Noto Serif KR) 폰트 적용개선된 목록 레이아웃: PC 환경 4열 포스터 그리드 및 모바일 최적화 레이아웃Mermaid 다이어그램 지원3. 사용방법⚠️ 반드시 odyssey 스킨을 먼저 설정해야 합니다.블로그관리홈 > 꾸미기 > 스킨 편집 > HTML 편집에서 붙여넣기4. 💾 소스 다운로드수시로 업데이트될 수 있어 깃허브에 ..

티스토리 스킨 소스 공개 (깃허브)

1. 💜 무료 스킨 소스 공개! 💜현 블로그에서 사용하고 있는 스킨입니다.기존 Odyseey 스킨을 기반으로 수정된 소스로 바이브코딩을 통해 생성되었습니다.2. 특징깔끔한 타이포그래피: 본문에는 가독성이 뛰어난 Pretendard, 제목에는 단정한 세리프(Noto Serif KR) 폰트 적용개선된 목록 레이아웃: PC 환경 4열 포스터 그리드 및 모바일 최적화 레이아웃Mermaid 다이어그램 지원3. 사용방법⚠️ 반드시 odyssey 스킨을 먼저 설정해야 합니다.블로그관리홈 > 꾸미기 > 스킨 편집 > HTML 편집에서 붙여넣기4. 💾 소스 다운로드수시로 업데이트될 수 있어 깃허브에 공개하였습니다.https://github.com/ethanjoh/tistory_skin GitHub - ethanjo..

PDF Summary: 스캔한 PDF 도서 자동 요약 및 서평 생성 프로그램

1. 개발 배경서재 공간을 확보하기 위해 소장 중이던 종이책을 북스캐너(ScanSnap)로 직접 스캔하여 PDF로 보관해 왔습니다. 그러나 시간이 지나면서 각 도서의 주요 내용이 기억나지 않는 문제가 발생했습니다.이러한 문제를 해결하고자, 대량의 PDF 도서를 자동으로 분석·요약하고 고품질 서평 마크다운 문서로 만들어 주는 PDF Summary 프로그램을 개발하게 되었습니다.2. 주요 기능 및 특징⚡ 로컬 초고속 마크다운 추출, 텍스트 캐싱 및 저비용 AI 분석:pymupdf4llm 기반으로 PDF의 제목, 본문, 표, 서식을 로컬에서 즉시 마크다운으로 추출 (불필요한 이미지 파싱 연산 생략 최적화로 고속 파싱)이미 {도서명}_source.md 파일이 존재하는 경우 PDF 추출을 건너뛰고 기존 파일을 즉..

바이브코딩 2026.09.01

클래식 VRML 기술을 현대적 Three.js 기술로 복원하기

과거 웹 상에서 3차원을 구현하기 위해서 VRML(Virtual Reality Modeling Language) 이라는 언어를 사용한 적이 있다.원뿔을 구현한다고 생각해 보자. 아래와 같이 정의하면 웹브라우저의 플러그인 프로그램에서 해석하고 화면에 뿌려준다.그러면 아래와 같은 모형이 그려지며 X, Y, Z 축 어느 방향으로도 네이게이션이 가능하고 카메라의 이동도 가능하기 때문에 Z축 즉 앞뒤로 깊이감을 줌으로써 3차원의 느낌을 준다. Cone { field SFFloat bottomRadius 1 field SFFloat height 2 field SFBool side TRUE field SFBool bottom TRUE} 이 3D 모형을..

바이브코딩 2026.07.16

티스토리 자동 포스팅 프로그램 다운받기

1. 준비물티스토리 다른 계정을 컨텐츠를 먼저 백업받습니다.깃허브에서 리포지토리를 클론하거나, zip 파일로 다운받습니다.2. 사용방법how_to_run.md 파일을 참고합니다.3. 주의사항하루에 다량의 글을 등록하면 일일 리밋이 걸릴 수 있습니다.따라서, 하루 5개 정도만 등록하는 것을 추천합니다.티스토리 자체의 글 발행 프로세스가 변동될 경우 작동을 하지 않을 수 있습니다. https://github.com/ethanjoh/tistory_auto_posting

바이브코딩 2026.07.15

티스토리 자동 포스팅 프로그램 제작 동기

1. 여러 계정의 블로그 통합 필요2개의 계정에서 티스토리 블로그를 각각 운영하고 있었는데 관리의 귀차니즘하나의 블로그로 통합 필요불필요한거 삭제하고 약 150개 정도 등록 필요2. 블로그 백업티스토리는 백업하면 각 폴더 안에 글 내용이 적힌 html과 이미지 폴더가 각각 생성3. 문제점그러나, 어느 순간 글 저장 시 보안문자캡차가 떠버림완전자동이 아닌 마지막에 이미지 문자를 보고 사람이 입력해야 하는 수고 발생그럼에도 수동으로 등록 시 하나씩 폴더를 열고 사진등록하고...시간 낭비4. 1시간 동안 바이브 코딩을 하다처음엔 티스토리 API가 개방되어 있다고 해서 편하겠구나 했는게 그것도 종료되어버림할 수 없이 제미나이에 물어보니 playwright같은 기능으로 가능하다고 함안티그래비티에 프롬프트 입력 (..

바이브코딩 2026.07.11

야생마 같은 AI를 내 완벽한 비서로 만드는 비결: '하네스 엔지니어링'과 'AI 에이전트 팀'

요즘 ChatGPT, 클로드(Claude) 같은 AI를 업무에 많이들 활용하지만 AI를 쓰다 보면 꼭 이런 답답한 순간이 찾아옵니다."이모티콘 쓰지 말고 표 형식으로 써달라고 어제 말했는데, 왜 오늘 새 대화창을 열니까 또 원래대로 돌아가 있지?" "처음에는 똑똑하게 일하다가 대화가 길어지니까 중요한 규칙을 자꾸 까먹네?" 매번 AI에게 똑같은 규칙을 설명하느라 피곤하셨다면, 오늘 소개해 드릴 하네스 엔지니어링(Harness Engineering)과 AI 에이전트 팀 설계 개념에 주목해 보세요! https://youtu.be/g4fZ_hT1Pfc 1. 하네스 엔지니어링(Harness Engineering)이 뭔가요?가장 알기 쉬운 비유는 **'야생마와 마구(Harness)'**입니다. 현재의 거대..

바이브코딩 2026.07.07

프론트엔드 호스팅 2026 (Vercel vs Netlify vs Cloudflare)

2026.07.06 - [바이브코딩] - 배포와 CI/CD 완벽가이드 배포와 CI/CD 완벽가이드내가 원하는 웹사이트를 만들었는데 다른 사람에게 보여줘야 한다면?웹브라우저에 나와있는 localhost://~ 이 주소를 보내줄건가요?이건 내 컴퓨터에서만 볼 수 있죠. 그래서 이렇게 내가 만든 웹wisdom.me.kr 이전 글에서 내가 만든 프로그램을 배포하기 위한 서비스를 소개한 적 있는데 여기서는 대표적인 3가지 서비스를 비교 분석해보겠습니다. 그에 앞서 전통적인 웹호스팅이나 클라우드 호스팅과 이러한 서비스들이 다른 점은 무엇이고 왜 써야하는지 알아보겠습니다. https://youtu.be/mQqlGK2nn2g 기존의 전통적인 웹호스팅이나 AWS, 오라클 클라우드 같은 인프라 중심(IaaS) 서비..

바이브코딩 2026.07.07

2026년 풀스택 개발자의 정의와 AI '바이브 코딩'으로 1인 앱 개발 정복하기

풀스택 개발자(Full-Stack Developer)란 웹 애플리케이션의 사용자 화면을 담당하는 '프론트엔드'와 눈에 보이지 않는 서버, 비즈니스 로직, 데이터베이스를 처리하는 '백엔드'를 모두 개발할 수 있는 사람을 뜻합니다. 원래 '풀스택 개발'은 웹 서버, 서버사이드 코드, 브라우저와 클라이언트 사이드 코드, 데이터베이스와 운영체제 등 시스템 전반을 아우르는 개발을 의미했으나, 오늘날 국내에서는 프론트엔드와 백엔드 양쪽을 넘나들며 시스템 전체를 연결할 줄 아는 멀티플레이어 개발자를 지칭하는 용어로 흔히 쓰이고 있습니다. https://youtu.be/T6lXPP9tkHs 웹 개발 생태계에서 가장 주목받는 변화는 바로 견고했던 '프론트엔드'와 '백엔드'의 경계가 빠르게 허물어지고 있다는 점입니다..

바이브코딩 2026.07.06

바이브 코딩 PRD와 TRD

최근 IT 업계와 1인 창업 생태계에서 가장 뜨거운 화두는 단연 **'바이브 코딩(Vibe Coding)'**입니다. 코드를 직접 한 줄 한 줄 타이핑하는 대신, AI에게 내 비전과 목적을 전달하여 코드가 스스로 생성되도록 통제하는 개발 방식이죠. 하지만 많은 이들이 이 놀라운 도구를 쥐고도 실패를 경험합니다. "AI한테 홈페이지를 만들어 달라고 했는데, 결과물이 완전히 엉뚱하게 나와요"라는 탄식이 도처에서 들립니다. 이유는 단순합니다. **"입력 품질이 출력 품질을 결정한다(Garbage In, Garbage Out)"**는 원칙 때문입니다. AI 코딩 시대에 기획의 가치는 소멸한 것이 아니라, 오히려 성공과 실패를 가르는 절대적인 열쇠로 부각되고 있습니다. 이번 글에서는 서비스 기획부터 배포까지 AI..

바이브코딩 2026.07.06

#2 PHP를 통한 REST API 구현 예제

2026.07.06 - [바이브코딩] - #1 REST API란? 앞서 REST API가 무엇인지 알아보았는데 실제로 PHP를 통해 어떻게 구현하는지 간단한 사례를 보겠습니다.server.php와 client.php 2개의 파일을 미리 만들고 구글 안티그래비티에서 실행하도록 시켜봤습니다. 작업을 시키면 안티그래비티에서 로컬 서버를 띄우고, 브라우저 상에서 테스트를 하고 스크린샷까지 찍어서 보고서를 만들어줍니다. 구동방법은 터미널을 열고 php -S localhost:8000 server.php 를 입력합니다. 1, "name" => "아메리카노", "price" => 3000], ["id" => 2, "name" => "카페라떼", "price" => 3500] ]; // JSO..

바이브코딩 2026.07.06

#1 REST API란?

현대 웹개발에서 REST API 사용은 필수라고 이야기합니다.REST API는 무엇이고 왜 써야하는지 알아보겠습니다. https://youtu.be/5Z0PI5j_kxs?si=XURX-yJMJhKaBKLK REST API(Representational State Transfer API)는 웹의 창시자 중 한 명인 로이 필딩(Roy Fielding) 박사가 2000년 그의 박사 학위 논문에서 제시한 인터넷 지향 소프트웨어 아키텍처 스타일이자 설계 원칙입니다.쉽게 말해, 두 개의 서로 다른 소프트웨어가 웹의 통신 규약인 **HTTP(Hypertext Transfer Protocol)**를 활용하여 가장 효율적이고 직관적으로 데이터를 주고받을 수 있도록 정의한 약속이자 규칙 모음입니다.REST API를 ..

바이브코딩 2026.07.06
반응형

최근 댓글

Total

  • Today :
  • Yesterday :