게시물을 웹앱으로

Source: Dev.to

Source:

로맨스를 부리지 말자

나는 몇 주 동안 이 프로젝트들을 “엔지니어링” 하지 않는다.
대부분의 경우 워크플로는 다음과 같다:

1. 내 오래된 블로그 글 중 하나를 가져온다
2. 핵심(후크)를 추출한다 (비유 / 정신 모델 / 핵심 포인트)
3. Google AI Studio에 TypeScript 웹앱으로 만들라고 요청한다
4. 프롬프트로 UI/UX를 다듬어 핵심에 맞출 때까지 조정한다
5. GitHub에 푸시하고 Copilot이 GitHub Pages를 통해 배포하도록 한다

그게 전부—모두 스마트폰으로 끝낸다.

핵심은 후크가 인터랙션으로 번역될 만큼 구체적이어야 한다는 점이다.
그 후크만 있으면 “블로그 글 → 웹앱” 은 간단한 작업이 된다:

• 나는 왜(핵심)를 가지고 있다.
• AI가 어떻게(첫 번째 초안)를 만든다.

1. Code Quality & Maintenance

Projects

• CodeFengShui – Chaos → clarity slider
  (blog post / code)

• CodeHygiene – Interactive teaching tool
  (blog post / code)

• CodebaseKitchen – Entropy‑resistance test
  (blog post / code)

• TheInnerCodePlumber – Systemic intuition model
  (blog post / code)

이들은 시간에 따른 엔트로피를 시뮬레이션합니다.
이 도구들은 잔인한 진실을 보여주기 위해 존재합니다:

코드는 갑자기 깨지지 않는다.
조용히 부패한다.
버그 때문에 리팩터링하지 않는다.
시스템이 잘못된 느낌이 들어서 리팩터링한다.

이 도구들은 그 감각을 훈련합니다.

2. 소프트웨어 원칙 및 학습

프로젝트

• SOLID_Paw – Paw Patrol을 통한 SOLID
  (blog post / code)

• LegacyPHP – 프랑켄슈타인 괴물을 구하기
  (blog post / code)

• ChroniclesCleanCode – 클린 코드 슈퍼히어로 아크
  (code)

• learnings – 개인 지식 베이스
  (blog post / code)

이것들은 튜토리얼이 아니라; 기억 고정점이다.
사람들은 건조한 정의보다 이야기, 은유, 실패 사례를 통해 원칙을 기억한다.
어색함도 효과가 있다. 그게 요점이다.

3. AI / LLM 및 프롬프트 엔지니어링

프로젝트

• BlindSpotMetaPromptApp – 문제 명확성 강화
  (블로그 글 / 코드)

• PromptMastery – 프롬프트 기법
  (블로그 글 / 코드)

• PromptDoc – 문서화 프롬프트
  (코드)

• your_agent_config – AGENTS.md 생성
  (코드)

• TheAntiCodingAgentGuide – 풍자적 생존 가이드
  (블로그 글 / 코드)

이러한 프로젝트들은 *“AI를 더 잘 사용하는 방법”*을 알려주지는 않습니다.
오히려 자신에게 거짓말하지 않도록 도와줍니다.
AI가 실패하는 이유는 똑똑하지 않아서가 아니라, 인간이 사고 과정을 건너뛰기 때문입니다.
네, 저는 AI를 사용해 AI를 신중하게 활용하는 도구를 만들고 있습니다—아이러니를 의도한 것이죠.

4. PHP 및 시스템 개발

Projects

• PHPStanGuide – UI를 통한 타입 시스템
  (blog post / code)

• PHP_Stack_Timeout_Simulator – 시간 초과 시각화
  (blog post / code)

• MagicTypeCube – PHP 지혜 큐브
  (blog post / code)

백엔드 오류는 기본적으로 보이지 않습니다.
이 프로젝트들은 제약을 시각적으로 피할 수 없게 만들며—보이면 논쟁을 멈추게 됩니다.

5. 경력, 산업 및 문화

프로젝트

• TheStateOfSoftware2026 – 산업 분석
  (블로그 게시물 / 코드)

(이 카테고리의 추가 프로젝트는 발췌문을 넘어 계속됩니다.)