80/20 엔지니어링: 주말에 내 사이트를 재구축한 방법

비밀을 하나 알려드릴게요: 제가 개인 웹사이트를 주말에 다시 작성한 이유는 코딩이 특히 빠르기 때문이 아닙니다. 사실 거의 코딩을 하지 않았기 때문입니다.

대신 제가 대부분의 시간을 대부분의 개발자들이 최대한 피하는 작업에 쏟았습니다—준비, 문서화, 기록하는 일. 그리고 마침내 에디터를 열고 OpenAI의 Codex와 작업을 시작했을 때 실제 구현은 마치 잘 연습된 마술처럼 순식간에 끝났습니다.

이 이야기는 코드를 한 줄도 쓰기 전에 80%의 작업을 완료하는 것에 관한 것이며, 그것이 어떻게 모든 것을 바꾸었는지에 대한 이야기입니다.

왜 사이트를 다시 작성했나?

내 사이트는 Qwik v3로 운영되고 있었습니다. 안정적인 기술, 좋은 분위기였지만 특히 라우팅에서 더 많은 유연성을 원했습니다. 그래서 프레임워크 모드에서 React Router로 전환했습니다. 리팩토링이 아니라 완전한 재구축이었습니다. 새로운 아키텍처, 깔끔한 파일 구조, 업데이트된 스타일링(안녕하세요 Tailwind v4), 그리고 백지 상태에서 시작했습니다.

하지만 놀라웠던 점은 실제 코딩 시간이 약 2~3시간에 불과했다는 겁니다. 처음부터 끝까지요. 그리고 처음 시도에서 성공했습니다.

그럼 나머지 5시간 동안 무슨 일이 있었던 걸까요?

80% 작업: 컨설턴트가 피치 덱을 준비하듯 Codex 준비하기

대부분의 노력은 "메가 프롬프트 시스템"을 만드는 데 들어갔습니다—멋진 UI가 아니라 프로젝트 폴더 내에 있는 시스템입니다. Codex에 컴포넌트를 하나도 작성해 달라고 요청하기 전에 했던 일은 다음과 같습니다:

• React Router 문서를 전부 다운로드 받아 /guides 디렉토리에 저장했습니다.

• Tailwind CSS v4에 대해서도 같은 작업을 했고, Firecrawl을 사용해 가장 관련 있는 페이지들을 Markdown으로 변환했습니다.

• 프로젝트 개요를 담은 PROMPT.md 파일을 작성했습니다:

  • "레거시 코드는 /에 있고, 새 코드는 /app에 들어갑니다."
  • "UI는 최소화하고 비즈니스 로직에 집중합니다."
  • "Tailwind v4를 사용하고 React Router는 프레임워크 모드로 유지하십시오."
  • 등등.

이것은 형식적인 일이 아니었습니다. 이것은 운영 컨텍스트였습니다—마치 새 팀원에게 첫날 알려주는 자세한 브리핑과 같았습니다. Codex는 내가 원하는 것을 추측하지 않았습니다. 저장소에 문서가 있었습니다. 명확한 규칙이 영어로 작성되어 있었습니다. 제약 조건도 있었습니다.

그리고 마침내 이렇게 입력했죠:

"PROMPT.md를 읽어라. 우선 모든 라우트를 새 앱으로 마이그레이션해라."

Codex는 평생 이 업무를 기다려온 것처럼 반응했습니다.

메가 프롬프트, 최소한의 환각

결과는 놀랍도록 정확했습니다. Codex는 지침을 철저히 따랐고, 환각을 하지 않았으며, 무언가를 새로 만들어내려 하지도 않았습니다. "UI에 집중하지 말라"는 지침을 존중했습니다. 서버 로직 마이그레이션도 정확했습니다. 라우트 구성은 마치 제가 직접 작성한 것 같았습니다—컴파일러 같은 인내력을 가진 제가 쓴 것처럼요.

이것은 단순한 "프롬프트 엔지니어링"이 아니었습니다. Codex를 실제적이고 최신 사양에 기반하게 하는 일이었습니다. 막연한 작업 목록도, 원하는 기능 리스트도 아니었습니다. 구조화된 입력, 명확한 예제, 그리고 필요한 실제 문서에 대한 로컬 접근 권한이 중요했습니다.

시간을 잡아먹은 건? 코드가 아니었다

기반이 마련된 후 작업은 두 가지 뚜렷한 단계로 나누어졌습니다:

1. Codex 모드 — 빠르고 구조화된, 반복 가능한 실행. 마이그레이션, 로직, 심지어 일부 레이아웃 스캐폴딩 작업을 거의 완벽하게 수행했습니다.
2. 디자인 탐색 모드 — 느리고 수동적이며 개방형. 이건 사람이 하는 부분으로, 외관을 고르고, 레이아웃을 시도하며, 컴포넌트를 실험하는 일이었습니다. 작동하는 시각 스타일이 확정되면 Codex가 다시 등장해 디자인 패턴을 확산시켰습니다.

실제로 작업 속도를 늦춘 건 제가 뭘 원하는지에 대한 시각적 감을 잡지 못했던 것이지, 작동 방식이 아니었습니다.

실제 인사이트: Codex는 당신의 준비 상태만큼만 훌륭하다

이번 주말은 제가 작업 중에 느껴온 변화를 강화해주었습니다:

코딩은 쉬워지고 있습니다.
계획이 어려우면서도 가장 중요합니다.

작고 중간 규모 프로젝트에서는 구현을 이제 20% 작업으로 봅니다. 80%는 미리 하는 작업입니다: 문서 수집, 범위가 지정된 작업 작성, 맥락 프롬프트 구축.

Codex는 이런 구조 안에서 뛰어납니다. 불명확함을 주면 불명확함을 돌려줍니다. 하지만 의도를 가지고 환경을 구축하면—문서, 제약, 명확한 설명—완벽하게 기억하는 시니어 개발자처럼 행동합니다, 거만함 없이.

앞으로 나아갈 길: AI를 요술쟁이 아닌 팀원으로 대하라

요점은 간단합니다: AI 코딩 도구를 협업자처럼 대하세요. 진짜 엔지니어에게 줄 자료를 그들에게도 주세요. 맥락을 준비하세요. 구체적이고 철저하게 준비하세요.

다음엔 더 큰 프로젝트를 할 때는 이렇게 할 겁니다:

• 전체 프로젝트 범위를 정의하는 마스터 플랜 문서 하나.
• 서브시스템이나 컴포넌트별 개별 작업 명세서.
• 지역 참조용으로 마크다운 문서와 예제 파일 세트.

Codex는 마법의 말을 필요로 하지 않습니다—구조가 필요할 뿐입니다.

더 빨리 개발하고 싶나요? 먼저 코딩하지 말고 계획하세요. 그리고 제대로 프롬프트하세요.

디자인의 진화: 시각적 여정

시간이 지나면서 내 사이트는 여러 차례 변화를 거쳤습니다—각각은 새로운 아이디어, 도구, 교훈의 반영이었습니다. 어떻게 발전했는지 빠르게 시각적으로 둘러보겠습니다:

버전 1: 시작점

버전 2: 더욱 명확한 목소리

버전 2.1: 세부 조정과 다듬기

버전 3: Qwik 시대

버전 4: Remix와 함께하는 집중된 단순함

각 버전은 단지 미학뿐 아니라 명확성, 사용성, 유지보수성 측면에서 사이트를 효과적으로 만드는 것에 대한 새로운 통찰을 가져왔습니다. 디자인 여정은 개발 여정을 그대로 반영했습니다: 의도적이고 반복적이며 항상 미래를 내다보는 과정이었습니다.