AI 소식, 기술 블로그, 포트폴리오, 자동화 워크플로우를 한 도메인에서 운영하는 개인 브랜딩 사이트입니다.
왜 만들었나
흩어진 온라인 정체성을 하나로 모으고 싶었습니다. GitHub 프로필, 노션 페이지, 브런치 글들이 각각 따로 놀고 있었는데, "내가 어떤 사람인지"를 한 곳에서 보여주는 공간이 필요했습니다.
인프라 결정
처음에는 Vercel로 배포했지만, 홈서버(Mac Mini)에 이미 Supabase와 n8n을 셀프호스팅하고 있어서 인프라를 통합했습니다.
- Cloudflare Tunnel → Docker 컨테이너 직접 서빙 (공인 IP 불필요)
- Supabase self-hosted → 데이터와 인증, Storage를 한 번에
- n8n → AI 소식 수집·요약·발행 자동화
월 구독 비용 0원, 데이터는 내 서버에.
기술적으로 신경 쓴 것들
디자인 시스템 직접 정의 Wanted Design System의 타이포그래피와 컬러 토큰을 CSS 변수로 직접 구현했습니다. shadcn/ui 컴포넌트와 커스텀 UI가 같은 시각 언어로 동작합니다.
콘텐츠 아키텍처 구조화된 데이터(태그, 조회수, 발행일)는 Supabase, 글 본문은 MDX 파일로 분리했습니다. 빌드 타임에 파일을 읽어 ISR로 캐싱하고, 관리자 페이지에서 인라인 편집이 가능합니다.
Server Actions 기반 관리자 별도 API 없이 Next.js Server Actions만으로 글 작성·수정·이미지 업로드·발행 전체 플로우를 처리합니다.
교실 IoT 대시보드
최근에는 SW 수업용 실시간 교실 대시보드를 추가했습니다. ESP32-S3 30대가 MQTT로 신호를 보내면 swedu/classroom 페이지에 좌석 상태가 실시간으로 표시됩니다. 학생이 버튼을 누르면 손들기(노란색), 도움 요청(빨간색)이 교사 화면에 즉시 반영됩니다.