Todari · 아이디어를 꺼내, 쓰이는 제품으로.

PRODUCT ENGINEER · AI AUTOMATION · SERVICE BUILDER

Todari

3D PROJECT DISPENSER LOADING

Todari · 토다리

ABOUT TODARI

기획의 질문을 구현과 운영으로 이어 왔습니다.

기획·디자인 실무에서 시작해 우아한테크코스에서 프론트엔드를 공부했습니다. 지금은 포크레터의 기획·디자인·풀스택 개발과 운영을 맡고 있습니다.

CAREER

  1. 2015.03 — 2023.02

    홍익대학교

    토목공학과 졸업 · 학점 4.09/4.5

  2. 2022.01 — 2023.07

    미피랩스

    자율주행·블록체인/NFT 서비스 기획·디자인. 자율주행 특허 출원 1건, KT 안다즈 협업

  3. 2024.02 — 2024.12

    우아한테크코스

    6기 프론트엔드 수료

  4. 2025.09 — 현재

    링카이브

    포크레터 1인 기획·디자인·풀스택·운영

TEAMWORK · 행동대장

리뷰에서 발견한 접근성 문제를 구현에 반영했습니다.

Carousel·BottomSheet의 키보드 접근성을 개선하던 중, 팀원이 슬라이드 변경을 스크린리더가 실제로 읽는지 질문했습니다. 기존 aria-label 방식의 한계를 확인하고 aria-live 안내 영역으로 수정했습니다. 포커스 애니메이션도 리뷰를 통해 제거하며 컴포넌트 간 동작을 통일했습니다.

리뷰와 수정 기록 보기 ↗
운영 방식과 기술 사례 더 보기
  1. 01

    Product Architecture

    불명확한 요구사항을 도메인 흐름과 상태 전이로 구조화하고, 제품·클라이언트·서버의 책임 경계를 설계합니다.

  2. 02

    Frontend Systems

    인터랙션 구현을 넘어 재사용 가능한 UI 추상화, 성능, 접근성, 테스트 가능한 상태 구조를 함께 다룹니다.

  3. 03

    Realtime & Data

    WebSocket·Web Audio·외부 API·데이터 수집처럼 시간과 정합성이 중요한 흐름을 안정적인 파이프라인으로 만듭니다.

  4. 04

    Product Operations & Growth

    출시 이후 검색 발견성, 사용자 행동, 운영 오류를 함께 관측합니다. SEO·GEO·GA4·Search Console·서치어드바이저의 신호를 다음 제품 판단과 개선으로 연결합니다.

WHAT I OWN · PRODUCT OPERATING LOOP

출시가 끝이 아니라,
다음 판단이 시작되도록 만듭니다.

PO로 문제와 우선순위를 정의하고, 개발자로 제품을 출시하며, SEO·GEO·GA4·Search Console·네이버 서치어드바이저의 신호로 발견 가능성과 사용자 흐름을 계속 개선합니다.

  1. 01DEFINE

    문제와 성공 기준

    PO 경험을 바탕으로 고객·사업 문제를 가설과 KPI로 바꾸고, 지금 검증할 범위와 우선순위를 정합니다.

    ProblemHypothesisKPI
  2. 02SHIP

    직접 제품으로 출시

    UX와 도메인 흐름부터 클라이언트·서버·데이터·배포까지 연결해 실제 사용 가능한 제품으로 만듭니다.

    UXSystemDelivery
  3. 03MEASURE

    발견성과 행동을 관측

    GA4의 이벤트·퍼널, 광고 ID 기반 가입 코호트, Search Console·서치어드바이저의 색인·검색 신호, GEO의 AI 답변·인용 흐름을 함께 봅니다.

    GA4Ad AttributionSEO · GEO
  4. 04IMPROVE

    다음 판단으로 환류

    검색 노출·제품 퍼널·운영 오류에서 얻은 신호를 백로그, 실험, 자동화로 바꿔 다음 개선까지 이어갑니다.

    BacklogExperimentAutomation

OPERATING EVIDENCE 01 · GEO DASHBOARD

검색과 AI 답변 속 브랜드 가시성을 행동으로 바꿉니다.

검색 노출과 AI 답변의 인용·출처·질문별 성과를 정규화하고, 품질 검사를 통과한 표본만 지표에 반영합니다. 상태 → 원인 → 다음 행동으로 이어지는 모니터링 흐름을 설계했습니다.

OPERATING EVIDENCE 02 · TODARI.DEV

제품·검색·배포 신호를 한 운영 루프로 연결합니다.

메타데이터·canonical·JSON-LD·sitemap, GA 이벤트, Search Console·서치어드바이저의 색인과 검색 가시성, 배포·오류 신호를 함께 관리하며 개선점을 찾습니다.

OPERATING EVIDENCE 03 · FORCLETTER SEO

검색 기회를 찾아 글을 고치고, 효과는 따로 판정합니다.

Search Console 성과를 매일 적재해 클릭률이 낮거나 순위를 올릴 여지가 있는 검색어를 찾고, 그 검색어로 노출되는 글을 보강하는 개선안을 LLM이 작성합니다. 키워드 반복·중복 글·근거 없는 수치를 거르는 두 번째 LLM 검토가 웹 검색으로 확인해 승인해야만 반영하고, 불확실하면 보류합니다. 사람이 보관·검수 중인 글은 건드리지 않고 기존 글의 URL은 바꾸지 않으며, 다른 편집이 감지되면 변경을 멈춥니다. 게시한 변경은 전후 내용이 이력으로 남아 이후 편집이 없으면 되돌릴 수 있고, 효과는 사이트 전체 변화와 비교해 판정합니다. 효과 수치는 현재 누적하고 있습니다.

HOW I SCALE IT · AI-NATIVE AUTOMATION

AI Development
Harness

Claude·Codex가 코드를 생성하는 데서 끝나지 않도록, 레포 컨텍스트 주입부터 검증·배포·운영 신호까지 하나의 자동화 흐름으로 연결했습니다.

AI → AUTOMATION → OPERATIONS

  1. 01CONTEXT
  2. 02AI BUILD
  3. 03VERIFY
  4. 04CI / CD
  5. 05SMOKE
  6. 06OPS

01 · AI DEVELOPMENT HARNESS

세션 시작 시 repo map·git 상태·프로젝트 TODO·완료 기준을 주입하고, 소스 편집 뒤 검증 누락을 자동으로 감지합니다.

PUBLIC REPOSITORY ↗

02 · DELIVERY AUTOMATION

같은 `npm run verify`를 로컬과 GitHub Actions에서 실행하고, Vercel 프로덕션 배포 URL까지 자동으로 스모크 체크합니다.

03 · DISCORD OPS FEEDBACK

CI·Vercel·Sentry 신호를 Discord에서 모으고 읽기 전용 사전 진단과 `/code` 트리아지로 연결합니다. 복구는 사람이 승인합니다.

PUBLIC REPOSITORY ↗

TWO SIDES, ONE PRACTICE

ENGINEERING DEPTH

실패와 복구까지 시스템의 일부로 봅니다.

정상 흐름만 구현하지 않습니다. 데이터 정합성, 경계 조건, 재시도, 복구, 관측 가능성을 설계에 포함하고 운영에서 발견한 실패를 테스트와 가드레일로 되돌립니다.

PRODUCT INSTINCT

작은 불편도 실제 제품으로 검증합니다.

거창한 아이디어를 기다리지 않습니다. 일상의 문제를 검증 가능한 범위로 줄이고, 직접 출시해 사용 가능성과 기술적 비용을 확인합니다.

EVIDENCE, NOT CLAIMS

기술적 판단은 운영 결과로 증명합니다.

사용한 기술보다 어떤 제약을 발견했고, 어떤 경계를 설계했으며, 실패를 어떻게 시스템에 되돌렸는지를 기록합니다.

FORCLETTER · EXTERNAL API AT SCALE

수천 계정의 외부 API를 정책 안에서 운영합니다.

CONSTRAINT
4,800여 개 인스타그램 계정의 수집과 DM·댓글 자동 실행을, 토큰 만료와 Meta 정책·레이트리밋이라는 통제 불가능한 조건 위에서 운영해야 했습니다.
ENGINEERING DECISION
웹훅 서명 검증 → 이벤트 분류 → 모더레이션·자동 DM 실행의 단일 인입 파이프라인을 만들고, 토큰 상태 머신과 서킷 브레이커로 외부 장애가 사용자 의도 상태를 덮어쓰지 못하게 격리했습니다.
  • IG 계정 4,800+ 연동
  • 누적 자동 DM 8.8만+ 건
  • 댓글 535만 건 수집
설계 과정 읽기 ↗

FORCLETTER · DATA AT SCALE

5,000만 행 시계열을 일상 조회가 가능한 상태로 유지합니다.

CONSTRAINT
계정·미디어 메트릭을 주기 수집하면 스냅샷 테이블이 수천만 행으로 자라고, 통계·리포트 조회는 매일 그 위에서 돌아야 했습니다.
ENGINEERING DECISION
35개 크론 잡이 중복 실행 락 아래에서 수집하고, 조회 패턴에 맞춘 복합 인덱스와 기간 집계 쿼리로 성장·활성·리텐션 통계를 운영 DB에서 직접 제공합니다.
  • 메트릭 스냅샷 5,000만+ 행
  • 복합 인덱스 설계
  • 크론 잡 35개 · 실행 락
설계 과정 읽기 ↗

FORCLETTER · ZERO-DOWNTIME DELIVERY

배포와 장애 대응이 사용자에게 보이지 않게 합니다.

CONSTRAINT
웹·관리자·모바일 앱·API·스케줄러가 한 모노레포에서 서로 다른 대상으로 나가는데, 운영 서비스는 단일 EC2 위에 있어 배포 중단이 곧 사용자 장애였습니다.
ENGINEERING DECISION
CI를 통과한 커밋만 GHCR 이미지로 빌드해 승인 게이트를 거쳐 배포하고, 비활성 슬롯 기동 → 헬스체크 → Nginx upstream 전환의 blue-green으로 무중단 전환합니다. 모든 배포가 이미지 태그 기반이라 같은 스크립트로 롤백하고, Loki·Grafana 관측성 위에 등급·스로틀 정책이 있는 Slack 경보로 장애 신호를 관리합니다.
  • Blue-green 무중단 배포
  • 태그 기반 배포·롤백
  • 경보 등급·스로틀 정책
설계 과정 읽기 ↗

FORCLETTER · PAYMENTS & IDEMPOTENCY

돈이 오가는 흐름은 멱등하게 설계합니다.

CONSTRAINT
구독 결제·환불·쿠폰 이벤트가 웹훅으로 비동기 도착하고, 재시도와 중복 이벤트가 이중 청구나 이중 환불로 이어지면 안 됐습니다.
ENGINEERING DECISION
결제·환불 이벤트를 단일 웹훅 인입점에서 분류해 처리하고, 환불 실행은 멱등 키 테이블로 중복을 차단했습니다. 결제 이력과 구독 상태를 분리해 상태 전이를 추적 가능하게 유지합니다.
  • 정기결제 웹훅 처리
  • 환불 멱등 키 설계
  • 결제 이력·구독 상태 분리
서비스 보기 ↗

FORCLETTER · AI PRODUCT ENGINEERING

AI의 판단과 실행 사이에 경계를 설계합니다.

CONSTRAINT
AI 에이전트가 계정 분석을 넘어 DM 발송 같은 실행까지 다루면, 잘못된 호출 하나가 실제 사용자에게 그대로 도달합니다.
ENGINEERING DECISION
도구 레지스트리로 조회와 실행을 분리하고, 실행형 액션은 1회용·TTL·소유자 고정의 무결성 경계를 가진 승인 큐를 통과해야만 수행됩니다. LLM은 멀티 프로바이더 추상화 뒤에 두고 few-shot 예제를 데이터로 관리합니다.
  • 실행 승인 큐 · 1회용·TTL
  • 도구 레지스트리 분리
  • 멀티 프로바이더 LLM 계층
서비스 보기 ↗

FORCLETTER · AD ATTRIBUTION

광고가 데려온 고객을 서버 데이터로 다시 셉니다.

CONSTRAINT
광고 플랫폼이 보고하는 전환과 서버의 실제 가입은 기여 기준이 달라 합칠 수 없었고, 광고 지표만으로는 어떤 소재가 제품을 실제로 쓰는 고객을 데려왔는지 답할 수 없었습니다.
ENGINEERING DECISION
방문 시점의 광고 ID·UTM·클릭 ID를 보존해 가입 채널을 판정하고, 광고별 일별 성과를 가입 코호트와 광고 ID로 결합했습니다. 연결률이나 관찰 표본이 부족하면 판단을 보류하고, 운영 데이터에서 찾은 기존 가입자 오귀속은 가입 24시간 유입 창으로 재발을 막았습니다.
  • 광고 ID 연결률 약 95% (2026-09)
  • 광고 → 가입 → 14일 활성화 코호트
  • 연결·표본 부족 시 판단 보류
설계 과정 읽기 ↗

TODARI OPS · INCIDENT RESPONSE

장애는 복구로 끝내지 않고 시스템으로 되돌립니다.

CONSTRAINT
서비스 10여 개가 올라간 단일 EC2가 새벽 메모리 포화(OOM)로 응답 불능이 됐고, 사람이 자는 시간이라 감지도 복구도 늦었습니다.
ENGINEERING DECISION
복구 후 원인(스왑 없는 메모리 포화)을 제거하고, 메모리·스왑 임계 조기 경보와 CloudWatch 상태 검사 실패 시 자동 재부팅·복구, 재부팅 감지 통지까지 붙여 같은 장애가 사람 없이 끝나도록 만들었습니다.
  • 새벽 OOM → 원인 제거
  • CloudWatch 자동 복구
  • 임계 조기 경보·재부팅 통지
설계 과정 읽기 ↗

METRONOMDEUL · REALTIME SYNC

떨어져 있는 기기들의 박자를 하나로 맞춥니다.

CONSTRAINT
네트워크 지연과 서로 다른 오디오 시계를 가진 기기들이 각자의 이어폰에서 같은 클릭을 재생해야 했습니다.
ENGINEERING DECISION
RTT/2 표본의 중앙값으로 서버 시각 오프셋을 추정하고, Web Audio 50ms 선행 스케줄링으로 네트워크와 재생을 분리했습니다. iOS 오디오 활성화·재접속·방 상태 동기화의 경합은 복구 가능한 상태 전이로 정리했습니다.
  • RTT 중앙값 오프셋 추정
  • 50ms 선행 스케줄링
  • 재접속·iOS 복구
설계 과정 읽기 ↗

REACT PIXEL UI · FRONTEND INFRA

프레임워크를 깨지 않는 렌더링 계층을 설계합니다.

CONSTRAINT
기존 DOM과 CSS 레이아웃을 훼손하지 않으면서 배경·테두리·모서리·그림자를 픽셀 아트로 변환해야 했습니다.
ENGINEERING DECISION
Canvas 없이 clip-path 폴리곤과 합성 PNG 데이터 URL로 변환 계층을 설계해 SSR을 유지했습니다. RGBA 그라디언트는 의존성 없는 deflate 인코더로 직접 압축하고, 테마·hover·focus·크기 변화는 자동으로 재계산됩니다.
  • npm 패키지 배포
  • 회귀 테스트 161개
  • PNG 출력 30–100× 최적화
공개 코드 보기 ↗

TRADE TOWER · VERIFIED EXECUTION

실행이 위험한 시스템은 검증 체계부터 만듭니다.

CONSTRAINT
실시간 틱과 호가 데이터에서 판단을 만들되, 잘못된 진입·중복 주문·연결 단절이 실제 실행으로 번지지 않게 제어해야 했습니다.
ENGINEERING DECISION
규칙 기반 엔진을 중심에 두고 LLM은 제한적인 VETO로 격리했습니다. 결정론적 룰 선택기와 데이 리플레이 시뮬레이터로 라이브·시뮬레이션 동형성을 검증하고, 드리프트 감지와 킬 스위치로 실행을 제어합니다.
  • 결정론적 룰 + LLM VETO
  • 데이 리플레이 백테스트
  • 드리프트 감지·Kill Switch
프로젝트 보기 ↗

SHARING & TALKS

만드는 만큼, 말하고 나눕니다.

발표와 호스트, 스터디로 아는 것을 설명 가능한 언어로 바꿔 왔습니다. 기술은 결국 사람과의 대화로 완성된다고 믿습니다.

TECH WRITING

운영에서 내린 판단을 글로 씁니다. 장애 복구, 토큰 상태 머신, 무중단 배포, 대용량 시계열, 실시간 동기화.

글 보러 가기 →

LET'S TALK

문제를 함께 정의하고,
빠르게 제품으로 검증할 팀을 찾습니다.

프로덕트 엔지니어·프론트엔드 포지션과 제품을 처음부터 함께 만드는 협업 제안을 열어두고 있습니다. 해결하려는 문제와 기대하는 역할을 함께 보내주시면 대화를 시작하기 좋습니다.

hello@todari.dev ↗GitHub