Agent-Run Business from Zero: 3. Frontend Design in Claude Design + Local Video Gen

🖼️ 인포그래픽

🖼️ 4컷 인포그래픽

💡 한 줄 결론

Claude Design과 로컬 영상 생성으로 에이전트 기반 사업의 프런트엔드를 구현했지만, 영상 품질 보완과 실제 주문 흐름 검증은 남아 있다.

📌 핵심 요점

1. Keepsake Threads는 오래된 옷 사진에서 무늬를 복원하거나 재해석해 새 의류로 제작하는 사업 구상이다. 이번 작업은 상품의 기능보다 추억과 감정을 전달하는 사이트·로고·영상 제작에 집중한다.
2. Claude Design에서 여러 스타일을 비교한 뒤 밝고 따뜻한 1A안을 선택했다. 이를 랜딩 페이지, 이용 시작, 디자인 라이브러리, 로그인·정책 페이지로 확장하고 Claude Code에 전달해 실제 사이트로 구현했다.
3. 핵심 연출은 옷의 무늬에서 나온 실이 과거와 현재를 연결하는 스크롤 연동 영상이다. 처음에는 성장 단계별로 두 영상을 만들려 했으나, 최종적으로는 결합한 영상의 전반부와 후반부를 두 구분 영역에 나눠 배치했다.
4. 로컬 영상 제작에서는 키프레임 검토와 저해상도 모션 시험을 거쳐 반복 수정했다. 무늬 위치, 인물·배경의 연속성, 실의 굵기와 움직임에서 오류가 발생했고, 후처리 합성도 개선으로 이어지지 않아 좋은 앞부분을 보존하고 후반부를 다시 제작했다.
5. 로컬 사이트에서 스크롤 재생은 작동했지만 해상도와 등장 타이밍은 추가 조정 대상이다. 사진 업로드는 아직 열리지 않았으며, Shopify·주문 제작 서비스·무늬 추출 AI 연결과 실제 제품 주문은 다음 단계로 남았다.

🧩 배경과 문제 정의

• Keepsake Threads는 오래된 가족사진 속 아기 옷의 무늬를 추출해 그대로 사용하거나 아이의 현재 나이에 맞게 변형한 뒤, Shopify 기반 주문형 인쇄 상품으로 만드는 사업 구상이다.
• 앞선 단계에서 사업 계획과 기반을 마련했으며, 이번 작업은 소비자에게 추억과 상품 가치를 전달할 프런트엔드 디자인과 영상·로고 제작에 집중한다.
• 핵심 시각 요소는 같은 아이의 아기 시절, 다섯 살, 청소년기를 옷의 무늬와 실로 연결하는 스크롤 연동 영상이다. 인물·무늬·배경의 일관성과 자연스러운 전환이 주요 제작 과제다.
• 영상은 로컬 환경에서 우선 생성하려 하지만, 생성 시간이 길고 결과에 오류가 생길 수 있다. 완성도를 높이는 반복 작업과 웹사이트 디자인 진행을 함께 조율해야 한다.

🕒 시간순 섹션별 상세정리

1. 사진 속 아기 옷을 현재의 의류로 되살리는 사업

• 고객이 아이나 가족의 아기 시절 사진을 올리면 옷의 무늬를 추출하고, 원형을 유지하거나 현재 나이에 맞게 변형해 주문형 인쇄로 제작하는 것이 Keepsake Threads의 기본 구상이다. 사업 구축 범위에는 배포·마케팅·유지보수가 포함되며, 수익 창출은 기대하는 목표다. [01:13]
• 소비자 대상 상품인 만큼 웹사이트의 시각적 완성도를 중요하게 보고, 생성형 AI 영상과 Claude Design을 활용해 페이지를 구성하며 여러 디자인 대안을 탐색하려 한다. [01:43]

2. 첫 화면에 브랜드·광고·핵심 설명을 배치

• 상단 내비게이션에는 모서리의 로고와 로그인·회원가입을 배치한다. 로고 역시 별도로 제작해야 하는 자산이다. [03:36]
• 히어로 영역에는 큰 제목, 짧은 설명, 대표 광고를 함께 넣고, 이 요소들이 스크롤하기 전 첫 화면에 보이도록 구상한다. [04:03]

3. 아기와 다섯 살 아이를 연결하는 첫 번째 영상

• 히어로 아래에는 사용자가 아래로 스크롤할 때 조금씩 재생되는 띠 형태의 영상을 넣어 페이지 구간을 나눈다. [04:20]
• 공원 유모차 속 아기의 꽃무늬 옷에서 금색 윤곽이 실로 바뀌어 하늘로 올라간 뒤, 놀이시설에 있는 다섯 살 아이의 같은 무늬 셔츠로 이어지는 장면을 구상한다. [05:06]

4. 이용 방법과 청소년기로 이어지는 두 번째 영상

• 첫 영상 뒤에는 이용 절차를 단계별로 설명하는 영역과 별도의 이용 방법 영상을 배치한다. [06:01]
• 두 번째 영상은 첫 영상의 마지막 프레임에서 시작한다. 여자아이 옷의 무늬에서 나온 실이 공원 옆을 지나가는 청소년의 셔츠로 이어지며, 무늬는 더 작고 나이에 어울리는 스타일로 바뀐다. 두 영상의 인물은 서로 다른 나이의 같은 아이여야 한다. [07:25]

5. 스크롤 연동 영상의 재생 방식과 모바일 제약

• Hermes의 Builder 프로필에 스케치를 전달하고, 약 10초짜리 클립이 스크롤에 따라 조금씩 재생되는 구분 영역을 구현할 방법을 요청한다. 영상 생성은 Spark의 로컬 환경에서 우선 시도하려 한다. [09:15]
• 영상은 스크롤로 재생 위치를 움직이는 용도에 맞춰 제작해야 하며, 실사 스타일을 우선 고려한다. 넓은 화면의 구도를 휴대전화에 그대로 적용하기 어려워 모바일용 구도가 별도로 필요하다. [10:03]

6. 짧은 클립의 제작 경험을 바탕으로 Spark에 작업 이관

• 기존 공룡 영상에서는 형태가 변하는 오류와 클립 사이의 거친 전환이 나타났다. 약 3분짜리 영상은 10초 또는 15초 클립을 이어 붙여야 했지만, 이번에 필요한 것은 10초 정도의 짧은 클립이다. [11:28]
• 스크롤 영상 제작 브리프를 Spark 폴더에 넣고, 데스크톱 앱에서 Spark에 연결된 영상 제작용 프로필로 전환한다. [12:26]

7. 일반 광고와 다른 영상 연출 및 색상 기준

• 제작 계획은 두 영상을 일반 광고가 아닌 스크롤 제어 타임라인으로 취급한다. 느리고 연속적인 장면과 시작 부분의 잠시 멈춘 구간을 활용하는 방향이다. [14:34]
• 초기 설계에는 최종 브랜드 색상·서체·반응형 컨테이너 크기가 빠져 있다. 영상과 랜딩 페이지의 공통 분위기로 향수를 불러일으키는 따뜻한 색감, 연한 분홍·파랑·주황·금색을 추가한다. [15:03]

8. 키프레임 검토 후 저해상도 모션을 시험하는 제작 절차

• 먼저 유모차 속 아기의 시작 키프레임과 놀이터의 다섯 살 아이가 등장하는 종료 키프레임을 만든다. 두 정지 이미지를 승인한 다음 저해상도 모션 초안을 생성하고, 이후 전체 렌더링으로 넘어가는 순서다. [16:15]
• 키프레임 생성 중에는 ChatGPT Images로 로고 후보를 만든다. 향수와 감정적 분위기, 연한 색상의 포인트, 실제 실을 활용한 표현을 요청한다. [16:57]

9. 로고의 간결함과 옷 위 무늬의 정확성을 점검

• 초기 로고는 더 깔끔하게 다듬을 필요가 있다고 판단한다. 프로젝트 맥락을 더 잘 아는 Builder 에이전트에도 같은 요청을 보내 더 나은 후보를 탐색한다. [18:30]
• 아기 이미지의 주변 환경은 마음에 들지만, 꽃무늬가 옷이 아닌 담요에 들어가 있어 수정이 필요하다. 상품의 개념을 전달하려면 무늬가 아기의 옷에 있어야 한다. [19:08]

10. 하트 모양의 실과 부드러운 색감으로 로고 수정

• 비교적 단순한 두 번째 로고 방향을 선호하며, 실이 만드는 무한대 모양을 하트로 바꾸고 금색 대신 연한 분홍색을 적용하도록 요청한다. [20:54]
• 실에서 글자까지 분홍색이 자연스럽게 이어지도록 해, 중간에 색이 갑자기 바뀌는 느낌을 줄이려 한다. [21:08]

11. 로고 후보를 잠정 선택하고 실제 사용용 자산으로 정리

• 블러시 계열 후보와 간단한 보조 심볼을 선호하며, 헤더에 들어갈 크기도 고려한다. 현재 후보를 우선 사용하되 나중에 교체할 수 있는 잠정 선택으로 둔다. [22:53]
• 이후 에이전트는 선택안을 ‘옵션 2, 앤티크 골드 방향’으로 해석하고 실제 사용 가능한 로고 체계로 다듬는 작업을 제안한다. 이를 진행시켜 Claude Design에서 쓸 자산을 준비한다. [23:42]

12. 꽃무늬·인물·배경의 일관성을 맞추는 반복 수정

• 수정된 꽃무늬가 옷 위에 자연스럽게 인쇄된 모습보다 따로 얹힌 것처럼 보이고, 비교 이미지의 꽃 모양도 서로 달라 추가 수정이 필요하다. 별도로 만들어진 SVG 결과 역시 품질이 좋지 않다고 판단한다. [24:45]
• 다음 이미지에서는 무늬와 인물이 같아 보인다고 평가한다. 배경은 여전히 다르지만 카메라 각도 차이일 가능성을 고려하고, 우선 영상 생성을 시도한다. [25:24]

13. 첫 로컬 영상과 대체 모델에서 드러난 생성 오류

• 비용이 들지 않는 로컬 생성을 선호하지만 필요하면 다른 모델도 시험할 계획이다. 첫 로컬 결과는 장면 사이의 전환이 부족하고 여자아이가 정지 이미지처럼 보여 재시도가 필요하다. [26:32]
• Hermes의 영상 생성 도구로 시험한 Grok Imagine 결과에서는 아이의 다리가 보이지 않는 등 심한 신체 표현 오류가 발생한다. 몇 차례 더 시도할 가능성은 열어 두지만 결과는 좋지 않다고 평가한다. [27:15]

14. 금색 실을 후처리로 합성하는 대안의 실패

• 다음 결과는 실이 하늘로 올라갔다가 연결되는 동작이 의도에 가까워졌지만, 불필요한 원형 요소가 남아 있다. 에이전트는 실 없이 영상을 생성한 뒤 금색 실을 추적 벡터 곡선으로 추가하는 방식을 제안한다. [27:44]
• 두 번째 버전의 꽃 부분을 추적해 원형 오류를 보정하고 실을 제어 가능한 오버레이로 넣어 보지만, 합성 요소가 떠다니는 듯 보여 결과가 더 좋아지지 않는다. [28:22]

15. 가장 가까운 결과를 임시 영상으로 두고 디자인 단계로 이동

• 후속 결과에서는 실이 지나치게 곧아 밧줄처럼 보인다. 이상한 원형 요소가 남아 있어도 움직임이 있는 두 번째 버전이 여전히 의도에 가장 가깝다고 판단한다. [29:25]
• 영상 생성과 수정은 계속하되 두 번째 버전을 임시 자산으로 사용한다. 필요한 형식은 갖췄고 구체적인 화면 표현이 남은 문제라고 보고, Claude Design 작업으로 넘어가려 한다. [29:57]

16. 따뜻한 브랜드 디자인과 영상 구도를 함께 재설정한다

• 10초짜리 영상도 아기가 지나치게 놀란 표정으로 나오는 등 결과가 어색하다. 사이트 디자인에는 기존 디렉터리의 임시 UI·설계안·로고를 활용하고, 향수·따뜻함·감정·편안함을 키워드로 최소 세 가지 안을 요구한다 [30:58]
• 영상의 키프레임은 놀이터를 바라보는 벤치와 유모차 구도로 다시 만든다. 아기의 꽃 자수 롬퍼와 마지막 장면 속 소녀의 같은 무늬 티셔츠를 연결하되, 기존 구도의 배치 문제를 줄이려 한다 [31:38]

17. 디자인 후보의 색상과 설계안 적합성을 비교한다

• 따뜻한 크림색 스크랩북 스타일이 생성되지만, 부적절한 로고 이미지와 원치 않는 이미지도 포함된다. 현재 미리보기 형식에서는 스크롤 효과를 확인하기 어려워 색상과 전체 스타일부터 비교한다 [32:53]
• 영상 영역은 크기를 줄일 필요가 있고, 짙은 자주색과 파란색 계열도 검토한다. 세 번째 안은 원래 설계안을 충분히 따르지 않아 제외한다 [34:16]

18. 밝은 배경의 1A안을 최종 디자인 기준으로 선택한다

• 서비스의 분위기에는 밝은 배경이 어울린다고 판단한다. 1A안의 배경을 조금 더 짙게 조정한 결과가 적합해 이 안을 선택하고, 로고 배경은 투명하게 만들어 자연스럽게 섞이도록 할 계획이다 [35:17]
• 새 영상 이미지에는 티셔츠가 가려지고 두 장면의 놀이터가 서로 다른 문제가 남아 재생성을 요구한다. 사이트는 1A의 디자인과 형식을 확정하고 문구를 별도로 수정한다 [36:21]

19. 선택한 스타일을 주요 페이지로 확장한다

• 앞서 마련한 기반 요구사항에 따라 이용 시작, 디자인 라이브러리, 랜딩 페이지, 로그인과 정책 페이지의 구성 요소·버튼·문구를 생성한다 [37:03]
• 디자인 라이브러리는 원하는 디자인을 모으고, 이용 시작 페이지에서는 사진을 선택하며, 계정 로그인은 Shopify를 통할 예정이다 [38:16]

20. 기능 설명 중심의 문구를 기억과 감정 중심으로 다듬는다

• 기존의 ‘작아진 옷의 디자인을 다시 입을 수 있게 옮긴다’는 설명에서, 오래된 옷에 담긴 기억과 감정을 현재로 연결하는 메시지로 방향을 바꾼다. AI가 제안한 초기 문구들은 만족스럽지 않아 직접 대안을 작성한다 [40:34]
• ‘입을 수 있는 기념품’과 ‘실을 통해 과거와 현재를 연결한다’는 표현을 검토하며, 과거에 소중히 여긴 디자인을 지금 입을 수 있는 기념품으로 재해석한다는 문구를 편집한다 [42:17]

21. 꽃 자수의 질감과 가느다란 실의 표현을 조정한다

• 새 꽃 무늬는 이전보다 자수처럼 보인다. 원본과 픽셀 단위로 같지는 않지만 재해석하는 디자인이라는 점에서 수용할 만하다고 판단한다 [44:21]
• 영상에는 금빛 윤곽이 생긴 뒤 실이 나오는 효과를 원하며, 실은 매우 가볍고 가늘어야 한다. 이 조건으로 클립을 다시 생성한다 [45:01]

22. 사진 제출부터 구매 승인까지의 이용 절차를 구체화한다

• 이용 흐름은 원래 옷의 사진 1~10장 제출, 복원된 무늬·그래픽·문구 검토, 의미 있는 문구의 정확성 확인, 제품 시안 승인, 호환되는 새 옷에 주문하는 순서다 [45:28]
• 디자인 프로젝트 하나는 옷 한 벌을 대상으로 한다. 주름·봉제선·마모로 무늬가 가려질 수 있어 여러 각도의 사진이 도움이 되며, 현재 업로드 기능은 열리지 않은 사전 준비 단계다 [46:08]

23. 디자인 보관과 보조 페이지의 구성을 정리한다

• 디자인 라이브러리는 승인한 디자인을 보관하고 원본 사진 없이 다시 사용할 수 있는 공간으로 구성한다. 현재 화면의 디자인들은 출시 전 미리보기용 샘플이다 [47:40]
• 로그인과 정책 페이지를 확인하고 FAQ도 추가한다. 보조 페이지의 문구를 다듬은 뒤, 랜딩 페이지에는 제대로 된 영상 자산을 넣는 일이 남는다 [48:58]

24. 연결되는 실을 사이트와 광고의 공통 콘셉트로 삼는다

• 영상은 랜딩 페이지뿐 아니라 향후 주요 광고에도 사용할 예정이다. 세대를 거쳐 서로 다른 옷을 실이 연결한다는 발상이 마케팅 자산 전반의 핵심 콘셉트가 된다 [49:05]
• 원하는 결과가 나오지 않는 이유는 로컬에서 실행하는 모델의 한계일 수도 있다. 현재 사용하는 모델과 생성 방식보다 더 나은 버전이나 설정이 있을 가능성을 열어 둔다 [49:28]

25. 좋은 앞부분을 유지하고 후반부만 보완한다

• 빛나는 효과는 괜찮지만 움직임이 여전히 어색하고 활동성이 부족하다. 새 결과의 첫 5초는 움직임과 실 표현이 좋지만, 이후 실이 끊겼다가 소녀에게 연결되는 부분이 문제다 [51:11]
• 첫 5초는 살리고 후반부를 다시 만들기로 한다. 공중에 실이 떠 있는 마지막 프레임을 이어받아 실 끝이 더 움직이며 소녀에게 내려오도록 하되, 클립을 이어 붙일 때 자연스럽지 않을 가능성도 인정한다 [51:42]

26. 결합한 영상을 두 개의 스크롤 구분 영역에 나눈다

• 결합한 영상은 실이 위로 올라갔다가 아래로 내려오며 필요한 순간들을 담는다. 꽃도 괜찮고 눈에 띄는 이상이 없어 일단 채택하되, 나중에 더 수정할 여지는 남긴다 [52:10]
• 그대로 사용하면 영상이 흐릿하게 보일 수 있어 업스케일링을 진행한다. 모바일 버전과 브라우저 스크롤 연동 검증도 준비한다 [52:45]

27. 디자인을 Claude Code로 넘겨 실제 사이트에 구현한다

• 디자인 도구 안에서 스크롤 연동까지 완성하기보다, 디자인을 Claude Code에 전달해 사이트를 구현하고 실제 영상을 넣는 방식으로 진행한다 [53:30]
• 디자인 MCP를 통한 구현과 영상 교체를 시작한다. 자산 패키지의 검증은 끝났지만, 낮아 보이는 화질이 데스크톱 앱 표시 때문인지 실제 결과물의 문제인지는 불확실해 추후 재작업 가능성을 남긴다 [54:16]

28. 로컬 사이트에서 스크롤 효과를 확인하고 잔여 문제를 찾는다

• 로컬 개발 서버에서는 로고와 부드러운 색상이 의도한 편안한 분위기를 만든다. 스크롤 영상도 잘 작동하지만 해상도가 낮고, 실이 등장하는 시점을 조금 앞당길 필요가 있다 [55:10]
• 아래쪽 영상도 타이밍과 얼굴 주변 해상도가 아쉽다. 큰 화면에서 영상이 늘어나는 영향이 있을 수 있어 추가 업스케일링을 시도하되, 스크롤에 따라 영상이 움직이는 효과 자체는 만족스럽다 [56:00]

29. 상점·제작 서비스·AI를 연결하고 실제 주문으로 검증한다

• 다음 단계는 Shopify와 인쇄·주문 제작 서비스의 상점을 연결하고 제품을 선택하며, 디자인을 추출하는 AI까지 통합하는 일이다 [57:19]
• 통합 후에는 아들의 아기 옷 실제 사진을 사용해 새 제품을 주문하는 전 과정을 시험할 계획이다. 사진 입력부터 실제 주문까지 제대로 이어지는지 확인하고 그 과정을 기록하려 한다 [57:42]

30. 광고 실험과 에이전트 운영 체계를 준비한다

• 이후에는 여러 광고 영상 형식을 시험할 예정이다. Facebook·Meta 광고가 중심이 될 가능성이 있지만 다른 채널도 탐색하며, 개인 채널 밖에서 제품을 마케팅하는 경험은 아직 없다 [58:00]
• 마케팅 자료가 준비되면 출시를 진행하고, 주문과 발생하는 문제를 관리할 에이전트 운영 체계를 구축할 계획이다. 출시 후에는 주간 또는 월간으로 사업 현황·배운 점·변경 사항·수익을 공유하려 하지만 수익은 아직 기대에 머문다 [58:30]

🧾 결론

• 이번 결과물은 출시를 마친 상점이 아니라, 브랜드 분위기와 주요 화면을 갖춘 사이트의 기반이다.
• 임시 영상으로 디자인을 진행하고 영상 수정을 병행하면서, 자산 완성을 기다리지 않고 사이트 구현을 이어갔다.
• 문구는 무늬를 옮기는 기능 설명에서 소중했던 디자인을 지금 입을 수 있는 기념품으로 되살린다는 메시지로 정리됐다.
• 최종 완성도는 디자인 미리보기뿐 아니라 실제 브라우저의 스크롤 동작과 사진 제출부터 구매까지의 흐름으로 확인해야 한다.

📈 투자·시사 포인트

• 에이전트가 디자인·영상·구현 작업을 지원해도 품질 기준 설정, 후보 선택, 문구 편집에는 사람의 판단이 계속 필요했다. 자동화 수준은 생성 기능과 검수 부담을 함께 봐야 한다.
• 로컬 생성을 선호했지만 긴 생성 시간과 반복 오류가 나타났다. 경제성을 판단하려면 생성 비용뿐 아니라 수정 횟수와 작업 시간도 확인필요가 있다.
• 실로 과거와 현재를 연결하는 콘셉트는 사이트와 향후 광고에 공통으로 활용할 계획이다. 다만 이 메시지가 실제 구매로 이어지는지는 아직 검증되지 않았다.
• 수익과 광고 성과는 기대·계획 단계다. 사업성 평가는 실제 주문 성공 여부와 출시 후 운영·매출 자료가 확보된 뒤 구체화할 수 있다.

⚠️ 불확실하거나 확인이 필요한 부분

• 낮은 영상 화질이 생성 결과 자체, 앱 미리보기, 큰 화면에서의 확대 중 어디에서 주로 발생하는지 확정되지 않았다. 업스케일링 이후 실제 표시 품질을 확인해야 한다.
• 로컬 환경에서 스크롤 효과는 확인했지만, 모바일 구도와 브라우저별 탐색 재생의 안정성까지 검증됐다고 보기는 어렵다.
• 초기에는 가족사진 속 옷을 활용하는 구상이었으나, 구체화된 제출 안내는 사람 없이 옷만 담도록 한다. 실제로 허용할 입력 사진의 범위를 명확히 해야 한다.
• 자막 기반 정리: 타임스탬프가 있는 자막을 기준으로 정리했으며, 고유명사·수치·인용은 원문 확인 필요 시 별도 검증한다.
• 영상 속 주장: 발표자의 해석·전망·비교는 확인된 외부 사실이 아니라 영상 속 주장으로 분리해 읽는다.
• 검증 필요: 수치, 기업 실적, 정책·시장 전망은 발행 전 최신 자료로 별도 검증이 필요하다.

✅ 액션 아이템

• 데스크톱과 모바일의 실제 브라우저에서 영상 해상도, 확대 정도, 스크롤 재생, 실의 등장 시점을 점검한다.
• 두 영상 구간의 연결부와 인물·무늬·배경의 연속성을 검토하고, 업스케일링 전후 결과를 비교한다.
• 최종 로고의 색상·투명 배경·작은 심볼을 확인하고 주요 페이지에 일관되게 적용한다.
• 사진 1~10장 제출, 옷 한 벌당 프로젝트 하나, 문구 확인, 제품 시안 승인이라는 이용 조건을 화면과 안내 문구에 맞춘다.

❓ 열린 질문

• 로컬 모델이나 생성 설정을 바꾸면 실의 움직임과 장면 연속성을 충분히 개선할 수 있을까?
• 가족사진 속 옷도 입력으로 허용할 것인가, 옷만 촬영한 사진으로 제한할 것인가?
• 추억을 되살린다는 메시지와 스크롤 영상은 고객의 상품 이해와 구매에 얼마나 기여할까?