r/ClaudeAI•약 2개월 전•59•14

꿀팁: 예쁜 HTML 문서는 코드 에디터 없이도 아주 쉽게 수정할 수 있음

Pro tip: those beautiful HTML docs can be edited super easily, and you don't have to open up a code editor

핵심 요약

브라우저 콘솔에서 document.designMode 명령어를 사용해 HTML 문서를 간편하게 수정하는 방법을 공유함.

HTML 수정 팁 — 브라우저 콘솔에 document.designMode = 'on'을 입력해 문서 내용을 직접 편집함.
편집 방식 — 텍스트 수정, 굵게 처리, 요소 삭제 등이 가능하며 저장 시 HTML로 다시 저장함.
Claude 기능 제안 — Anthropic이 이 편집 기능을 기본적으로 지원해주길 기대함.
Claude Design 비교 — 채팅 모드에서 생성된 아티팩트를 수정할 때 유용한 대안으로 언급됨.

그냥 브라우저에서 HTML 파일을 열고 다음 명령어를 실행하면 됨 - document.designMode = 'on'

이걸 사용하면 문서 내의 어떤 텍스트든 수정하거나, 굵게 만들거나, 요소를 삭제하는 등의 작업이 가능함. 파일을 내보내려면 HTML 문서의 루트로 가서 텍스트 에디터에 복사해 넣은 뒤 HTML로 저장하면 됨.

조만간 Anthropic이 이 기능을 기본적으로 추가해주길 바람 :)

원문

커뮤니티 목록

r/ClaudeAI•약 2개월 전•59•14

꿀팁: 예쁜 HTML 문서는 코드 에디터 없이도 아주 쉽게 수정할 수 있음

Pro tip: those beautiful HTML docs can be edited super easily, and you don't have to open up a code editor

핵심 요약

브라우저 콘솔에서 document.designMode 명령어를 사용해 HTML 문서를 간편하게 수정하는 방법을 공유함.

HTML 수정 팁 — 브라우저 콘솔에 document.designMode = 'on'을 입력해 문서 내용을 직접 편집함.
편집 방식 — 텍스트 수정, 굵게 처리, 요소 삭제 등이 가능하며 저장 시 HTML로 다시 저장함.
Claude 기능 제안 — Anthropic이 이 편집 기능을 기본적으로 지원해주길 기대함.
Claude Design 비교 — 채팅 모드에서 생성된 아티팩트를 수정할 때 유용한 대안으로 언급됨.

그냥 브라우저에서 HTML 파일을 열고 다음 명령어를 실행하면 됨 - document.designMode = 'on'

조만간 Anthropic이 이 기능을 기본적으로 추가해주길 바람 :)

주요 댓글

r/claudeai

HTML 편집 방식에 대해 손을 직접 써야 한다는 점을 지적하며 다소 냉소적인 반응을 보임.

Claude design 써봤어? 에디터 기능 있던데.

출시 초기 이후로는 안 써봤는데, 방금 확인해보니 꽤 괜찮네! 조만간 꼭 써봐야겠어. 내가 말한 건 Claude가 임원용 요약 같은 걸 생성할 때 HTML 아티팩트로 만들어주는데, 그걸 코드 에디터로 열거나 여러 번 다시 프롬프트 입력할 필요 없이 문서에서 단어 몇 개만 살짝 바꾸고 싶을 때 쓰는 방법이야.

Claude design이 바로 그런 기능을 제공하는 거야.

맞아, 근데 만약 아티팩트가 채팅 모드에서 생성된 거라면, 새로 프롬프트를 입력해서 편집 가능한 디자인 컴포넌트로 다시 빌드하지 않는 이상 Claude design에 넣어서 편집할 수가 없거든. 게다가 난 그냥 텍스트 몇 개만 바꾸고 싶은 거지, 다른 걸 다시 디자인하고 싶은 게 아니니까.