7년차 개발자의 AI 실험실

지난주에 CherryPlan 프로젝트에 Sonnet 4.6 붙여서 에이전트 테스트 돌리다가 문득 드는 생각이 있었어요. "나 지금 이 AI가 어디까지 와 있는지 제대로 알고 쓰는 건가?" 실무에서 AI 도구 쓰다 보면 업데이트 속도가 너무 빨라서, 정작 이번 주에 무슨 일이 있었는지 놓치는 경우가 있거든요. 그래서 직접 긁어봤습니다. 5월 셋째 주(12일~17일) 기준으로, 7년차 프론트엔드 개발자 시각에서 "이건 진짜 챙겨야 해"인 것만 골라서 정리했어요. 🇰🇷 한국, AI 도입 증가폭 세계 1위 찍었습니다마이크로소프트 산하 AI 이코노미 인스티튜트가 5월 12일 발표한 보고서에 따르면, 한국의 생성형 AI 이용률이 2026년 1분기 기준 37.1%를 기록했어요. 전 분기 대비 6.4%포인트 상승으..

cherryplan 프로젝트 초기 코드를 다시 열었을 때 솔직히 눈을 감고 싶었어요.2024년 초에 급하게 짠 utils.js 하나에 함수가 47개였어요. 인증 로직이랑 날짜 포맷팅이랑 API 호출 헬퍼가 전부 한 파일에 섞여 있었고, 주석은 "나중에 정리하자"라고 써놓은 채로 6개월이 지나 있었어요. 새 기능 붙일 때마다 "어디 있더라?" 검색하는 시간만 5~10분씩 나갔어요. 파일 하나 건드리면 연결된 다른 곳에서 터지는 것도 반복됐고요.리팩토링 해야 한다는 건 알았는데 타이밍을 못 잡고 있었어요. 이걸 어디서부터 건드려야 하는지 감이 안 잡히는 것도 있었고, 혼자 2,000줄 분석하고 재구성할 엄두가 안 났던 것도 솔직히 있어요.Claude Code한테 맡겨봤어요. 그냥 파일 던지고 "분석해줘"라고..

설 연휴 직전이었어요. 갑자기 "설날 세뱃돈 게임 만들면 재밌겠다" 싶어서 Cursor 켰습니다. 바이브코딩 처음 도전하는 거라 기대 반 설렘 반이었는데 — 결과부터 말하면, 완성은 했어요. 근데 과정이 좀 험했습니다.Cursor가 제 의도를 물어보지 않고 그냥 자기 판단대로 코드를 짜버리는 거예요. "이 정도면 되겠지?" 하고 진행하다가 나중에 제가 "아 이건 아닌데" 하면서 롤백. 또 짜고, 또 롤백. 토큰은 토큰대로 날리고, 시간은 시간대로 날리고.seollal-game.vercel.app 설날 세배 타이밍 - 미니게임어른 마음에 딱 맞게 세배하면 세뱃돈을 받아요! 게이지가 중앙에 올 때 클릭하세요. 타이밍에 맞춰 절하기를 클릭하세요!seollal-game.vercel.app 에 올라간 결과물은 그..

시리즈: Claude Code 실전 정복 | 4편작성자: 체리플랜 | 7년차 프론트엔드 개발자1편: [설치 + 첫 실행]2편: [VS Code 연동 + 실전 워크플로우]3편: [CLAUDE.md 완전 정복]컴포넌트 하나 만들려고 디자인 고민하고, props 구조 잡고, 스타일 입히고 — 이게 생각보다 오래 걸리잖아요.저도 그랬어요. cherryplan 허브 프로젝트 시작할 때, 9개 미니앱을 다 만들어야 한다는 게 막막했어요. 앱 하나당 컴포넌트가 최소 3~5개는 나오는데, 45개 컴포넌트를 다 직접 처음부터 짜야 하면 언제 끝나나 싶었거든요.Claude Code 쓰고 나서 달라진 건 이거예요. 첫 컴포넌트 하나를 제대로 만들어서 디자인 시스템을 잡아두면, 나머지는 그 기준으로 쭉 만들어줘요. 색상, 폰..

시리즈: Claude Code 실전 정복 | 3편작성자: 체리플랜 | 7년차 프론트엔드 개발자1편: [Claude Code 설치부터 첫 실행까지]https://cherrycoding0.tistory.com/46 [Claude Code 실전 정복 #1] 설치부터 첫 실행까지 — 7년차 개발자가 겪은 진짜 과정 (2026)시리즈: Claude Code 실전 정복 | 1편작성자: 체리플랜 | 7년차 프론트엔드 개발자하루 종일 구글링해도 안 풀리던 문제가 터미널 한 줄로 해결됐어요.7년 동안 개발하면서 처음으로 "이건 진짜 혁명cherrycoding0.tistory.com2편: [VS Code 연동 + 실전 워크플로우]https://cherrycoding0.tistory.com/47 [Claude Code 실전..

시리즈: Claude Code 실전 정복 | 2편작성자: 체리플랜 | 7년차 프론트엔드 개발자1편 보기: [Claude Code 설치부터 첫 실행까지]https://cherrycoding0.tistory.com/46 [Claude Code 실전 정복 #1] 설치부터 첫 실행까지 — 7년차 개발자가 겪은 진짜 과정 (2026)시리즈: Claude Code 실전 정복 | 1편작성자: 체리플랜 | 7년차 프론트엔드 개발자하루 종일 구글링해도 안 풀리던 문제가 터미널 한 줄로 해결됐어요.7년 동안 개발하면서 처음으로 "이건 진짜 혁명cherrycoding0.tistory.com Claude Code 설치했는데 어떻게 써야 할지 모르겠다는 분들 많아요.저도 그랬어요. 설치는 했는데, 터미널 열어놓고 뭘 물어봐야 ..

시리즈: Claude Code 실전 정복 | 1편작성자: 체리플랜 | 7년차 프론트엔드 개발자하루 종일 구글링해도 안 풀리던 문제가 터미널 한 줄로 해결됐어요.7년 동안 개발하면서 처음으로 "이건 진짜 혁명이다" 싶은 순간이었어요.Claude Code 쓰기 전에는 이랬어요. 에러 메시지 복사 → 구글 검색 → Stack Overflow 찾기 → 버전 다르다고 적용 안 됨 → 다시 검색 → 유튜브 튜토리얼 → 따라해도 안 됨 → 또 검색. 이 사이클을 하루에 몇 번씩 반복했어요.Claude Code 쓰면서 바뀐 건 단순해요. 지금 상황을 말로 설명하면 Claude가 프로젝트 파일을 직접 읽고, 원인을 찾고, 코드를 수정해요. 제가 구글링하던 시간이 그냥 없어졌어요.이번 편에서는 Claude Code 설치 ..

개발하다가 Claude Code한테 뭔가 시켰는데 결과가 생각이랑 완전 다르게 나온 경험 있으세요?저도 처음엔 그랬어요. "이 기능 만들어줘"라고 툭 던지면 뭔가 나오긴 하는데, 제가 원하는 것과 미묘하게 달라서 수정 또 수정... 결국 그냥 내가 짜는 게 빠르겠다 싶었거든요.근데 프롬프트 방식을 바꾸고 나서 진짜 달라졌어요. 같은 툴인데 쓰는 방법에 따라 결과물 퀄리티가 완전히 달라지더라고요. 바이브코딩을 제대로 하려면 프롬프트가 핵심이에요.Claude Code, 왜 프롬프트가 중요한가요?Claude Code는 터미널에서 실행하는 AI 코딩 어시스턴트예요. 코드 작성, 디버깅, 리팩토링, 테스트 작성까지 다 도와주는데요, 문제는 "자연어로 말하면 된다"는 말만 믿고 막연하게 던지면 결과가 들쑥날쑥해요...

작성자: 체리플랜 | 7년차 프론트엔드 개발자사이드 프로젝트 하나가 오래된 짐처럼 남아있었어요.닷홈 호스팅에 PHP로 만든 아이돌 팬페이지인데, 그누보드 기반으로 운영하고 있었거든요.처음엔 그냥 빠르게 만드려고 PHP 썼는데, 시간이 지날수록 버전 불일치 문제가 생기고, 뭔가 수정하려면 파일 하나 건드리는 게 너무 두렵고. 유지보수가 최악인 상태가 된 거예요.언젠간 고쳐야지 하면서 방치하다가, 결국 Claude Code 써서 통째로 React로 바꿔버렸어요.개발자라면 공감할 거예요. "이거 언제 리팩토링하지"라고 생각만 하다가 계속 미루는 그 프로젝트.오늘은 그 과정을 실제 경험 기반으로 정리해볼게요. 리팩토링 전 상황 — 뭐가 문제였냐면기술 스택: PHP + 그누보드 + 닷홈 호스팅상태: 버전 불일치,..

시리즈: html.to.design 실무 사용기 2편 1편: URL 하나로 피그마 시안 만드는 법https://cherrycoding0.tistory.com/23 [피그마 플러그인] 사이트를 피그마로 '통째로' 옮기기! URL 하나로 피그마 시안 만드는 법 | html.to운영 중인 앱을 피그마 레이어로 5분 만에 — html.to.design 실무 사용기 Figma to Code 피그마에서 작업할 때 제일 귀찮은 순간이 언제냐면요.베이스가 없을 때예요.운영 중인 앱의 기능 변경 기획서를cherrycoding0.tistory.com 1편에서 html.to.design으로 운영 중인 사이트를 피그마 레이어로 가져왔잖아요.그 다음이 문제예요.피그마 시안이 완성됐는데, 이걸 코드로 어떻게 옮기냐고요. Cod..

바이브코딩 도구 고민할 때 제일 많이 나오는 두 가지가 Cursor랑 Claude Code예요.저는 둘 다 실제로 써봤어요. Cursor는 설날 게임 프로젝트로 처음 바이브코딩 입문했고,Claude Code는 회사 업무에서 시작해서 CherryPlan 포트폴리오 9개 앱 만들 때 본격적으로 써봤어요.결론부터 말하면 — 지금은 Claude Code로 완전히 정착했어요.근데 Cursor가 나쁜 게 아니에요. 용도가 다른 거예요.어떤 상황에 뭐가 맞는지, 각각 쓰면서 "이건 별로다" 싶었던 순간까지 솔직하게 정리할게요.Cursor가 뭔가요?Cursor는 AI가 내장된 코드 에디터예요. VSCode 기반으로 만들어져서 UI가 거의 똑같아요. VSCode 쓰던 분들은 바로 적응할 수 있어요.에디터 안에서 바로 A..