중심은 후보 홍보 웹사이트였습니다. Next.js Edge Runtime으로 기획·개발·배포했고 choiwoongju.com에서 운영했습니다. 후보 소개·공약·선거 정보를 하나의 editorial 흐름에 담았습니다. 선거사무소에서 실제로 있었던 자세한 이야기는 이 매거진의 인터뷰 시리즈 — Magazine의 "The Election" — 에서 확인하실 수 있습니다.
프론트엔드를 짜기 전에 먼저 저만의 비주얼 디자인 언어를 정립했습니다. 2018·2020년 알렉산드리아 오카시오-코르테스(AOC)의 선거운동 — 뉴욕 Tandem 스튜디오의 작업 — 을 웹에 아카이빙된 캠페인 사이트와 공개된 디자인 분석으로 직접 연구하고, 표면이 아니라 원칙을 뽑아냈습니다: 관습적인 정당 색 클리셰를 깰 것, 메시지를 사진이 아니라 타이포그래피가 끌고 갈 것, 모션을 정적인 포스터를 "운동"처럼 느끼게 만드는 수단으로 다룰 것. 거기서부터 독자적인 시스템을 만들었습니다 — 기본 정당 색을 피한 네이비+레드 팔레트, 하나의 타이포그래피 목소리를 위한 Pretendard, "운동을 증폭한다"는 원칙을 웹으로 옮긴 활동 사진 우→좌 마퀴, 그리고 드롭캡과 형광펜 밑줄 강조 — 이것을 웹·인쇄·공유 이미지에 일관되게 적용했습니다.
"관악구의 밝은 미래"라는 캠페인의 컨셉은 그림으로 옮겼습니다. 관악구를 아이소메트릭 도시 풍경으로 시각화하고 그 위에 HUD 스타일 콜아웃을 얹어, 공약 하나하나를 그것이 속한 동네에 핀으로 꽂았습니다 — 삼성동·대학동·도림천·관악산 보행통로 — 그리고 스스로 한 글자씩 타이핑되는 헤드라인을 올렸습니다. 지도는 "우리 동네를 위한 약속"을 목록으로 읽는 대신 한눈에 보게 만듭니다.
이미지 자체에 대한 컨설팅도 했습니다. 인물 사진은 후보의 시선이 우측 상방을 향하는 구도를 권했습니다 — 앞으로, 위로, 나아가는 방향. 그리고 잘 정돈된 프로페셔널 컷 외에 실제 활동이 담긴 사진 — 국회 의정활동, 학술 활동, 시민들을 만나는 자리 — 을 쓰자고 밀었습니다. 사이트가 후보를 전문 정치인으로만이 아니라 유권자들 사이에 선 또 한 사람의 시민으로 읽게 하기 위해서였습니다.
후보 정보를 답하는 챗봇을 직접 구현했습니다. Claude Sonnet을 SSE로 스트리밍하고, 보안은 별개의 2단으로 세웠습니다 — 응답 전 단계에서 프롬프트 인젝션을 막는 관문(인코딩으로 우회하는 시도·역할을 가로채는 패턴을 잡아냅니다), 그리고 응답 후 단계에서 공직선거법이 금지하는 8개 카테고리의 표현을 거르는 필터(직접 투표 권유·당선 예측·여론조사 추정 등)입니다.
검색 노출을 위해 구조화 데이터(JSON-LD)·sitemap·robots로 검색엔진 최적화(SEO)를 붙였고, llms.txt route로 생성형 AI 검색(GEO) 대응을 코드 레벨에서 구현했습니다. 신생 도메인이 구글·네이버 검색 1페이지에 올랐고, 네이버 사이트링크(리치 결과)를 확보했으며, 검색은 최대 식별 유입 채널이 됐습니다 — 선거 주간 식별 유입의 88%. AI 쪽은 2026년 7월 실측에서 구글 AI 개요·Claude·Gemini·Perplexity 4개 엔진 전부가 현직 신분을 정확히 응답했고, 그중 3개가 공식 사이트를 답변 근거로 직접 인용했습니다.
데이터를 바탕으로 유세 동선을 잡기 위해 시간대별 유동인구 기반 입지 분석 도구를 만들었습니다. 생활인구·지하철·버스 등 공공데이터 6종을 PostGIS 100m 격자 위에서 시간대별 인구·교통 거점에 가중치를 줘 스코어링하고, Kakao Maps 위에 입지 점수로 그렸습니다. 처음엔 Supabase와 Vercel로 돌렸는데, 용량·쿼리 메모리·타임아웃이 한계로 올라오자 GCP로 통째로 옮겼습니다 — NestJS 헥사고날 서버 + Cloud SQL(서울)로 리팩터링하고, pg_dump→pg_restore 무손실 컷오버 후 17개 테이블을 전수 대사해 스코어까지 bit-perfect로 검증했습니다.
우편 발송 쪽은 Python 파이프라인으로 처리했습니다. 홍보물 발송 대상 2,000세대 주소를 원자료 7,798세대에서 산출했고, 부동산원·건축HUB·도로명주소·Kakao Local 4채널로 교차검증한 뒤 우체국 집단발송 양식을 자동으로 생성했습니다.
법정 회계 서식 작성도 자동화했습니다. 한글(HWPX) 형식을 zip+XML로 직접 열어 표의 행을 복제·채우는 파이프라인을 만들었고, 정치자금 수입·지출부는 은행 거래내역과 1:1로 대사해 검증했습니다. 선거가 끝난 뒤 선거비용 보전 청구 회계까지 같은 방식으로 처리했습니다.
취임 후 선거 사이트를 최신 소식·의정활동·약속과 의정·의원 소개를 제공하는 공식 의정활동 사이트로 전환했습니다. 민원 수집 시스템도 운영합니다. Gmail 수집기와 문자·RCS·MMS를 수집하는 Android 앱이 민원을 인증된 관리자 백오피스로 자동 적재하며, 새 인프라 없이 같은 배포 위에 얹었습니다.
2차 개발에서는 이 공개 사이트에 기사 발행 시스템을 연결했습니다. 관악구의회 공식 원문을 수집해 판본을 고정하고, Claude로 기사 초안을 만든 뒤 별도 Claude 사실검증과 근거·미디어·접근성 검사를 거쳐 자동 게시하는 파이프라인을 구축했습니다. CMS에서는 기사·구조화 본문·근거·이미지·영상·대표 배치와 게시 판본의 승인·보관·복원·롤백을 관리합니다. 웹·검색·챗봇이 같은 승인 게시 판본을 사용하도록 연결해 코드 재배포 없이 콘텐츠를 갱신할 수 있게 했습니다.
다른 개발자의 피어리뷰에서는 홈이 CMS의 원본 JPEG를 그대로 전송하는 병목이 드러났습니다. 이를 재현한 뒤 원본을 보존하고 공개 권리·접근 권한을 확인하면서 반응형 WebP 파생본을 제공하도록 개선했습니다. 2026년 9월 19일 Chrome 실측에서 홈 이미지 전송량은 1440px 화면에서 40.74MB→0.390MB, 390px 화면에서 40.66MB→0.198MB로 줄었습니다. 각각 99.0%, 99.5% 감소한 수치입니다.
2026년 9월 28일에는 의정활동 사이트의 SEO·생성형 AI 검색 최적화(GEO)·답변 엔진 최적화(AEO)를 확장했습니다. 작성·발행 주체, 원자료 출처, 최초 게시일·수정일·활동일, 대표 이미지가 페이지와 구조화 데이터에서 일치하도록 정리했습니다. 6개 질문을 3회씩 반복해 Google 검색 18건과 ChatGPT·Gemini·Perplexity·Claude 답변 72건을 관측하며, 실제 답변의 신분 혼동·직책 누락·출처 대체를 살폈습니다.