AI 요약
이 기사는 코딩 지식이 없는 일본의 한 작가가 AI 코딩 툴 'Claude Code'와 'Claude.ai'만을 사용해 실제 사용 가능한 웹 애플리케이션 '긴긴 노트(Long-Long Note)'를 개발한 전 과정을 상세히 기록하고 있습니다. 저자는 Allen Pike의 기사에서 영감을 얻어 완료된 할 일을 자동으로 타임라인에 기록해 주는 도구를 구상했습니다. 개발 과정은 Claude.ai를 통한 22번의 프로토타입 반복 수정으로 시작되었으며, 이후 로컬 환경으로 옮겨 Claude Code를 통해 본격적인 구현이 이루어졌습니다. React와 Firebase를 기반으로 한 이 앱은 단순한 코드 작성을 넘어 리팩토링과 기능 확장까지 AI의 도움을 받아 완성되었으며, 이는 비개발자도 AI를 통해 수준 높은 소프트웨어를 배포할 수 있음을 증명하는 사례입니다.
핵심 인사이트
- 개발 시간 및 효율성: 비개발자가 총 4개월의 기간 중 단 20시간의 실무 작업만으로 MVP 제작부터 배포, PWA 대응까지 완료했습니다.
- 신속한 MVP 구축: 2025년 10월 2일, 환경 구축 시작(17:00)부터 데플로이 준비(19:00)까지 단 2시간 만에 핵심 기능이 작동하는 초기 버전을 완성했습니다.
- 코드 최적화 성과: 1,170행에 달하는 거대한 단일 파일(TaskApp.jsx)을 AI와 협력하여 리팩토링함으로써 코드를 325행으로 약 72% 감축하고 구조를 체계화했습니다.
- 인간의 역할 변화: AI는 작동하는 코드를 빠르게 작성하지만, 설계의 문제점(신 클래스 등)을 인지하고 개선을 요구하는 '의사결정'은 인간의 몫임을 확인했습니다.
주요 디테일
- 기술 스택: React, Vite, TailwindCSS를 프론트엔드에 사용하고, Firebase(Authentication, Firestore, Cloud Functions, Hosting)를 백엔드로 활용했습니다.
- 주요 기능: Google 인증을 통한 로그인, 할 일의 CRUD 기능, 완료 시 타임라인 자동 기록, PWA(프로그레시브 웹 앱) 지원, 데이터 마크다운 내보내기 등을 포함합니다.
- Claude Code 활용: 터미널 기반 AI 툴인 Claude Code가 로컬 파일을 직접 수정하고 Firebase 보안 규칙 설정 및 배포 명령어까지 수행하며 개발 과정을 주도했습니다.
- 프로토타이핑: Claude.ai의 Artifact 기능을 이용해 로컬 환경 구축 전 22개 버전의 동작하는 프로토타입을 만들어 요구사항을 사전에 확정했습니다.
- 기능 개선: 실제 사용 중 발생한 불편함을 해소하기 위해 타임라인 필터링, 날짜 점프, 수동 메모 추가 등의 기능을 12회의 세션을 통해 지속적으로 고도화했습니다.
향후 전망
- 1인 개발 장벽의 붕괴: 고도의 코딩 능력 없이도 아이디어와 논리적 사고만 있다면 상용 수준의 앱을 개발할 수 있는 '노코드/로코드' 이상의 AI 코딩 시대가 본격화될 것입니다.
- 설계 역량의 중요성: AI가 코드를 생산함에 따라, 전체적인 아키텍처를 관리하고 리팩토링 시점을 판단하는 '코드 리뷰어'로서의 인간 역량이 더욱 중요해질 전망입니다.
출처:hatena