글 목록

Cloudflare Pages로 pages.dev 무료 도메인 배포하기 — Workers 화면에 낚이지 않는 법

Create application을 누르면 Pages가 아니라 Worker 생성 화면이 뜬다. 숨어 있는 Pages 진입점을 찾아 Next.js 정적 사이트를 무료 도메인에 올린 전 과정

결제 팝업 없는 아이 전용 놀이터를 직접 만들었다 — 웹으로 키오스크 모드 구현하기

오래된 맥북을 아이 전용 기기로 만들려고 웹 앱을 직접 짰다. 전체화면 진입, 부모 잠금, 시간 제한을 브라우저 API만으로 구현한 기록

드디어 Fable 5 끝났다 — 새벽 3시에 갑자기 사라진 모델

Pro 요금제에서 잘 쓰던 Fable 5가 어느 날 새벽 크레딧 요구 메시지와 함께 사용량 목록에서 통째로 사라진 이야기

Obsidian 모바일 Git 동기화가 너무 힘들어서, 메모 앱을 직접 만들었다 (RepoNote 개발기)

Obsidian 모바일에서 Git 연결이 복잡하고 충돌 해결이 어려워, GitHub 저장소와 자동 동기화되는 Flutter 메모 앱을 직접 만든 과정 — React Native로 먼저 만들었다 갈아엎은 이야기까지

YouTube 링크만으로 영상 편집하기 — Next.js + FastAPI + yt-dlp + FFmpeg 개발기

유튜브 링크를 붙여넣고 원하는 구간만 골라 하나의 MP4로 합치는 개인용 웹 편집기를 만들면서 배운 것들

Fable 5 롤러코스터 — 막히고, 끝난 줄 알았는데, 연장까지

미국 정부 요청으로 막혔던 Fable 5, 종량제 전환 소식에 마지막 날까지 미친 듯이 쓰고, 끝난 줄 알았더니 연장까지 — 한 달간의 기록

ChatGPT 무료 크래딧 $100 줌.

ChatGPT 무료 크래딧 줌.

혼자 SaaS 결제 붙이기 — Stripe로 시작해서 Paddle로 끝난 이야기

매치다에 Stripe 구독 결제를 완성한 지 나흘 만에 계정 국가 문제로 전면 재작업이 필요했던 사연과, Paddle(Merchant of Record)로 전환하며 얻은 기술적 교훈을 한 편으로 정리

AI 코딩 어시스턴트로 처방전 위변조 검증 블록체인 만들어보기 (스마트 계약부터 웹 UI까지)

Solidity 스마트 계약으로 처방전 해시를 온체인에 기록하고, 로컬 데모부터 Sepolia 테스트넷 배포, 웹 UI까지 하루 만에 붙여본 기록

카세트 앱에 유튜브 링크를 붙이려다가 — WebView 브릿지와 씨름한 기록

친구와 테이프를 만들어 주고받던 추억을 다시 만들고 싶어서, 스킵 없는 레트로 카세트 뮤직 플레이어에 유튜브 링크 추가와 테이프 공유 기능을 붙이며 react-native-youtube-iframe의 postMessage 브릿지 유실 버그와 FF/REW seek 레이스 컨디션을 실기기 로그로 잡아낸 과정

Claude Code가 매번 물어보지 않게 하려면 -- dangerously-skip-permissions 파헤치기

Claude Code의 --dangerously-skip-permissions 플래그가 뭘 하는지, 왜 위험한지, 그리고 안 물어보게 하면서도 안전하게 쓰는 대안까지 직접 써보고 정리했다

[픽셀 마을 1편] 블로그 안에 RPG 마을 만들기 — Three.js 2D 탑다운 세팅

Next.js 블로그에 Three.js OrthographicCamera로 90년대 RPG 스타일 탑다운 마을을 만드는 첫 단계. 키보드 이동, AABB 충돌, 카메라 추적까지

[픽셀 마을 2편] 이미지 파일 없이 코드로 픽셀아트 그리기

ASCII 문자열로 스프라이트를 정의하고 캔버스에 그려 Three.js 텍스처로 쓰는 방법. NearestFilter, 3×5 픽셀 폰트, Y-소팅까지

[픽셀 마을 3편] 도서관 문을 열다 — 씬 전환과 블로그 데이터 연동

건물 진입 페이드 전환, 무한 왕복 루프 방지, 그리고 도서관 책장에 실제 블로그 포스트를 태그 기반으로 꽂는 과정

[픽셀 마을 4편] 방명록이 나무로 자란다 — GitHub JSON 저장소와 288가지 표정

돌바위에 글을 쓰면 잔디밭에 표정 있는 나무가 심어지는 방명록 이스터에그. DB 없이 GitHub 커밋으로 저장하고, 스팸을 막고, 나무마다 랜덤 얼굴을 그린 과정

홈 화면에 게임 오버레이 띄우기 — 매번 뜨면 성가시니까 세션당 1회

블로그 홈 첫 진입에 픽셀 게임을 전체 화면으로 보여주되, sessionStorage로 재방문자를 성가시게 하지 않는 방법. 그리고 X 버튼이 Nav에 가려졌던 스태킹 컨텍스트 버그

블로그 발행을 자동화해보자 (10) 남의 계정에 로그인해야 할 때 — Browserbase를 고른 이유와 실제 사용법

비밀번호를 한 번도 안 거치고 남의 티스토리/네이버 계정을 연동하는 방법으로 Browserbase를 선택한 이유와, 세션 생성부터 로그인 감지까지 실제 연동 코드

블로그 발행을 자동화해보자 (8) 상업화 코드 하나 배포했다가 자동 발행이 조용히 죽을 뻔한 이야기

개인 도구를 월 구독제 SaaS로 바꾸는 멀티테넌트 전환 작업 중, 배포 한 번으로 매일 자동 발행이 아무도 모르게 멈출 뻔한 사고와 복구 과정

블로그 발행을 자동화해보자 (9) <dialog open>은 모달이 아니다 — 그리고 안 보이던 배포 주소

네이티브 dialog 태그가 open 속성만으로는 진짜 모달이 되지 않는 이유와, 같은 프로젝트인데 다른 URL에서는 옛날 화면이 보이던 배포 별칭 문제

딥러닝·빅데이터로 취업하기 — 개발자 출신이 6개월 안에 잡아야 할 것들

강의 완주보다 포트폴리오가 먼저다. 취업·이직을 목표로 한 딥러닝 빅데이터 학습 로드맵을 직무별로 정리했다

같은 서비스 안에 이력서를 잘 쓰는 AI와 덜 잘 쓰는 AI가 따로 있었다

사용자의 은근한 품질 비교 피드백을 따라가다 발견한 이력서 생성 API 중복 구현을 RAG·프롬프트 이식으로 통일하고, 중복 버튼을 정리한 기록

나만의 로컬 LLM 만들기 — Sonnet급 모델을 내 Mac에서 돌리는 현실적인 방법

개인이 LLM을 직접 만들 수 있을까? 오픈 웨이트 모델 실행부터 RAG, LoRA 파인튜닝, nanoGPT 학습까지 현실적인 선택지를 정리했다

분명 DB엔 저장됐는데 화면엔 안 보인다 — useState 초기값이 파놓은 함정

드래그 앤 드롭을 위해 서버 데이터를 로컬 state로 복사해 쓰던 컴포넌트가, 이후 서버가 새 데이터를 내려줘도 그걸 무시하던 React 흔한 버그를 추적하고 고친 기록

Search Console 색인 제외 리포트, 다 고쳐야 하는 건 아니다

다국어 Next.js 블로그의 색인 제외 7가지 항목을 하나씩 진단해 고칠 것과 놔둘 것을 구분한 기록

AI에게 "너가 구직자라고 생각하고 써봐"라고 시켰더니 진짜 버그를 잡아냈다

헤드리스 브라우저로 가상의 구직자 페르소나를 만들어 회원가입부터 RAG 맞춤 이력서 생성까지 직접 구동시키고, 그 과정에서 발견한 AI 사실 날조 버그를 고친 기록

ImprovMX로 support@내도메인.com 이메일 무료로 받기

유료 메일함 없이 커스텀 도메인 이메일을 개인 Gmail로 포워딩하고 그 주소로 발신까지 하는 ImprovMX 설정법

워크스페이스 업그레이드 ①: 칸반 카드에서 회사명이 잘려 보이던 문제

상태 드롭다운과 회사명이 한 줄에서 자리를 다투던 칸반 카드 레이아웃을, 상태 배지를 아래 줄로 내려 해결한 기록

워크스페이스 업그레이드 ②: "AI 분석" 버튼이 실제로 이력서를 써주게 만들기

채용공고와 이력서를 비교만 하던 버튼을, 공고에 맞춰 이력서를 직접 재작성하는 기능으로 바꾸고 2단계(분석→번역) 플로우로 재설계한 기록

워크스페이스 업그레이드 ③: 영문 이력서에 한글 이름이 나오던 버그와 연락처 필드 추가

영어 번역 프롬프트 규칙 하나가 만든 한글 이름 노출 버그를 고치고, 이력서 연락처 줄에 전화번호·포트폴리오 링크를 편집 가능하게 추가한 기록

워크스페이스 업그레이드 ④: dnd-kit으로 칸반 카드 드래그 앤 드롭 붙이기

이미 설치만 돼 있던 dnd-kit을 활용해 칸반 카드를 컬럼 간 드래그로 옮기면 지원 상태가 바뀌도록 구현하고, 클릭과 드래그가 충돌하지 않게 만든 기록

카톡으로 받은 스크린샷 3장이 서비스 전역의 숨은 버그를 찾아줬다

실기기 모바일 캡처로 받은 작은 UI 버그 리포트를 따라가다가, Claude의 thinking 응답 처리 방식이 20군데에서 잘못돼 있던 근본 버그를 발견하고 고친 기록

Paddle Domain Review: 매치다(Typeform 설문) 답변 가이드

saas 결제 시스템 Stripe 대신 Paddle.. Paddle 설문 답변 가이드

블로그 발행을 자동화해보자 - 티스토리·네이버용 개인 자동화 플랫폼 만들기 (1) 전체 구조 설계

주제만 등록하면 AI가 초안을 쓰고 브라우저 자동화로 발행까지 해주는 개인용 블로그 자동화 도구를 처음부터 설계한 이야기

블로그 발행을 자동화해보자 (2) Claude API로 내 스타일 그대로 초안 자동 생성하기

스타일 가이드 문서 하나로 Claude API가 매번 내 말투대로 블로그 초안을 쓰게 만든 방법과 API 키 없이도 돌아가게 만든 우회 경로

블로그 발행을 자동화해보자 (3) Playwright로 티스토리 자동 발행하기 - 세 번 실패한 이야기

티스토리 로그인 세션이 자꾸 사라지던 문제와 마크다운 에디터 셀렉터를 잘못 잡아 발행이 안 되던 문제를 실제로 고쳐가며 정리

블로그 발행을 자동화해보자 (4) 프레임워크 없이 로컬 웹 대시보드 만들기

Node.js 내장 http 모듈만으로 주제 등록, 초안 검토, 발행까지 처리하는 로컬 대시보드를 만들고 클라우드 배포를 하지 않은 이유

블로그 발행을 자동화해보자 (5) 로컬 도구를 클라우드로 - Vercel Blob이 배신했다

로컬 대시보드로 충분하다고 결론 냈던 도구를 결국 Vercel에 올리면서 겪은 이야기와, Vercel Blob의 최종 일관성 문제로 Upstash Redis로 갈아탄 과정

블로그 발행을 자동화해보자 (6) 제목만 올라가고 본문이 사라진 이유 - CodeMirror가 숨긴 함정

발행 로그도 정상, RSS 제목도 정상인데 실제 글 본문이 계속 비어 있던 문제를 CodeMirror와 React 상태 동기화 관점에서 추적하고 고친 과정

블로그 발행을 자동화해보자 (7) 자동 발행 글에 카테고리 지정하기

발행 글마다 카테고리 없이 올라가던 문제를 해결하기 위해 티스토리 카테고리 선택 드롭다운의 실제 구조를 뜯어보고 자동 선택 로직을 붙인 과정

매치다 안전하게 만들기 ①: "보안 문제 없는지 확인해줘" 한 마디로 시작한 진단

서비스 전체를 훑어보다 발견한 인증 누락, 크로스유저 삭제 버그, 공개 리포에 박힌 평문 비밀번호를 정리한 보안 점검 기록

매치다 안전하게 만들기 ②: git-filter-repo로 히스토리에서 비밀번호 완전히 없애기

공개 GitHub 리포에 박힌 평문 비밀번호를 git-filter-repo로 전체 커밋 히스토리에서 치환하고 force-push까지 진행한 기록

매치다 안전하게 만들기 ③: 마이그레이션 15개를 하나의 schema.sql로 합치고 검증하기

Supabase 마이그레이션 파일이 파편화된 상태를 단일 스키마 파일로 통합하고, PostgREST API로 실제 운영 DB와 컬럼 단위 자동 대조 검증까지 진행한 기록

매치다 안전하게 만들기 ④: 이력서 공개 공유 링크로 바이럴 루프 설계하기

로그인 없이 열람 가능한 이력서 공유 페이지(/r/slug)를 개인정보 보호와 검색엔진 색인 차단까지 고려해 구현한 기록

매치다 안전하게 만들기 ⑤: 학력이 1개만 보이던 버그, 타입 설계가 문제였다

이력서 학력이 항상 1개만 보이던 버그를 추적해 배열이 아닌 단일 객체로 설계된 타입이 원인이었음을 찾고 고친 기록

토큰을 줄이는 방향으로 다시 돌아오는 이유

AI는 결국 인간의 속도에 따라간다.

클로드 Fable 5: 18 일 중단 후 재개, 한국시간 7 월 8 일 오후 3 시 59 분까지 “크레딧 무료” 기간 – 코드 생성 전략까지

클로그 Fable 5 사용재계, 그리고 앞으로 사용법

AI 코딩 어시스턴트와 SaaS 만들기 ⑩: 비밀번호 찾기부터 눈 아이콘까지 — 인증 UX 마감 작업

Supabase가 "일부러 성공처럼" 응답하는 기가입 signUp의 정체(identities 빈 배열), open redirect를 한 줄로 막는 next 파라미터 설계, 그리고 2편 데이터 유실 사고의 원인이었던 admin API 함정을 이번엔 알고 피해간 이야기

AI 코딩 어시스턴트와 SaaS 만들기 ⑪: "Confirm your signup"은 너무 심심하다 — 브랜드 이메일과 Resend SMTP

table 레이아웃과 인라인 스타일로 돌아간 이메일 HTML 2종, dig로 발견한 뜻밖의 Mailgun MX 레코드, 발송 전용 restricted key의 401 소동 — Supabase 기본 인증 메일을 브랜드 메일로 바꾸고 Resend SMTP를 연결한 설정 협업기

AI 코딩 어시스턴트와 SaaS 만들기 ⑫: support@matchda.com은 어디로 가는가 — 도메인 이메일 수신 구축기

dig가 폭로한 죽은 Mailgun MX, "아...mailgun 없고...유료네.."의 반전, 코드 0줄로 끝낸 ImprovMX 포워딩 — 정책 문서에만 존재하던 support@matchda.com을 진짜 받아지는 주소로 만든 인프라 탐정극

AI 코딩 어시스턴트와 SaaS 만들기 ①: URL 구조부터 다시 잡은 이야기

MatchDa 서비스의 뒤죽박죽이던 URL 구조를 정리하고, 사용자 피드백 한 마디로 잡 탐색과 지원 현황의 플로우를 다시 설계한 과정

AI 코딩 어시스턴트와 SaaS 만들기 ②: AI가 내 계정을 삭제했던 날

Supabase admin API의 숨겨진 필터 버그로 AI 코딩 어시스턴트가 실제 사용자 계정을 삭제한 사고와, 그 이후 세운 DB 안전 규칙

AI 코딩 어시스턴트와 SaaS 만들기 ③: 임베딩 없이 만든 RAG 맞춤 이력서

이력서 파일 업로드 자동 분석부터, 별도 인프라 없이 키워드 오버랩만으로 구현한 RAG 맞춤 이력서, 서식이 살아있는 DOCX/PDF 다운로드까지

AI 코딩 어시스턴트와 SaaS 만들기 ④: 원클릭 수집, 챗봇, 그리고 첫 유료화

공개 ATS API로 검증한 대기업 채용공고 원클릭 수집, 사용법만 안내하는 고객센터 챗봇, Stripe 구독 결제로 무료 SaaS를 유료화하기까지

AI 코딩 어시스턴트와 SaaS 만들기 ⑥: 로고 불일치, 공고 171건 관리, 그리고 Ctrl+A 붙여넣기 분석

파비콘과 인앱 로고가 서로 달랐던 브랜드 불일치 정리, 수집 공고가 171건으로 불어나며 생긴 관리 문제(편집 모드·미채점 필터), 스크래핑이 실패하는 사이트를 위한 공고 전문 붙여넣기 AI 분석까지

AI 코딩 어시스턴트와 SaaS 만들기 ⑦: 디자인 핸드오프 파일을 랜딩 페이지 데모 쇼케이스로

히어로와 기능 카드뿐이던 랜딩에 실제 제품 화면을 재현한 데모 쇼케이스 3종(이력서 번역·잡 탐색·지원 현황 칸반)을 추가한 과정 — 묵혀둔 디자인 핸드오프 파일이 마케팅 자산으로 재활용된 이야기

AI 코딩 어시스턴트와 SaaS 만들기 ⑧: 죽은 링크 없애기 — 랜딩의 모든 클릭이 어딘가로 이어지게

데모 쇼케이스로 그럴듯해진 랜딩을 실제로 클릭해보니 구멍투성이였다 — 히어로 검색을 잡 탐색에 연결하고, 요금제를 비로그인에 공개하고, 서비스 소개 페이지를 신설해 헤더 네비 4개를 전부 살린 과정

AI 코딩 어시스턴트와 SaaS 만들기 ⑨: SaaS의 "어른스러운" 부분 — 설정 페이지와 법적 문서

우상단 아바타를 눌러도 아무 일이 없던 앱에 설정 페이지·비밀번호 변경·약관·개인정보 처리방침·고객센터를 하루에 배선한 과정 — Supabase에 없는 "기존 비밀번호 확인"을 anon 클라이언트 + admin API 2단계로 구현한 패턴 포함

JobRadar를 매치다로 바꾸기까지 — 개인 프로젝트 리브랜딩 이야기

기능 설명형 이름 JobRadar를 매치다(matchda)로 바꾸며 고민한 네이밍 기준과 브랜딩 결정 과정

React 자동완성 칩(Chip) 입력 컴포넌트 직접 만들기 — blur보다 먼저 클릭 잡기

라이브러리 없이 자동완성 칩 입력을 직접 구현하면서 부딪힌 mousedown vs blur 순서 문제, 미커밋 텍스트 유실 방지 같은 디테일 정리

리브랜딩 마이그레이션의 마지막 20% — sed 일괄 치환과 조용히 사라진 온보딩 배너

Tailwind zinc 팔레트를 브랜드 hex 토큰으로 갈아엎으면서 잔여 화면 17개를 정리한 방법과, 새 셸로 갈아타며 온보딩 진입점이 통째로 사라졌던 걸 발견한 이야기

봇 차단에 막힌 채용공고 스크래핑, 3단 폴백으로 뚫기 (직접 fetch → stealth 브라우저 → 리더 프록시 + AI 추출)

Seek의 Kasada 봇 차단 때문에 403만 받던 공고 수집을 r.jina.ai 리더 프록시와 Claude Haiku 구조화 추출로 살려낸 과정과, "차단"과 "만료"를 헷갈려 헤맨 디버깅 기록

AI가 만든 로고를 진짜 파비콘으로 — Next.js 파비콘 제작기

AI가 생성한 로고 이미지를 16/32px 검증부터 favicon.ico 직접 빌드, 색 통일까지 거쳐 Next.js 앱의 진짜 파비콘으로 만든 기록

Jina AI 써보기: 채용 공고를 LLM이 읽게 만들고, 이력서와 매칭하기

URL을 마크다운으로 바꾸는 Reader부터 임베딩·리랭커까지, Jina AI를 matchda 채용 매칭에 쓰려는 이유와 실사용법

디자인 데모를 실제 앱으로 (1) — 두 개의 앱이 공존할 때

예쁜 디자인 데모와 실제 로그인 앱이 따로 노는 상황을 발견하고, 기능 누락 없이 대체하기 위한 인벤토리와 페이즈 계획을 세운 기록

디자인 데모를 실제 앱으로 (2) — 모달 재사용과 라우트 스왑

기존 모달들을 slot 패턴으로 재사용해 per-job 기능을 옮기고, AppChrome 조건부 크롬과 컴포넌트 추출로 로그인 홈을 MatchDa 대시보드로 갈아끼운 기록

디자인 데모를 실제 앱으로 (3) — 앱 셸 통일과 색 톤 일괄 매핑

남은 페이지들을 공통 앱 셸로 감싸 크롬을 통일하고, zinc 색을 브랜드 톤으로 perl 한 방에 일괄 치환하며 만난 함정까지 정리한 기록

GitHub 잔디가 비었을 때, 백데이트 커밋으로 채우는 법 (정직하게)

GIT_AUTHOR_DATE와 GIT_COMMITTER_DATE로 과거 날짜 커밋을 만들어 잔디를 채우는 방법과 잔디로 인정되는 조건 정리

디자인 핸드오프를 진짜 제품으로 (1) — HTML 레퍼런스를 Next.js로 재현하기

커스텀 런타임으로 만든 .dc.html 디자인 핸드오프를 기존 Next.js 코드베이스의 토큰·i18n·폰트·컴포넌트로 픽셀에 가깝게 재현한 기록

디자인 핸드오프를 진짜 제품으로 (2) — 목업을 실데이터로, 그리고 공개 랜딩 승격

목 데이터로 동작하던 MatchDa 화면을 Supabase 실데이터로 연결하고, 디자인 데모 랜딩을 실제 첫 화면으로 승격시키며 모바일 반응형까지 입힌 기록

디자인 핸드오프를 진짜 제품으로 (3) — CTA와 검색을 실제 로그인 퍼널로 연결하기

랜딩의 데모 링크였던 CTA·검색을 Server Actions와 useRouter로 실제 로그인·회원가입 퍼널에 연결하고 useSearchParams를 Suspense로 처리한 기록

디자인 핸드오프를 진짜 제품으로 (4) — Claude로 공고별 이력서 최적화, 그리고 테스트가 잡아낸 버그

영어 이력서를 채용공고에 맞춰 하이라이트·최적화 노트로 분석하는 AI 기능을 Claude로 구현하며 환각 방지와 캐싱을 적용하고, 실제 테스트로 노트 중복 버그를 잡은 기록

링크 복사가 안 되는 채용 사이트, 카드 직접 추가 기능으로 해결하기

URL 스크래핑이 막힌 채용공고를 직접 입력해 카드로 만드는 기능을 Next.js 서버 액션으로 구현한 기록

Next.js App Router 파비콘 제대로 만들기: SVG 모노그램부터 285KB .ico를 2KB로 줄이기까지

기본 Next.js 파비콘을 브랜드 모노그램으로 교체하며 겪은 App Router 아이콘 규약, sharp 렌더링, png-to-ico 용량 함정과 직접 ICO 인코딩 해결기

저녁만 되면 화면이 깨진다? prefers-color-scheme와 Tailwind v4 레이어 함정

OS 자동 다크모드 때문에 배경만 검게 깨지는 버그의 원인과 color-scheme로 라이트 고정하는 해결법

다국어 사이트, URL은 언어별로 따로 둬야 SEO에 유리하다

브라우저 언어로 콘텐츠만 바꾸는 단일 URL 대신 /en/, /ko/처럼 언어별 고유 URL을 둬야 하는 이유와 hreflang·canonical 정리

서비스 이름 바꾸기: 커스텀 도메인 연결과 OAuth 리다이렉트 함정 (Vercel + GoDaddy + Supabase)

JobRadar에서 matchda.com으로 리브랜딩하며 겪은 도메인 구매, Vercel 연결, GoDaddy DNS, Supabase Auth 설정까지 실전 기록

스크래핑을 포기할 줄 아는 것도 실력: Cloudflare + SPA와 싸우다 클릭 폴백으로 착지하기

Canva 채용 페이지 수집을 stealth 브라우저까지 동원해 시도하다 포기하고, 진단 로그로 진짜 원인을 찾아 실용적 폴백으로 마무리한 기록

드래그는 되는데 순서가 안 바뀐다 — 정렬과 수동 정렬을 공존시키기

dnd-kit 드래그가 자동 정렬에 덮어써지던 버그를 잡고, 사용자가 직접 정한 순서를 DB에 저장해 유지하는 과정 정리

커밋하기 전에 한 번 더 막아주는 AI — 서브에이전트로 커밋 검증 자동화하기

하드코딩된 이메일이나 user_id 필터 누락이 커밋에 새어 들어가는 걸 막는 pre-commit-validator 서브에이전트를 만든 과정과 설계 원칙 정리

로컬에선 되는데 서버에선 403 — 채용공고 스크래핑 봇 차단과 싸우기

Akamai 봇 차단으로 간헐적으로 뜨는 403을 재시도와 헤더 보강으로 흡수하고, 실패가 멀쩡한 데이터를 덮어쓰던 버그까지 잡은 기록

매번 번역 API를 부르고 있었다 — 번역 결과를 DB에 캐싱하기

모달을 열 때마다 같은 내용을 다시 번역하던 낭비를 DB 캐싱으로 없애고, 원문이 바뀌면 캐시를 무효화하는 패턴까지 정리

사용자명 하나 바뀌었을 뿐인데 — 하드코딩된 절대경로 추적기

노트북을 바꾸며 macOS 사용자명이 hy에서 hs로 바뀌자 프로젝트 곳곳의 /Users/hy 절대경로를 grep으로 추적해 전부 고친 경험과 교훈

iTerm2에서 Claude Code 화면이 점선으로 깨질 때: CJK 폭 설정과 코딩 폰트

iTerm2에서 가로줄이 점선 대시로 깨지고 한글이 한 글자씩 벌어지던 문제를 Unicode 9 폭 옵션과 D2Coding/Sarasa 폰트로 해결한 기록

iTerm2 메뉴를 한국어로 바꿀 수 있을까? 직접 해본 결론

macOS 앱별 언어 설정으로 iTerm2를 한국어로 바꾸려다 알게 된 현실과, 진짜 문제였던 한글 깨짐의 해법 구분

맥북 바꿀 때 진짜 챙겨야 할 건 코드가 아니라 키값이다

git clone으로는 안 따라오는 서명키·환경변수·인증 정보를 새 맥북으로 안전하게 옮기는 법

맥북에서 파일 경로만 빠르게 복사하는 4가지 방법

macOS에서 파일·폴더의 전체 경로를 앱 설치 없이 복사하는 Option 우클릭, ⌥⌘C 단축키, 터미널 드래그, pbcopy 방법 정리

채팅으로 받은 한국어 답변을 마지막에 한 번에 영어로 — 온보딩 플로우 만들기

가입 직후 사용자 정보를 채팅으로 받고, 완료 시점에 Claude API 한 번으로 영어 번역·구조화해 한/영 양쪽을 저장한 경험

pnpm install이 exit 1로 죽을 때: 빌드 스크립트 승인과 플랫폼별 네이티브 바이너리 함정

Replit(linux-x64)용으로 세팅된 Expo 모노레포를 Apple Silicon 맥으로 옮기다 만난 pnpm install exit 1을 onlyBuiltDependencies와 allowBuilds로 해결한 기록

새 노트북으로 React Native(Expo) 프로젝트 옮겨서 빌드하기 — 내가 만난 4가지 함정

node_modules와 android 폴더를 복사해 온 새 맥에서 RN 앱을 빌드·설치할 때 겪은 JDK·node·Gradle 캐시·런처 문제를 차례로 해결한 기록

새 컴퓨터로 React Native(Expo) 프로젝트 옮기기 — node_modules 빼고 복사한 뒤 환경 복원하기

node_modules 없이 옮긴 Expo 프로젝트를 npm ci로 복원하고 nvm 셸 로드 누락까지 잡아 정상 동작시키는 전 과정

AI가 앱을 '설치'하는 시대에서 '생성'하는 시대로 — AI 네이티브 OS의 구상

핸드폰 OS, 컴퓨터 OS는 이제 앱을 파는 게 아니라, OS 안에서 AI와 함께 필요한 걸 만들어가는 시대가 되고 있다

Admin 글쓰기 slug 자동생성 개선 — DeepL + camelCase + 날짜

한국어 제목에서 slug를 자동 생성할 때 영어 번역, camelCase 변환, 날짜 suffix를 붙이도록 개선한 과정

direnv로 특정 폴더에서만 Claude Code를 다른 계정으로 로그인하기

CLAUDE_CONFIG_DIR과 direnv를 조합해 프로젝트 폴더별로 Claude Code 로그인 계정을 분리하는 방법

내 플레이리스트를 공유한다는 것 — ChainPlay 공유 기능을 만든 이유

ChainPlay에 공유 기능을 넣은 건 단순한 편의 기능이 아니라, 플레이리스트로 서로의 취향을 나누는 문화를 만들고 싶었기 때문

서버 없이 앱 콘텐츠 공유하기 — GitHub Pages + Android 딥링크

ChainPlay 앱에 체인 공유 기능을 추가하면서 서버 없이 GitHub Pages와 딥링크만으로 구현한 과정

DB 없이 공유 기능 만들기 — URL이 너무 길어졌을 때 줄이는 법

서버 없이 base64 링크로 플레이리스트를 공유하다 URL이 1,300자를 넘긴 문제를, 제목을 빼고 videoId만 나열하는 방식으로 266자까지 줄인 과정

DOCX 서식 유지하면서 AI로 맞춤 이력서 만들기 — JSZip + Claude API

JSZip으로 DOCX 내부 XML을 직접 조작해 원본 레이아웃은 그대로 두고 문단 텍스트만 Claude AI가 JD에 맞춰 교체하는 방법

Google Search Console 빨간불 끄기 — Next.js i18n 리디렉션 오류 수정기

찾을 수 없음(404), 리디렉션 오류, 중복 페이지까지 — Search Console 오류를 하나씩 파헤쳐 next.config.ts 몇 줄로 해결한 과정

지원 이력을 코드로 관리한다 — 제출 이력서 저장 + 지원 날짜 자동 기록

Next.js Server Actions와 Supabase로 채용 지원 이력서와 지원 날짜를 공고 카드에 붙여 관리하는 기능을 만든 과정

Google Play 앱 등록 후 IARC 메일이 왔다 — 그냥 넘어가면 된다

IARC Live Rating Notice는 앱 연령 등급이 스토어에 공개됐다는 통보 메일이다. 특별한 조치가 필요 없는 이유

외국 사용자에게 영어 페이지 보여주기 — IP 말고 브라우저 언어로

Next.js 16 proxy.ts에서 Accept-Language 헤더로 언어를 자동 감지하고, 쿠키로 선택을 유지하는 구현 과정

모바일에서 메뉴가 잘린다 — 햄버거 메뉴로 해결하기

Next.js 블로그 네비게이션이 모바일에서 스크롤이 생기는 문제를 햄버거 메뉴로 해결한 과정

Google AdSense "가치 없는 콘텐츠" 거절, 이렇게 뚫었다

단일 기능 툴 사이트가 AdSense에서 계속 가치없는 콘텐츠로 거절당할 때, 페이지 구조와 콘텐츠를 어떻게 보강했는지 실제 경험을 정리

한국어는 생각보다 라는 말을 많이 한다.

생각보다라는 말을 많이 쓰는 한국사람들...

앱 개념어를 바꿨다 — Folder에서 Chain으로, 전면 리네이밍 작업기

ChainPlay 앱에서 Folder 개념을 Chain으로 전면 리네이밍하면서 겪은 과정과 TypeScript 타입 주도 리팩토링 방법

머지한 피처 브랜치, 왜 지워야 할까? — 로컬·원격 삭제 방법 정리

머지 후 피처 브랜치를 삭제해야 하는 이유와 로컬·원격 브랜치 삭제 명령어를 정리

GitHub REST API Rate Limit 때문에 블로그 글 목록이 사라졌다

Next.js 블로그에서 GitHub API Rate Limit을 초과해 글 목록이 사라진 문제를 GraphQL API로 해결한 과정

이미지 10장 올려도 커밋 1개 — GitHub Tree API로 배치 업로드 구현

Next.js 어드민에서 이미지를 여러 장 선택해도 커밋 1개만 생기도록 GitHub Tree API로 개선한 과정

구글 플레이 콘솔 — 비공개 테스트 후 프로덕션 등록하기

비공개 테스트 14일 완료 후 프로덕션 액세스 신청까지 채워야 하는 항목과 실제 답변 정리

구글 플레이 비공개 테스트, 자주 업데이트할수록 승인이 빨라진다

Tilt 게임 버전업을 하면서 느낀 것 — 비공개 테스트 중에는 업데이트 빈도가 심사 통과에 직접 영향을 준다

Android 빌드 파일 정리하는 법 — 디스크 수 GB를 한 방에

안드로이드 프로젝트 빌드 파일이 디스크를 잡아먹을 때, 안전하게 정리하는 방법 총정리

Next.js 다국어 블로그 SEO — Google이 /ko를 무시하는 이유와 두 가지 해결법

Google Search Console 중복 페이지 오류의 원인인 x-default hreflang 누락과 isFallback noindex 처리 방법

Supabase Free 플랜 제한 — 프로젝트 2개 벽에 부딪히고 정리한 무료 한도

프로젝트를 새로 만들다가 알게 된 Supabase Free 플랜의 제한들 — 프로젝트 수, DB 용량, 일시정지 정책까지 정리

에이전트 활용 방법 및 생성

AI 에이전트 블로그에서 활용하기

[정보] 모바일 신분증을 활용한 블록체인 & AI 해커톤

모바일 신분증을 활용한 블록체인 & AI 해커톤 지원할까?

Next.js + next-intl, /ko/ 리디렉션 오류와 proxy.ts 충돌 삽질기

Google Search Console 리디렉션 오류를 잡으려다 빌드 에러까지 만난 과정과 proxy.ts 구조 이해

Ollama 로컬 모델 사용후기 — DeepSeek·EXAONE·Qwen 직접 돌려보고 비교

M시리즈 맥에서 Ollama로 DeepSeek 1.5B, EXAONE 3.5, qwen2.5-coder:7b를 직접 돌려본 후기 — 한국어 처리, 코딩 능력, 로컬 모델의 현실적인 용도

Ollama 설치 및 로컬 AI 시작하기

로컬 AI 사용을 위한 Ollama 설치와 모델 선택 가이드

블로그 포스트 목록에서 "1분 읽기" 지운 이유

읽기 시간 표시가 초기 블로그에서 오히려 역효과가 나는 이유와 Next.js 컴포넌트에서 제거하는 방법

Google이 내 블로그 예시 코드를 링크로 크롤링한 날

Search Console 404 오류를 추적했더니 포스트 본문의 코드 예시 파일명을 Google이 실제 URL로 인식한 것이었다 — next.config.ts redirects로 해결

Next.js 다국어 블로그에서 canonical 빠뜨리면 생기는 일

Google Search Console에서 "중복 페이지, Google에서 사용자와 다른 표준을 선택함" 오류가 뜬 이유와 next-intl 환경에서 canonical 설정하는 방법

Next.js 페이지 이동할 때마다 스크롤 애니메이션이 생기는 이유

뒤로 가기 버튼과 scroll-behavior smooth가 얽혀서 만든 스크롤 점프 버그 두 개를 연속으로 잡은 과정

GitHub에 AAB 올렸다가 용량 경고 받은 후 — 빌드 파일 로컬 버전관리로 전환하기

Android 릴리즈 빌드 파일(AAB/APK)을 GitHub에 올리면 안 되는 이유와, 로컬 폴더로 버전 관리하는 방법

React Native(Expo) 앱에 한/영 다국어 지원 추가하기 — locale 감지 삽질기

expo-localization부터 NativeModules, Intl API까지 세 가지 방법을 직접 써보고 최종 해답을 찾은 과정

스크린샷 50장이 블로그를 통째로 날렸다 — GitHub API 한도 초과 디버깅

이미지 50개를 한 번에 커밋했더니 Vercel 빌드가 50번 돌면서 GitHub API 요청이 한도를 꽉 채운 이야기

구글 플레이스토어 앱 등록 A-Z — 스크린샷으로 전 과정 정리

앱 생성부터 비공개 테스트 통과까지, 구글 플레이 콘솔의 전 과정을 스크린샷으로 정리한 실전 가이드

개인정보처리방침의 어린이 조항과 Play Store 전체 이용가는 별개다

개인정보처리방침에 "13세 미만 어린이 대상 아님" 문구를 넣으면 13세 이상 등급을 줘야 하는 게 아닌지 헷갈렸던 경험 정리

[에세이] 학습이 되어 간다 — 7주간 만든 것들, 그리고 FOMO

블로그 시작 7주 차, 앱 5개를 만들며 어느새 AI 개발 공부에 빠져 있었다 — 만들면서 배운 것들과 방향에 대한 고민

Expo 앱을 Play Store에 올리기까지 — AAB 빌드부터 스토어 자산 제작까지

React Native(Expo) 게임 앱을 처음 Google Play Store에 출시하면서 겪은 빌드, 자산 제작, 버그 수정 전 과정 정리

Don't 하나가 Vercel 빌드를 박살냈다 — YAML frontmatter 함정

로컬 빌드는 멀쩡한데 Vercel만 실패할 때, 원인은 영어 축약어가 들어간 YAML title 한 줄이었다

구글 애드센스 거절당했다 — 콘텐츠 없는 도구 사이트의 현실

애드센스 심사에서 "가치 없는 콘텐츠"로 거절당한 뒤, 도구 사이트에 콘텐츠를 채워 재신청한 과정

WiFi QR 코드 생성기를 만들었다 — AI로 처음 완성한 사이드 프로젝트

손님에게 WiFi 비밀번호 알려주기가 불편해서 만든 QR 코드 생성기 — React + i18n + 인쇄까지

YouTube Premium 없이 쓰는 나만의 플레이리스트 앱 — React Native(Expo)로 직접 만들기

Expo SDK 54 + TypeScript로 유튜브 플레이리스트 앱을 처음부터 만들면서 겪은 삽질과 해결법

안드로이드 앱 직접 설치하는 방법들 — APK부터 USB 디버깅까지

구글 플레이 없이 안드로이드 앱을 설치하는 방법들과 ADB USB 디버깅으로 바로 설치하는 법까지 한 번에 정리

GitHub Actions 자동 커밋이 잔디에 안 심어지는 이유 — KST timezone 설정으로 해결

GitHub Actions가 자동으로 커밋해도 잔디에 반영이 안 되는 timezone 문제. TZ=Asia/Seoul 한 줄로 해결하는 방법을 정리했다.

React Native YouTube 앱 만들면서 삽질한 것들 — Android WebView 재생 버그부터 키보드 이슈까지

Android WebView 보안 정책, KeyboardAvoidingView 함정, 자동재생 타이밍 버그까지 — YT Player 앱 개선 과정에서 만난 문제와 해결법을 정리했다

React Native 앱 Play Store 첫 출시 — 빌드부터 소개글 카피라이팅까지

AAB 빌드 자동화, versionCode 오류 해결, 스토어 소개글 작성, Play Console 권장 조치 분석까지 첫 출시에서 겪은 것들 정리

Claude Code, 대화가 길어질수록 느려지는 이유와 /clear 활용법

Claude Code에서 context가 쌓이면 왜 느려지고 비싸지는지, /clear로 어떻게 해결하는지 실용적으로 정리

구글이 내 블로그를 무시했던 이유 — Next.js SEO 버그 2가지 수정기

Google Search Console에서 색인 누락을 발견하고 canonical 태그와 footer 404 링크를 수정한 과정

Obsidian Git 모바일 설정 — 안드로이드에서 GitHub 동기화하기

안드로이드에서 Obsidian Git 플러그인으로 GitHub 레포를 클론하고 자동 동기화까지 설정하는 방법

Obsidian Git 플러그인 설정하다가 xcrun 에러 만난 이야기

Obsidian을 GitHub에 연결하고 Git 플러그인을 설정하는 과정에서 만난 xcrun 에러 해결법

Supabase service role로 멀티 유저 앱 만들다 터진 데이터 격리 버그들

RLS 없이 service role 클라이언트만 쓸 때 빠지기 쉬운 데이터 격리 함정 4가지와 해결법

Android 백그라운드 재생이 왜 이렇게 어렵냐 — Doze, WakeLock, Foreground Service 삽질기

카세트 뮤직 플레이어 앱에서 화면 꺼지면 트랙 전환이 안 되는 버그를 Foreground Service + PARTIAL_WAKE_LOCK으로 해결한 과정

[JobRadar 7편] Google OAuth "Database error" — Supabase 트리거 버그 찾기까지

Google 로그인이 "Database error saving new user"로 계속 실패하는 이유를 찾아 새 프로젝트까지 팠다가, 결국 트리거 함수 한 줄로 해결한 삽질기

[JobRadar 6편] 커버레터 완성, UX 개선, 그리고 로그인 붙이기

커버레터 저장/다운로드/AI재검토, 메모·상태 관리, JD 직접 입력, Supabase Auth까지 하루에 몰아서 만든 이야기

Claude Code로 블로그 운영하는 법 — 작성부터 예약 배포까지 자동화

포스트 작성, 번역, 등록, 예약 배포까지 Claude Code와 함께 블로그를 운영하는 전체 워크플로우를 정리했다.

Claude 콘솔 크레딧 구매 버튼이 비활성화될 때 — 결제 안 되는 원인과 해결법

Claude Console에서 결제 정보를 다 입력해도 구매 버튼이 활성화되지 않는 문제. 원인은 언어 전환 시 도시 선택값이 초기화되는 버그였다.

JobRadar 개발기 5편: 자동화의 환상을 버리고 현실적인 파이프라인을 만들었다

Playwright 자동 스크래핑을 포기하고, URL 붙여넣기 → JD 스크래핑 → AI 매칭 → 커버레터 생성까지 이어지는 on-demand 파이프라인을 구축한 과정.

JobRadar 4편: Playwright 버리고 cheerio로 갈아탄 이유 — 4일차 방향 전환기

3일 동안 Playwright와 씨름하다 포기했다. 4일차에 접어들어 방향을 완전히 바꿨다. 자동 수집 대신 URL 기반 on-demand 스크래핑, cheerio + JSON-LD 구현까지.

Claude 고객센터에 이메일 보내는 법 — AI 챗봇 말고 직접 연락하기

Claude support 챗봇이 AI로만 응답할 때, 실제 이메일 티켓을 만들어 사람에게 연락하는 방법을 단계별로 정리했다.

Claude Code 커스텀 에이전트 만들기 — blog-auto-draft로 배우는 실전 세팅

반복 작업을 자동화하는 Claude Code 커스텀 에이전트 만드는 법. blog-auto-draft 예시로 파일 구조부터 호출까지 단계별로 정리합니다.

[클로드 콘솔] 결제 버튼이 안 눌려서 조직을 삭제했더니, 계정이 통째로 날아갔다

Anthropic Console에서 크레딧 충전 버튼이 활성화되지 않아 조직을 삭제했다가 로그인까지 막힌 사고 기록 — 조직 삭제 전에 반드시 알아야 할 것

JobRadar 3편: Vercel에 Playwright 올렸더니 터졌다 — @sparticuz/chromium 삽질기

로컬에서 잘 되던 스크래퍼가 Vercel에만 올리면 터지는 이유. @sparticuz/chromium 도입부터 ETXTBSY, 60초 타임아웃 대응까지 삽질 전 과정.

Claude Code에서 MCP로 Gemini 연결하기 — 토큰 걱정 없이 두 AI 함께 쓰기

Claude Code 안에서 Gemini를 MCP 툴로 연결해 토큰 부담 없이 두 AI를 상황에 맞게 나눠 쓰는 방법을 단계별로 정리합니다.

[JobRadar 2편] Supabase 설계 + Playwright 스크래퍼 — 삽질 기록

JobRadar 2편. Supabase 멀티유저 스키마 설계부터 Indeed · Seek Playwright 스크래퍼 구현까지. Glassdoor 차단, ETXTBSY, 모듈 누락까지 삽질 과정 전부 정리.

Claude Code Hooks — "이 작업 끝나면 자동으로 해줘"를 설정하는 법

파일 저장 시 자동 포맷, 응답 완료 알림, 승인 요청 알림까지 — Claude Code Hooks로 반복 작업을 자동화하는 방법을 단계별로 정리했다.

[JobRadar 1편] 프로젝트 세팅 — 내 취업을 위해 AI 툴을 직접 만들었다

채용공고 자동 수집부터 AI 매칭까지 — JobRadar 사이드 프로젝트 1편. Next.js + Supabase + Vercel 초기 세팅을 단계별로 정리했다.

앱 만들었는데 어떻게 올리지? 구글 플레이 콘솔 등록 처음부터 끝까지

구글 플레이 콘솔에 앱을 처음 등록하는 전체 과정을 단계별로 정리합니다. 개발자 계정 등록부터 AAB 업로드, 심사 제출까지.

[앱 출시] 테스터 12명 모으는 법 — Google Groups를 써야 하는 이유

Google Play 테스트 트랙 등록 시 테스터 12명을 효율적으로 모으는 방법. 이메일 수동 등록 대신 Google Groups를 써야 하는 이유와 순서 정리.

DeepL API 사용법 — Next.js에서 번역 기능 붙이기

DeepL API Free 플랜으로 Next.js 앱에 번역 기능을 붙이는 방법을 단계별로 정리합니다. API 키 발급부터 서버 라우트 구현까지.

GitHub Actions로 블로그 포스트 예약 배포하기

GitHub Actions 워크플로우를 만들어 특정 날짜에 블로그 포스트가 자동으로 발행되도록 설정하는 방법을 실제 구현 경험 기반으로 설명합니다.

2026년 기준 Google Play 콘솔(개발자 계정) 등록 방법

Google Play 콘솔 등록 방법

번역 API 3종 비교 — MyMemory vs DeepL vs Claude, 뭘 써야 할까?

블로그 어드민에 번역 기능을 붙이면서 MyMemory, DeepL, Claude API를 직접 써본 경험을 비교 정리합니다.

React SPA에서 페이지별 title과 meta 태그 바꾸기 — react-helmet-async

SEO작업 중 react-helmet에 대한 설명

앱 테스트시 빠르게 폰에서 하는법 (무선디버깅 사용법)

안드로이드 무선디버깅 하는법

[클로드 코드] 스킬(Skill) 만들고 사용하는 법 — 나만의 슬래시 커맨드

Claude Code에서 반복 작업을 자동화하는 스킬(Skill)을 직접 만들고 사용하는 방법을 실습과 함께 정리합니다.

내 사이트, 구글에서 검색되게 만들기 — Next.js SEO 세팅법

Next.js App Router 기반 블로그에 robots.txt, sitemap.xml, Open Graph, JSON-LD를 추가해서 구글에 노출되는 방법을 실제 작업 기반으로 정리합니다.

[앱] 카세트 플레이어 앱 개발 일지 — 시작부터 첫 일주일까지

테이프 감성이 그리워서 시작한 카세트 플레이어 앱 — Replit과 Claude Code를 오가며 보낸 첫 일주일의 기록

Replit vs Claude Code 초보자에게 좋은 플랫폼은?

Replit과 ClaudeCode를 비교 사용해본 후기.

데이터 근친교배

AI에 의지하는 인간이 작성하는 데이터가 더이상 늘지 않을때....

우리는 도서관에 책 표지를 보러 간다.

[클로드 코드] 효율적으로 빠르게 배울 수 있는 클로드코드 스터디 가이드라인

일주일 써보고 정리한 클로드 코드 학습 순서 — CLAUDE.md, 플랜 모드, 슬래시 명령어, MCP까지 단계별 공부 가이드

[AI] Stitch 사용후기

디자인AI 인 Stitch 사용한 후기

[AI 개발시작_004] tmux로 세션 유지하기 — 네트워크 바뀔 때마다 작업이 날아간다면

클로드 코드 작업 중 네트워크가 바뀌면 세션이 끊기는 문제를 tmux로 해결하기 — 설치, 최소 단축키, 실제 사용 흐름

[AI 개발시작_000] AI 개발에 대한 의견 (가이드라인)

프롬프트 2문장으로 사이트가 만들어지는 걸 보고 AI 개발을 시작하며 — 이 시리즈를 어떤 원칙으로 쓸 것인지 정리한 개념편

[AI 개발시작_003] 다국어 기능 만들기

다국어 기능을 만드는 방법

[AI 개발시작_001] 클로드 코드 시작 — 프롬프트만으로 이 블로그 만들기

클로드 코드 설치 후 첫 프롬프트부터 Vercel 배포까지 — DB 없이 GitHub로 블로그를 만든 3시간의 기록과 실제 사용한 프롬프트

[AI 개발시작_002] 이미지 삽입 추가

이미지 삽입기능 추가

40대, 다시 개발을 시작하며 — 나는 레거시 개발자였다

개발자에서 PM으로, 그리고 5년 만에 AI와 함께 다시 개발자로 — 이 블로그를 시작한 이유와 내가 공부하는 방식