클로드 플레이라이트 플러그인 설치법, 테이스티 스킬과 이미지 투 코드

클로드 플레이라이트 플러그인은 클로드가 직접 브라우저를 열어 내가 만든 화면을 확인하게 해 주는 도구라고 소개됩니다. 이 글은 31초 쇼츠가 꼽은 클로드 디자인 도구 3가지(플레이라이트 플러그인, 테이스티 스킬, 이미지 투 코드)를 화자가 말한 순서대로 7단계로 옮기고, 영상이 말하지 않은 설치 방법과 사진을 코드로 바꾸는 요청 예시를 편집자 정리에 더했습니다.

31초 쇼츠, 먼저 알아 둘 것

신영선의 AI탐구 채널 쇼츠입니다. 화자는 "이거 하나하면은" 클로드가 만든 화면(자막 표기 '맞는 화면')이 달라진다고 말합니다.

영상 제목은 "클로드 디자인 기능 깃허브 3가지"입니다. 그런데 깃허브 저장소 이름이나 주소는 발화에도 더보기란에도 나오지 않습니다.

'클로드'가 데스크톱 앱인지, 웹인지, Claude Code인지도 화자는 밝히지 않습니다. 설정 안에 플러그인 메뉴가 있다고 한 점으로 보아 클로드 데스크톱 앱 화면으로 보이지만, 화면을 대조하지 못해 확정하지 못했습니다.

클로드 디자인 도구 세 가지 한눈에

• 첫 번째: 플레이라이트 플러그인. 화자 말로는 클로드가 직접 브라우저를 열어 내가 만든 화면을 확인합니다.
• 두 번째: 테이스티 스킬. 고급 사이트들의 디자인 감각을 클로드에게 학습시키는 것이라고 합니다.
• 세 번째: 이미지 투 코드(자막 표기 '이미지도 코드'). 사진 한 장을 올리면 이미지가 코드로 바뀐다고 합니다.

'플레이라이트'는 마이크로소프트가 만든 브라우저 자동화 도구 Playwright로 보입니다. 다만 영문 표기는 발화에 없어서, 이 글의 'Playwright'는 한글 발화 '플레이라이트'를 옮긴 추정 표기입니다. 나머지 두 도구는 한글 발음만 들리고 정확한 영문 이름은 [불명]입니다.

비용은 화자 말로 "세 가지가 전부 다 무료예요". 클로드 자체 요금제 조건은 따로 말하지 않습니다. 플러그인·스킬 기능을 쓸 수 있는 요금제인지는 클로드 공식 안내를 확인해야 합니다.

준비물은 클로드, 그리고 7단계(이미지 투 코드)에서 쓸 마음에 드는 사진 1장입니다.

1. 플레이라이트(Playwright) 플러그인 설치 (1~5단계)

화자가 경로를 가장 자세히 말한 부분입니다. 메뉴 이름은 들린 그대로 적었습니다.

1. 클로드의 설정에 들어갑니다.
   • 위치: 설정 메뉴가 화면 어디에 있는지는 영상에 없습니다. 보통 왼쪽 아래 내 이름(프로필)을 누르면 설정이 나옵니다.
   • 확인: 설정 화면이 열립니다.
2. 플러그인을 클릭합니다(자막 표기 '플러인').
   • 확인: 플러그인 화면이 열립니다.
3. 찾아보기를 누릅니다.
   • 확인: 플러그인을 검색할 수 있는 화면이 뜹니다.
4. 검색창에 아래처럼 입력합니다.
   • 주의: 발화는 한글 '플레이라이트'입니다. 영문 'Playwright'는 그 발음을 옮긴 추정 표기이고, 화면에서 확인한 이름은 아닙니다.
   • 확인: 검색 결과에 플레이라이트(Playwright) 항목이 보입니다. 비슷한 이름이 여러 개면 만든 곳(배포자)이 공식인지 먼저 봅니다.

Playwright

5. 검색 결과의 플레이라이트 항목을 설치합니다.
   • 확인: 설치가 끝난 상태로 표시됩니다. 어떤 표시가 뜨는지는 발화에 없습니다. 설치 뒤 새 대화에서 "플레이라이트로 브라우저를 열 수 있는지 확인해 줘"라고 물으면 연결됐는지 알 수 있습니다.
   • 화자가 말한 효과: 이후 클로드가 직접 브라우저를 열어서 내가 만든 화면(자막 표기 '내가 맞는 화면')을 다 확인합니다.

2. 테이스티 스킬 설치 (6단계)

6. 테이스티 스킬을 설치합니다.
   • 화자는 "테이스티 스킬을 설치하세요"라고만 말합니다. 어디서, 어떤 방법으로 설치하는지는 영상에 나오지 않아, 스킬을 찾고 설치하는 일반적인 순서를 편집자 정리에 적었습니다.
   • 위치: 영문 이름과 저장소 이름은 [불명]입니다.
   • 확인: 설치 완료 표시는 발화에 없습니다.
   • 화자가 말한 효과: 고급 사이트들의 디자인 감각을 클로드에게 학습시켜, 딱 봐도 AI 티가 나는(자막 표기 'AIT가 나는') 화면이 나오지 않게 해 준다고 합니다.

3. 이미지 투 코드로 사진 올리기 (7단계)

7. 이미지 투 코드(자막 표기 '이미지도 코드', 정확한 이름 [불명])에 마음에 드는 사진 한 장(자막 표기 '사진 한자만')을 올립니다.
   • 위치: 어디에 올리는지는 영상에 없습니다. 이게 플러그인인지, 스킬인지, 별도 사이트인지도 말하지 않습니다.
   • 확인: 화자 말로는 이미지가 코드로 바뀝니다.
   • 화자 설명: 이렇게 하면 클로드에게 "이런 느낌으로 만들어 줘"라는 말을 하지 않아도 됩니다.

화자는 이 기능을 "대부분 모르는데"라고 소개합니다. 별도 도구 없이 클로드 채팅창에 이미지를 올려 같은 일을 시키는 방법은 편집자 정리에 적었습니다.

최종 체크리스트

• 설정 → 플러그인 → 찾아보기에서 플레이라이트(Playwright)를 설치했다 (1~5단계)
• 테이스티 스킬을 설치했다 (6단계, 설치 방법은 영상에 없음)
• 이미지 투 코드에 사진 한 장을 올려 코드로 바뀌는 것을 확인했다 (7단계, 도구 위치는 영상에 없음)

화자가 실제로 권한 것

• 세 도구를 설치하거나 써 보라고 권합니다. 세 가지 모두 무료라는 건 화자의 말입니다.
• 마지막에 "그래도 모르겠다 하시는 분들은" 아무 댓글이나 남기면 자신이 정리한 자료 가이드북을 바로 보내 주겠다고 말합니다. 이 글은 그 안내를 옮겨 적기만 했습니다.

더보기란·고정 댓글에서 확인한 것

• 더보기란에는 영상 제목과 해시태그(#ai #claude #design)만 있습니다. (더보기란)
• 채널 계정(@ai.yeongseon)이 고정한 댓글에 "자세한 내용은 아래 링크 확인해 주세요!"라는 문구와 링크 하나가 있습니다. 링크 안의 내용은 열어 보지 않았습니다. 고정 댓글 본문에 깃허브 주소나 저장소 이름이 직접 적혀 있지는 않습니다. (고정 댓글)
• 고정 댓글 링크: yeongseon.kr/… (고정 댓글, 내용 미확인)

세 도구 중 경로가 나온 것은 하나

7단계 가운데 클릭 경로까지 말한 건 1~5단계, 플레이라이트 설치뿐입니다. 테이스티 스킬과 이미지 투 코드는 이름과 효과만 나옵니다.

제목에 '깃허브'가 붙어 있지만 저장소를 찾을 단서는 발화와 더보기란에 없습니다. 플러그인이나 스킬을 설치하기 전에, 이름이 맞는지와 누가 배포하는지를 공식 페이지에서 먼저 확인하는 편이 안전합니다.

claude mcp add playwright npx @playwright/mcp@latest

방금 만든 index.html을 브라우저로 열어서 데스크톱 너비와 모바일 너비(390px)로 각각 화면을 찍어 줘. 글자가 넘치거나 겹치는 곳, 버튼이 화면 밖으로 나가는 곳이 있으면 고치고 다시 찍어서 보여 줘.

첨부한 이미지를 참고해서 같은 느낌의 웹페이지를 HTML 파일 하나로 만들어 줘.
- 레이아웃(구획 배치), 색 조합, 글꼴 굵기와 크기 비율, 여백을 최대한 비슷하게 맞춰 줘.
- 이미지 속 글자와 로고는 그대로 베끼지 말고 '샘플 제목', '샘플 설명' 같은 자리 표시 글로 바꿔 줘.
- 다 만들면 이미지와 다른 점을 3가지만 짚어 줘.

출처: youtube.com/…