고등학생인 제 동생은 이번에 선거권이 생겨 첫 투표를 하게 되었습니다.
설레어하며 누굴 뽑아야 할지 고민하더라구요.
그래서 동생을 위해 (만드는 김에 모두가 보면 좋은) 공약 매칭 서비스를 만들었습니다.

서비스 소개

‘나와 가장 가까운 후보는?’은 틴더 앱처럼
공약을 하나씩 넘기며 동의/비동의 혹은 선호도를 입력하면
가장 가치관이 비슷한 후보를 매칭해주는 웹 서비스입니다.

두 가지 설문 방식으로 준비해봤어요.

• 간단한 설문: 동의 / 비동의 중 선택하는 직관적인 방식
• 정밀한 설문: 중요도와 5단계 선호도를 함께 입력해 보다 정확한 결과를 도출하는 방식

처음에는 한가지 방식으로 디벨롭하려고 친구들에게 A/B 테스트를 하다보니 직관적이고 편한건 전자인데, 신뢰도는 후자가 더 높아 선호도가 비슷하더라구요.
그래서 두 가지 설문 모드를 모두 제공하게 되었어요.

공약 데이터는 이렇게 정리했어요

후보자들의 정책을 요약하고, 카테고리별로 비교 및 질문을 만들기 위한 구조화 작업을 했습니다.

먼저 중앙선거관리위원회 정책·공약마당에서 후보자별 공약 데이터를 가지고 왔고, AI에게 각 후보가 말하는 공약이 어떤 카테고리인지 카테고리 정리를 먼저 시켰습니다.
(같은 카테고리인데 후보별로 카테고리를 다르게 설정했기 때문에..)

통일된 카테고리로 만든 후 동일 주제에 대해 후보별 공통점과 차이점을 분석했습니다. 여기서 특별히 입장이 갈리는 항목에 대해 질문을 만들어내는 방식으로 데이터를 정제했습니다.

기획 & 디자인 포인트

너무 진지하거나 무거운 분위기보다는 모든 연령이 쉽게 접근하게 하기 위해 쉬운(?) UI/UX가 되도록 기획했어요.
글자도 깨지지 않는 선에서 크게 만들었어요.
처음 의도는 틴더앱처럼 스와이프해서 선택을 하는 것이었는데, 정밀한 방식은 화면에 버튼이 많다보니 스와이프가 어려워, 간단한 방식에만 스와이프가 적용되었어요.

TMI지만 제가 알록달록한 걸 좋아하는 사람이라, 곳곳에 원색을 포인트로 사용했습니다.

후보자들의 증명사진을 바탕으로 3d캐릭터를 ChatGPT에게 생성해달라고 하여 썸네일과 메인화면에 나란히 넣어주었습니다.

사용 기술

• React + TypeScript
• Vite로 번들링
• Firebase로 Google Analytics 연동
• Vercel로 배포

마무리

이번 프로젝트는 특히 대부분의 코딩은 커서가 하고 저는 디테일한 부분을 입맛대로 수정하는 방식으로 진행했는데요.
'나는 이제 AI 없이 코딩 못하는 사람인가' 라는 생각을 하면서도 그래도 이런 번뜩이는 아이디어는 인간에게서만 나올 수 있다며 스스로를 위로했답니다.
또 새롭고 재미있는 프로젝트를 진행하면 좋겠네요.

편하게 사용해보시고, 궁금한 점이나 개선 의견이 있다면 언제든지 알려주세요!
👉 나와 가장 가까운 후보는?

---

* 5/27 업데이트 사항

1. 질문 일부를 업데이트했습니다.
2. 설문 화면에 진행도를 추가했습니다.
   
3. 결과 화면에 1위 호부 사진 추가, 후보별 핵심 태그를 추가 했습니다. (사진은 예시 화면입니다.)