[클로드 디자인 × 클로드 코드] 상사의 한 마디를 하루 반 만에 사이트로 — 디자인은 맡기고, 검증은 붙이고

📝 한줄 요약

"누가 어디서 일하는지 지도로 보고 싶다"는 상사 요청을, 클로드 코드로 기획·데이터를 잡고 클로드 디자인과 시안을 세 번 주고받아 하루 반 만에 배포까지 끝냈습니다. 디자인 도구가 만든 화면을 다른 AI가 검증하게 한 게 핵심이었어요.

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

• 클로드 디자인에 파일만 던지지 말고 파일마다 역할을 지정하면(명세/데이터/디자인 토큰) 첫 시안 품질이 다릅니다

• 시안 수정은 말로 길게 쓰는 것보다 참조 이미지 한 장 + 번호 매긴 지시문이 한 번에 먹혔습니다 (5건 요청 → 5건 반영)

• 디자인 도구의 결과물을 클로드 코드로 검증했습니다 — 색상값이 우리 디자인 시스템과 일치하는지, 화면의 숫자가 원본 데이터와 일치하는지, 사람 눈으론 못 잡는 걸 잡아줍니다

• 사내 데이터가 담긴 사이트를 공개 URL로 배포해야 할 때, 블러 처리 대신 데이터 자체를 가공본으로 교체하는 방식을 썼습니다 — 유출 검사를 자동화해서 실수 여지를 없앴어요

• AI의 진단도 틀립니다 — "외부 의존성이 있다"던 진단이 재검증에서 뒤집혔어요. 중요한 판단은 한 번 더 확인

🎯 이런 분들께 도움돼요

• 클로드 디자인으로 시안은 뽑았는데, 수정 요청을 어떻게 해야 원하는 대로 나오는지 막막한 분

• 회사 데이터로 뭔가 만들고 싶은데 "공개 배포"가 걸려서 시작을 못 하는 분

• AI가 만든 결과물을 어디까지 믿어야 할지, 검증을 어떻게 해야 할지 고민인 분

😫 문제 상황 (Before)

우리 회사는 현장 인력이 매일 여러 지점을 오가며 일합니다. "오늘 누가 어디에 있지?"라는 질문에 답하려면 운영 시트를 열고, 일정표를 대조하고… 물어보는 사람도 답하는 사람도 번거로웠어요.

그러던 중 대표님이 지나가듯 한 마디를 하셨습니다.

"지점 지도맵이 있어서, 현재 누가 어디에 근무하고 있는지 상태를 나타내는 사이트가 있으면 좋겠어."

마침 스터디에서 배우던 워크플로우(PRD 기획 → 클로드 디자인 → 버셀 배포)를 실전에 써볼 타이밍이라, 이 요청을 그대로 프로젝트로 잡았습니다.

🛠️ 사용한 도구

• 클로드 코드 (Claude Code): 기획 인터뷰, 데이터 추출·가명화, 시안 검증, 가공·배포

• 클로드 디자인 (Claude Design): 시안 생성과 왕복 수정 (총 3라운드)

• 버셀 (Vercel): 공개 배포

🔧 작업 과정

시작은 화면이 아니라 질문 3개 — AI가 먼저 물어보게 하기

바로 화면을 그리고 싶은 마음을 누르고, 클로드 코드의 기획 인터뷰부터 돌렸습니다. AI가 결정이 필요한 지점을 찾아 선택지를 만들어 왔어요.

대표님이 "현재 누가 어디 근무하는지 보고 싶다"고 하셨어. 이 사이트를 만들어 보는 거 어때?

AI가 되물은 세 가지: ① "현재 근무"의 정의는? (고정 배치 기준이냐, 오늘 이동까지 겹치냐) ② 데이터는 어떻게 연결? (실시간 연동이냐, 스냅샷이냐) ③ 공개 범위는? — "직원 실명+근무 위치는 내부정보라 공개 URL에 올리면 리스크가 있다"는 지적까지 AI가 먼저 했습니다.

세 번째 질문이 결정적이었어요. 시작 단계에서 "공개용과 사내용을 분리한다"는 원칙이 서 있었기 때문에, 나중에 배포 단계에서 당황하지 않았습니다.

인터뷰 답을 바탕으로 AI가 PRD(요구사항 문서)를 쓰고, 운영 시트에서 3주치 실데이터를 뽑아 인명을 전부 가명으로 바꾼 작업용 데이터를 만들었습니다. 재미있는 건, 이 과정에서 AI가 시트를 실측하다가 "지점 수가 알고 있던 것보다 많다"는 것과 "배치 기준 시트가 두 달째 갱신이 멈춰 있다"는 걸 발견했다는 점이에요. 화면 만들려다 데이터 관리 구멍을 먼저 찾았습니다.

1라운드 — 파일 세 개를 던지되, 역할을 붙여서

클로드 디자인에 PRD, 데이터, 회사 디자인 시스템 css 세 파일을 올렸습니다. 이때 그냥 실행하지 않고 짧은 프롬프트를 곁들였어요. 파일이 여러 개면 도구가 뭐가 명세고 뭐가 참고인지 헷갈릴 수 있거든요.

PRD가 요구사항 명세, JSON이 실데이터(인라인으로 임베드), css가 디자인 시스템이야.
이 셋으로 PRD 화면 구성대로 단일 페이지 상태 사이트를 만들어줘.
제약: 외부 지도 API 금지(지도는 인라인 SVG 약도), 모바일 대응, 색·서체는 css 토큰만 사용.

첫 시안, 솔직히 마감 품질은 놀라웠습니다. 타이포 위계, KPI 카드, 배지 디테일 — 손으로 다듬으려면 한참 걸릴 것들이 한 번에 나왔어요.

그리고 여기서 이 글의 핵심 한 가지. 시안을 눈으로만 보고 넘어가지 않고, 클로드 코드에게 검증을 시켰습니다.

• 시안의 색상값을 전부 추출해서 우리 디자인 시스템 정본과 대조 → 일치

• 화면의 모든 숫자(오늘 인원, 지점 수, 주간 방문 건수, 개인별 건수)를 원본 데이터와 검산 → 전부 일치

• 가명 처리가 뚫린 곳은 없는지 실명 매핑표로 역검사 → 유출 0건

"예쁜데 숫자가 틀린" 대시보드가 제일 무섭잖아요. 이 검산 덕에 이후 라운드에서는 디자인 얘기만 할 수 있었습니다.

2라운드 — 참조 이미지 한 장이 말 열 마디보다 셌다

다만 화면 구성이 아쉬웠습니다. 전국 지도 아래 서울 지도가 또 나와서 스크롤이 길고, 같은 정보가 두 섹션에 중복됐어요. 그런데 마침 비교 대상이 있었습니다 — 기획 단계에서 클로드 코드가 만들어둔 참고용 프로토타입이요.

둘을 나란히 놓고 보니 결론이 명확했습니다. 디자인 품질은 클로드 디자인 승, 화면 구성력은 프로토 승. 그래서 고르는 대신 합치기로 했어요. 프로토 스크린샷을 참조 이미지로 첨부하고, 수정 사항을 번호로 정리해 한 번에 보냈습니다.

첨부한 참조 이미지의 화면 구성을 따라 재배치해줘. 색·타이포·카드 스타일은 지금 시안 그대로 유지하고 5가지만 수정:
1. 서울 지도를 메인으로 크게, 전국 지도는 우하단 미니 인셋으로 반전
2. 지도와 "오늘의 이동"을 나란히 배치해서 한 화면에 보이게
3. "오늘의 이동" 섹션을 인원 패널에 통합 — 이동 중인 인원을 맨 위에 강조색으로
4. 하단 각주 3칸은 삭제하고 푸터 한 줄로 대체
5. 헤더 문구 교체 (…)
데이터·수치·KPI 카드는 변경 금지.

결과: 5건 요청, 5건 반영. 애매하게 말로 풀었던 이전 요청들과 달리, 참조 이미지+번호 지시문 조합은 한 번에 수렴했습니다. 마지막 줄의 "변경 금지" 명시도 한몫했어요 — 고치라는 것만 고치고 나머지는 건드리지 않았습니다.

3라운드 — 한강 한 줄기로 "산점도"가 "지도"가 되다

마지막 아쉬움은 서울 지도였습니다. 사각형 안에 원들이 제멋대로 떠 있으니, 지도라기보다 좌표 산점도처럼 보였어요. 구 경계선을 다 그리면 해결될까? 아니요 — 약도 스케일에서는 노이즈만 됩니다. 처방은 하나만 넣는 것이었어요. 한강.

서울 지도에 지리 기준선을 넣어줘: 한강 물줄기를 연한 곡선 밴드로 가로지르게 그리고,
서울 시 경계 실루엣을 아주 연한 회색 면으로 깔아줘.
핀 위치를 한강 기준으로 정합시켜줘 — 강북: ○○(동북)·○○(서북) / 강남: ○○(서남)·○○(동남 클러스터).
디테일한 구 경계선은 넣지 말 것.

여기서 팁 하나 — 모양만 그리라고 하면 강 위에 핀이 올라가는 사고가 납니다. 그래서 핀별 방위를 지시문에 명시했어요. 강 하나 들어갔을 뿐인데 "핀들이 제멋대로"가 "강남 쪽에 몰려 있네"로 읽히기 시작했습니다.

✅ 결과 (After)

Before vs After

결과물

• 공개 쇼케이스: https://showcase-taupe-nu.vercel.app (지점명·인명·브랜드 전부 가공된 데모)

• 사내 실사용본은 실명 데이터+접근 제한으로 별도 배포 예정

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

효과적이었던 것

1. 파일에 역할을 붙여서 투입 — "이게 명세, 이게 데이터, 이게 디자인 토큰". 도구가 해석에 쓰는 자유도를 줄이면 첫 결과물이 좋아집니다

2. 참조 이미지 + 번호 지시문 + "나머지는 변경 금지" — 시안 수정 요청의 3종 세트. 5건 요청 5건 반영으로 한 라운드에 수렴했어요

3. 만드는 AI와 검증하는 AI를 분리 — 디자인 도구의 산출물을 다른 도구로 색상·수치·유출 검산. "예쁜데 틀린" 결과물을 걸러줍니다

4. 지리·위치가 있는 화면은 방위까지 지시 — "한강 기준 어느 지점이 강북/강남인지"를 명시해야 사고가 안 납니다

이렇게 하면 안 돼요

1. 사내 데이터 화면을 블러로 가리고 공개 — 화면 전체가 데이터면 마스킹이 아니라 데이터 교체가 답입니다. 그리고 그 교체는 눈이 아니라 자동 검사로 확인하세요

2. AI 진단을 재검증 없이 확정 — "외부 의존 있음" 진단이 실측 한 번에 뒤집혔습니다. 배포·보안이 걸린 판단은 근거까지 확인

3. 수정 요청을 산문으로 길게 — 도구는 문단 속 요청을 일부만 반영하기 쉽습니다. 번호 목록이 체크리스트가 돼요

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

• 지도 자리에 다른 걸 넣으면 그대로 재사용됩니다: 매장별 재고 현황, 프로젝트별 담당자 보드, 설비 점검 상태판

• "실데이터 트랙 / 공개 가공 트랙" 분리는 포트폴리오·데모·교육자료 등 사내 결과물을 밖에 보여줘야 하는 모든 상황에 쓸 수 있어요

🚀 앞으로의 계획

• 사내 실사용본 배포: 실명 데이터 + 접근 제한 + 매일 아침 자동 갱신(운영 시트 → 스냅샷 재생성)

• 외부 DB 도입은 하지 않기로 판단 — 이미 운영 시트가 데이터베이스 역할을 하고 있어서, 새 인프라는 관리 포인트만 늘립니다. 화면에서 직접 입력할 일이 생기면 그때 재논의

📋 재사용 가능한 프롬프트

프롬프트 1: 디자인 도구에 파일 투입

[파일A]가 요구사항 명세, [파일B]가 실데이터(인라인으로 임베드), [파일C]가 디자인 시스템이야. 이 셋으로 명세의 화면 구성대로 [단일 페이지 사이트]를 만들어줘. 제약: [외부 API 금지 / 모바일 대응 / 색·서체는 디자인 시스템 토큰만].

프롬프트 2: 시안 수정 (참조 이미지 첨부)

첨부한 참조 이미지의 화면 구성을 따라 재배치해줘. [유지할 것: 색·타이포·카드 스타일]은 그대로 두고, 아래만 수정:

1. [수정사항]

2. [수정사항] [데이터·수치 등]은 변경 금지.

프롬프트 3: 산출물 검증 (별도 AI에게)

이 HTML 시안을 검증해줘. ① 사용된 색상값을 전부 추출해서 [디자인 시스템 파일]과 대조 ② 화면의 모든 숫자를 [원본 데이터 파일]과 검산 ③ [금지 문자열 목록]이 남아 있는지 검사. 각 항목 일치/불일치를 표로 보고해줘.