Claude Office 정리: 대시보드·데이터 연결·디자인·모션·웹사이트 제작

Claude Office의 대시보드, 외부 데이터 연결, 디자인 시스템, 모션 디자인, 웹사이트 제작 기능을 단계별로 소개하는 영상입니다. 핵심 지표를 정하는 방법, 커넥터·컴퓨터 제어·브라우저·스크래핑 같은 연결 방식, 브랜드 기준을 먼저 세우는 디자인 시스템의 중요성을 중심으로 정리합니다. 다만 발표에는 제품 효과에 대한 주장이 많아 실제 성능은 직접 확인이 필요합니다.

⏱ 00:00발표자는 Anthropic이 대규모 업데이트로 내놓은 'Claude Office'를 소개하며, 이것이 Canva나 Microsoft 같은 구독형 서비스를 대신할 수 있다고 주장합니다. 영상은 대시보드, 디자인, 슬라이드, 문서 기능을 차례로 살펴보는 구성입니다.

발표자는 여러 고객을 가진 작은 스타트업을 운영한다고 밝히며, 실제로 효과가 검증된 방법만 공유하겠다고 말합니다. 내용은 대시보드 설계, 외부 데이터 연결, 디자인 시스템 구축, 모션 디자인과 웹사이트 제작의 다섯 단계로 나뉩니다.

⏱ 00:37발표자는 대시보드의 역할은 두 가지뿐이라고 말하며, 먼저 가장 중요한 숫자 하나를 고르라고 권합니다. 이것은 매출, 주문 수, 커뮤니티 멤버 수처럼 결과로 나타나는 후행 지표(lagging number)입니다. 예로 든 목표는 유튜브 구독자 1만 명이나 월 반복 매출(MRR) 10만 달러입니다.

그다음에는 그 결과에 영향을 주는 선행 지표(lead)를 찾아야 합니다. 구독자 수가 목표라면 영상 게시 횟수와 조회수가 여기에 해당합니다. 발표자는 이 과정을 돕는 프롬프트를 영상 아래에 올려두었다고 안내합니다.

⏱ 02:44첫째는 커넥터입니다. Claude의 Artifacts 메뉴에서 대시보드를 만들고, Zapier, Firebase, Higgsfield처럼 이미 연결해 둔 도구의 실시간 데이터를 불러올 수 있다고 설명합니다. 먼저 필요한 데이터 목록을 적고 하나씩 연결하라고 권합니다.

둘째는 컴퓨터 제어입니다. 바탕화면 파일이나 접근 권한이 없는 브라우저 정보도 루틴을 설정하면 가져올 수 있습니다. 발표자는 커뮤니티의 신규 멤버 수와 월 반복 매출을 매일 아침 확인하는 루틴을 예로 들었습니다.

셋째는 브라우저 사용입니다. Claude 내부 브라우저에서 웹사이트에 로그인하고 작업을 수행하는 방식으로, API가 없어도 API를 쓰는 것과 비슷한 효과를 낸다고 설명합니다. 발표자는 이를 RPA(로봇 프로세스 자동화)에 비유합니다.

넷째는 스크래핑입니다. 웹페이지를 깔끔한 마크다운 텍스트로 바꾸고, 여러 페이지와 브랜드 가이드라인, 로고 같은 정보를 추출할 수 있습니다. 경쟁사 분석이나 매일의 리서치에 활용할 수 있다고 소개하며, 연결은 플러스 버튼, 커넥터, 커넥터 탐색 순서로 진행한다고 설명합니다.

⏱ 06:14발표자는 Claude에서 만드는 디자인을 매번 처음부터 시작하지 말고, 먼저 디자인 시스템을 만들어 두라고 강조합니다. 그래야 결과물이 남들과 비슷해지지 않고, 폰트나 색상, 로고를 매번 설명하는 수고를 줄일 수 있다고 말합니다. 인지 부담을 줄이기 위해 복잡한 디자인은 피하고 단순하게 만드는 것이 좋다는 조언도 덧붙입니다.

구축 과정은 크게 네 가지 작업으로 나뉩니다. 대상 웹사이트 주소와 함께 정해진 프롬프트를 입력하면 Claude가 웹사이트에서 글꼴, 색상, 로고를 가져와 디자인 시스템으로 정리합니다. 발표자는 웹사이트에 필요한 그래픽이 충분하지 않은 경우가 많아 부족한 자료는 다른 방식으로 채워야 한다고 말합니다.

부족한 그래픽은 Higgsfield 커넥터로 이미지와 영상을 생성해 보완합니다. 흰 배경에 맞춰 검은 로고를 흰색으로 바꾸는 작업이 예로 나왔습니다. 발표자는 이렇게 만든 텍스처 팩 같은 에셋을 시스템에 저장해 재사용하면 토큰 효율과 비용을 함께 아낄 수 있다고 설명합니다. 디자인 영감은 Refero.design, Pinterest, Dribbble에서 얻을 수 있다고 소개합니다.

⏱ 12:23발표자는 Claude의 모션 디자인 기능을 올해 나온 가장 혁신적인 기능 중 하나로 꼽으며, 모션 그래픽과 설명 영상 제작에 활용할 수 있다고 말합니다. 발표자는 이 영상의 일부도 Claude로 만들었다고 밝힙니다. 하나의 프롬프트로 음성을 텍스트로 바꾸고, 애니메이션 요소와 타이핑하는 사람의 모습까지 만든 예시를 보여줍니다.

첫 단계에서 브랜드 시스템을 제공하면 로고에 애니메이션을 입히는 작업까지 일관되게 처리할 수 있습니다. 스토리보드를 짜거나 원하는 장면을 자연어로 설명하면 작업을 수행한다고 설명합니다.

발표자는 결과물의 품질이 프롬프트와 시스템 구성에 크게 좌우되며, 한 번에 완벽하지 않을 수 있어 여러 차례 주고받는 과정이 필요할 수 있다고 덧붙입니다.

⏱ 14:08웹사이트 제작에서는 Refero.design의 스타일 페이지에서 마음에 드는 디자인을 고른 뒤, 그 URL을 Claude에 붙여넣고 Higgsfield MCP를 함께 사용해 달라고 요청하는 방식을 소개합니다. 영상 아래 자료에 있는 노션 문서를 채팅창에 붙여 넣으면 같은 콘셉트를 재현하는 데 도움이 된다고 말합니다.

발표자는 예시 사이트에서 스크롤에 따라 화면이 밝아지는 효과와 커서 같은 요소가 Code Motion으로 만들어졌다고 설명합니다. 엑스레이 모드를 켜면 어떤 부분이 코드(CSS)이고 어떤 부분이 생성 영상인지 구분할 수 있다고 보여줍니다. 스크롤할 때 영상을 추가해 달라는 한 줄 요청만으로 애니메이션이 포함된 결과가 나왔다고 강조합니다.

마지막으로 채팅창에서 커넥터를 사용해 유튜브 팟캐스트 배너의 질감 세 가지를 만드는 예를 들며, 앱에 들어가지 않고도 결과물을 바로 내려받거나 참고할 수 있다고 정리합니다.