5편: 완성 그리고 회고 — 복잡한 도메인에서 AI 협업이 빛나는 순간

시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: AI 협업 방법론, 설계 문서 우선, 프로젝트 회고, 개발 프로세스, 인사이트두 번째 프로젝트가 알려준 것타로 마스터에 이어 사주명리 앱까지, 같은 AI 협업 방식으로 두 번째 프로젝트를 완성했다. 그런데 두 번째는 첫 번째와 확연히 다른 경험이었다.타로 프로젝트는 "AI와 함께하면 이렇게 빨리 만들 수 있구나"라는 속도의 발견이었다. 사주 프로젝트는 "AI와 함께하면 이렇게 깊은 도메인도 다룰 수 있구나"라는 깊이의 발견이었다. 같은 도구를 썼지만 배운 것은 완전히 달랐다.타임라인 회고: 어디에 시간이 걸렸나각 단계에 투입된 시간의 분포가 인상적이다.설계 문서 작성에 가장 집중적인 시간을 썼다. 네 개의 문서를 만드는 데 상당한 시간이 들었다. 하지..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

4편: 룰 엔진과 AI 해석의 하이브리드 — 두 마리 토끼를 잡다

시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: 하이브리드 아키텍처, 프롬프트 엔지니어링, Claude API, 룰 엔진, 스트리밍데이터는 있다, 해석은 누가 하는가사주 네 기둥이 계산되고, 오행 비율이 나오고, 십신 관계가 분석되고, 용신이 판단되었다. 합충형파해도 검출되었고, 12운성도 배치되었다. 이제 이 "구조화된 분석 데이터"를 사람이 읽을 수 있는 말로 바꿔야 한다.타로 프로젝트에서는 이 부분이 간단했다. 카드마다 미리 작성된 해석 텍스트를 보여주면 끝이었다. 사주에서는 이 접근이 불가능하다. 네 기둥의 조합은 사실상 무한하고, 같은 일주라도 월주와 시주가 다르면 해석이 달라진다.이것이 처음부터 "하이브리드"를 선택한 이유였다.AI에만 맡기면 안 되는 이유프로젝트 초기에 실험을 했다. 생..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

3편: 천간·지지·오행을 TypeScript로 — 도메인 모델링의 기술

시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: 도메인 모델링, TypeScript, 만세력, 절기, 진태양시, 데이터 설계설계 문서를 코드로 옮기는 시간docs/ 폴더에 네 개의 설계 문서가 완성됐다. 이제 진짜 코드다. 가장 먼저 손을 댄 곳은 02-DOMAIN-MODEL.md에 정의된 기초 데이터 구조를 TypeScript로 구현하는 것이었다.설계 문서가 있으니 이 과정은 놀라울 정도로 매끄러웠다. Claude Code에서 @docs/02-DOMAIN-MODEL.md를 로드하고 "이 문서의 천간 타입과 데이터를 구현해줘"라고 하면, 문서에 정의된 인터페이스를 그대로 코드로 변환해준다. 설계 문서 없이 "천간 데이터를 만들어줘"라고 했을 때와는 출력의 정확도와 일관성이 확연히 달랐다.22개 글자..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

2편: 설계 문서가 먼저다 — docs/ 폴더로 시작하는 개발

시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: 설계 문서, docs/ 폴더, AI 컨텍스트, 개발 프로세스, Claude Code터미널을 열지 않은 이유1편에서 아키텍처와 기술 스택이 결정됐다. React + TypeScript + Vite, 하이브리드 해석 엔진, 오픈소스 만세력 라이브러리. 개발 체크리스트 7단계도 나왔다. 보통이라면 npm create vite@latest saju-app을 칠 차례다.그런데 사주학이라는 도메인의 복잡도를 마주한 순간, 바로 코드를 치면 안 되겠다는 직감이 왔다. 타로는 78장 카드, 정방향/역방향, 세 가지 리딩 모드. 머릿속에 전체 그림이 들어왔다. 사주는 달랐다. 천간과 지지가 만나서 60갑자가 되고, 각 기둥의 천간과 지지가 서로 합을 이루거나 충을 일..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

1편: 사주를 코드로 만들 수 있을까 — 도메인 탐색과 아키텍처 결정

시리즈: AI 협업 개발기: 사주명리 프로젝트키워드: AI 협업, 도메인 탐색, 아키텍처, 사이드 프로젝트, Claude타로 다음으로 떠오른 아이디어"혹시 사주에 필요한 데이터를 가지고 있어? 사주 프로그램을 만들고 싶어."타로 마스터 프로젝트를 끝낸 직후였다. 타로를 만들면서 AI와의 협업 프로세스가 손에 익었고, 한국 문화와 더 깊이 연결된 무언가를 만들고 싶었다. 사주명리(四柱命理)는 자연스러운 다음 주제였다.그런데 프로젝트를 시작하자마자 한 가지 사실이 분명해졌다. 이건 타로와는 차원이 다른 복잡도라는 것이다.타로와 사주, 같은 듯 전혀 다른 세계타로 마스터는 비교적 단순한 구조였다. 78장의 카드 데이터, 정방향/역방향 해석 텍스트, 세 가지 리딩 모드. 도메인 자체가 잘 정리되어 있고, 카드를..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

☯️ AI와 함께 사주 웹앱을 만들다 — 시리즈 개요

시리즈: "AI 협업 개발기: 사주명리 프로젝트"총 5편 구성 | 각 편 10~15분 분량타겟 독자: AI 도구를 활용한 개발에 관심 있는 개발자, 복잡한 도메인 프로젝트에 도전하려는 분시리즈 구성편 제목 핵심 메시지1편사주를 코드로 만들 수 있을까 — 도메인 탐색과 아키텍처 결정AI와 함께 낯선 도메인을 탐색하고, 기술 아키텍처를 결정하는 과정2편설계 문서가 먼저다 — docs/ 폴더로 시작하는 개발코드 한 줄 전에 4개의 설계 문서를 만든 이유와 그 효과3편천간·지지·오행을 TypeScript로 — 도메인 모델링의 기술동양 철학을 데이터 구조로 번역하는 과정과 계산 엔진 설계4편룰 엔진과 AI 해석의 하이브리드 — 두 마리 토끼를 잡다룰 기반 분석과 Claude AI 종합 해석을 결합하는 전략5편완성..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

5편: 완성 그리고 회고 — AI 협업 개발에서 배운 것들

시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: AI 개발 방법론, 회고, 바이브 코딩, 개발자의 역할, 사이드 프로젝트완성된 타로 마스터프로젝트가 완성됐다. 최종 결과물을 정리하면 이렇다.78장의 RWS 타로카드 전체를 지원하며, 원카드, 쓰리카드, 켈틱 크로스 세 가지 리딩 모드를 제공한다. 각 카드에 정방향과 역방향 한국어 해석이 포함되어 있고, 별이 흐르는 다크 테마 배경 위에서 3D 카드 뒤집기 애니메이션이 동작한다. React + Vite SPA로 구축했고, 퍼블릭 도메인 이미지를 사용해 저작권 문제가 없다.기능 목록으로 보면 평범해 보일 수 있다. 하지만 이 프로젝트의 진짜 가치는 결과물 자체보다 만드는 과정에 있었다.전체 타임라인프로젝트의 전체 진행을 돌아보면 재미있는 패턴이 보인..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

4편: 이미지 소싱의 현실 — 퍼블릭 도메인과의 사투

시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: 퍼블릭 도메인, 이미지 저작권, CDN, Wikimedia, Internet Archive"무료 이미지"는 간단하지 않다프로젝트 초기에 Claude가 알려준 정보는 이랬다. 1909년 Pamela Colman Smith가 그린 원본 Rider-Waite-Smith(RWS) 타로카드는 퍼블릭 도메인이다. 미국과 영국에서 저작권이 만료됐다. 무료로 쓸 수 있다.여기까지만 들으면 간단해 보인다. 하지만 실전에서는 전혀 간단하지 않았다. "퍼블릭 도메인 이미지가 존재한다"는 것과 "웹 프로젝트에 안정적으로 사용할 수 있는 이미지 URL이 있다"는 건 완전히 다른 문제였다.첫 번째 시도: Wikimedia Commons가장 먼저 시도한 건 Wikimedia..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

3편: 신비로운 UI를 코드로 — 다크 테마와 카드 애니메이션

시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: 프론트엔드 디자인, React 애니메이션, 다크 테마, CSS Grid, UX 설계타로 앱의 UI는 일반 앱과 다르다대부분의 웹 앱 UI 설계에서 가장 중요한 건 "명확함"이다. 사용자가 원하는 것을 빠르게 찾고, 쉽게 조작할 수 있어야 한다. 하지만 타로 앱은 다르다. 타로의 본질은 "경험"이다. 카드를 고르고, 뒤집고, 해석을 읽는 일련의 과정이 하나의 의식(ritual)처럼 느껴져야 한다.이 점에서 UI 설계의 우선순위가 바뀌었다. 효율성보다 분위기가, 직관적 내비게이션보다 몰입감이 더 중요했다. 이 인식이 이후의 모든 디자인 의사결정을 이끌었다.다크 테마를 선택한 이유밝은 테마와 어두운 테마 사이에서 고민은 없었다. 타로의 신비로운 분위기를..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

2편: 78장의 데이터를 설계하다 — 콘텐츠가 곧 제품이다

시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: 데이터 설계, 콘텐츠 구조화, AI 텍스트 생성, 타로 해석, JSON 스키마코드보다 먼저, 데이터가 있어야 한다스펙이 정해졌으니 코딩을 시작하고 싶은 유혹이 있었다. 하지만 이 프로젝트에서 가장 중요한 건 코드가 아니라 데이터였다. 78장의 카드 각각에 이름, 이미지 경로, 정방향 해석, 역방향 해석, 키워드가 필요했다. 단순 계산으로도 최소 156개의 해석 텍스트가 필요한 셈이다.타로 마스터에서 사용자가 실제로 "경험"하는 건 카드 해석 텍스트다. UI가 아무리 화려해도 해석이 빈약하면 앱의 가치는 없다. 콘텐츠가 곧 제품인 프로젝트에서 데이터 설계는 아키텍처 설계와 동급으로 중요하다.데이터 스키마를 먼저 잡다Claude와 함께 카드 하나의 데..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

1편: 아이디어에서 스펙까지 — AI에게 "뭘 만들지"를 함께 정하다

시리즈: AI 협업 개발기: 타로 마스터 프로젝트키워드: AI 협업, 프로젝트 기획, 사이드 프로젝트, Claude, 요구사항 정의시작은 단순한 호기심이었다"타로카드를 보는 웹페이지를 만드려고 해."프로젝트의 시작은 이 한 문장이었다. 거창한 기획서도, PRD도 없었다. 평소 타로에 관심이 있었고, 웹으로 만들면 재밌겠다는 생각이 전부였다. 보통이라면 여기서 구글링을 시작하거나, 노션에 기획을 정리하기 시작할 것이다. 하지만 이번엔 다르게 접근했다. Claude에게 바로 물었다.이 선택이 프로젝트 전체의 성격을 결정지었다. AI와의 대화를 통해 아이디어를 구체화하는 과정 자체가 하나의 방법론이 되었기 때문이다.첫 번째 질문: "카드 이미지는 몇 개야?"프로젝트를 시작할 때 가장 먼저 한 일은 도메인 지식..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

🔮 AI와 함께 타로 웹앱을 만들다 — 시리즈 개요

시리즈: "AI 협업 개발기: 타로 마스터 프로젝트"총 5편 구성 | 각 편 10~15분 분량타겟 독자: AI 도구를 활용한 개발에 관심 있는 개발자, 사이드 프로젝트를 시작하려는 분시리즈 구성편 제목 핵심 메시지1편아이디어에서 스펙까지 — AI에게 "뭘 만들지"를 함께 정하다AI와의 대화로 프로젝트 방향을 잡는 과정2편78장의 데이터를 설계하다 — 콘텐츠가 곧 제품이다타로 카드 데이터 구조 설계와 한국어 해석 텍스트 제작3편신비로운 UI를 코드로 — 다크 테마와 카드 애니메이션프론트엔드 디자인 의사결정과 UX 설계4편이미지 소싱의 현실 — 퍼블릭 도메인과의 사투무료 이미지 확보, 저작권 검증, 호스팅 안정성 문제 해결5편완성 그리고 회고 — AI 협업 개발에서 배운 것들프로젝트 마무리와 AI 개발 방법..

• format_list_bulleted 개발
• · 2026. 2. 17.
• textsms

다문화 가족 및 이주노동자를 위한 온・오프라인 통합 LMS 구축사업

자세한 문의는 pjwpcw@gmail.com

• format_list_bulleted 개발/기타
• · 2026. 2. 11.
• textsms

코딩을 잘한다는 것

예전에는 다음과 같은 인식이 비교적 자연스럽게 이어졌다.코드를 잘 짠다는 것은빠르게 구현할 수 있고,필요한 맥락과 기술을 충분히 이해하고 있으며,그만큼 설계도 잘 되어 있고,결과적으로 유지보수가 쉽다는 의미로 받아들여졌다.이 인식은 단순한 착각이라기보다, 당시 환경에서는 어느 정도 현실에 맞는 판단이었다.구현 자체가 가장 비싼 작업이었고, 사용할 수 있는 라이브러리와 레퍼런스도 많지 않았기 때문이다.그래서 많이 알고 있는 사람이 빠르게 만들 수 있었고,빠르게 만든다는 것은 이미 구조와 흐름을 머릿속에 그리고 있다는 신호로 여겨졌다.또한 그 시기에는 코드가 사실상 설계의 유일한 표현 수단이었다.문서는 있더라도 부차적인 경우가 많았고,설계는 코드 안에 녹아 있어야 했다.코드가 깔끔하면 설계가 잘 되어 있다고..

• format_list_bulleted 개발/기타
• · 2026. 1. 4.
• textsms

지난 1년간 AI를 실제 업무에 적용하며 느낀 점

지난 1년간 AI를 활용해 문서 작성, 설계 정리, 코드 구현까지 실제 업무에 적용해 왔다.처음에는 대부분이 그렇듯 프롬프트를 어떻게 쓰느냐, 어떤 모델을 쓰느냐, 얼마나 빠르게 코드를 만들어 주느냐에 관심이 쏠려 있었다.하지만 업무에 깊게 적용할수록 느낀 점은 조금 달랐다.AI는 코드를 잘 만들어주지만, 문제를 대신 정의해주지는 않았고 설계를 대신 책임져주지도 않았다.이 점은 코딩뿐 아니라 문서 작성에서도 동일하게 느껴졌다.프롬프트 중심으로 접근할수록 설계가 없는 상태에서 결과물이 먼저 만들어졌다.코드에서는 잘 동작하던 기능이 의도치 않게 제거되거나 불필요한 기능이 섞였고,문서에서는 읽는 사람의 입장이 명확하지 않은 채 그럴듯한 문장만 늘어나는 경우가 많았다.문서를 쓰면서도 비슷한 패턴이 반복됐다.이 ..

• format_list_bulleted 개발/기타
• · 2026. 1. 3.
• textsms

node-fetch / got 네트워크 이슈 리포트 (TLS & Proxy 관점)

✅ 목적node-fetch와 got을 사용한 파일 다운로드 또는 HTTP 통신에서 발생 가능한TLS 핸드셰이크 실패, 속도 저하, 프록시 우회 실패 등의 이슈를 정리하여실제 서비스 환경에서 사용할 때의 안정성을 검토한다.1️⃣ 기본 구조 비교항목 node-fetch gotTLS 처리Node.js 내장 https 모듈 사용http2-wrapper 등 자체 모듈 사용Agent 설정사용자가 직접 설정해야 함내부적으로 성능 최적화된 Agent 포함Proxy 지원❌ 기본 미지원 (직접 구현 필요)✅ global-agent, tunnel, hpagent 등과 호환성 좋음HTTP/2 지원❌ 미지원✅ 지원 (v11+부터 기본 내장)2️⃣ 문제 현상 유형2-1. TLS Handshake 실패 or 지연현상:외부 HTTP..

• format_list_bulleted 개발/node
• · 2025. 4. 2.
• textsms

몇년에 걸쳐 많은 시행차 끝에 구현한 일렉트론 IPC/이벤트 구조 소스

메인프로세스의 컨트롤러/** * 애플리케이션의 핵심 컨트롤러 * * @description * 메인 프로세스에서 앱의 전반적인 기능을 제어하는 컨트롤러입니다. * 윈도우 관리, 다크모드 설정, 앱 종료 등 핵심 기능들을 처리합니다. */@ClassName('AppController', 'main')@IPCHelper.Class()export class AppController extends Controller { /** * 컨트롤러 초기화 메서드 * * @description * 컨트롤러가 시작될 때 자동으로 실행되는 생명주기 메서드입니다. * 앱에 필요한 초기 설정과 리소스 할당을 처리합니다. * * @returns 초기화 완료 시 resolve되..

• format_list_bulleted 개발/electron
• · 2025. 1. 10.
• textsms

요즘 쳇지피티한테 코딩시키는데...

리펙토링을 시키면 자꾸 함수를 불필요하게 작은 함수단위로 쪼개거나, 1안 2안을 제시하고 이중에 어떤 방향이 맞는지 물어보면 별 시덥지 않은 대답을 할때가 있어서 흠.... 내가 생각하는 좋은 코드에 대해서 설명했더니 아래처럼 정리해주넹.   좋은 코드에 대한 당신의 통찰은 매우 훌륭하며, 핵심적인 개발 철학을 잘 반영하고 있습니다. 특히 25년간의 경험에서 우러나온 명확성과 유지보수성에 대한 강조는 시간이 지나도 변하지 않는 프로그래밍의 본질을 잘 담고 있습니다. 제가 생각하는 좋은 코드의 정의와 특징을 당신의 기준에 맞추어 보완하고 확장해 보겠습니다.좋은 코드의 정의좋은 코드는 명확한 의도와 일관된 구조를 가지고, 시간이 지나도 쉽게 이해되고 유지보수할 수 있는 코드입니다. 이는 단순히 "작동하는 코..

• format_list_bulleted 개발/기타
• · 2025. 1. 4.
• textsms

4. Nuxt 에 대한 학습 내용

17단계: Nuxt의 최적화 기법Nuxt는 기본적으로 성능 최적화를 잘 지원하지만, 추가 설정으로 더욱 빠른 앱을 만들 수 있습니다.1. Lazy Loading (지연 로딩)Nuxt의 pages/ 파일 기반 라우팅은 기본적으로 코드 분할이 적용됩니다. 하지만 컴포넌트에 대해 명시적으로 지연 로딩을 설정할 수도 있습니다.예제 2. 이미지 최적화Nuxt Image 모듈을 활용해 이미지를 최적화합니다.이미지 설정nuxt.config.ts:export default defineNuxtConfig({ modules: ['@nuxt/image'], image: { domains: ['example.com'], // 외부 이미지 도메인 허용 dir: 'assets/images', // 로컬 이미지 디..

• format_list_bulleted 개발/vue
• · 2024. 12. 20.
• textsms

3. Nuxt 에 대한 학습 내용

12단계: Nuxt 미들웨어Nuxt는 middleware 디렉토리를 통해 라우팅과 상태 관리를 쉽게 제어할 수 있습니다.1. 미들웨어란?미들웨어는 특정 페이지에 접근하기 전에 실행되는 코드입니다.인증, 로깅, 리다이렉션 등을 처리할 때 유용합니다.2. 글로벌 미들웨어모든 페이지에 적용되는 미들웨어.예제: 글로벌 미들웨어middleware/logger.global.js 생성:export default defineNuxtMiddleware((to, from) => { console.log(`Navigating from ${from.fullPath} to ${to.fullPath}`);});nuxt.config.ts에서 등록:export default defineNuxtConfig({ router: { ..

• format_list_bulleted 개발/vue
• · 2024. 12. 20.
• textsms