소개
구글 AI 스튜디오에서 제작했던 라이프스타일 큐레이션 웹 프로토타입을 우리 팀 브랜드 디자인 시스템(블랙&화이트 미니멀 + 레드 포인트, GUESS Korea 톤)에 맞춰 재구성하고, 클릭 가능한 인터랙티브 프로토타입으로 만들어보고 싶었습니다.
진행 방법
Claude에 사이트 URL을 던지고 "이 사이트를 우리 브랜드 디자인 시스템으로 바꿔줘"라고 요청했습니다. URL이 클라이언트 렌더링 앱이라 정적 HTML만으로는 내용을 볼 수 없었는데, Claude가 이를 바로 알아채고 스크린샷 첨부 + 범위/충실도/언어 등을 묻는 질문지를 먼저 띄웠습니다.
사용한 프롬프트(요지):
<https://service-234515804454.asia-south1.run.app>
이 사이트를 "우리 브랜드 디자인 시스템"으로 바꿔줘
질문에 "동작하는 인터랙티브 프로토타입" / "Decide for me" 위주로 답하자, 우리 디자인 시스템의 컴포넌트 번들(Button, Badge, Modal 등)을 로드해서 홈 화면 하나를 완성도 있게 만들어줬습니다. 히어로, 오늘의 맞춤 추천 카드, 실시간 챌린지, 랭킹, 소품 그리드, 프리미엄 CTA, 취향 테스트 모달까지 상태(찜, 챌린지 참여, 퀴즈 선택)가 실제로 동작합니다.
이후 이어진 작업:
"MVP로 사진을 각각 넣어줘" → 이미지 슬롯마다 플레이스홀더 사진 삽입
텍스트 줄바꿈 버그, 배지 정렬 등 발견된 이슈 수정
특정 상호명/장소명 교체 (예: "인터뷰맨션", "도안")
특정 필드를 Tweaks 패널에서 바로 수정 가능하게 프롭화
최종적으로 "Save as standalone HTML" 스킬로 오프라인에서도 열리는 단일 파일 내보내기
결과와 배운 점
결과물: 디자인 시스템 톤이 일관되게 적용된, 실제로 클릭·입력이 되는 모바일 목업 1개 화면 (Design Component 파일 하나)
배운 점: 최종 결과물 웹화면이 약간의 클릭은 되었지만 원래처럼 동작하지는 않았습니다. 전체적인 템플릿 수정은 잘되는데 한글이 다르게 바뀌는 경우가 있었고 이미지는 하나씩 교체해줘야 했습니다. 이미지 replace가 안될 때 질문하니 해당 탭을 새로고침하라고 해서 그렇게 하니 다시 이미지가 잘 수정되었습니다.
시행착오: 오프라인 export 과정에서 이미지가 실제로는 코드(JS 배열) 안의 문자열 URL로 참조되고 있어서, 정적 HTML 인라이너가 자동으로 못 찾는 케이스가 있었습니다. 리소스별로 메타 태그를 추가하고 코드에서
window.__resources로 참조하도록 바꿔서 해결했습니다.앞으로 계획: 원래 홈페이지에서 동작을 연계하여 그대로 만들수 있는 방법은 없는지 알아볼 예정입니다. 다른 주요 화면(상세페이지, 장바구니 등)도 같은 디 자인 시스템으로 확장할 계획인데 메인페이지와 상세페이지를 어떻게 연결해야 할지가 고민입니다.
