팀 협업에서 HTML 공유
— Slack·Notion·Teams 연동 팁

기획자가 ChatGPT로 만든 UI 시안을 팀원에게 보내려 한다. 개발자가 Cursor로 뽑아낸 인터랙티브 대시보드를 클라이언트에게 보여줘야 한다. AI가 HTML을 만드는 속도는 빨라졌는데, 그 결과물을 팀과 주고받는 방법은 여전히 10년 전 그대로다.

파일 첨부, 코드 붙여넣기, 호스팅 배포. 어떤 방법을 써도 받는 쪽에서 한 단계 이상의 추가 작업이 생긴다. 팀 협업 도구가 HTML을 직접 소화하지 못하기 때문이다. Slack은 .html 파일을 렌더링하지 않고, Notion은 코드 블록을 실행하지 않으며, MS Teams는 첨부 파일을 모바일에서 여는 것조차 번거롭다.

기존 방법이 팀 워크플로우에서 막히는 이유

개인 작업에서 불편한 것과, 팀 협업에서 막히는 것은 차원이 다르다. 혼자라면 파일을 저장해두고 나중에 열면 그만이다. 하지만 팀에서는 검토, 피드백, 승인, 공유 — 이 흐름이 모두 링크 하나로 연결되어야 한다.

• CodePen: 계정이 필수다. 팀원 전원이 가입해야 하고, 파일 드롭도 지원하지 않는다. 한 번 쓰고 마는 시안을 올리기에 과하다.
• JSFiddle: HTML·CSS·JS를 분리해서 입력하는 구조라, AI가 통짜로 뽑아준 단일 파일을 그대로 붙여넣을 수가 없다.
• GitHub Gist: 코드는 저장되지만 HTML로 렌더링되지 않는다. gistpreview 같은 별도 도구를 거쳐야 한다.
• Glitch: 2025년 7월 서비스가 종료됐다. 기존에 올려둔 프로젝트도 더 이상 접근할 수 없다.
• Netlify Drop: 폴더 단위 배포만 지원한다. HTML 파일 한 장을 올리려면 폴더 구조를 만들어야 한다.
• tiiny.host: 계정이 필요하고, 비밀번호 보호는 유료 플랜에서만 쓸 수 있다.

현재 무료 + 계정 불필요 + 비밀번호 보호를 동시에 제공하는 HTML 공유 서비스는 html.to가 유일하다.

팀 협업 맥락에서 문제는 더 구체적이다. 결과물 하나를 공유할 때마다 계정을 만들고, 비밀번호 보호가 필요할 때마다 유료 결제를 해야 한다면 워크플로우가 중단된다.

html.to 링크를 팀 도구에 연결하는 법

html.to는 HTML을 붙여넣거나 파일을 드롭하면 즉시 공유 링크를 생성한다. 계정 없이, 설치 없이. 이 링크가 팀 협업 도구 어디서든 클릭 한 번으로 열린다는 것이 핵심이다.

1단계 — 링크 생성

1. ChatGPT, Claude, Cursor 등 AI 도구에서 HTML 코드를 복사한다.
2. htmlto.puzl.co.kr에 접속해 코드를 붙여넣거나 .html 파일을 드롭한다.
3. 렌더링 결과를 확인한다. 수정이 필요하면 코드를 바로 편집할 수 있다.
4. 외부 공유라면 비밀번호를 설정한다 (AES-256-GCM 암호화, 선택 사항).
5. SHARE를 누른다. 링크가 클립보드에 자동 복사된다.

Slack에서 활용하기

링크를 Slack 채널이나 DM에 붙여넣으면 OG 태그 기반 미리보기 카드가 자동으로 생성된다. 팀원은 카드의 제목과 설명만 봐도 맥락을 파악할 수 있고, 클릭하면 브라우저에서 렌더링된 HTML을 바로 본다. #design-review 채널에서 시안을 공유할 때 특히 유용하다. 스레드에 피드백을 달면 링크와 코멘트가 한 곳에 모인다.

팁: 메시지에 링크만 단독으로 붙여넣어야 미리보기 카드가 크게 표시된다. 텍스트와 함께 붙여넣으면 인라인 링크로 축소된다.

Notion에서 활용하기

Notion 페이지에서 /embed 블록을 삽입하고 html.to 링크를 넣으면 페이지 안에 HTML이 인라인으로 렌더링된다. PRD 문서 안에 UI 시안을 바로 삽입하거나, 스프린트 보드 옆에 프로토타입을 붙여두는 방식으로 활용할 수 있다. 팀원이 Notion을 벗어나지 않고 결과물을 확인하고 댓글을 달 수 있다.

팁: Notion embed 블록의 높이를 조절해 결과물 전체가 스크롤 없이 보이도록 설정하면 리뷰 속도가 빨라진다.

MS Teams에서 활용하기

Teams 채팅이나 채널에 링크를 공유하면 자동 미리보기가 붙는다. 탭(Tab) 기능을 활용하면 더 깔끔하다 — 채널 탭에 Website를 추가하고 html.to 링크를 URL로 지정하면, 팀 전체가 해당 탭에서 항상 최신 HTML 결과물을 볼 수 있는 구조가 만들어진다. 반복적으로 업데이트하는 리포트나 대시보드에 적합하다.

외부 공유 시 비밀번호 보호 설정

클라이언트나 외부 협력사에 공유할 때는 링크가 무방비로 열려 있으면 곤란한 경우가 있다. html.to의 비밀번호 보호는 AES-256-GCM 방식으로 동작한다. 서버에 비밀번호를 저장하지 않고, 브라우저에서 직접 복호화하는 제로 지식(zero-knowledge) 구조다.

설정 방법은 간단하다. 링크를 생성하기 전에 비밀번호 필드에 원하는 값을 입력하면 된다. 링크를 받은 사람은 비밀번호를 입력해야 내용을 볼 수 있다. 비밀번호는 링크와 별도로 Slack DM이나 Teams 메시지로 전달한다.

팀 워크플로우 적용 팁 정리

• 시안 공유 시 링크 + 버전 번호를 같이 명시한다. 예: v2 리뷰 — [링크]
• 피드백을 받으면 코드를 수정해 새 링크를 생성한다. 링크가 바뀌므로 버전 관리가 자연스럽게 된다.
• 영구 저장이 기본이라 링크를 나중에 다시 공유해도 열린다. 회의 전날 만든 시안을 당일 회의에서 그대로 쓸 수 있다.
• Notion 위키에 링크를 모아두면 팀의 HTML 시안 히스토리가 쌓인다.
• 비밀번호 보호 링크는 비밀번호를 보안 채널(DM)로 따로 보낸다.

팀 협업에서 HTML을 주고받는 마찰을 없애는 가장 빠른 방법은, 결과물을 링크로 바꾸는 한 단계를 워크플로우에 고정하는 것이다. AI 도구에서 코드를 복사 → html.to에 붙여넣기 → 링크 복사 → 팀 도구에 공유. 이 흐름이 자리를 잡으면 "HTML 어떻게 보냐"는 질문이 사라진다.