외주 안 맡기고 AI랑 대화만으로 웹서비스 기획부터 배포까지 한 이야기

[Claude Code] 외주 안 맡기고 AI랑 대화만으로 웹서비스 기획부터 배포까지 한 이야기

📝 한줄 요약

제약바이오 AI 컨설팅 웹서비스를 기획서 작성부터 디자인 시스템 구축, 랜딩페이지 배포까지 AI와의 대화만으로 2주 만에 완성했습니다.

바쁘시면 이것만 읽어도 돼요:

• Claude Code 하나로 기획서, 디자인 시스템, 요구사항 정의서, 랜딩페이지까지 전부 만들었습니다

• 기획 아이디어가 부족할 때 AI의 "Thinking Partner" 모드로 브레인스토밍하면 방향이 잡힙니다

• 경쟁사 사이트 스크린샷 한 장으로 컬러셋과 디자인 시스템까지 자동 추출이 됩니다

• 대화 내용을 AI가 기억하고 있어서, "지금까지 한 거 정리해줘"라고 하면 IPO 프레임워크로 체계적으로 정리해줍니다

• 랜딩페이지가 실제로 배포되어 고객에게 바로 공유할 수 있는 상태가 됐습니다

• 기획과 디자인 감각이 부족해도, AI에게 레퍼런스를 주면 전문가 수준의 산출물이 나옵니다

🎯 이런 분들께 도움돼요

• 제약바이오 업계에서 AI 도입을 검토 중인 담당자

• 기획서나 요구사항 정의서 작성에 시간을 많이 쓰고 있는 PM/기획자

• 외주 없이 빠르게 서비스 프로토타입을 만들고 싶은 분

• AI 코딩 도구를 업무에 활용해보고 싶지만 어떻게 시작할지 모르는 분

😫 문제 상황 (Before)

제약바이오 분야의 AI 컨설팅 웹서비스를 준비하고 있었습니다. 서비스 콘셉트는 머릿속에 있었지만, 이걸 문서로 옮기는 과정이 문제였습니다.

기획서를 쓰려면 경쟁사 분석부터 해야 하고, 디자인 시스템을 정의하려면 레퍼런스 사이트를 하나하나 뜯어봐야 하고, 요구사항 정의서를 만들려면 앞서 만든 문서들을 다시 종합해야 했습니다. 한 문서를 만드는 데 반나절, 전체 문서 세트를 갖추려면 일주일은 잡아야 했습니다.

게다가 기획과 디자인에 대한 전문적인 감각이 부족했습니다. 어떤 구조로 사이트를 설계해야 하는지, 컬러는 어떻게 잡아야 하는지, 머릿속 아이디어를 체계적인 문서로 만드는 것 자체가 막막했습니다.

외주를 맡기자니 비용과 커뮤니케이션 시간이 부담이었고, 직접 하자니 전문성이 부족했습니다. 그래서 AI와 직접 대화하면서 하나씩 만들어보기로 했습니다.

🛠️ 사용한 도구

• 도구명: Claude Code (터미널 기반 AI 코딩 어시스턴트)

• 모델: Claude Opus 4.6

• 특이사항: Thinking Partner 모드, WebFetch(원격 사이트 분석), 이미지 인식 기능 활용

🔧 작업 과정

AI와 브레인스토밍으로 방향 잡기 — "혼자 고민하던 걸 질문 몇 개로 정리했다"

처음에는 "AI 전환 컨설팅"이라는 큰 주제만 있었고, 구체적인 서비스 방향은 잡히지 않았습니다. Claude Code의 Thinking Partner 모드를 켜고 대화를 시작했습니다.

/thinking-partner

AI가 질문을 던져주면서 생각이 정리되기 시작했습니다. "매니저는 ROI에 관심이 있고, 엔지니어는 적용 가능 영역, QA는 검증 전략에 관심이 있다"는 식으로 역할별 관심사를 이야기하니, AI가 이걸 체계적으로 구조화해줬습니다.

AI 전환이라는 공통 주제로 역할별 관심사를 정리해줘.
매니저는 ROI, 엔지니어는 적용 가능 영역, QA는 검증 전략에 관심이 있어.

혼자 끙끙대며 정리했으면 반나절은 걸렸을 내용이, 대화 몇 번으로 깔끔하게 정리됐습니다. 이 과정에서 "아, AI한테 정답을 요구하는 게 아니라, 내 생각을 정리하는 데 쓰면 되는구나"라는 걸 깨달았습니다.

기획서부터 사이트 설계까지 — "대화가 곧 기획서가 됐다"

방향이 잡히니 본격적으로 기획에 들어갔습니다. 기존에 간단히 메모해둔 사이트 내용 정리 파일을 AI에게 보여주고, 기획 템플릿에 맞춰 채워달라고 했습니다.

MVP/사이트 내용정리.md를 참고해서 MVP/1_IPO-Webpage-Plan-Templete.md를 채워줘

AI가 메모 수준이던 내용을 기획서 포맷에 맞게 재구성해줬습니다. 여기에 비즈니스 요구사항을 하나씩 대화로 추가했습니다.

문의 양식은 컨택트 폼으로, 실적은 아직 없고, 이메일 교환 방식.
일정은 4월 중순 목표. 도메인은 www.***.co.kr

About Us, Insight 섹션 구성하고 이미지 기반 카테고리로 해줘.
뉴스레터는 블로그 연동. 백엔드는 Phase 2에서 하고, 프론트 먼저 해줘.

인상적이었던 건 AI가 이전 대화 내용을 기억하고 있다는 점이었습니다. "지난번에 얘기한 대시보드 기능 확인해줘"라고 하면, 이전에 논의했던 맥락을 그대로 이어서 작업해줬습니다.

경쟁사 분석과 사이트 진단 — "URL 하나로 기술 분석 보고서가 나왔다"

참고할 사이트들의 디자인을 분석해달라고 요청했습니다.

ProPharma와 ***.co.kr 사이트의 디자인을 분석해줘

AI가 두 사이트의 레이아웃, 컬러, 타이포그래피를 분석해서 비교 보고서를 만들어줬습니다. 디자이너가 아닌 제가 이런 분석을 직접 하려면 어디서부터 시작해야 할지도 막막했을 텐데, URL만 알려주니 전문적인 분석이 나왔습니다.

기존에 운영 중이던 사이트의 오류 진단도 요청했습니다.

https://www.***.co.kr에 접속해서 오류가 없는지 확인해줘

AI가 직접 사이트에 접속해서 기술 스택을 파악하고, SSR 미적용, SEO 메타태그 누락, CDN 단일 의존 같은 문제점을 찾아냈습니다. 전문 개발자에게 의뢰해야 알 수 있는 수준의 진단 결과였습니다.

스크린샷 한 장에서 디자인 시스템까지 — "이게 진짜 되나?" 싶었던 순간

이 프로젝트에서 가장 인상적이었던 순간입니다. Veeva AI라는 레퍼런스 사이트의 스크린샷을 찍어서 AI에게 보여줬습니다.

캡쳐한 이미지의 내용을 JSON 형식으로 구조화해주세요

AI가 스크린샷에서 네비게이션, 히어로 섹션, 9개 콘텐츠 섹션, 푸터까지 전체 페이지 구조를 JSON으로 변환해줬습니다. 여기서 끝이 아니었습니다.

이 json을 color-set.md 파일의 포멧에 맞게 정리해주세요. color값은 캡쳐된 파일을 따릅니다

스크린샷에서 컬러 값을 추출하고, 13개 컬러 토큰(Primary Orange #f26522, Charcoal #1a1a1a 등)을 정의하고, 11개 섹션별 컬러 매핑 테이블까지 만들어줬습니다. 폰트 시스템까지 포함된 완성된 디자인 시스템 문서가 나왔습니다.

스크린샷 한 장 → JSON 구조화 → 컬러 추출 → 디자인 시스템 문서. 이 흐름이 대화 몇 번으로 완성됐을 때, 솔직히 "이게 진짜 되나?" 싶었습니다.

모든 문서를 하나로 — "정리해줘 한마디에 14개 섹션 요구사항 정의서"

기획서, 콘텐츠 정리, 입력 스키마, 디자인 시스템까지 개별 문서들이 쌓이자, 이걸 하나의 통합 요구사항 정의서로 만들어달라고 했습니다.

entire_process.md, project_content.md, input_schema.md, project-color-set.md 파일을 참고해서
전체 요구사항을 정리해서 requirement.md 파일로 정리해주세요

AI가 기존에 있던 요구사항 정의서(v1.2, 단일 서비스용)를 4개 서비스 통합 버전(v2.0)으로 업그레이드해줬습니다. 14개 섹션에 걸쳐 디자인 시스템, 개발 로드맵(Phase 1~3), KPI, 수익화 전략까지 포함된 문서가 만들어졌습니다.

이전까지 대화하면서 만든 모든 문서의 맥락을 AI가 기억하고 있었기 때문에 가능한 일이었습니다.

랜딩페이지 배포 — "대화만으로 실제 서비스를 세상에 내놓다"

기획과 문서 작업이 끝나고, 이미 준비해둔 랜딩페이지 소스를 실제로 배포하는 단계로 넘어갔습니다.

/Users/***/Desktop/HQ-MAX/zip/src에 랜딩페이지 소스가 있습니다.
https://github.com/***/*** 에 배포해주세요

AI가 소스 코드를 분석하고, 빌드하고, GitHub Pages에 배포하는 전 과정을 진행했습니다. 중간에 프라이빗 저장소에서는 GitHub Pages가 안 된다는 에러가 나자 퍼블릭으로 전환하고, 빌드 경로 설정 문제도 자동으로 해결했습니다.

추가로 Vercel에도 배포를 요청했습니다.

vercel에 배포해주세요

GitHub Pages와 Vercel 이중 배포까지 완료. 이제 고객에게 "이 주소로 들어가보세요"라고 말할 수 있는 상태가 됐습니다. 기획서만 있던 프로젝트가 실제로 동작하는 웹서비스가 된 순간이었습니다.

✅ 결과 (After)

Before vs After

결과물

• 통합 요구사항 정의서 v2.0 (14개 섹션, 4개 서비스 통합)

• Veeva 레퍼런스 기반 디자인 시스템 (13개 컬러 토큰 + 폰트 시스템)

• IPO 프레임워크 기반 서비스 정의서

• BioMfg.AI 랜딩페이지 (GitHub Pages + Vercel 이중 배포)

• 기존 사이트 기술 진단 보고서

💬 이 과정에서 배운 AI 활용 팁

효과적이었던 것

1. 레퍼런스를 주면 퀄리티가 달라진다: "디자인 시스템 만들어줘"보다 "이 스크린샷의 컬러와 구조를 기반으로 만들어줘"가 훨씬 좋은 결과를 냅니다

2. 대화를 이어가면 맥락이 쌓인다: 기획 → 콘텐츠 → 스키마 → 요구사항 순으로 대화를 이어가니, AI가 이전 내용을 기반으로 점점 더 정교한 문서를 만들어줬습니다

3. Thinking Partner로 시작하면 방향이 잡힌다: 바로 "만들어줘"보다 먼저 브레인스토밍을 하면, 이후 작업의 질이 훨씬 높아집니다

4. 기존 템플릿을 활용하라: "이 형식에 맞춰서 채워줘"라고 하면 일관된 포맷의 문서를 얻을 수 있습니다

이렇게 하면 안 돼요

1. 너무 큰 범위를 한 번에 요청하지 마세요: "웹서비스 전체를 만들어줘"보다 기획 → 디자인 → 개발 → 배포 순서로 나눠서 진행하는 게 훨씬 낫습니다

2. AI 결과물을 검증 없이 쓰지 마세요: 특히 기술 분석이나 컬러 값 같은 것은 실제와 맞는지 한 번 확인하는 게 좋습니다

🌍 다른 업무에 적용한다면?

이번에 사용한 방법은 제약바이오뿐 아니라 어떤 분야에서든 적용할 수 있습니다:

• 신규 서비스 기획: 아이디어 브레인스토밍 → 기획서 → 요구사항 정의서 → 프로토타입 배포까지의 흐름을 그대로 활용

• 경쟁사 벤치마킹: 참고 사이트의 URL이나 스크린샷만 있으면 구조 분석과 디자인 시스템 추출 가능

• 사내 문서 표준화: 기존 산재된 문서들을 하나의 통합 문서로 자동 종합

• PoC/MVP 빠르게 만들기: 기획부터 배포까지 외주 없이 2주 내 완성

🚀 앞으로의 계획

1. 서비스 고도화: 현재 랜딩페이지 수준에서 백엔드(대시보드, 회원관리, 결제)를 추가하는 Phase 2 개발 진행 예정