#[LG CNS AM Inspire Camp 6기] Mini Project 1 | 지원UP

About this offer

작성일: 2026.09.30 (수) | 과목: Mini Project 1 지원UP 신청 전에 AI가 한 번 더 확인하는, 1인 소상공인을 위한 정부지원사업 AI 신청 도우미 1. 프로젝트 기본 정보 : Overview 항목 내용 프로젝트명 지원UP 한 줄 정의 내 사업정보로 지원사업 자격요건을 AI가 미리 검수해 주는 신청 전 도우미 진행 기간 2026.09.21 ~ 2026.09.30 (총 1주) 단계 기획 → 설계(화면 흐름·ERD·API) → 구현 1(CRUD) → 구현 2(AI·예외 처리·UI 보완) → 검증·발표 팀 구성 총 6명 — Frontend 2명, Backend·DB 3명, AI 2명 (1명 FE·AI 겸임) 역할 FE -> A 파트 + 발표자료 디자인 GitHub LGCNS-MiniProject-Group6 역할 & 기여도 : My Role & Contribution 프론트엔드 A 파트 계정 영역 담당 : 가입부터 공고 찾기까지의 화면 : 로그인, 회원가입, 휴대폰 인증, 인증 상태·토큰, 마이페이지, 프로필·사업정보 AUTH-01~07, 로고제작, footer제작, 관심공고 하트 토글 UI 공통 컴포넌트 제작 : Header, ProgramCard, SearchBar, Filter, SignupStepCard, ProgressBar API 연동 : /auth/signup , /auth/login , /users/me/business-info , /programs 발표 PPT 디자인 : Figma(Product Review 템플릿 기반)로 제작 사용 툴 & 기술 스택 : Tools & Tech 구분 사용 기술 Design Figma Frontend React, JavaScript, axios Backend·DB Spring Boot, Java, MariaDB, Redis, JWT AI Spring AI, OpenAI API Data 기업마당 Open API (공고 수집) Collab GitHub Projects, Notion, Discord, Figma 2. 문제 정의 및 배경 : Problem Statement & Background 지원사업은 많지만, 내가 신청 가능한지 판단하기는 어렵다. 지원UP은 '찾기'가 아니라 '신청 직전의 판단'에 집중했다. 시장/사용자 배경 : Context 기존 서비스는 지원사업을 검색·추천하는 데 집중한다. 하지만 1인 소상공인은 복잡한 신청 조건과 자격 요건 때문에 자신이 신청 가능한 사업인지 스스로 판단하기 어렵고, 이 단계에서 시행착오가 생긴다. 핵심 문제점 : Pain Point 3가지 단계 문제 사용자가 겪는 불편 찾기 흩어진 공고 여러 사이트를 돌며 같은 공고를 중복 확인해야 함 판단하기 복잡한 조건 공고마다 자격요건이 달라 충족 여부를 직접 해석해야 하고, 적합/부적합 결과만으로는 믿기 어려움 준비하기 늦게 알아챈 서류 공고마다 다른 준비서류·주의사항을 마감 직전에야 발견함 타겟 사용자 : Target Audience 항목 내용 페르소나 박운영, 38세, 온라인 쇼핑몰 대표(3년차) 상황 매출은 있지만 지원사업은 첫 신청 한마디 "공고 찾느라 본업할 시간이 없어요." 핵심 니즈 시간 절약 + 의사결정 신뢰 — "빠르고 정확하게 결정할 수 있다" P/G Pain → Gain 여러 사이트 중복 확인 → 한 곳에서 매칭·검수·저장 공고마다 다른 서류·조건 → 신청 전 확인사항으로 정리 적합/부적합만으론 못 믿음 → 내 사업정보 기반 판단 근거 탐색할 시간 없음 → 맞춤 공고 우선 노출 프로젝트 목표 사용자가 사업정보를 입력하고 지원사업을 고르면 → AI가 신청 가능 여부·판단 근거·필수 확인사항 을 한 화면에 보여주는 전체 흐름을 시연 가능하게 만드는 것. → 실제 접수, 사업계획서 자동 작성, 100% 자동 판정은 범위에서 제외. 3. UX 설계 및 해결 과정 : UX Process & Solution 사업정보 입력 → 탐색 → AI 검수 → 근거·서류 → 챗봇·저장 5단계로 끝나는 신청 전 검수 흐름을 설계 정보 구조 1depth 주요 화면 / 기능 계정 로그인, 회원가입(기본정보 → 세부 사업정보, 건너뛰기 가능), 휴대폰 인증 홈(메인) 맞춤 추천 카드(AI 검수결과 조회·상세보기), 키워드 검색, 필터, 카테고리 지원사업 공고 목록(지역·접수상태·마감임박순 필터), 공고 상세 AI 검수 조건별 충족 / 추가 확인 필요 / 미충족 판정 + 근거·준비서류·마감일 AI 챗봇 공고문·검수 결과 기반 질의응답 마이페이지 검수 기록, 관심공고·지원공고 모아보기, 프로필·사업정보 수정, 탈퇴 유저 플로우 : User Flow [로그인·회원가입] → [사업정보 등록] → [홈·맞춤 추천] → [공고 목록·상세] │ (건너뛰기 가능) ▲ │ └──────────────────────────────────┘ ▼ [마이페이지 저장] ← [AI 챗봇 질의응답] ← [근거·준비서류] ← [AI 신청 전 검수] 가입 시 사업정보를 건너뛸 수 있지만, 입력해 두면 추천·검수에 자동 반영되어 공고 상세에서 바로 AI 검수로 넘어간다. 핵심 UX 솔루션 : Key UX Features 1. AI 신청 전 검수 — '판단하기' 문제 해결 사업정보와 공고 자격요건을 AI가 조건별로 비교해 MATCHED · NEED_CHECK · UNMATCHED 3단계로 표시 판단 근거가 된 공고문 페이지·문장을 함께 보여줘, 결과만 던지는 대신 사용자가 근거를 직접 확인할 수 있게 함 2. 사업정보 1회 입력 + 맞춤 공고 목록 — '찾기' 문제 해결 지역·업종·개업일·사업자 유형·상시근로자 수·연 매출을 한 번 저장하면 추천·검수에 자동 반영 기업마당 공고를 한 곳에 모아 카드형 목록으로 보여주고, 지원가능성·마감일(D-day) 뱃지로 훑어보기 쉽게 구성 3. 근거·준비서류 정리 + AI 챗봇 — '준비하기' 문제 해결 조건별 준비서류·주의사항·신청 마감일을 한 화면에 정리 판정 사유 등 궁금한 점은 공고 기반 챗봇으로 바로 질문하고, 결과는 마이페이지에 저장 초기 와이어프레임 → 최종 UI 변천사 : Iteration _※ Develop 필요 _ 구분 Before After 계기 회원가입 (작성 필요) 기본정보 → 세부 사업정보 단계형 (ProgressBar, 건너뛰기 가능) (작성 필요) 공고 카드 (작성 필요) 카드형 목록 + 지원가능성/마감일 뱃지 (작성 필요) 4. UI 디자인 & 디자인 시스템 : UI & Design System 신뢰감을 주는 네이비·퍼플 계열에 따뜻한 크림 배경을 더해, '행정 서비스지만 어렵지 않은' 인상을 목표로 했다. 비주얼 컨셉 : Visual Concept 역할 색상 사용처 Primary 네이비 #3B3F88 타이틀, 로고, 주요 버튼 Secondary 퍼플 #573B88 로고 그라데이션, 강조 Tint 라벤더 #9AA0D5 배경 그라데이션, 보조 영역 Background 크림 #F4F0E9 카드·섹션 배경 상태 컬러: 검수 결과 3단계(충족 / 추가 확인 필요 / 미충족)를 색으로 구분 타이포그래피: (작성 필요) AI 신청 적합성 검수 결과 Page 지원사업 찾기 page 챗봇 page 디자인 시스템 : Design System Asset 컴포넌트 쓰인 화면 주요 상태/Variant Header 전체 로그인 전 / 후 (마이페이지·로그아웃 버튼) ProgramCard 홈, 공고 목록 지원가능성 뱃지, D-day 뱃지 SearchBar 홈, 공고 목록 키워드 입력 Filter 공고 목록 지역, 접수상태, 마감임박순, 카테고리 SignupStepCard 회원가입 기본정보 / 세부 사업정보 단계 ProgressBar 회원가입 단계 진행률 예외 처리 화면 : Edge Cases _※ Develop 필요 _ 상황 설계 내용 사업정보 미입력 회원가입 시 세부 사업정보 '건너뛰기' 허용 검색 결과 없음 (Empty State) (작성 필요) 데이터 로딩 중 (Loading/Skeleton) (작성 필요) 에러 팝업 (작성 필요) 5. 개발 협업 & 트러블슈팅 : Developer Collaboration 화면에 보이는 이름과 API 데이터 이름을 맞추고, CORS 문제를 백엔드와 함께 풀며 프론트 A 파트를 3일 안에 연결했다. 컴포넌트·데이터 매핑 : Figma to Code Mapping ProgramCard에 들어갈 필드를 백엔드 응답 필드명과 1:1로 맞춰 확정. 화면 요소 초기 이름 확정 필드명 처리 공고명 title title 유지 카테고리 category category 유지 지원 대상 target target 유지 주관 기관 agency organization 이름 변경 요약 description summary 이름 변경 D-day / 접수기간 dday , period applicationStartAt , applicationEndAt 프론트에서 계산해 표시 기술적 제약과의 타협 : Troubleshooting 케이스 문제 원인 해결 CORS (FE·BE) 회원가입·로그인 API 호출이 브라우저에서 차단됨 프론트와 백엔드 서버 주소가 달라 교차 출처 요청이 막힘 백엔드에 허용 출처 설정 추가, 프론트 axios baseURL을 백엔드 주소로 통일 HWP 추출 (BE·AI) 비정형 HWP 공고문에서 자격요건 추출 실패 HWP 포맷용 파싱 모듈 부재 HWP 파싱 오픈소스 도입, 텍스트 추출 로직 보완 AI 환각 (AI·FE) 공고 근거를 벗어난 모호·추정 답변 발생 초기 LLM의 문맥 제어·응답 범위 제한 부족 공고 기반 프롬프트 구조화, 응답 범위·생성 규칙 제한 직접 다룬 건 CORS 케이스, 프론트 A 파트(화면 4개, 컴포넌트 6개, API 4개)를 3일 안에 끝내야 했다. 팀원의 프로토타입 브랜치( feature/first-prototype )를 기준으로 Header·ProgramCard·Filter·목록 화면을 합쳐 일정을 맞췄다. 핸드오프 : Hand-off 문서화 GitHub FrontEnd 레포에서 기능별 브랜치( feature/home , program , review , chat , mypage , auth 등)로 작업을 나눔 프론트 A(가입 공고 찾기) / B(공고 상세 AI 검수·챗봇·마이페이지)로 화면 경계를 정해 2명이 충돌 없이 작업 6. 성과 및 회고 : Outcome & Retrospective 사업정보 입력부터 AI 검수·챗봇·저장까지 이어지는 시연 가능한 흐름을 완성하고, 일주일 뒤인 9.30 최종 발표 프로젝트 결과 : Result 구현 범위 : 회원가입·로그인(JWT), 사업정보 등록, 지원사업 목록·검색·필터, 맞춤 추천, AI 신청 전 검수(3단계 판정 + 근거), 공고 기반 AI 챗봇, 마이페이지 저장 API 6종 : 회원가입, 사업정보 등록, 지원사업 목록 조회, AI 신청 전 검수, AI 챗봇, 맞춤공고 조회 기대 효과 : 탐색 시간 단축, 리스크 사전 확인, 준비 부담 감소 — 행정 경험이 적은 1인 소상공인도 혼자 지원사업에 도전할 수 있게 함 수익 모델 구상 : Freemium 구독, 제휴 세무·행정, B2G 지자체·기관, 광고 배너 수익 모델 1 수익 모델 2 배운 점 : Key Takeaways 화면 요소 이름과 API 필드명을 먼저 맞춰 두면 연동 단계의 수정이 줄어든다 ( agency → organization , D-day는 날짜 필드로 계산) CORS처럼 프론트 혼자 해결할 수 없는 문제는 원인을 정리해 백엔드와 나눠 푸는 것이 빠르다 프론트엔드 입문 단계에서 3일 안에 화면 4개를 만들기 위해, 범위를 화면 단위로 나누고 기존 프로토타입을 재사용했다 아쉬운 점 및 추후 개선 계획 : Future Plan 개선 항목 현재 향후 사업정보 항목 확대 입력 항목이 제한적이라 정밀 매칭에 한계 사업 규모·업력·매출·관심 분야 등으로 확장해 매칭 정확도 향상 맞춤 공고 알림 사용자가 직접 목록을 확인해야 해 신규 공고를 놓칠 수 있음 신규 공고를 사업정보와 자동 비교해 적합도 높은 공고 알림 프롬프트 고도화 일부 질문에서 답변의 일관성·구체성 부족 공고 유형·질문 의도별 프롬프트 세분화, 출력 형식 구조화