| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
- 무료호스팅
- 천간지지오행
- ai웹사이트
- Cloudflare Pages
- 무료웹사이트
- 카드애니메이션
- 웹사이트만들기
- Netlify
- typescript
- AI협업개발
- GitHub Pages
- meslolgs nf
- 퍼블릭도메인
- github
- docs-first
- 다크테마UI
- 타로카드
- 일렉트론
- 웹앱개발
- 코딩독학
- AI개발
- Chatgpt활용
- claude활용
- claude ai
- 타로앱개발
- 바이브코딩
- 무료서버
- 사주앱개발
- 사주프로그램
- React
- Today
- Total
목록2026/02/17 (12)
dog paw / development
시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: AI 협업 방법론, 설계 문서 우선, 프로젝트 회고, 개발 프로세스, 인사이트두 번째 프로젝트가 알려준 것타로 마스터에 이어 사주명리 앱까지, 같은 AI 협업 방식으로 두 번째 프로젝트를 완성했다. 그런데 두 번째는 첫 번째와 확연히 다른 경험이었다.타로 프로젝트는 "AI와 함께하면 이렇게 빨리 만들 수 있구나"라는 속도의 발견이었다. 사주 프로젝트는 "AI와 함께하면 이렇게 깊은 도메인도 다룰 수 있구나"라는 깊이의 발견이었다. 같은 도구를 썼지만 배운 것은 완전히 달랐다.타임라인 회고: 어디에 시간이 걸렸나각 단계에 투입된 시간의 분포가 인상적이다.설계 문서 작성에 가장 집중적인 시간을 썼다. 네 개의 문서를 만드는 데 상당한 시간이 들었다. 하지..
시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: 하이브리드 아키텍처, 프롬프트 엔지니어링, Claude API, 룰 엔진, 스트리밍데이터는 있다, 해석은 누가 하는가사주 네 기둥이 계산되고, 오행 비율이 나오고, 십신 관계가 분석되고, 용신이 판단되었다. 합충형파해도 검출되었고, 12운성도 배치되었다. 이제 이 "구조화된 분석 데이터"를 사람이 읽을 수 있는 말로 바꿔야 한다.타로 프로젝트에서는 이 부분이 간단했다. 카드마다 미리 작성된 해석 텍스트를 보여주면 끝이었다. 사주에서는 이 접근이 불가능하다. 네 기둥의 조합은 사실상 무한하고, 같은 일주라도 월주와 시주가 다르면 해석이 달라진다.이것이 처음부터 "하이브리드"를 선택한 이유였다.AI에만 맡기면 안 되는 이유프로젝트 초기에 실험을 했다. 생..
시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: 도메인 모델링, TypeScript, 만세력, 절기, 진태양시, 데이터 설계설계 문서를 코드로 옮기는 시간docs/ 폴더에 네 개의 설계 문서가 완성됐다. 이제 진짜 코드다. 가장 먼저 손을 댄 곳은 02-DOMAIN-MODEL.md에 정의된 기초 데이터 구조를 TypeScript로 구현하는 것이었다.설계 문서가 있으니 이 과정은 놀라울 정도로 매끄러웠다. Claude Code에서 @docs/02-DOMAIN-MODEL.md를 로드하고 "이 문서의 천간 타입과 데이터를 구현해줘"라고 하면, 문서에 정의된 인터페이스를 그대로 코드로 변환해준다. 설계 문서 없이 "천간 데이터를 만들어줘"라고 했을 때와는 출력의 정확도와 일관성이 확연히 달랐다.22개 글자..
시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: 설계 문서, docs/ 폴더, AI 컨텍스트, 개발 프로세스, Claude Code터미널을 열지 않은 이유1편에서 아키텍처와 기술 스택이 결정됐다. React + TypeScript + Vite, 하이브리드 해석 엔진, 오픈소스 만세력 라이브러리. 개발 체크리스트 7단계도 나왔다. 보통이라면 npm create vite@latest saju-app을 칠 차례다.그런데 사주학이라는 도메인의 복잡도를 마주한 순간, 바로 코드를 치면 안 되겠다는 직감이 왔다. 타로는 78장 카드, 정방향/역방향, 세 가지 리딩 모드. 머릿속에 전체 그림이 들어왔다. 사주는 달랐다. 천간과 지지가 만나서 60갑자가 되고, 각 기둥의 천간과 지지가 서로 합을 이루거나 충을 일..
시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: AI 협업, 도메인 탐색, 아키텍처, 사이드 프로젝트, Claude타로 다음으로 떠오른 아이디어"혹시 사주에 필요한 데이터를 가지고 있어? 사주 프로그램을 만들고 싶어."타로 마스터 프로젝트를 끝낸 직후였다. 타로를 만들면서 AI와의 협업 프로세스가 손에 익었고, 한국 문화와 더 깊이 연결된 무언가를 만들고 싶었다. 사주명리(四柱命理)는 자연스러운 다음 주제였다.그런데 프로젝트를 시작하자마자 한 가지 사실이 분명해졌다. 이건 타로와는 차원이 다른 복잡도라는 것이다.타로와 사주, 같은 듯 전혀 다른 세계타로 마스터는 비교적 단순한 구조였다. 78장의 카드 데이터, 정방향/역방향 해석 텍스트, 세 가지 리딩 모드. 도메인 자체가 잘 정리되어 있고, 카드를..
시리즈: "AI 협업 개발기: 사주명리 프로젝트"총 5편 구성 | 각 편 10~15분 분량타겟 독자: AI 도구를 활용한 개발에 관심 있는 개발자, 복잡한 도메인 프로젝트에 도전하려는 분시리즈 구성편 제목 핵심 메시지1편사주를 코드로 만들 수 있을까 — 도메인 탐색과 아키텍처 결정AI와 함께 낯선 도메인을 탐색하고, 기술 아키텍처를 결정하는 과정2편설계 문서가 먼저다 — docs/ 폴더로 시작하는 개발코드 한 줄 전에 4개의 설계 문서를 만든 이유와 그 효과3편천간·지지·오행을 TypeScript로 — 도메인 모델링의 기술동양 철학을 데이터 구조로 번역하는 과정과 계산 엔진 설계4편룰 엔진과 AI 해석의 하이브리드 — 두 마리 토끼를 잡다룰 기반 분석과 Claude AI 종합 해석을 결합하는 전략5편완성..
시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: AI 개발 방법론, 회고, 바이브 코딩, 개발자의 역할, 사이드 프로젝트완성된 타로 마스터프로젝트가 완성됐다. 최종 결과물을 정리하면 이렇다.78장의 RWS 타로카드 전체를 지원하며, 원카드, 쓰리카드, 켈틱 크로스 세 가지 리딩 모드를 제공한다. 각 카드에 정방향과 역방향 한국어 해석이 포함되어 있고, 별이 흐르는 다크 테마 배경 위에서 3D 카드 뒤집기 애니메이션이 동작한다. React + Vite SPA로 구축했고, 퍼블릭 도메인 이미지를 사용해 저작권 문제가 없다.기능 목록으로 보면 평범해 보일 수 있다. 하지만 이 프로젝트의 진짜 가치는 결과물 자체보다 만드는 과정에 있었다.전체 타임라인프로젝트의 전체 진행을 돌아보면 재미있는 패턴이 보인..
시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: 퍼블릭 도메인, 이미지 저작권, CDN, Wikimedia, Internet Archive"무료 이미지"는 간단하지 않다프로젝트 초기에 Claude가 알려준 정보는 이랬다. 1909년 Pamela Colman Smith가 그린 원본 Rider-Waite-Smith(RWS) 타로카드는 퍼블릭 도메인이다. 미국과 영국에서 저작권이 만료됐다. 무료로 쓸 수 있다.여기까지만 들으면 간단해 보인다. 하지만 실전에서는 전혀 간단하지 않았다. "퍼블릭 도메인 이미지가 존재한다"는 것과 "웹 프로젝트에 안정적으로 사용할 수 있는 이미지 URL이 있다"는 건 완전히 다른 문제였다.첫 번째 시도: Wikimedia Commons가장 먼저 시도한 건 Wikimedia..
시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: 프론트엔드 디자인, React 애니메이션, 다크 테마, CSS Grid, UX 설계타로 앱의 UI는 일반 앱과 다르다대부분의 웹 앱 UI 설계에서 가장 중요한 건 "명확함"이다. 사용자가 원하는 것을 빠르게 찾고, 쉽게 조작할 수 있어야 한다. 하지만 타로 앱은 다르다. 타로의 본질은 "경험"이다. 카드를 고르고, 뒤집고, 해석을 읽는 일련의 과정이 하나의 의식(ritual)처럼 느껴져야 한다.이 점에서 UI 설계의 우선순위가 바뀌었다. 효율성보다 분위기가, 직관적 내비게이션보다 몰입감이 더 중요했다. 이 인식이 이후의 모든 디자인 의사결정을 이끌었다.다크 테마를 선택한 이유밝은 테마와 어두운 테마 사이에서 고민은 없었다. 타로의 신비로운 분위기를..
시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: 데이터 설계, 콘텐츠 구조화, AI 텍스트 생성, 타로 해석, JSON 스키마코드보다 먼저, 데이터가 있어야 한다스펙이 정해졌으니 코딩을 시작하고 싶은 유혹이 있었다. 하지만 이 프로젝트에서 가장 중요한 건 코드가 아니라 데이터였다. 78장의 카드 각각에 이름, 이미지 경로, 정방향 해석, 역방향 해석, 키워드가 필요했다. 단순 계산으로도 최소 156개의 해석 텍스트가 필요한 셈이다.타로 마스터에서 사용자가 실제로 "경험"하는 건 카드 해석 텍스트다. UI가 아무리 화려해도 해석이 빈약하면 앱의 가치는 없다. 콘텐츠가 곧 제품인 프로젝트에서 데이터 설계는 아키텍처 설계와 동급으로 중요하다.데이터 스키마를 먼저 잡다Claude와 함께 카드 하나의 데..
시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: AI 협업, 프로젝트 기획, 사이드 프로젝트, Claude, 요구사항 정의시작은 단순한 호기심이었다"타로카드를 보는 웹페이지를 만드려고 해."프로젝트의 시작은 이 한 문장이었다. 거창한 기획서도, PRD도 없었다. 평소 타로에 관심이 있었고, 웹으로 만들면 재밌겠다는 생각이 전부였다. 보통이라면 여기서 구글링을 시작하거나, 노션에 기획을 정리하기 시작할 것이다. 하지만 이번엔 다르게 접근했다. Claude에게 바로 물었다.이 선택이 프로젝트 전체의 성격을 결정지었다. AI와의 대화를 통해 아이디어를 구체화하는 과정 자체가 하나의 방법론이 되었기 때문이다.첫 번째 질문: "카드 이미지는 몇 개야?"프로젝트를 시작할 때 가장 먼저 한 일은 도메인 지식..
시리즈: "AI 협업 개발기: 타로 마스터 프로젝트"총 5편 구성 | 각 편 10~15분 분량타겟 독자: AI 도구를 활용한 개발에 관심 있는 개발자, 사이드 프로젝트를 시작하려는 분시리즈 구성편 제목 핵심 메시지1편아이디어에서 스펙까지 — AI에게 "뭘 만들지"를 함께 정하다AI와의 대화로 프로젝트 방향을 잡는 과정2편78장의 데이터를 설계하다 — 콘텐츠가 곧 제품이다타로 카드 데이터 구조 설계와 한국어 해석 텍스트 제작3편신비로운 UI를 코드로 — 다크 테마와 카드 애니메이션프론트엔드 디자인 의사결정과 UX 설계4편이미지 소싱의 현실 — 퍼블릭 도메인과의 사투무료 이미지 확보, 저작권 검증, 호스팅 안정성 문제 해결5편완성 그리고 회고 — AI 협업 개발에서 배운 것들프로젝트 마무리와 AI 개발 방법..
