클로드 역대급 디자인 스킬 업데이트 /design
📺 원본 영상: 클로드 역대급 디자인 스킬 업데이트 /design
🎙️ 채널: 코드팩토리
📅 정리 일자: 2026-08-30
⚠️ Note: 본 리포트는 영상의 음성을 텍스트로 변환(STT)하여 정리한 것입니다. 화면에 표시된 디자인, 코드, 설정 화면, 슬라이드 등의 세부 내용은 포함되지 않을 수 있습니다.
개요
코드팩토리는 이번 영상에서 Anthropic이 제공하는 Claude의 /design 스킬을 소개한다. 강연자가 강조하는 핵심은 AI가 예쁜 시안을 한 번 생성해 주는 데 있지 않다. 웹사이트, 소셜 미디어 게시물, 배너, Open Graph 이미지, 인쇄물처럼 서로 다른 결과물을 하나의 컨텍스트와 디자인 시스템 안에서 연속적으로 제작할 수 있다는 것이 이번 업데이트의 본질이다.
기존의 생성형 AI 디자인 작업은 결과물을 받은 뒤 수정 요청을 자연어로 반복하거나, 별도의 디자인 도구로 옮겨 다시 편집하고, 개발 단계에서 같은 화면을 또 구현해야 하는 경우가 많았다. 영상에서 시연한 /design 워크플로는 편집 가능한 아티팩트(Artifact), 영역별 코멘트, 링크 공유, 컨텍스트 재사용을 결합해 이러한 단절을 줄이려 한다. 이에 따라 AI는 단순 이미지 생성기가 아니라 사람과 함께 디자인을 탐색하고 확장하는 협업 환경에 가까워진다.
결과물 생성에서 디자인 프로세스 설계로
강연자는 /design을 Claude Design 이후 가장 큰 디자인 관련 업데이트라고 평가한다. 최신 버전의 Claude에서 슬래시 명령을 열면 디자인 스킬을 선택할 수 있으며, 사용자는 여기에서 만들고 싶은 결과물과 작업 조건을 설명하게 된다. 적용 대상도 웹페이지에 한정되지 않고 포스터, 소셜 미디어 게시물, 프레젠테이션, 인쇄물 등으로 넓다.
이 변화가 중요한 이유는 디자인 작업의 단위를 개별 이미지에서 하나의 프로세스로 확장하기 때문이다. 생성형 AI에 “웹사이트를 만들어 달라”고 요청해 결과 하나를 얻는 방식에서는 다음 산출물을 만들 때 브랜드의 색상, 서체, 레이아웃 감각과 앞선 수정 내역을 다시 설명해야 한다. 반면 영상의 워크플로에서는 웹사이트를 먼저 설계하고, 그 결과를 바탕으로 소셜 콘텐츠를 만든 뒤, 같은 맥락을 이용해 인쇄물까지 확장한다.
강연자가 말하는 효율은 단순한 생성 속도보다 맥락의 누적에 가깝다. 앞선 단계에서 사용자가 선택하고 수정한 사항이 다음 작업의 입력으로 이어지기 때문에, 작업이 진행될수록 결과물이 사용자의 취향과 브랜드 방향에 가까워질 수 있다. 따라서 /design은 독립된 시안을 빠르게 뽑아내는 기능이라기보다 디자인 시스템을 점진적으로 구체화하는 도구로 이해하는 편이 적절하다.
좋은 디자인을 끌어내는 첫 단계는 질문이다
시연에서는 Apple 기기와 액세서리를 재판매하는 스토어를 예시 프로젝트로 사용한다. 색상과 서체가 아직 정해지지 않은 상태에서 곧바로 완성본을 요구하는 대신, 강연자는 먼저 저해상도 시안 세 개를 만들어 달라고 요청한다. 이는 세부 묘사에 시간과 토큰을 쓰기 전에 서로 다른 방향을 빠르게 비교하려는 탐색 전략이다.
Claude의 공식 스킬은 작업 초기에 비교적 세밀한 질문을 던지도록 설계되어 있다고 강연자는 설명한다. 사용자가 질문에 충실히 답하면 AI가 목적, 대상, 표현 방식과 제약 조건을 파악할 수 있으므로, 첫 결과물의 완성도뿐 아니라 이후 수정의 일관성도 높아진다. 여기에서 질문은 귀찮은 사전 절차가 아니라 모호한 요구사항을 설계 가능한 조건으로 바꾸는 과정이다.
초기 단계에서 저해상도 시안을 활용하는 것도 같은 맥락이다. 방향이 결정되지 않은 상태에서 실제 이미지와 정교한 장식을 모두 제작하면, 시안을 폐기할 때 발생하는 비용이 커진다. 영상 속 Claude는 실제 이미지를 즉시 생성해 삽입하지 않고 와이어프레임(Wireframe)에 가까운 형태로 여러 방향을 제안하며, 사용자는 그중 더 복잡하고 역동적인 세 번째 시안을 선택한다.
💡 [영상 참조] 강연자는 이 구간에서 Claude가 생성한 세 가지 저해상도 디자인 시안을 비교하고 하나를 선택합니다.
📺 원본 영상에서 실제 시안의 구성과 차이를 확인할 수 있습니다.
이 방식은 전통적인 제품 디자인 과정에서 사용되는 점진적 구체화와 닮아 있다. 먼저 구조와 방향을 합의한 다음 콘텐츠와 시각 요소를 다듬으면, 완성도가 높은 결과물을 너무 일찍 만드는 데서 발생하는 낭비를 줄일 수 있다. 생성형 AI를 사용하더라도 탐색, 선택, 수정이라는 디자인의 기본 원리는 사라지지 않으며, 오히려 AI가 그 반복 주기를 단축하는 역할을 맡는다.
자연어 수정의 한계를 보완하는 편집 가능한 아티팩트
기존 LLM 기반 디자인 작업의 불편함은 작은 수정조차 자연어로 다시 요청해야 한다는 데 있다. 제목의 굵기를 바꾸거나 텍스트 몇 글자를 추가하고, 모서리의 둥근 정도를 조절하는 일도 AI에게 설명한 뒤 결과를 재생성해야 했다. 요청이 정확히 전달되지 않으면 의도하지 않은 영역까지 달라질 수 있으므로, 사용자는 간단한 편집을 위해 여러 번 대화를 반복하게 된다.
영상에서 시연된 디자인 스킬은 생성 결과를 편집 가능한 아티팩트로 제공한다. 강연자에 따르면 사용자는 개별 섹션과 속성을 선택하고, 텍스트를 더블 클릭해 내용을 바꾸거나 굵기를 조절할 수 있다. 색상, 글자 크기, 아이콘, 행과 열의 구성, 모서리 반경(Border Radius) 등도 직접 변경할 수 있어 Figma나 유사한 시각 편집 도구에서 작업하는 것과 가까운 경험을 제공한다.
이 구조에서는 사람이 직접 처리하는 편이 빠른 수정과 AI가 다시 설계해야 하는 수정을 구분할 수 있다. 문구 교체나 색상 변경은 사용자가 즉시 수행하고, 전체 레이아웃의 재구성이나 여러 화면에 걸친 변경은 Claude에게 맡기는 식이다. 강연자가 이를 “AI와 사람의 디자인 협업”으로 표현한 이유도 사람의 직접 조작과 AI의 생성 능력이 같은 작업 공간 안에서 결합되기 때문이다.
💡 [영상 참조] 강연자는 이 부분에서 디자인 요소를 직접 선택해 텍스트와 스타일 속성을 수정하는 화면을 보여줍니다.
📺 원본 영상에서 실제 편집 동작을 확인할 수 있습니다.
하나의 목업이 아니라 사용자 흐름 전체를 설계하다
선택한 방향을 발전시킨 결과에는 홈페이지뿐 아니라 상품 목록, 필터, 상품 상세, 장바구니와 주문 과정이 포함된다. 모바일 화면과 디자인 컴포넌트도 별도로 확인할 수 있다고 강연자는 설명한다. 즉, 결과물은 보기 좋은 랜딩 페이지 한 장에 머물지 않고 전자상거래 서비스의 주요 사용자 흐름을 정적 목업으로 연결한다.
페이지가 늘어나더라도 결과를 섹션별로 정리할 수 있다는 점은 프로젝트 단위의 설계에 유리하다. 개별 화면만 생성하면 같은 버튼이나 입력 요소가 페이지마다 조금씩 달라질 수 있지만, 디자인 컴포넌트를 함께 확인하면 반복 요소의 일관성을 검토할 기반이 생긴다. 다만 STT에는 컴포넌트의 실제 구조나 상태별 변형이 구체적으로 담겨 있지 않으므로, 완전한 디자인 시스템이 자동 생성되었다고 단정하기보다는 영상에서 확인 가능한 범위를 정적 목업과 편집 가능한 디자인 요소로 한정해야 한다.
강연자는 특정 영역에 코멘트를 달아 Claude에게 수정 작업을 지시할 수 있다는 점도 보여준다. 자연어 대화만 사용하는 경우 “위쪽 버튼”이나 “두 번째 카드”처럼 대상을 장황하게 설명해야 하지만, 화면의 정확한 위치에 코멘트를 남기면 요청과 대상 사이의 모호함이 줄어든다. 이는 AI가 수정 의도를 파악하는 데 필요한 위치적 컨텍스트를 제공한다는 점에서 실무적인 의미가 있다.
링크 공유가 바꾸는 클라이언트 승인 과정
생성한 디자인은 아티팩트로 유지되므로 링크를 복사해 다른 사람에게 공유할 수 있다고 강연자는 말한다. 이 기능을 활용하면 디자이너나 개발자가 먼저 시안을 만든 뒤 클라이언트에게 전달하고, 승인을 받은 다음 구현에 들어가는 흐름을 구성할 수 있다. 결과물을 이미지로 내려받아 이메일이나 메신저로 주고받는 방식보다 검토 대상과 수정 맥락을 같은 공간에 유지하기 쉽다.
강연자가 문제로 지적한 기존 흐름에서는 Claude Design에서 작업한 결과를 다른 환경으로 옮기고, 다시 구현하면서 디자인과 코드 사이를 반복적으로 왕복해야 했다. /design이 Claude의 다른 작업 흐름 안에서 사용될 수 있다면 디자인 탐색과 개발 준비 사이의 이동 비용을 줄일 가능성이 있다. 특히 승인 전에 상세 구현을 시작하지 않아도 되므로, 방향이 바뀌었을 때 버려지는 개발 작업을 줄이는 데 도움이 된다.
그러나 링크 공유 자체가 곧 완전한 협업 체계를 의미하는 것은 아니다. 버전 관리, 권한 설정, 댓글 이력, 이해관계자별 승인 상태와 같은 세부 기능은 영상의 음성 정보만으로 확인할 수 없다. 따라서 실무 도입 시에는 공유 가능 여부뿐 아니라 변경 이력과 접근 권한이 프로젝트 요구사항에 맞는지도 별도로 검증해야 한다.
웹에서 소셜 콘텐츠로 이어지는 컨텍스트
웹사이트 디자인을 완성한 뒤 강연자는 Instagram을 비롯한 소셜 미디어용 소재 한 세트를 정적 아티팩트로 만들어 달라고 요청한다. 기존에 그려 둔 디자인이 이미 같은 컨텍스트와 아티팩트 안에 있으므로, 사용자가 다시 파일을 첨부하거나 브랜드 규칙을 처음부터 설명할 필요가 없다는 것이 시연의 핵심이다. Claude는 앞서 선택한 브랜드 방향을 유지하겠다고 밝히면서 소셜 콘텐츠 제작을 진행한다.
생성 결과에는 정사각형 피드용 이미지와 세로형 숏폼 규격, 배너에 활용할 만한 콘텐츠, Open Graph 이미지가 포함된다. 강연자는 이를 포괄적인 결과라고 평가하며, 웹사이트에서 사용한 색상과 스타일, 타이포그래피가 소셜 소재에도 일관되게 적용되었다고 설명한다. 이처럼 하나의 디자인 언어를 서로 다른 채널 규격으로 변환하는 능력은 캠페인 제작에서 반복되는 수작업을 줄일 수 있다.
💡 [영상 참조] 강연자는 이 구간에서 정사각형 피드, 세로형 숏폼, 배너와 Open Graph 이미지로 확장된 소셜 콘텐츠 세트를 보여줍니다.
📺 원본 영상에서 각 규격의 실제 배치와 시각적 일관성을 확인할 수 있습니다.
여기서 중요한 것은 디자인 요소를 기계적으로 복사하는 일이 아니라 매체에 맞게 재배치하면서도 브랜드의 인상을 유지하는 것이다. 웹사이트의 가로형 구성을 세로형 게시물에 그대로 축소하면 정보 계층과 가독성이 무너질 수 있다. 영상 속 결과는 구체적인 규격별 구성 원리를 음성으로 상세히 설명하지 않지만, 적어도 동일 컨텍스트를 사용해 여러 형식의 콘텐츠를 독립 아티팩트로 분리했다는 점은 확인할 수 있다.
독립 아티팩트와 공유 컨텍스트의 조합
영상에서는 기존 웹 디자인과 새로 생성한 소셜 콘텐츠를 각각 독립된 아티팩트로 열어볼 수 있다. 결과물은 분리되어 관리되지만, 생성 과정에서는 이전 작업의 브랜드 맥락을 공유한다. 이 구조는 모든 산출물을 하나의 거대한 캔버스에 쌓는 방식과 달리 작업 단위를 명확히 유지하면서도, 프로젝트 전체의 디자인 언어는 이어갈 수 있게 한다.
또한 강연자는 별도로 요청하지 않았는데도 Claude가 검증 작업을 수행하는 모습을 언급한다. 다만 STT에는 무엇을 어떤 기준으로 검증했는지 구체적으로 나타나지 않으므로, 접근성이나 반응형 레이아웃, 인쇄 적합성까지 자동으로 보장한다고 해석해서는 안 된다. 이 장면이 보여주는 것은 Claude가 생성 이후의 점검 단계를 에이전틱(Agentic)하게 시도했다는 사실이며, 검증 범위와 신뢰도는 실제 산출물을 기준으로 사람이 다시 확인해야 한다.
특히 디자인 품질은 단순히 요소가 존재하는지 확인하는 것만으로 평가할 수 없다. 글자 대비, 터치 영역, 콘텐츠 우선순위, 다양한 화면 크기에서의 동작, 브랜드 지침 준수와 같은 조건을 별도의 체크리스트로 점검해야 한다. AI의 자체 검증은 유용한 초벌 검사일 수 있지만, 최종 승인 책임을 대체하는 절차로 보기는 어렵다.
인쇄물까지 확장되는 하나의 디자인 시스템
마지막 단계에서는 앞서 만든 웹사이트와 소셜 콘텐츠를 바탕으로 Apple 기기 재판매 스토어용 인쇄물을 생성한다. 강연자에 따르면 이 결과 역시 아티팩트 형태로 만들어져 사용자가 원하는 요소를 직접 수정할 수 있다. 이전 단계에서 다듬은 색상과 스타일, 세부 취향이 컨텍스트에 남아 있으므로, 인쇄물에도 그 수정 사항이 반영될 수 있다는 설명이다.
이 과정은 /design의 가치가 특정 산출물의 품질보다 채널 간 연결에 있다는 점을 다시 보여준다. 웹, 소셜 미디어와 인쇄물은 해상도, 비율, 정보량, 소비 환경이 서로 다르지만 같은 브랜드를 표현해야 한다. 하나의 컨텍스트 안에서 작업하면 매번 브랜드 규칙을 재입력하는 수고를 줄이고, 앞서 승인된 방향을 다음 산출물의 출발점으로 사용할 수 있다.
💡 [영상 참조] 강연자는 앞선 웹 및 소셜 디자인의 맥락을 반영해 생성된 인쇄물 아티팩트를 화면에서 확인합니다.
📺 원본 영상에서 실제 인쇄물 구성을 확인할 수 있습니다.
다만 인쇄 디자인에는 웹과 다른 기술적 검수가 필요하다. 영상의 음성에서는 재단선, 도련, CMYK 색상, 출력 해상도와 같은 제작 사양이 언급되지 않는다. 따라서 생성된 시안이 시각적으로 만족스럽더라도 실제 인쇄소에 전달하기 전에는 별도의 프리프레스(Prepress) 점검과 출력 규격 확인이 필요하다.
핵심 인사이트 — 컨텍스트가 브랜드 자산이 된다
이번 시연에서 가장 중요한 기술적 개념은 컨텍스트의 지속성이다. 웹사이트 작업 중 선택한 색상과 스타일, 타이포그래피, 사용자가 직접 수정한 내용이 다음 요청에서 다시 활용되면 대화 기록 자체가 일종의 동적 브랜드 가이드 역할을 하게 된다. 사용자의 선호는 한 번에 완벽하게 정의되는 것이 아니라 선택과 수정이 누적되면서 점진적으로 구체화된다.
강연자는 이러한 방식을 사용자의 취향을 “프로그레시브하게” 반영하는 과정으로 설명한다. 첫 시안에서 방향을 선택하고, 웹 목업에서 세부 속성을 수정한 다음, 그 결과를 소셜 콘텐츠와 인쇄물에 확장하면 AI는 점점 더 구체적인 판단 근거를 갖게 된다. 이는 매 요청마다 완벽한 프롬프트를 작성하려는 접근보다 실제 디자인 작업의 반복적 성격에 더 잘 맞는다.
그러나 장기적인 일관성을 위해서는 컨텍스트에만 의존하지 않고 확정된 규칙을 명시적으로 정리할 필요가 있다. 색상 토큰, 서체 체계, 간격, 컴포넌트 상태와 금지 규칙을 별도 문서나 코드로 고정하지 않으면 대화가 길어질수록 기준이 흐려질 가능성이 있다. 따라서 가장 현실적인 활용법은 Claude의 컨텍스트를 탐색과 확장에 사용하고, 승인된 결정은 디자인 토큰과 컴포넌트 명세로 승격하는 것이다.
디자인에서 프런트엔드 구현으로
강연자는 완성된 디자인을 Next.js 또는 Vanilla JavaScript, CSS, HTML 기반 프로젝트에서 구현하는 흐름도 제시한다. 디자인 결과와 참고 자료를 같은 컨텍스트에 주입할 수 있으므로, 선택한 기술 스택으로 동일한 작업물을 만드는 데 큰 무리가 없다는 주장이다. 이는 디자인과 코딩을 서로 완전히 분리된 단계로 취급하기보다 같은 AI 작업 환경에서 연결하려는 접근이다.
다만 STT에는 실제 생성 코드나 프로젝트 구조가 포함되어 있지 않으므로, 구현 품질과 정확성을 평가할 수는 없다. 시각적 목업이 존재한다고 해서 반응형 동작, 키보드 접근성, 데이터 연동, 오류 처리와 성능 최적화가 자동으로 해결되는 것은 아니다. 구현 단계에서는 디자인을 참고 자료로 사용하되, 컴포넌트 구조와 상태 모델, 테스트 기준을 별도로 명확하게 정의해야 한다.
영상에서는 Higgsfield와 같은 생성 도구를 결합해 이미지와 영상까지 추가하면 결과물의 완성도를 높일 수 있다는 확장 방향도 언급한다. 이 경우 Claude의 디자인 아티팩트는 전체 캠페인의 구조와 브랜드 문맥을 담당하고, 외부 생성 도구는 고품질 미디어 제작을 담당하는 분업이 가능하다. 여러 생성 도구를 결합할수록 저작권, 라이선스, 브랜드 안전성, 파일 규격을 별도로 관리해야 한다는 점도 함께 고려해야 한다.
실무에 적용할 수 있는 디자인 워크플로
영상의 시연을 실무 관점에서 재구성하면, 첫 단계에서는 목적과 대상, 산출물의 범위만 명확히 정하고 저해상도 시안 여러 개를 생성하는 것이 적절하다. 이때 세부 이미지를 먼저 완성하려 하기보다 레이아웃과 정보 계층, 전반적인 시각 방향을 비교해야 한다. 사용자는 후보 중 하나를 선택하고, 편집 가능한 속성과 위치 기반 코멘트를 활용해 방향을 구체화할 수 있다.
다음 단계에서는 홈페이지 한 장에 머무르지 않고 주요 사용자 흐름과 반복 컴포넌트를 확장해야 한다. 전자상거래 프로젝트라면 목록, 필터, 상세 페이지, 장바구니와 주문 과정처럼 실제 이용 흐름을 연결해 확인하는 편이 좋다. 동시에 모바일 화면과 디자인 컴포넌트를 검토하면 특정 화면에만 최적화된 시안을 서비스 구조로 발전시킬 수 있다.
웹 디자인이 승인되면 같은 컨텍스트를 이용해 소셜 콘텐츠와 인쇄물을 제작하되, 각 매체의 목적과 규격을 프롬프트에 명시해야 한다. 생성된 결과가 브랜드 스타일을 공유하더라도 매체별 가독성과 출력 조건은 사람이 다시 검수해야 한다. 마지막으로 구현 단계에서는 승인된 디자인을 Next.js나 HTML·CSS 프로젝트의 참고 자료로 사용하고, 접근성·반응형 동작·성능·테스트와 같은 엔지니어링 요구사항을 추가해야 한다.
결국 효율적인 사용법은 AI에게 전 과정을 무조건 위임하는 것이 아니다. AI에는 대안 생성, 맥락 유지와 다중 채널 확장을 맡기고, 사람은 방향 선택, 세부 편집, 승인과 품질 기준을 책임지는 편이 합리적이다. 이러한 역할 분담이 이루어질 때 /design은 단순한 시안 생성 기능을 넘어 디자인과 개발 사이의 반복 비용을 줄이는 협업 도구가 될 수 있다.
마무리 / 핵심 정리
코드팩토리가 소개한 Claude의 /design 스킬은 웹페이지 한 장을 빠르게 만드는 기능보다 더 넓은 워크플로를 지향한다. 저해상도 시안으로 방향을 탐색하고, 편집 가능한 아티팩트에서 사람이 세부 요소를 수정하며, 코멘트와 공유 링크로 검토 과정을 연결할 수 있다. 이후 같은 컨텍스트를 소셜 콘텐츠와 인쇄물에 재사용함으로써 브랜드의 시각적 일관성을 유지하는 것이 시연의 핵심이다.
가장 큰 변화는 디자인 결과가 대화의 종착점이 아니라 다음 작업의 컨텍스트가 된다는 데 있다. 앞선 선택과 수정이 누적될수록 AI는 사용자의 취향과 프로젝트 방향을 더 구체적으로 반영할 수 있으며, 웹 디자인에서 캠페인 소재와 프런트엔드 구현으로 이어지는 흐름도 한층 자연스러워진다. 이는 생성형 AI의 역할을 일회성 결과물 제작자에서 지속적인 디자인 파트너로 확장한다.
다만 영상은 기능의 가능성을 보여주는 시연이며, 실제 디자인과 코드의 세부 품질은 화면 자료와 산출물을 직접 확인해야 한다. 접근성, 반응형 동작, 인쇄 사양, 코드 구조, 버전 및 권한 관리까지 자동으로 해결된다고 가정해서는 안 된다. /design의 진정한 효율은 인간의 검토를 제거하는 데 있지 않고, 사람이 더 빠르게 대안을 비교하고 명확한 근거 위에서 수정과 승인을 반복할 수 있게 하는 데 있다.
📚 출처 및 참고
| 구분 | 내용 |
|---|---|
| 원본 영상 | 클로드 역대급 디자인 스킬 업데이트 /design |
| 채널 | 코드팩토리 |
| 영상 길이 | 8분 4초 |
| 리포트 작성 | 2026-08-30 |
| 작성 방식 | YouTube 영상 STT 변환 후 에디팅 |
💬 본 리포트는 영상 내용을 바탕으로 재구성되었습니다. 화면에 표시된 디자인과 인터페이스의 세부 요소는 STT에 포함되지 않을 수 있으므로, 정확한 내용은 원본 영상을 참조해 주세요.