아티클

다양한 읽을거리를 확인해 보세요.

전체 362건

[MCP 01] 피그마 MCP로 화면 명세서 만들기

📅 2026년 6월 3일 · 👁 24

[MCP] 피그마 MCP로 화면 명세서 만들기캔바가 빠른 홍보물 제작에 강하다면, 피그마Figma는 웹 사이트나 앱 화면처럼 구조가 중요한 디자인에 강합니다. 피그마 MCP는 피그마 파일의 프레임, 레이어, 컴포넌트, 색상, 레이아웃 정보를 AI가 읽을 수 있게 해줍니다.피그마 MCP는 일반적인 클로드 채팅보다 Claude Code, Cursor, VS Code 같은 MCP 클라이언트와 함께 사용할 때 특히 강력합니다. 피그마 공식 문서에서는 원격 MCP 서버 사용을 권장하며, 지원 클라이언트와 기능은 계속 업데이트되고 있습니다.01 먼저 피그마 데스크톱 애플리케이션을 다운로드합니다. 사용하는 운영체제에 맞는 파일을 내려받고 설치한 뒤 로그인하세요.피그마 다운로드 : figma.com/ko-kr/downloads/02 피그마 MCP도 커넥터로 제공됩니다. 클로드의 커넥터 메뉴에서 [+ ➝ 커넥터 둘러보기]를 누르고 검색창에 Figma를 입력합니다. Canva 커넥터가 보이면 [+]를 눌러 연결을 시작합니다.02 그러면 다음과 같은 인증 과정을 거칩니다. [Agree & Allow Access]를 눌러 권한을 승인하고 업데이트 메일을 받을지 여부는 원하는 대로 선택하세요.03 피그마 MCP를 사용해서 가상의 메신저 화면을 만들어달라고 요청하겠습니다. 클로드에서 다음과 같이 요청합니다.[나] : 피그마에 가상의 메시지 앱을 디자인해줄래? 아이폰 16 화면비에 맞춰줘.[AI] : 완성입니다! Figma에서 열기Bubble 이라는 가상의 메시지 앱을 iPhone 16 기준(393 × 852pt)으로 3개 화면을 디자인했어요.화면 구성 Chat List — 상단 내비 + 검색 바 + 대화 목록(읽지 않은 수 뱃지, 마지막 메시지 미리보기) + 하단 탭 바Chat Detail — 뒤로 가기 + 연락처 정보 + 수신/발신 말풍선 + 메시지 입력창Contact Profile — 대형 아바타 + 온라인 상태 표시 + 전화/메시지/영상통화 버튼 + 연락처 정보 + 공유된 사진디자인 포인트 테마 컬러: 보라색(#7B5EA7) 계열발신 말풍선은 보라 배경 + 흰 글씨, 수신은 연보라 배경 + 검정 글씨iOS 스타일 상태바, 탭 바, 구분선 적용잠시 기다리니 피그마가 가상의 앱 이름과 컨셉까지 만들어서 앱 디자인을 완료했다고 합니다. 링크를 눌러 파일을 열면 다음과 같이 웹 페이지 시안이 뚝딱 만들어져 있습니다.04 피그마를 사용하는 사람들이라면 디자인을 만드는 것만큼 이 디자인을 개발자하게 정확하게 전달하는 것도 중요할 것입니다. 이제 앞서 만든 화면을 분석하여 개발팀에 보낼 화면 명세서를 만들어보겠습니다.이때 피그마 파일 링크를 같이 첨부해도 좋습니다.[나] : 이 Figma 프레임 링크를 분석해서 개발자에게 전달할 화면 명세서를 만들어줘.- 화면의 목적- 주요 컴포넌트- 색상과 폰트 사용- 버튼과 입력창의 상태- 반응형에서 주의할 점- 구현 전에 디자이너에게 확인해야 할 질문[AI] : Bubble_화면명세서_v1.0.docx 에 담긴 내용을 요약하면:1. 문서 개요 — iPhone 16 기준 캔버스 사이즈(393×852pt), 3개 화면 구성표, Safe Area 수치2. 디자인 토큰 — 색상 스워치 표(Primary·Neutral·System), 타이포그래피 규격표(용도별 사이즈·굵기·색상)3. S-01 Chat List — 레이아웃 Y좌표/높이 표, Nav Bar·검색창·Chat Row·뱃지·Tab Bar 상세 스펙, 아바타 색상 팔레트(6색·인덱스 규칙), 버튼·입력창 상태표(Default/Pressed/Focused/Swipe)4. S-02 Chat Detail — 말풍선 스펙(발신/수신 색상·반경·최대 너비·패딩), 날짜 구분자, Input Bar 상태(Empty→비활성 전송 / Typing→활성 / Focused→키보드 대응)5. S-03 Contact Profile — 대형 아바타·온라인 dot 스펙, 액션 버튼 3개, 연락처 정보 행 구조, 공유 사진 썸네일 규칙6. 반응형 & 접근성 — Safe Area 대응, 동적 텍스트·말풍선 max-width 소형 기기 처리, VoiceOver·터치 타겟(44pt) 가이드7. 디자이너 확인 질문 15개 — Large Title 스크롤 전환, Empty State, 스와이프 액션, 입력창 최대 줄 수, 다크 모드, Inter 폰트 번들 여부 등05 결과를 보면 피그마 화면을 눈으로만 확인했을 때 놓치기 쉬운 컴포넌트 구조, 여백, 반복 요소, 버튼 상태 등을 문서로 정리했습니다. 그러면 개발자에게 ‘대충 비슷하게 만들어주세요’”라고 전달하는 대신, 화면 단위의 체크리스트를 만들어 넘길 수 있어 협업이 훨씬 쉬워집니다.피그마 MCP의 장점은 디자인 파일을 사람이 눈으로만 보는 것이 아니라, AI가 구조화된 정보로 읽을 수 있다는 점입니다. 따라서 기획자, 디자이너, 개발자가 같은 화면을 두고 이야기할 때 ‘무엇을 확인해야 하는지’를 빠르게 문서화할 수 있습니다.

[클로드 05] '클로드 디자인'으로 PPT 만들기

📅 2026년 6월 1일 · 👁 174

직접 슬라이드 한 장을 만들어 보겠습니다. 커넥터 없이도 파워포인트에서 바로 열어볼 수 있는 PPTX 파일을 생성합니다.01단계 브라우저에서 다음 링크에 들어가 로그인합니다. 프로 이상 요금제라면 바로 들어갑니다.• 클로드 디자인 : claude.ai/design02단계 새 프로젝트를 생성합니다. PPT나 카드 뉴스를 만들 때는 [Silde deck]을 선택합니다. 프로젝트 이름을 입력하고 [+ Create]를 누르세요.03단계 [Design System]을 누르면 클로드 디자인에서 제공하는 스킬이나 디자인 시스템을 사용할 수 있습니다. 지금은 수정 가능한 PPTX 결과물을 원하므로 [Export as PPTX (editable)]를 선택하겠습니다.04단계 왼쪽 아래 입력창에 다음 프롬프트를 입력하세요.클로드가 5장짜리 슬라이드 초안을 보여줍니다. 클로드는 알아서 각 슬라이드의 스크린샷을 찍어 확인하고 텍스트 겹침 같은 오류가 있는지 한 번 더 확인합니다. 이렇게 만들어진 슬라이드는 일반 클로드 채팅에서 지시하여 만든 것보다 결과물이 뛰어날 확률이 높습니다. 클로드 디자인의 시스템 프롬프트와 잘 만들어진 스킬 지침에 따라 생성되기 때문입니다.

[디자인 클래스 05] 캔바 AI 툴 완전 정복하기

📅 2026년 5월 31일 · 👁 57

[디자인 클래스 05] 캔바 AI 툴 완전 정복하기업무 현장에서는 보고서, 제안서, 마케팅 콘텐츠, 교육 자료 등 다양한 결과물을 신속하게 만들어야 합니다. 매일 새로운 AI 도구가 쏟아지는 환경 속에서 캔바는 이러한 변화를 주도하고 있습니다. 특히 Magic Studio의 이미지·영상 편집 기능과 Magic Write의 텍스트 생성 능력, 그리고 다국어 번역을 지원하는 Magic Translate를 통해 국경 없는 콘텐츠 제작을 할 수 있습니다.캔바 AI 기능을 활용하면 제안서 초안 작성부터 보고서 자동화, 글로벌 자료 현지화에 이르기까지 실질적인 시간 절약과 업무 성과 향상으로 이어집니다. [Chapter 15] 캔바 AI 툴 완전 정복에서는 캔바의 핵심 AI 기능을 활용하여 시대에 부합하는 새로운 업무 프로세스를 구축하는 방법을 구체적으로 살펴보겠습니다.[미친 활용 40] Magic Studio로 이미지와 영상, 한 번에 편집하기먼저 캔바 AI 기능 중 Magic Studio 속 다양한 기능을 활용해 사진 속 불필요한 요소를 지우거나 이미지를 간단히 수정해보겠습니다. Magic Eraser, Magic Edit, Magic Grab 같은 기능을 활용하면 단 몇 번의 클릭만으로 사진 보정부터 피사체 분리, 새로운 이미지도 생성할 수 있습니다.[NOTE/] [미친 활용 40] Magic Studio – 이미지와 영상, 한 번에 편집하기는 캔바 프로 요금제 구독 시 이용할 수 있습니다. [/NOTE]배경 제거하기사진 속 배경을 제거하고 투명하게 바꿔 디자인을 더 깔끔하게 만들 수 있습니다. 일상에서 뿐만 아니라 인물이나 제품만 분리해 강조할 수 있어 보고서, 제안서, 마케팅 이미지 등 다양한 실무 작업에 활용하기 좋습니다.실무 활용 : 보고서 속 인물이나 제품 사진을 배경 없이 깔끔하게 정리해 제안서용 이미지로 활용하기개인 활용 : 여행 사진의 배경을 제거한 후 원하는 디자인 배경에 합성해 포토 카드 제작하기배경을 제거할 이미지를 삽입한 후 메뉴 바에서 [편집]을 클릭합니다. 왼쪽 메뉴의 Magic Studio에서 [배경 제거]를 클릭하면 피사체만 남겨지고 배경이 사라집니다. 다시 한 번 [배경 제거]를 누르면 브러시를 활용해 배경을 복원하거나 지울 수 있습니다. 이 기능은 이미지뿐만 아니라 영상에도 동일하게 적용할 수 있습니다.배경 생성하기피사체는 마음에 들지만 배경이 아쉬울 때는 [배경 생성] 기능을 활용해보세요. 기존 이미지와 자연스럽게 어울리는 배경을 AI가 자동으로 생성해 더 멋진 사진으로 탈바꿈시켜줍니다.실무 활용 : 제품 사진의 배경을 사무실이나 매장으로 변경해 다양한 마케팅 시안 제작하기개인 활용 : 커플 사진의 배경을 정원, 해변 등으로 변경해 청첩장으로 활용하기배경을 생성할 이미지를 삽입한 후 메뉴 바에서 [편집]을 클릭합니다. [배경 생성]에 새롭게 만들고 싶은 배경을 설명하는 프롬프트를 입력한 후 [생성하기]를 누릅니다. AI가 피사체와 어울리는 배경 4가지를 만들어줍니다. 이 중 마음에 드는 이미지를 선택하여 빈 페이지에 삽입하면 됩니다.Magic Eraser사진 속에서 불필요한 요소를 제거하고 싶을 때 Magic Eraser를 활용하면 복잡한 보정 작업 없이도 깔끔한 이미지를 만들 수 있습니다. 제거하고 싶은 영역을 브러시로 쓱 그리기만 하면 주변 배경을 자연스럽게 분석해 어색함 없이 지워줍니다.실무 활용 : 행사 사진에서 불필요한 현수막이나 브랜드 로고를 제거하여 홍보용 이미지 완성하기개인 활용 : 풍경 사진에서 방해되는 사람이나 전봇대 등을 제거해 SNS용 감성 사진 만들기사진을 클릭한 후 메뉴 바에서 [편집]을 클릭합니다. [Magic Eraser]에서 [브러시]를 선택한 후 지우고 싶은 부분을 체크합니다. [지우기]를 클릭하면 브러시로 선택한 부분이 없어지면서 깨끗한 사진이 만들어집니다. 이렇게 만들어진 영역에 텍스트나 요소를 삽입하여 디자인을 만들 수도 있습니다.Magic Grab사진 속에 있는 피사체를 분리 또는 확대하거나 축소하여 활용하고 싶을 때 Magic Grab 기능을 활용할 수 있습니다. 클릭 한 번으로 주요 피사체를 인식해 선택할 수 있어 복사, 이동, 확대, 축소를 쉽게 할 수 있습니다.실무 활용 : 자동차 홍보 이미지에서 차량만 분리해 다양한 배경에 배치하기개인 활용 : 반려동물 사진에서 동물만 따로 추출해 스티커나 굿즈 제작하기사진을 삽입한 후 메뉴 바에서 [편집]을 클릭한 후 [Magic Grab]을 선택합니다. [클릭]을 눌러 작업 화면에서 자동차를 클릭합니다. 테두리에 맞춰 자동차가 자동으로 선택되면 [추출하기]를 누릅니다. 배경에서 추출된 피사체를 따로 선택할 수 있으며, 이때 배경은 자동으로 비슷한 색상이 채워집니다. 피사체만 크기를 키워 배치하고 왼쪽에 관련 텍스트를 추가합니다.텍스트 추출하기이미지에 포함된 텍스트 때문에 내용을 수정하거나 재활용하기 어려운 경우가 있습니다. 이럴 때 [텍스트 추출] 기능을 활용하면 이미지 속 텍스트를 자동으로 인식해 편집할 수 있는 텍스트로 분리합니다. 이를 통해 번역이나 문구 수정 등 다양한 용도로 손쉽게 활용할 수 있습니다. 단, Magic Studio의 텍스트 추출 기능은 현재 영문 텍스트만 인식할 수 있으며 한글은 지원하지 않습니다.실무 활용 : 인포그래픽 이미지 속 영어 문구를 추출해 번역하여 보고서에 활용하기개인 활용 : 해외 잡지 사진 속 슬로건을 추출해 나만의 디자인 문구로 재가공하기사진을 삽입한 다음 해당 사진을 선택한 상태에서 메뉴 바의 [편집]을 누릅니다. 왼쪽의 Magic Studio에서 [텍스트 추출]을 클릭한 후 추출할 텍스트를 선택하고 [추출하기]를 클릭합니다. 추출한 텍스트를 한국어로 번역해서 활용해도 됩니다.Magic Edit이미지 속 특정 부분의 색상을 변경하거나 원하는 요소로 자연스럽게 바꿀 수 있는 기능입니다. 기존 이미지를 그대로 활용하면서도 별도의 재촬영이나 추가 디자인 없이도 다양한 시안을 만들 수 있습니다.실무 활용 : 카페 인테리어를 위해 벽 메뉴판 디자인 추가하기개인 활용 : 친구와 찍은 사진에서 옷 색상을 바꾸기이미지를 삽입한 후 메뉴 바에서 [편집]을 누릅니다. Magic Studio의 [Magic Edit]을 클릭한 후 작업 영역에서 바꾸고 싶은 영역을 드래그하여 선택합니다. 어떻게 바꾸고 싶은지 원하는 형태를 프롬프트 창에 입력합니다. 실습에서는 [파란색 옷]이라고 입력했습니다. [생성하기]를 클릭하면 옷이 파란색으로 바뀐 것을 확인할 수 있습니다.Magic Expand사진의 프레임을 확장해서 보이지 않던 영역까지 새롭게 생성해주는 기능입니다. 흔히 AI 아웃페인팅AI Outpainting이라고 부르기도 합니다.실무 활용 : 제품 사진을 가로로 확장해 좌우 여백에 광고 카피를 넣어 배너 제작하기개인 활용 : 여행 사진의 풍경을 확장해 감각적인 스마트폰 배경 화면으로 활용하기사진을 삽입한 후 메뉴 바에서 [편집]을 누릅니다. Magic Studio의 [Magic Expand]를 클릭한 후 확장하고 싶은 영역을 드래그하여 지정합니다. [확장]을 클릭하면 생성되는 이미지에서 원하는 사진을 선택합니다. 새롭게 생성된 영역에 텍스트 등을 입력하여 활용합니다.[미친 활용 41] Magic Write와 Canva AI로 제안서, 콘텐츠, 프레젠테이션까지 한 번에!업무 시작 단계에서 가장 어려운 작업은 첫 문장을 쓰는 일입니다. 보고서를 열어두고 목차를 구성하지 못해 시간을 허비하는 경험은 누구나 겪기 마련이죠. 이때 캔바의 Magic Write를 활용하면 훨씬 수월하게 글을 작성할 수 있습니다. 몇 개의 키워드나 문구만 입력해도 문서의 뼈대를 잡아주고 초안을 생성합니다. 보고서 개요, 제안서 문구, SNS 카피copy 작성, 블로그 초안 등 다양한 글쓰기 상황에서 활용해보세요.보고서 초안 작성하기캔바의 Magic Write를 활용하여 몇 개의 키워드만으로도 보고서의 구조와 초안을 작성해보겠습니다.01 캔바 메인 화면에서 [Canva AI]를 누릅니다. [Docs]를 선택한 후 [유형]을 눌러 [전략]을 클릭합니다.02 입력창에 사내 협업 툴 도입 제안서 초안 작성. 개요, 필요성. 기대효과. 예산 등 자세히라고 간단하게 프롬프트를 입력한 후 []를 누릅니다. 생성된 결과물을 클릭한 후 [Canva 편집기 사용]을 클릭하여 작업 화면으로 이동합니다.[NOTE/] 캔바 Magic Studio는 유료 요금제를 구독해야 사용할 수 있으며, 유료 요금제를 사용했을 때 제공되는 크레딧 중 1크레딧이 소모됩니다. [/NOTE]03 삽입한 텍스트를 드래그한 후 [Magic Write]를 클릭합니다. 텍스트 관련 8가지 메뉴 중 원하는 기능을 선택하면 됩니다. 실습에서는 [텍스트 변환] 기능을 사용했는데, 해당 기능은 Pro 버전에서 제공됩니다.04 [텍스트 변환]을 클릭한 후 수정 방향을 프롬프트로 입력하면 내용이 수정됩니다. 또한 [텍스트 확장] 기능을 활용하면 더 많은 내용을 추가할 수 있습니다. 이처럼 캔바 AI를 활용하면 보고서나 제안서를 Docs 형태로 빠르게 완성할 수 있습니다.AI로 디자인 편집하기디자인 작업을 하다 보면 글 초안 작성, 카피 문구 수정, 이미지 스타일 변경 등 다양한 편집 작업이 필요합니다. 캔바의 AI 기능을 활용하면 이러한 작업을 훨씬 빠르고 간편하게 처리할 수 있습니다. AI를 활용해 디자인 요소를 효율적으로 편집하는 방법을 살펴보겠습니다.콘텐츠 초안 작성하기 캔바 AI로 콘텐츠 제작에 필요한 초안을 자동으로 생성할 수 있습니다. 캔바 메인 페이지에서 [Docs]를 생성한 후 메뉴 바에서 [Magic Write]를 클릭합니다. 프롬프트 창에 대한민국의 관광명소를 외국인에게 추천하려고해. 이름, 주소, 특징등을 나열하여 적어줘라고 입력한 후 [생성하기]를 클릭합니다. 생성된 콘텐츠 초안은 [삽입]을 클릭하여 활용하면 됩니다.카피라이트 문구 추천 받기 짧은 카피라이트 문구조차 쉽게 떠오르지 않을 때가 있습니다. 이럴 때 Canva AI에게 물어보기 기능을 활용하면 문구 작성 시간을 크게 줄일 수 있습니다. 수정하고 싶은 텍스트를 선택한 후 [Canva AI에게 물어보기]를 클릭합니다. 프롬프트 창에 텍스트를 다시 작성해주세요를 입력한 후 [생성하기]를 클릭합니다. Canva AI가 댓글 형태로 여러 개의 새로운 카피 문구를 제안해주며 이 중 원하는 문구를 선택해 바로 적용할 수 있습니다.그림체 변경하기 디자인에 삽입된 이미지나 그래픽을 다른 느낌으로 바꾸고 싶을 때도 Canva AI를 활용할 수 있습니다. 삽입한 그림이나 그래픽을 선택 후 [Canva AI에게 물어보기]를 클릭해 바꾸고 싶은 형태를 입력합니다. 그러면 Canva AI가 1분 이내로 비슷한 느낌의 그림을 생성합니다. 생성된 이미지를 클릭하면 이전의 그림은 사라지고 새로운 그림으로 교체됩니다.프레젠테이션 자료 다듬고 확장하기프레젠테이션을 완성한 뒤에는 내용을 정리하고 확장하는 과정이 필요합니다. 캔바 AI 기능을 활용하면 페이지 내용을 요약하거나 퀴즈를 만들고 AI 음성까지 추가해 발표 자료를 더욱 풍부하게 만들 수 있습니다.프레젠테이션 내용 요약하기 현재 작업 중인 프레젠테이션 페이지의 내용을 요약해보겠습니다. 페이지에 있는 모든 요소를 선택한 후 [Magic Write]를 누릅니다. [요약 만들기]를 클릭하면 해당 페이지를 요약한 텍스트가 생성됩니다. 이렇게 생성된 요약 문장은 프레젠테이션 발표 대본으로 활용하거나 전체 흐름과 핵심 내용을 빠르게 파악하는 데 유용하게 사용할 수 있습니다.프레젠테이션 내용 관련 퀴즈 만들기 현재 페이지의 내용을 활용하여 프레젠테이션을 보는 청중이나 교육생과 소통할 수 있는 퀴즈를 만들 수 있습니다. 페이지의 전체 요소를 선택한 후 [Magic Write]를 누릅니다. [퀴즈 생성]을 클릭하면 페이지 내용을 분석해 퀴즈 문항을 자동으로 생성해줍니다. 이렇게 만든 퀴즈는 별도의 페이지에 삽입해 활용할 수 있으며 프레젠테이션을 진행하는 데 도움이 됩니다.프레젠테이션 내용 기반 AI 음성 삽입하기 프레젠테이션 페이지에서 텍스트 박스를 선택한 다음 [Magic Write]의 [AI 음성 생성]을 클릭합니다. 왼쪽 탭에서 [음성 선택]을 설정한 후 [AI 음성 생성]을 클릭해 AI 음성을 생성합니다. 생성된 오디오는 페이지 섬네일 아래에 추가되며, 해당 페이지를 [전체 화면 프레젠테이션]으로 재생하면 AI 음성이 자동으로 재생되는 것을 확인할 수 있습니다.

[오픈클로 02] 오픈클로로 시작하는 웹 사이트 요약과 크롤링

📅 2026년 5월 29일 · 👁 90

오픈클로로 시작하는 크롤링 웹 사이트 요약과 크롤링웹 사이트 요약하기가장 기본적인 활용법입니다. 뉴스 기사의 URL을 오픈클로에게 전달하고 요약을 부탁합니다.01 요약하고 싶은 뉴스 기사의 URL을 복사합니다. 더 간단한 방법은 뉴스 사이트의 메인 페이지 주소를 통째로 알려주는 것이죠.[나]웹 패치를 사용해서 https://news.naver.com 페이지의 내용을 요약해줘.[/나][오픈클로][/오픈클로]결과를 보면 네이버 뉴스 메인 페이지의 내용을 요약해줍니다. 이게 전부입니다. 오픈클로에게 URL만 주면 알아서 페이지를 읽고 요약합니다. 무료이고 설정도 필요 없습니다.02 개발 문서, API 명세서, 위키 페이지도 web_fetch로 읽을 수 있습니다. 긴 문서를 통째로 읽어서 요약해주니 문서 읽기가 훨씬 편합니다.[나]웹 패치를 사용해서 https://docs.openclaw.ai/tools/browser 이 문서 핵심만 정리해줘.[/나][오픈클로][/오픈클로]잘 하는 것 같습니다. 다만 web_fetch는 만능은 아닙니다. web_fetch로 가져올 수 없는 웹사이트도 많거든요.03 이를테면 오픈클로에게 네이버 부동산 사이트 내용을 알려달라고 하면 이렇게 대답할 겁니다.[나]네이버 부동산 사이트의 내용을 웹 패치로 가져와봐.[/나][오픈클로][/오픈클로]결과를 보면 어쨌든 내용을 가져오지 못한다고 합니다. 왜 그럴까요? 이건 오픈클로의 무능함 때문이 아닙니다. 그보다는 웹사이트의 구조 때문입니다. 사실 웹사이트는 2가지 방식으로 정보를 보여줍니다. 하나는 정적인 방식, 다른 하나는 동적인 방식입니다.예전에는 대부분의 웹사이트가 서버에서 완성된 상태로 브라우저에 도착했습니다. 이것이 정적인 방식입니다. 정적인 방식으로 정보를 보여주는 웹사이트는 web_fetch로 정보를 가져올 수 있습니다.하지만 현대의 웹사이트는 동적인 방식으로 동작합니다. 예를 들어 네이버 부동산 웹사이트는 빈 틀을 먼저 정적으로 불러온 다음 자바스크립트라는 언어가 그 다음에 실행되면서 실제 부동산 매물 데이터를 불러옵니다. 그런데 web_fetch는 정적으로 불러온 빈 화면만 볼 수 있습니다. 다시 말해 web_fetch는 자바스크립트로 불러들인 데이터를 볼 수 없습니다. 그래서 데이터가 없다고 하는 것입니다. 서버에서 웹페이지를 완성해서 브라우저로 보내는 방식을 서버 사이드 렌더링, 브라우저에서 자바스크립트를 실행해 내용을 채우는 방식을 클라이언트 사이드 렌더링이라고 부릅니다. SPA는 거의 다 클라이언트 사이드 렌더링을 사용합니다. 이런 사이트를 크롤링하려면 오픈클로가 실제 브라우저를 조작해서 데이터가 뜰 때까지 기다리게 만드는 방법이 필요합니다. 바로 그 방법이 다음에 배울 크롬 확장 프로그램입니다. 계속해서 가봅시다.크롬 브라우저 연결하기web_fetch의 한계를 넘으려면 AI가 브라우저를 직접 조작할 수 있어야 합니다. 오픈클로 초기 버전에서는 크롬 확장 프로그램인 릴레이(Relay)를 통해 웹브라우저를 제어했습니다. 이후 업데이트에서 릴레이 방식이 제거되고, 현재는 Chrome DevTools의 자동 연결 기능을 통해 사용자의 크롬 브라우저를 직접 제어하는 방식으로 변경되었습니다. MCP의 자세한 정보가 궁금하다면 다음 링크를 확인하세요. 실습에서 사용한 MCP 구성 항목도 이곳에서 복사할 수 있습니다.developer.chrome.com/blog/chrome-devtools-mcp01 먼저 크롬 브라우저에서 원격 디버깅을 켜야 합니다. 크롬 주소창에 다음 주소를 입력하세요.```chrome://inspect/#remote-debugging```02 페이지가 열리면 [원격 디버깅 사용 설정] 토글을 켭니다.03 오픈클로 설정에 MCP 서버 정보를 추가해야 합니다. 오픈클로 설정 파일은 ~/.openclaw/openclaw.json입니다. 이 경로에 Chrome DevTools MCP 서버의 정보를 넣어달라고 요청하세요. 물론 텍스트 편집기에서 직접 입력해도 됩니다..04 설정을 마쳤으면 오픈클로를 재시작합니다. 재시작하면 MCP가 새 설정으로 로드됩니다.05 연결이 잘 됐는지 확인해봅시다. 오픈클로에게 ‘열린 브라우저 탭 목록 보여줘’라고 보내보세요. 원격 디버깅을 허용하시겠습니까? 라는 팝업창이 뜨면 [허용]을 눌러주세요.06 크롬에서 열어둔 탭들이 그대로 보이면 연결 성공입니다. 이제 브라우저 연결이 끝났습니다. 이제 본격적으로 브라우저 자동화를 이용해 필요한 정보를 수집하겠습니다.쿠팡에서 생수 가격 찾기익스텐션이 연결된 상태에서 실제로 브라우저를 제어해보겠습니다.01 실습을 시작하기 전에 [미친 활용 06] 크롬 브라우저 연결하기를 참고하여 크롬 브라우저를 실행해보고 확장 프로그램 배지가 [ON]인지 확인하세요. 확인 후에는 텔레그램을 열어 오픈클로에게 다음과 같이 지시합니다.[나]쿠팡에 들어가서 생수를 검색하고, 제일 위에 나오는 상품 3개 이름과 가격을 알려줘.[/나]02 그러면 오픈클로에서 다음과 같은 답변이 옵니다. 오픈클로는 실제로는 이런 일을 합니다.크롬에서 쿠팡 사이트를 열고 검색창의 위치를 찾아서 ‘생수’를 검색합니다.검색 결과 페이지에서 상품 목록을 읽고 상위 3개 상품의 이름과 가격을 정리해서 알려줍니다.다시 말해 진짜로 브라우저를 켠 다음 상품 목록이 뜰 때까지 기다렸다가 상품명을 가져오는 거죠. 이렇게 동적 페이지는 브라우저 자동화를 통해 진행하면 됩니다.

[디자인 클래스 04] 눈에 확 띄는 SNS 소셜 미디어 디자인 만들기

📅 2026년 5월 27일 · 👁 186

[디자인 클래스 04] 눈에 확 띄는 SNS 소셜 미디어 디자인 만들기최근 10년 안쪽으로 인스타그램이나 유튜브 채널 등 개인 SNS 채널을 운영하는 사람들이 정말 많아졌습니다. 그뿐만 아니라 각 기업이나 지자체 등에서도 각자의 채널을 만들고 운영하고 있습니다. 그래서 SNS 채널 운영 시 꼭 필요한 것 중의 하나가 바로 소셜 미디어 디자인 스킬입니다. 인스타그램 피드, 영상, 섬네일, 배너 디자인 등을 만들기 위해 그간 어려운 툴을 활용해 많이 만들었을 것입니다. 캔바를 활용해 나와 조직에 맞는 소셜 미디어 디자인을 만든다면 훨씬 빠르고 고품질로 만들 수 있습니다.[미친 활용 16] 인스타그램 피드용 공지사항 디자인 만들기요즘 인스타그램을 활용한 브랜드 마케팅이 보편화되었습니다. 효과적인 운영을 위해서는 빠르고 간단하면서도 완성도 높은 SNS 콘텐츠를 꾸준히 제작하는 것이 중요합니다. 하지만 매번 새로운 디자인을 제작해야 한다는 사실에 부담을 느끼는 경우가 많습니다. 이때 캔바를 활용하면 인스타그램 게시물을 쉽고 효율적으로 제작할 수 있어 브랜드 홍보 효과를 극대화할 수 있습니다. 바로 만들어보도록 할게요.01 캔바 메인 화면에서 [SNS]를 선택합니다. [디자인 만들기] 창이 뜨면 [인스타그램 게시물(4:5)]을 눌러 새로운 디자인을 만듭니다.02 왼쪽 메뉴의 [요소] 탭에서 [도형]을 선택한 다음 [모서리가 둥근 사각형]을 클릭해 삽입합니다. 상하좌우 여백을 남긴 상태에서 사각형의 크기를 키워줍니다. 이후 메뉴 바에서 [모서리]를 클릭해 [모서리 둥글게 만들기]를 35로 변경해줍니다.03 텍스트 상자([T])를 3개 삽입한 후 강의 후기, 이벤트, 이벤트 설명을 각각 따로 입력해줍니다. 글꼴과 텍스트의 크기는 원하는 대로 설정하시면 됩니다.04 아래에 텍스트 상자 3개를 더 추가한 후 #강의후기, #학습이유, #후기참여를 입력합니다. [Shift]를 누른 채로 텍스트 상자 3개를 모두 선택한 후, 메뉴 바에서 [효과]를 선택하고 [배경]을 클릭합니다. 그리고 둥근 정도, 확산, 투명도를 각각 50, 100, 100으로 설정합니다.05 전체 색상을 빠르게 변경하기 위하여 왼쪽 메뉴의 [추천 템플릿]에서 [스타일]의 색상 팔레트의 [모두 보기]를 클릭합니다. 팔레트를 선택하면 배경과 텍스트 색상이 함께 적용된 색상 조합이 자동으로 변경됩니다. 여러 팔레트를 눌러보며 마음에 드는 색상 조합을 선택해보세요. 색상 조합이 어려운 디자인 초보자도 쉽게 활용할 수 있는 기능입니다.06 게시물 디자인 아래쪽에 그래픽을 삽입하겠습니다. 왼쪽 메뉴에서 [요소] 탭을 클릭한 후 학생 기쁨을 검색합니다. [그래픽]을 클릭하고 원하는 그래픽을 선택하여 삽입합니다. 삽입한 그래픽을 선택한 후 메뉴 바에서 [색상]을 클릭하여 교복의 색상을 다른 색상으로 변경해줍니다. 또한 상단에 별점 그래픽을 삽입해 색상을 적용해보세요.<이지쌤 꿀팁/> 하나의 디자인으로 인스타그램 게시물 다양하게 활용하기 실습과 동일한 방식으로 인스타그램 게시물을 제작한 후, 색상이나 그래픽 요소만 바꿔도 다양하게 변형할 수 있습니다. 새로운 그래픽 요소나 색상을 적용해보면서 나만의 브랜드 스타일을 찾아보세요.[미친 활용 17] 인스타그램 스토리용 이벤트 홍보 디자인 만들기인스타그램 스토리는 단 15초 만에 관심을 끌고 클릭을 유도해야 하는 강력한 홍보 도구입니다. 짧은 시간 안에 메시지를 전달해야 하기 때문에 디자인과 문구 배치가 특히 중요합니다. 캔바 PC 버전과 모바일 앱을 활용해 내용에 어울리는 그래픽, 핵심 문구, 클릭을 유도하는 버튼CTA을 구성하는 방법을 알아보겠습니다.01 캔바 메인 페이지에서 [SNS]을 클릭한 후 [스토리]를 선택합니다.02 ➊ 왼쪽 메뉴에서 [요소] 탭을 클릭한 후 여름 해변 파도를 검색합니다. [그래픽]을 클릭한 후 원하는 해변 그림을 선택하여 삽입합니다. ➋ 페이지의 배경을 선택한 후 [배경 색상]을 클릭하여 해변 색상과 동일한 색상 [#ffdda6]으로 설정해줍니다.03 사각형 도형을 삽입([R])한 후 적당한 위치에 배치합니다. 메뉴 바의 [색상]에서 [하얀색]을 선택하고 [모서리]를 누른 다음 [모서리 둥글게 만들기]를 [41]로 설정합니다. 다시 [요소] 탭에서 여름 해변을 검색한 후 [그래픽]을 클릭하여 해변과 어울리는 요소를 선택하여 삽입합니다.04 흰 사각형에 휴가 기간 달력을 삽입하고자 합니다. 직접 입력는 대신 다른 템플릿을 활용해 빠르게 삽입해보겠습니다. 왼쪽 메뉴에서 [추천 템플릿] 탭을 클릭하고 휴가를 검색한 후 적절한 템플릿을 클릭합니다. 새로 생성된 페이지에서 필요한 요소만 [Ctrll]+[C]를 눌러 복사한 후, 기존에 작업 중인 페이지에 [Ctrl]+[V]로 붙여넣기 합니다.05 삽입한 표의 텍스트를 수정한 후 디자인에 어울리도록 글꼴과 크기를 수정합니다. 아래쪽에는 클릭을 유도하는 화살표 요소와 텍스트 상자를 추가합니다. 텍스트 상자는 메뉴 바에서 [효과] [배경]을 클릭한 후 둥근 정도, 확산, 투명도를 각각 50, 50, 100으로 설정해 가독성을 높여줍니다.06 이제 인스타그램 스토리에 바로 작업물을 업로드하겠습니다. 휴대폰에서 캔바 앱을 열고 작업한 프로젝트를 열어줍니다. 오른쪽 위의 [공유]를 클릭한 후 []에서 [Instagram]을 선택합니다.07 게시물을 업로드할 인스타그램 계정과 연동한 다음 형식에서 [Story]를 선택합니다. Choose pages에서 [이미지 추가]를 클릭해 지금까지 만든 페이지를 선택한 후 [지금 게시]를 누릅니다.08 디자인 게시가 완료되면 [확인하기]를 누릅니다. 인스타그램 스토리에 바로 업로드가 된 것을 확인할 수 있습니다.<이지쌤 꿀팁/> 여름휴가 공지 프레젠테이션 디자인 여름휴가 공지는 기간과 안내 메시지가 한눈에 보이도록 구성하는 것이 중요합니다. 기존 템플릿의 달력, 표, 아이콘 요소를 활용하면 시간을 줄이면서도 가독성 높은 휴가 공지를 만들 수 있습니다. 색상과 포인트 요소만 바꿔도 브랜드 분위기에 맞게 다양하게 응용할 수 있습니다.[이지쌤의 700% 노하우/] 애니메이션 효과를 활용한 인스타그램 스토리인스타그램 스토리는 정적인 이미지뿐 아니라 움직이는 영상 형태로도 업로드할 수 있습니다. 캔바의 애니메이션 기능을 활용하여 더 역동적인 스토리 디자인을 만들어보겠습니다.[/이지쌤의 700% 노하우]

[클로드 04] 하네스 엔지니어링은 무엇인가?

📅 2026년 5월 25일 · 👁 217

컨텍스트 엔지니어링에서 한 단계 더 나아간 개념이 하네스 엔지니어링Harness engineering입니다. 본래 하네스는 말에 채우는 마구를 뜻합니다. 아무리 힘이 센 말이라도 마구 없이는 마차를 끌 수 없습니다. 마구가 말의 힘을 마차에 연결하듯, 에이전트 하네스Agent harness는 AI 모델의 능력을 실제 작업에 연결하는 모든 구조물을 의미합니다. 컨텍스트 엔지니어링이 모델에 입력되는 정보를 잘 구성하는 기술이라면, 하네스 엔지니어링은 컨텍스트를 포함해서 도구 연결, 작업 계획, 검증, 상태 저장까지 모델 주변의 전체 시스템을 설계하는 기술입니다. 같은 AI 모델을 사용해도 하네스를 어떻게 만드느냐에 따라 결과가 완전히 달라지기 때문입니다. 다음과 같은 작업이 모두 하네스 엔지니어링의 일부입니다.• 컨텍스트 관리 : 앞서 배운 컨텍스트 엔지니어링이 여기에 해당합니다. 오래된 대화를 요약해 줄이고, 중요한 정보는 파일로 저장하며, 복잡한 작업은 분리해 처리합니다.• 도구 연결 : 모델은 기본적으로 텍스트만 생성합니다. 파일을 읽거나 웹을 검색하거나 코드를 실행하려면 외부 도구가 필요합니다. 하네스가 모델과 도구 사이를 연결합니다. 04장 커넥터로 외부 도구 연결하기에서 배울 MCP 커넥터가 대표적인 예입니다.• 작업 계획과 분해 : 복잡한 작업을 작은 단계로 나누고 순서대로 처리하도록 안내합니다. 할 일 목록을 만들어 하나씩 체크해나가는 거죠.• 검증과 안전장치 : 모델의 작업 결과를 자동으로 검증합니다. 코드를 작성하면 테스트를 실행하고, 위험한 작업 전에 사용자에게 승인을 요청합니다.• 상태 저장과 이어가기 : 세션이 끊겨도 진행 상황을 파일로 저장해두면 새 세션에서 이어서 작업할 수 있습니다. 야간 교대 근무자가 인수인계 문서를 남기는 것과 같습니다.개념이 어렵게 느껴지더라도 괜찮습니다. 이 책을 따라가면서 커넥터를 연결하고, 스킬을 만들고, 클로드 코드를 사용하다 보면 자연스럽게 하네스를 구축하게 됩니다. 지금은 프롬프트 엔지니어링에서 컨텍스트 엔지니어링으로, 그리고 하네스 엔지니어링으로 발전해왔다는 흐름만 기억해주세요. 이 내용은 07장 클로드 코드로 바이브 코딩하기에서 더 자세히 다루겠습니다.