시리얼 Sireal

노션 HTML 블록, 그냥 임베드인 줄 알았다면 이 영상부터 보세요.

https://youtu.be/M-EQJsF4JFQ

무료 요금제부터 엔터프라이즈까지 전 요금제에서 HTML·CSS·JavaScript로 만든 인터랙티브 UI를 노션에 넣을 수 있습니다. 부가세 계산기, ROI 계산기, D-Day 카운트다운, 온보딩 체크리스트, 대시보드, 심지어 테트리스까지 — 실제 사례와 만드는 방법, 한계와 우회법까지 한 번에 정리했습니다.

📌 이 영상에서 다루는 내용:
✅ HTML 블록이란? (전 요금제 공개, 인라인·팝업 표시)
✅ 만드는 방법 3가지 — 노션 AI / Claude·ChatGPT / 노션 MCP
✅ 반드시 넣어야 하는 프롬프트 한 줄
✅ 업무 도구·팀 게임·학습 위젯 실전 사례
✅ 노션 DB 기반 대시보드 (무료 요금제 대안)
✅ 실시간 동기화 한계와 n8n·템플릿 프롬프트 우회법

#노션 #Notion #HTML블록 #노션AI #생산성

1 week ago | [YT] | 10

시리얼 Sireal

디자이너가 없어도, 디자인을 배운 적 없어도.
이제 아이디어만 있으면 결과물이 나옵니다.

Anthropic이 공개한 Claude Design —
대화 한 번으로 피치덱, 프로토타입, 브랜드 자료까지 완성하는 AI 협업 도구입니다.

이번 카드뉴스에서 놓치면 안 될 8가지 쟁점을 정리했어요 ↓

✦ Claude Opus 4.7 기반, 2026년 4월 출시
✦ 디자이너·창업자·마케터 모두를 위한 설계
✦ 프로토타입 제작 프롬프트 20개 → 단 2개로
✦ 하루짜리 작업이 한 번의 대화로 완성
✦ 코드베이스 연동 → 브랜드 자동 적용
✦ Canva · PDF · PPTX · HTML 내보내기
✦ Claude Code 연계로 실제 동작 프로토타입까지
✦ 구독 한도 초과 시 추가 과금 — 이것만 주의하세요

AI 도구는 먼저 이해한 사람이 먼저 씁니다.
나중에 다시 보고 싶다면 저장해두세요.
유용했다면 디자인 고민 중인 동료에게 공유해주세요.

👇 어떤 기능이 가장 기대되시나요? 댓글로 알려주세요!

Skip the Carousel

1 2 3 4 5 6 7 8 9 10

2 months ago | [YT] | 50

시리얼 Sireal

Anthropic이 최신 플래그십 모델 Claude Opus 4.7을 공개했습니다.

코딩·비전·메모리 전 영역이 동시에 업그레이드된 이번 릴리즈, 핵심만 정리했어요.

—

✦ 소프트웨어 엔지니어링
코딩 벤치마크 13% 향상, 프로덕션 작업 3배 해결
복잡한 장기 태스크도 일관되게 완수

✦ 비전 처리
최대 2,576px 지원 — 이전 대비 3배 이상 해상도
계약서·기술 도면·재무 차트 그대로 분석 가능

✦ 명령 준수 정밀화
지시사항을 문자 그대로 따름
(기존 프롬프트 재점검 필요할 수 있어요)

✦ xhigh 노력 수준 신규 추가
high와 max 사이 새로운 단계
Claude Code 기본값도 xhigh로 상향

✦ Claude Code
/ultrareview 커맨드로 아키텍처 수준 코드 리뷰
Pro/Max 사용자 3회 무료

✦ 가격
Opus 4.6과 동일 — 입력 $5 / 출력 $25 (1M 토큰)
API: 'claude-opus-4-7'

—

더 강력해졌는데 가격은 그대로.
AI 도구 활용법이 궁금하다면 프로필 링크를 확인해보세요.

Skip the Carousel

1 2 3 4 5 6 7 8 9 10

2 months ago | [YT] | 27

시리얼 Sireal

세계 최초 사우나 Cursor 해커톤.
아이디어 탄생부터 행사 종료까지, 정확히 30일.
처음엔 솔직히 말하면 무모한 계획이었습니다.

2019년, 국내 첫 노션 워크샵을 혼자 열었을 때 기억이 납니다. 이것도 해야 하고, 저것도 해야 하고. 행사 한 번 끝내면 그 다음을 엄두도 못 낼 만큼 지쳤습니다.
그때 배운 게 있습니다.

혼자 하는 행사는 '한 번의 이벤트'로 끝납니다. 팀이 있는 행사는 '다음 기회'를 만듭니다.
이번 커서 유레카톤에서 그 차이를 다시 한번 체감했습니다.


사우나 토요일 대관, 보통은 엄두도 못 냅니다.
매출이 가장 높은 요일이라 장소를 빌려주지 않으니까요.
Jihee Woo가 해냈습니다.

'세계 최초 사우나'라는 프레임, Eric Kim이 만들었습니다.
아이디어만 던졌는데 누구나 "우와" 하는 비주얼, Rachel Lee이 뽑아냈습니다.
현장 진행과 운영의 중심을 잡아주는 진대연
합류한 지 30일 만에 자기 역할을 스스로 찾아 뛴 Ga On Seo

내가 놓치면 팀원이 채우고, 팀원이 흔들리면 내가 잡는 구조.
그게 이번에 제대로 작동했습니다.
그리고 우리는 이제 이름이 생겼습니다. Team. HUMAN

사우나 해커톤은 성황리에 끝났고,
그 행사 하나가 여러 개의 새로운 기회로 연결되고 있습니다.

다음 행사가 어떤 모습일지 궁금하시다면 팀 휴먼 페이지, 혹은 저를 팔로우해주세요 😄

다음 30일이 기대됩니다.

Thanks to Ben Lang

#팀휴먼 #커서유레카톤 #해커톤 #퍼스널브랜딩 #스타트업

3 months ago | [YT] | 12

시리얼 Sireal

2대의 맥, 2대의 모니터, 생산성을 높이기 위한 발버둥

Mac Studio와 Mac mini를 함께 쓰고 있습니다. 모니터는 2대. 메인 모니터는 항상 Mac Studio에 연결해두고, 서브 모니터만 필요에 따라 Mac Studio의 확장 디스플레이로 쓰거나 Mac mini 전용으로 전환하는 구조입니다.

문제는 이 전환 과정이었습니다. 모니터 입력 소스를 수동으로 바꾸고, 메인 Mac에서 디스플레이를 연결 해제하지 않으면 마우스가 빈 화면으로 넘어갑니다. 매번 반복되는 이 과정이 사소하지만 꽤 거슬렸습니다.

맥 미니를 서버로 쓰시는 분은 모니터에 들어갈 일이 잘 없다고 하시지만, 저처럼 서버 설정 초보자는 모니터를 하루에도 수십 번을 켜야 하더라고요.
그래서 만들었습니다.

FlipDisplay — 메뉴바 클릭 한 번으로 서브 모니터의 입력 소스 전환과 디스플레이 연결/해제를 자동으로 처리하는 쉘 스크립트입니다.

동작은 단순합니다.
DDC 명령으로 모니터 입력을 변경하고
BetterDisplay로 디스플레이를 연결하거나 해제합니다
SwiftBar로 메뉴바에 토글 UI를 올리고, Raycast 단축키도 지원합니다

컴퓨터를 초기화해도 모니터 이름으로 UUID를 자동 감지하도록 만들어서, 재설치 후에도 별도 설정 없이 바로 동작합니다. 터미널에 한 줄 붙여넣으면 설치가 끝납니다.

한 가지 아쉬운 점은 BetterDisplay Pro 라이선스가 필요하다는 것입니다. 디스플레이 연결/해제 기능이 Pro 전용이라 어쩔 수 없었습니다. 다만 처음 14일은 무료 체험이 가능하니, 2주 동안 먼저 써보시고 결정하시는 걸 추천드립니다. 다행히 구독이 아니라 $21.99 일회성 구매입니다. GitHub 스타 3.1만 개의 검증된 도구이기도 하고요.

거창한 앱은 아닙니다. 하루에 수십 번 반복하던 걸 자동화했을 뿐인데, 체감은 생각보다 큽니다.

비슷한 환경을 쓰시는 분이 있다면 참고가 되었으면 합니다. GitHub에 공개해두었습니다.

sire.al/XhFd6R

관련하여, BetterDisplay를 구매하지 않아도 사용할 수 있게 해준다거나 하는 PR은 환영합니다.

#macOS #생산성 #개발환경 #듀얼맥 #자동화 #DDC #BetterDisplay #SwiftBar #오픈소스

3 months ago | [YT] | 14

시리얼 Sireal

🎬 새 영상이 올라갑니다!

Claude Cowork로 이동 중에 목소리만으로 견적서를 완성했습니다.

이번 영상에서 다루는 내용:
✅ Chat vs Cowork vs Code 차이점
✅ 데스크톱 앱 세팅 방법
✅ Gmail + 노션 + 드라이브 동시 검색
✅ Dispatch로 모바일 제어
✅ 실전 견적서 만들기 데모

영상 보시고 궁금한 점 댓글로 남겨주세요!

26년 4월 1일 17시! 기대해주세요!

3 months ago | [YT] | 26

시리얼 Sireal

이동 중에 견적 하나 뽑아서 4시간 아꼈습니다.
이메일, 노션, 드라이브 다 뒤지게 시켰습니다.
그리고 실제로 됐습니다.

오늘 클로드 코워크(Claude Cowork)로 고객사 컨설팅 견적서를 작업한 과정을 그대로 공유합니다.

1. 시작은 “관련 정보 다 찾아줘”
이메일, 노션 페이지, 구글 드라이브를 동시에 검색하게 했습니다. 고객사 담당자 연락처, 신청일, 요청 사항, 지난 미팅 내용까지 한 번에 정리됐습니다. 제가 직접 탭 열고 검색했으면 30분은 걸렸을 일입니다.

2. “얼마 받아야 하지?“를 데이터로 풀었습니다
감으로 견적 잡는 게 늘 불편했습니다. 오늘은 과거 계약서 11건, 노션의 프로젝트별 입금 내역을 전부 뽑아서 업무 범위별 금액 패턴을 분석했습니다. 비슷한 규모의 프로젝트들과 비교해서 “이 정도 범위면 이 정도 금액”이라는 근거가 생겼습니다.

3. 회의 내용도 직접 읽었습니다
직전 오프라인 미팅 노트를 노션에서 불러와서 실제 업무 범위를 다시 정리했습니다. 이걸 보고 나서 처음 제시하려던 견적이 낮았다는 걸 바로 알았습니다.

4.구글 시트 템플릿을 클로드가 열어서 복사했습니다
기존에 쓰던 견적서 구글 시트 링크를 주니까, 파일을 열고 구조를 파악하고, 사본을 만들고, 항목을 하나씩 채웠습니다. “항목 열은 키워드로, 업무 열에 상세 내용 넣어줘”라고 했더니 그것도 바로 수정했습니다.

5. 오늘 실제로 아낀 것
정보 수집, 금액 분석, 견적서 작성까지 혼자였으면 4시간 작업입니다. 코워크 없이는 탭 수십 개 열고, 숫자 일일이 비교하고, 시트 복사해서 내용 바꾸고. 오늘은 대화하면서 했습니다.

AI 어시스턴트가 아니라 실제로 내 파일을 열고, 내 데이터를 읽고, 내 툴을 직접 조작하는 경험은 좀 달랐습니다.

클로드 코워크 제대로 알고 싶으신 분은 댓글에 '클로드' 남겨주세요! 수요가 있으면 상세 사용법으로 돌아올게요.

#AI #클로드 #ClaudeCowork #노션컨설팅 #업무자동화 #AI활용 #SIREAL #시리얼

3 months ago | [YT] | 41

시리얼 Sireal

오늘 흥미로운 피드백을 받았습니다.
"HTML to Figma 플러그인을 쓰면 더 편하게 편집할 수 있어요."

직접 해봤습니다.

딸깍 한 번이라고 하면 거짓말이고, 딸깍+ 단축키가 슬라이드 수 만큼은 필요합니다.
그래도 3분이 채 안 걸려요.

피그마에 익숙하신 분들이라면 이 방법이 훨씬 자연스럽게 느껴지실 것 같습니다.
캔바보다 레이아웃 자유도도 높고, 편집 속도도 빠르니까요.

워크플로우 요약하면 이렇습니다 ↓

1️⃣ Claude로 디자인 시스템 기반의 HTML 생성
2️⃣ HTML to Figma 플러그인으로 피그마에 가져오기
3️⃣ 피그마에서 자유롭게 편집

AI가 만든 결과물을 익숙한 툴에서 마저 다듬는 것,
이게 실제로 쓸 수 있는 워크플로우라고 생각합니다.

영상에서 자세한 과정을 확인해보세요 👇
https://youtu.be/7vIl_hc2-aY

3 months ago (edited) | [YT] | 28

시리얼 Sireal

새 영상 올렸습니다.

Claude와 Gemini로 브랜드 디자인 시스템을 만드는 전 과정을 담았습니다.
표지부터 본문 슬라이드까지 전부 프롬프트로 제작한 결과물이고,
여러분도 따라 만들 수 있도록 7단계로 정리했습니다.

로고 컬러 추출 → 레퍼런스 수집 → Gemini 가이드 → Claude 스킬화 → 대량 생산

마지막에 Canva 매직 레이어로 수정하는 방법까지 있으니 끝까지 봐주세요.

https://youtu.be/7vIl_hc2-aY

3 months ago | [YT] | 25

시리얼 Sireal

2026년 3월, 노션에 '탭 블록'이 출시됐습니다.
한 페이지 안에서 탭으로 콘텐츠를 전환하는 기능인데요,
이거 제대로 쓰면 페이지 구조가 완전히 달라집니다.

활용 사례 10가지, 정리해봤습니다 👇

1️⃣ 프로젝트 생애주기 모드 — Plan / Action / Review
2️⃣ 직무별 온보딩 가이드 — 개발 / 기획 / 디자인
3️⃣ 콘텐츠 A/B 버전 비교 — Draft A / Draft B / Final
4️⃣ 고객사 360° 제어 센터 — 프로젝트 / 인보이스 / 미팅
5️⃣ 시간 지평별 플래너 — Daily / Weekly / Monthly
6️⃣ 인터랙티브 포트폴리오 — Projects / Skills / Contact
7️⃣ 다국어 정보 아카이브 — 한국어 / English / 日本語
8️⃣ 강의 회차 올인원 허브 — 강의노트 / 실습파일 / Q&A
9️⃣ 심리적 업무 모드 전환 — Focus / Admin
🔟 1인 사이드 프로젝트 콕핏 — 아이디어 / 빌드로그 / 수익

💡 꿀팁: 노션 AI에게 탭 내용을 읽히려면
"몇 번째 탭" 또는 "첫 줄 텍스트" 기준으로 지정하세요.

탭에는 별도의 제목 속성이 없어서,
첫 줄 텍스트가 곧 탭 이름입니다.

저장 필수 📌 나중에 꼭 써먹게 됩니다.

Skip the Carousel

1 2 3 4 5 6 7 8

3 months ago | [YT] | 53