YOHANSTUDIO
// SHOWROOM — 만든 것들

쇼룸.

무엇을 만들었는지보다 왜 필요했고, 어떤 제약 속에서 검증했으며, 운영 결과에 어떻게 책임졌는지를 기록합니다.

8 PROJECTS

기존 프로젝트 · 순차적으로 사례 전환 중

AI Workflow2026

SnapContext

화면 캡처에 맥락을 묶어 AI에 바로 넘기는 크롬·웨일 확장.

문제

AI에게 화면을 설명하려면 캡처 말고도 주소·화면 크기·브라우저 정보를 매번 따로 챙겨야 했다.

해결

캡처하는 순간 화면·출처·핀 주석을 한 묶음으로 정리해 AI에 붙여넣거나, 로그인 없는 7일 링크로 공유한다.

배운 점

직접 만드는 것과, 남의 환경에서 제대로 열리는 것은 다른 일이라는 걸 배웠다.

TypeScriptChrome ExtensionManifest V3
프로젝트 상세 →
Build Log2026

요한 스튜디오

이 웹사이트 자체. 블로그·포트폴리오·스토어·진단의 거점.

문제

AI 시대 1인 기업가의 활동을 한 도메인에 묶을 거점이 없었다.

해결

Next 16 + MDX + Vercel — Phase 1 랜딩 → 2 블로그/SEO → 3 결제.

배운 점

공개된 빌드로그 자체가 자산이다. 만들면서 쓰고, 쓰면서 팔린다.

NextTSMDX
프로젝트 상세 →
NotionUIUX 위젯 미리보기 — 픽셀·네온 톤 노션 대시보드
Widget2026

NotionUIUX

노션에 임베드하는 픽셀·네온 톤 위젯 10종. 노션 대시보드를 본인 취향대로.

핵심
  • 시계·캘린더·투두·메모·가계부·포모도로 등 일상 도구 10종
  • 픽셀과 네온 톤으로 노션 다크모드에 자연스럽게 어울림
  • offline 모드 지원 — 데이터는 본인 브라우저에만 저장
  • 오픈소스 — 복제·포크해서 본인 취향대로 자유롭게 수정

// 대상 — 노션 대시보드를 더 풍성하게 만들고 싶은 사람

NotionVercelHTMLJS
프로젝트 상세 →
AI Workflow2026

포커스 피드

유튜브 요약 기반 집중 피드 큐레이션.

문제

유튜브 알고리즘이 집중을 흩었다. 요약본만 보고 결정하고 싶었다.

해결

Whisper + LLM 요약 → 정적 피드 — 시청 전에 본문 5줄로 결정.

배운 점

AI는 콘텐츠 생성보다 '필터'에 쓸 때 일상 효과가 크다.

LLMWhisperNext
프로젝트 상세 →
Vibe Coding2026

요한 프로필 카드

Cursor 바이브코딩으로 만든 인터랙티브 프로필 카드.

문제

이력서가 PDF 한 장으론 사람을 보여주지 못했다.

해결

Next + Tailwind로 인터랙티브 카드 1개 — 30분 안에 MVP 배포.

배운 점

Vibe Coding은 '스펙을 줄이고 첫 화면을 빨리 띄우기' 게임이다.

NextTailwind
프로젝트 상세 →
Notion OS2026

요한 OS

노션 기반 1인 운영체계. 실행 로그·리소스 DB·회고 루프.

문제

할 일·자료·회고가 도구마다 흩어져 매주 같은 결정을 다시 했다.

해결

Notion 하나에 Decision DB + Resource DB + Weekly Review를 묶고 템플릿화.

배운 점

도구가 아니라 의사결정 루프가 시스템이다. 입력 양식을 좁히면 회고가 쉬워진다.

NotionTemplates
프로젝트 상세 →
Automation2026

카페사이 OS

Google Apps Script 기반 카페 운영 자동화.

문제

매일 같은 시트 정리·근무표·재고 알림을 손으로 처리했다.

해결

GAS로 시트 정리·Slack 알림·근무표 자동 배포 파이프라인 구축.

배운 점

자동화 대상은 시간이 아니라 '반복하는 결정'을 찾아야 한다.

GASSheetsSlack
프로젝트 상세 →