Toris Blog
홈
블로그
할일
소개
문의

[개인 프로젝트 리뷰] ym_guide - 청년들을 위한 혜택 큐레이션 플랫폼

25년 12월 22일 10:30Projects
#Next.js,#TypeScript,#Supabase,#개인 프로젝트,#정부 API

ym_guide 프로젝트 리뷰 - 청년들을 위한 혜택 큐레이션 플랫폼

프로젝트 개요

프로젝트명: ym_guide
기간: 2025.12
기술 스택: Next.js, TypeScript, Tailwind CSS, Supabase, PostgreSQL
목적: 청년들을 위한 금융, 정책, 복지 혜택 큐레이션 플랫폼

ym_guide는 제가 "내가 필요로 하는 서비스를 만들자"는 생각으로 시작한 프로젝트입니다. 청년으로서 정책 정보를 찾는 것이 어렵다고 느꼈고, 이를 해결하고 싶었습니다.

프로젝트를 시작한 이유

대학을 졸업하고 취업 준비를 하면서 정책 혜택을 찾는 것이 정말 어려웠습니다. "내가 받을 수 있는 혜택이 뭐가 있지?"라는 생각을 하면서도, 어디서 정보를 찾아야 할지 모르겠었습니다.

그래서 "간단한 질문만으로 내가 받을 수 있는 혜택을 추천해주는 서비스"를 만들고 싶었습니다.

주요 기능 구현

1. 청년정책 OPEN API 연동

정부 OPEN API를 처음 사용해봤습니다.

처음 접했을 때:

  • "OPEN API가 뭐지?"라는 생각부터 시작했습니다.
  • API 문서를 읽는 것이 처음에는 어려웠습니다.
  • 인증 키를 발급받는 과정도 복잡했습니다.

어려웠던 점:

  • API 응답 데이터 구조가 복잡했습니다.
  • 필요한 데이터만 추출하는 것이 까다로웠습니다.
  • API 호출 제한이 있어서 최적화가 필요했습니다.

해결 방법:

typescript
// API 호출 예시
const fetchPolicyData = async (params: PolicyParams) => {
  try {
    const response = await fetch(
      `https://www.youthcenter.go.kr/opi/youthPlcyList.do?openApiVlak=${API_KEY}&pageIndex=1&display=10`,
      {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      }
    );

    const data = await response.json();
    // 데이터 가공
    return processPolicyData(data);
  } catch (error) {
    console.error('API 호출 실패:', error);
    return [];
  }
};

배운 점:

  • API 문서를 꼼꼼히 읽는 것이 중요합니다.
  • 에러 처리를 철저히 해야 합니다.
  • API 호출을 최적화하여 불필요한 요청을 줄여야 합니다.

2. 맞춤형 혜택 추천 시스템

간단한 질문 기반으로 맞춤형 혜택을 추천하는 기능을 구현했습니다.

구현 과정:

  1. 사용자에게 간단한 질문 (나이, 거주지, 소득 등)
  2. 답변을 기반으로 필터링 조건 생성
  3. 정책 데이터에서 조건에 맞는 정책 추출
  4. 우선순위에 따라 정렬하여 표시

어려웠던 점:

  • 어떤 질문을 해야 할지 고민이 많았습니다.
  • 추천 알고리즘을 어떻게 구현해야 할지 어려웠습니다.
  • 사용자가 원하는 결과를 정확히 추천하는 것이 까다로웠습니다.

해결 방법:

  • 사용자 테스트를 통해 필요한 질문을 파악했습니다.
  • 점수 기반 추천 시스템을 구현했습니다.
  • 사용자 피드백을 수집하여 개선했습니다.

3. Supabase를 활용한 백엔드

Supabase를 처음 사용해봤습니다.

처음 접했을 때:

  • "Supabase가 뭐지?"라는 생각부터 시작했습니다.
  • PostgreSQL을 직접 사용해본 적이 없어서 어려웠습니다.
  • RLS(Row Level Security) 개념이 처음에는 이해하기 어려웠습니다.

배운 점:

  • Supabase는 백엔드를 빠르게 구축할 수 있는 좋은 도구입니다.
  • 실시간 기능이 정말 편리합니다.
  • 인증 시스템이 내장되어 있어서 편리합니다.

구현:

typescript
// Supabase 클라이언트 설정
import { createClient } from '@supabase/supabase-js';

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// 북마크 저장
const saveBookmark = async (policyId: string, userId: string) => {
  const { data, error } = await supabase
    .from('bookmarks')
    .insert({ policy_id: policyId, user_id: userId });

  if (error) {
    console.error('북마크 저장 실패:', error);
  }

  return data;
};

4. 북마크 및 마이페이지

사용자가 관심 있는 정책을 북마크하고 관리할 수 있는 기능을 구현했습니다.

구현 과정:

  • Supabase에 북마크 테이블 생성
  • 사용자 인증 후 북마크 저장
  • 마이페이지에서 북마크 목록 표시

배운 점:

  • 사용자 인증이 중요합니다.
  • 데이터베이스 스키마를 잘 설계해야 합니다.
  • 사용자 경험을 고려한 UI/UX가 중요합니다.

어려웠던 점

1. 데이터 가공

정부 API에서 받은 데이터를 사용하기 좋은 형태로 가공하는 것이 어려웠습니다.

문제점:

  • API 응답 데이터 구조가 복잡했습니다.
  • 필요한 정보만 추출하는 것이 까다로웠습니다.
  • 데이터 형식이 일관되지 않았습니다.

해결 방법:

  • 데이터 변환 함수를 만들어서 일관된 형태로 변환했습니다.
  • 타입을 명확히 정의하여 타입 안정성을 확보했습니다.
  • 에러 처리를 철저히 하여 예외 상황을 대비했습니다.

2. 추천 알고리즘

맞춤형 추천을 구현하는 것이 생각보다 어려웠습니다.

처음에는:

  • 단순히 필터링만 했습니다.
  • 사용자가 원하는 결과가 나오지 않았습니다.

개선:

  • 점수 기반 추천 시스템을 구현했습니다.
  • 사용자 특성에 따라 가중치를 다르게 적용했습니다.
  • 피드백을 수집하여 알고리즘을 개선했습니다.

3. UX/UI 설계

청년들을 위한 서비스이기 때문에 UX/UI가 중요했습니다.

고려한 점:

  • 간단하고 직관적인 인터페이스
  • 모바일 우선 디자인
  • 빠른 로딩 속도
  • 명확한 정보 전달

개선하고 싶은 점

1. 추천 알고리즘 개선

현재 추천 알고리즘이 아직 부족합니다. 더 정확한 추천을 위해 머신러닝을 활용하고 싶습니다.

2. 실시간 업데이트

정책 정보가 실시간으로 업데이트되도록 하고 싶습니다. 현재는 수동으로 업데이트해야 합니다.

3. 사용자 피드백 시스템

사용자 피드백을 수집하여 서비스를 개선하고 싶습니다.

총평

ym_guide는 제가 "내가 필요로 하는 서비스를 만들자"는 생각으로 시작한 프로젝트입니다. 정부 OPEN API를 활용하고, Supabase를 사용하여 백엔드를 구축하는 경험을 할 수 있었습니다.

특히 맞춤형 추천 시스템을 구현하면서 "사용자가 원하는 것을 정확히 추천하는 것"이 얼마나 어려운지 배울 수 있었습니다.

아직 부족한 점이 많지만, 실제로 사용할 수 있는 서비스를 만들 수 있어서 뿌듯합니다. 앞으로도 계속 개선하고 싶습니다.

링크