Story
청년ON을 왜, 어떻게 만들었는지
만들게 된 동기부터 사용한 AI 도구·기술스택, 저작권 출처, 업데이트 과정까지
만들게 된 동기
과학기술정보통신부에서 인턴으로 근무하며 과학기술 분야에 관심을 갖게 되었습니다. 이후 과학기술정보통신부 2030 청년자문단 활동을 통해 부처의 정책을 좀 더 깊이 있게 들여다보고, 실무자분들과 소통할 수 있는 기회를 가졌습니다.
이 과정에서, 실제 정책과 청년들이 실제로 체감하는 정책 사이에 거리가 있다는 것을 느꼈고, 청년들이 자신에게 필요한 정책을 스스로 확인하고 나아가 자유롭게 의견을 제안할 수 있는 창구가 마련되면 좋겠다는 생각을 하게 되었습니다.
이번 대회에서는 이러한 문제의식을 바탕으로, 청년들이 자신에게 맞는 정책을 안내받고 수요자의 입장에서 필요한 정책들을 제안할 수 있는 AI 기반 서비스를 개발하고자 합니다.
교육에서 배운 AI 도구 활용
개발 도구로서의 AI
교육 과정에서 배운 AI 페어 프로그래밍 방식을 실제 서비스 개발에 그대로 적용했습니다. 원하는 기능이나 고쳐야 할 부분을 대화로 요청하면 AI 코딩 도구(Claude Code)가 코드를 작성하고, 직접 화면으로 확인한 뒤 문제가 없으면 반영·배포하는 흐름을 반복하며 청년ON의 거의 모든 화면을 만들었습니다.
서비스에 내장된 AI
개발을 도와준 AI와는 별개로, 서비스 안에서 실제로 동작하는 AI 기능도 있습니다. AI 챗봇은 자연어 질문을 이해해 2,600여 건의 정책 중 상황에 맞는 정책을 골라 추천하고, 정책제안 AI 검토는 제안 등록 전 부적절한 표현을 자동으로 걸러주며, 정책 비교 AI 분석은 선택한 정책들의 실질적인 차이를 요약해줍니다.
기술스택별 활용 방식
React + Vite
프론트엔드 프레임워크·빌드 도구화면 전체(챗봇·검색·정책제안·커뮤니티·마이페이지·관리자)를 컴포넌트 단위로 구성했어요.
GitHub Pages
프론트엔드 배포main 브랜치에 push하면 GitHub Actions가 자동으로 빌드해 정적 사이트로 배포해요.
Supabase
회원 인증 + 데이터베이스 + 스토리지이메일·카카오 로그인, 커뮤니티 게시글·댓글, 정책제안·제안 댓글, 알림, 첨부파일 업로드를 모두 처리해요.
Vercel
AI 챗봇 백엔드 서버챗봇 답변 생성 API를 별도 서버로 분리해 배포했어요. API 키는 서버에만 있어서 프론트에 노출되지 않아요.
Upstage Solar API
AI 챗봇·정책제안 검토·정책 비교 (모델: solar-pro3)자연어 질문을 이해해 상황에 맞는 청년정책을 추천하고, 정책제안 등록 전 부적절한 표현을 검사하고, 선택한 정책들의 차이점을 요약해줘요.
온통청년 API
청년정책·청년센터 데이터정부(청년정책 통합정보시스템)가 제공하는 전국 청년지원정책과 청년센터 정보를 가져와 사용해요.
청년ON의 저작권 활용 (출처와 라이선스)
온통청년 청년정책 데이터
공공데이터출처 · 청년정책 통합정보시스템 (youthcenter.go.kr) · 대한민국 정부 공공 API
정책 제목·대상·기간·신청방법 등 원문 데이터를 그대로 가져와 서비스에 노출해요. 실제 신청 전에는 반드시 원문 공고를 확인해달라는 안내를 항상 함께 보여줘요.
Pretendard Variable
SIL Open Font License 1.1출처 · orioncactus/Pretendard (길형진 제작)
화면 전체 본문·제목에 사용한 한글 웹폰트예요. 오픈소스로 배포되어 상업적 사용도 자유로워요.
Material Symbols (Rounded / Outlined)
Apache License 2.0출처 · Google Fonts
모든 아이콘은 이모지 대신 구글의 Material Symbols만 사용해요. 실제 쓰는 아이콘만 서브셋으로 추려 폰트 용량을 최소화했어요.
Upstage Solar API
이용약관에 따름출처 · 업스테이지
AI 모델 자체를 배포하지 않고, 업스테이지의 API를 호출해 응답만 받아와요.
업데이트 과정
정해진 기획을 한 번에 완성하기보다, 실제로 사용해보며 발견한 불편함이나 필요한 기능을 그때그때 요청하고 AI 코딩 도구가 반영한 결과를 바로 확인하는 방식으로 계속 다듬어왔습니다. main 브랜치에 반영되면 GitHub Actions가 자동으로 빌드·배포해, 요청한 내용이 실제 서비스에 곧바로 반영됩니다.
2026.06.11
정책 목록에 부처·지역 필터 추가
2026.06.12
정책 상세 내용 정제(공문서 기호 자동 제거), 공유하기 버튼, 마감 제외 필터 저장
2026.06.13
Supabase 연동 — 회원가입·로그인·커뮤니티·댓글 구현, 공감 토글
2026.06.14
카카오 소셜 로그인, 관리자 대시보드 도입
이후
정책 비교·정책제안·마이페이지·알림 등 기능을 계속 추가하며 지금도 매주 업데이트하고 있어요