개발일지 (Devlog)
프로젝트를 만들며 겪은 시행착오와 문제 해결 과정, 기술적 고민들을 기록한 공간입니다.
- Next.js App Router에서 구글 서치 콘솔 '적절한 표준 태그가 포함된 대체 페이지' 해결기Next.js App Router의 메타데이터 상속 구조로 인해 모든 블로그 포스트의 canonical URL이 홈으로 고정되어 검색 색인에서 누락되던 문제를 self-referencing canonical과 한글 슬러그 인코딩으로 해결한 실전 트러블슈팅 기록.
- Next.js 16과 Tailwind CSS에서 다크/라이트 테마 깜빡임(FOUC) 없이 구현하기Next.js 16 App Router 환경에서 localStorage 기반 다크 모드 전환 시 발생하는 첫 화면 깜빡임(FOUC) 문제를 인라인 스크립트와 CSS 변수로 깔끔하게 해결한 과정.
- React 마크다운 렌더러에 스마트 목차(TOC)와 스크롤 스파이(Scroll-Spy) 적용기긴 기술 블로그 아티클을 읽기 편하게 만들기 위해 마크다운 헤딩(#, ##)을 자동 추출하여 동적 목차(TOC)를 생성하고 IntersectionObserver로 실시간 스크롤 스파이를 구현한 경험.
- 캠핑인스타 만들기 5편: '이번캠(MyCamp)' 리브랜딩과 Capacitor로 Apple App Store 심사 통과한 이야기캠핑인스타를 '이번캠(MyCamp)'으로 리브랜딩하고, Capacitor를 활용해 Next.js 웹 서비스를 Apple App Store(iOS)에 공식 출시하며 겪은 심사 통과와 트러블슈팅 기록.
- vercel.app 도메인의 한계와 개인 도메인(.pe.kr) 도입기 (feat. 구글 서치 콘솔 색인 문제 해결)"Vercel 무료 도메인(vercel.app)으로 구글 서치 콘솔에 사이트맵을 제출하며 겪은 무한 '가져올 수 없음' 에러와 '할당량 초과' 문제. 이를 개인 도메인(.pe.kr) 구매로 단 1초 만에 해결한 삽질기를 공유합니다."
- 그림톡 만들기 3편: '한 번 답하는 앱'에서 '계속 대화하는 친구'로 바꾸기그림톡에서 단발성 응답을 넘어 대화가 계속 이어지는 소셜 인터랙션과 프롬프트 엔지니어링 과정을 정리한 개발 일지.
- 그림톡 만들기 2편: 결과 화면을 '정보 화면'에서 '첫 만남 장면'으로 바꾸기그림톡 결과 화면을 정보 카드가 아니라 첫 만남 장면처럼 느껴지도록 다시 설계하고 사용자 경험을 개선한 과정을 정리한 개발 일지.
- 그림톡 만들기 1편: 아이의 그림이 말을 걸기까지 (MVP 기획과 프로토타입)아이의 그림을 기반으로 소통하는 인터랙션 서비스 그림톡(GrimTalk)의 초기 기획과 프로토타입 구현 과정.
- 삼문판결 만들기 5편: 계속할지 멈출지, 프로젝트 피벗과 중단 기준애정에 휘둘리지 않고 데이터와 기준에 따라 사이드 프로젝트의 지속 여부를 냉정하게 결정한 회고.
