찾-다(Chat-da) : 중고등학생 맞춤형 진로 상담 AI 서비스 회고
프로젝트 기간 : 2025.03 ~ 2025.04
서비스 유형 : Web
역할 : UX/UI, 프론트엔드 개발
팀 구성 : 백엔드 1명 AI 1명 프론트엔드 1명 (총 3명)
참여 : 2025 제 7회 교육 공공데이터 분석활용대회
들어가며
2025년 제 7회 교육 공공데이터 분석활용대회에 참여하며,
중고등학생을 위한 AI 기반 진로 상담 서비스 '찾-다(Chat-da)'를 기획했습니다.
UX/UI와 프론트엔드 개발을 담당하며,
서비스 기획부터 웹 디자인, 사용자 흐름 설계, 핵심 화면 퍼블리싱까지 전반적인 과정을 맡았습니다.
비록 1차 심사를 통과하지 못해 실제 개발 단계로 이어지지는 못했지만,
서비스를 기획하는 내내 스스로에게 반복해서 던진 질문이 있었습니다.
“사용자는 이 서비스를 어떤 상황에서, 어떤 감정으로, 어떤 경로를 통해 이용하게 될까?”
짧은 기간 동안 UX/UI 기획과 프론트엔드 개발을 동시에 맡으면서,
기능을 만드는 것보다 사용자가 처할 수 있는 다양한 시나리오를 어떻게 구조화할 것인가에 훨씬 더 많은 시간을 썼습니다.
이 글에서는 그 고민의 과정과, 시나리오를 서비스로 구체화했던 흐름,
그리고 돌아보며 느낀 한계와 앞으로의 방향을 정리해보려 합니다.
1. 프로젝트 개요
찾-다(Chat-da)란?
찾다는 자연어 기반 상담과 성향 분석을 통해 진로 추천 및 리포트를 자동 생성하는 AI 진로 상담 서비스입니다.
학생에게는 개인화된 진로 탐색 경험을, 교사에게는 실질적인 진로 지도 자료를 제공하는 것을 목표로 기획되었습니다.
학생은 AI와의 자연스러운 대화를 통해 심리적 부담 없이 자신의 관심사와 성향을 탐색할 수 있고,
교사는 그 결과를 구조화된 리포트 형태로 확인해 상담의 깊이와 효율을 높일 수 있도록 설계했습니다.
2. 왜 이 서비스를 기획하게 되었나요?
찾다의 출발점은'AI 진로 상담 서비스를 만들자'는 아이디어가 아니었습니다.
저희 팀은 먼저, 학생과 교사가 실제 교육 현장에서 반복적으로 겪고 있는 구조적인 문제에 주목했습니다.
기술은 해결 수단일 뿐, 출발점은 현장의 맥락이어야 한다고 판단했기 때문입니다.
2-1) 학생 측면 : 상담 참여의 심리적 장벽
이미지 출처 : 공모전 제출용 기획서 (팀 제작)
학생들은 진로 상담의 필요성은 인식하고 있지만,
심리적 거리감과 프라이버시 노출에 대한 우려로 인해 대면 상담에 적극적으로 참여하지 못하고 있습니다.
실제로 학생의 52.1%가 '상담 과정에서 자신의 정보를 노출하는 것이 꺼려진다'고 응답했으며(한국교육개발원, 2022),
학교 내 진로 상담 이용률은 70% 미만, 진로전담교사와의 상담 경험 비율도 절반 이하에 머물렀습니다.(임은미, 2022)
여기에 더해, 교육부 2024 초·중등 진로교육 현황조사에서는 희망 직업을 가진 학생 비율이 해마다 감소하는 추세가 확인되었습니다.
그 원인으로 학생들이 꼽은 것은 '정보 부족'이 아니었습니다.
좋아하는 것을 모름', '강점과 약점을 모름', '직업 종류를 몰라서 분야를 좁히기 어려움' — 즉, 자기 이해의 부재가 핵심이었습니다.
결과적으로, 심리적 장벽 - 상담 회피 - 자기 탐색 부족이라는 악순환 구조가 반복되며,
학생들이 진로 탐색의 시작점조차 찾지 못하는 상황이 이어지고 있었습니다.
2-2) 교사 측면 : 정보와 시간의 제약
이미지 출처 : 공모전 제출용 기획서 (팀 제작)
진로전담교사 배치율은 90% 이상으로 높아졌지만, 대부분의 학교에 단 1명만 배치되는 구조로 인해
실질적인 1:1 맞춤 진로 지도에는 한계가 있었습니다. 진로교사 1인당 담당 학생 수는 평균 약 847명에 달했습니다.
42.3%의 교사가 '학생을 충분히 알지 못해 상담의 질이 낮아진다'고 응답했으며(한국교육개발원, 2022),
이는 개인의 역량 문제가 아니라 구조적인 정보·리소스 제약에서 비롯된 문제였습니다.
2-3) 퍼소나 설정 : 누구를 위한 서비스인가
데이터를 바탕으로 두 명의 구체적인 사용자를 설정했습니다.
숫자로만 보이던 문제가 퍼소나를 통해 실제 사용자의 이야기로 연결되자,
어떤 기능이 필요하고 어떤 흐름이 자연스러운지가 훨씬 명확하게 보이기 시작했습니다.
(1) 학생 퍼소나 - 진로에 혼란을 겪는 중학생
"내가 뭘 좋아하고 어떤 직업이 나랑 맞는지 모르겠어요."
자기 이해가 부족하여 희망 직업을 찾는 과정에서 어려움을 겪고 있으며,
디지털 환경에 익숙하고 혼자서 탐색하는 데 편안함을 느끼는 Z세대입니다.
진로의 고민은 있지만 어디서부터 시작해야 할지 막막한 상태였습니다.
(2) 교사 퍼소나 - 진로 상담을 담당하는 교사
"모든 학생을 깊이 도와주긴 어렵습니다."
1:1 상담에 제한이 있고, 개별 학생의 진로 방향 설계에 어려움을 겪고 있습니다.
학생별 상황을 빠르게 파악하고, 보완적 피드백 도구가 필요한 상황입니다.
2-4) 기획 질문 : 시나리오에서 출발하기
이렇게 두 퍼소나를 기준점으로 설정하여, 각각의 사용자가 겪는 문제를 정리했습니다.
이미지 출처 : 공모전 기획서 (해당 기획서 제작 담당)
첫째, 학생은 왜 진로 상담을 미루는가?
단순히 귀찮아서가 아니라, 심리적 장벽과 프라이버시 우려가 누적된 결과였습니다.
장벽을 낮추려면 대면이 아닌, 학생이 편안하게 느끼는 방식의 접점이 필요했습니다.
둘째, 교사는 어떤 정보가 부족해서 상담이 형식적으로 흐르게 되는가?
학생 개개인의 맥락을 이해할 수 있는 구조화된 정보의 부재가 문제였습니다.
상담 전에 학생을 이해할 수 있는 재료가 있다면, 상담의 질은 달라질 수 있었습니다.
셋째, 학생과 교사 사이에 실질적인 연결고리가 없다면, 상담은 어떻게 구조화되어야 하는가?
두 사용자의 문제는 따로 존재하는 것이 아니었습니다.
학생의 탐색 결과가 교사에게 전달되고, 교사의 피드백이 다시 학생에게 돌아오는 구조가 만들어질 때
비로소 두 문제가 동시에 해소될 수 있었습니다.
이 질문들을 통해 문제는 '상담의 양'이 아니라 상담 전후를 포함한 전체 사용자 여정에 있었습니다.
따라서 저희는 특정 기능을 추가하는 방식이 아닌,
사용자가 실제로 겪는 흐름과 행동 패턴을 기준으로 찾다 서비스를 설계했습니다.
2-5) 왜 '학생 - AI - 교사' 구조였는가?
단순히 상담 횟수를 늘리거나, 시스템을 추가하는 것으로는 해결될 수 없다고 판단했습니다.
학생에게는 부담 없이 스스로를 탐색할 수 있는 중간 지점이 필요했고,
교사에게는 학생을 빠르게 이해할 수 있는 구조화된 정보가 필요했습니다.
이 두 요구를 동시에 충족할 수 있는 매개로 AI를 선택했습니다.
선택에 확신을 준 건 데이터였습니다.
학생들이 진로 정보를 얻는 경로 1위는 커리어넷(59.5%)이었고(교육부, 2024 초·중등 진로교육 현황조사),
10대 청소년의 생성형 AI 이용률은 이미 68%에 달했습니다.
그중 '조언을 받거나 고민을 상담하기 위해 AI를 쓴다'고 응답한 비율도 34.4%였고,
학생들은 이미 AI를 상담 도구로 자연스럽게 받아들이고 있었습니다.
(한국언론진흥재단, 2025 10대 청소년 미디어 이용 조사).
정책과 연구도 같은 방향을 가리키고 있었습니다.
이미지 출처 : 공모전 기획서 (해당 기획서 제작 담당)
교육부는 AI 기반 진로 상담 도입을 진로교육 활성화 방안(2023)에 명시하고 있었고,
한국고용노동정보원 보고서는 AI 진로 상담이 접근성과 편견 최소화 측면에서 실질적인 효과가 있음을 확인해줬습니다.
서울대·코넬대 공동 연구에서는 LLM 기반 대화형 진로 설계가 청년의 진로 확신과 자기 이해에 긍정적인 영향을 미친다는 것도 검증되었습니다(Kim, J. et al., 2024).
근거가 충분하다고 판단했고, '학생-AI-교사'로 연결되는 구조를 확정했습니다.
이후 모든 설계는 이 흐름을 기준으로 전개되었습니다.
3. 기술 선택 과정
3-1) 사용 기술 스택 (프론트엔드 기준)
TypeScript, React, Tailind CSS
3-2) 왜 이 조합이었나
1인 프론트엔드 개발이었기 때문에, 속도와 안전성을 동시에 확보할 수 있는 선택이 필요했습니다.
세 가지 모두 가장 익숙하게 다루는 기술 조합이었고, 단기간에 기획 의도를 정확하게 구현하려면
새로운 기술을 실험하는 시간보다 잘 아는 도구로 빠르게 완성해내는 것이 맞다고 판단했습니다.
서비스 구조 측면에서도 이 선택이 적합했습니다.
주 기능인 AI 채팅은 대화 중에 서버로 저장되지 않고, 사용자가 '완료'를 누른 시점에
서버로 요청이 전송되어 리포트를 받아오는 구조였습니다.
실시간 데이터 스트리밍보다는 클라이언트 요청 - 서버 응답 중심의 흐름이었기 때문에
클라이언트 사이드(CSR Service) 중심의 구현으로도 충분했습니다.
3-3) 퍼블리싱 단계에서 멈춘 이유
찾다 프로젝트는 대회 심사를 위한 서비스 평가가 첫번째 목적이었습니다.
이 대회는 1차 심사를 통과한 팀에 한해 본격적인 개발 단계로 진입하는 구조였습니다.
실제 사용자를 수용하여 운영하려면 서버 비용 등 실질적인 비용이 발생하기 때문에,
심사 단계에서는 기획서에 링크를 첨부해 심사위원이 직접 테스트할 수 있는 수준까지만 구현하는 것이 현실적인 선택이었습니다.
당선 이후에는 서버 구축과 함께 프론트엔드 개발도 본격적으로 확장할 계획이었습니다.
구체적으로는 현재 퍼블리싱 수준에서 다루지 못한 실제 데이터 연동, 상담 상태에 따른 UI 동기화 로직 구체화,
그리고 학생·교사 외에 서비스 전반을 관리할 수 있는 관리자 기능까지 포함할 생각이었습니다.
4. 기술적 핵심 과제 : 시나리오를 화면으로 구조화하기
퍼블리싱 단계에서 기술적으로 도전하는 부분은 없었습니다.
오히려 이 프로젝트에서 가장 많이 고민을 한 부분은 UX/UI 설계,
사용자 시나리오가 실제 화면 구조로 어떻게 자연스럽고 정확하게 반영될 수 있는가였습니다.
4-1) 학생 홈 화면 : 상담 상태를 어떻게 전달할 것인가
가장 먼저 고민한 것은, 학생이 찾다 서비스에 접속했을 때
지금 자신이 어떤 상태에 있는지를 즉시 파악하고 다음 행동으로 이어질 수 있는가였습니다.
진로 상담은 일회성 행동이 아니라 '신청-진행-결과 확인-교사 피드백'이라는 연속된 흐름 전체입니다.
그 흐름 중 어느 지점에 있는지 모른다면, 사용자는 화면을 보고도 무엇을 해야 할지 몰라 이탈할 수 있습니다.
특히 중학생이라는 퍼소나를 고려하면, 복잡한 판단을 요구하지 않고 다음 행동을 자연스럽게 유도하는 것이 중요했습니다.
이를 해결하기 위해 홈 화면을 상담 진행 상황에 따라 4단계로 분기하여 설계했습니다.
- 상담 신청 전 : 상담 시작을 유도하는 CTA 중심의 단순한 화면
- 상담 진행 중 : 현재 상담 흐름을 안내하고 이어서 진행할 수 있도록 구성
- 상담 완료 후 (교사 피드백 전) : 완료 상태를 안내하고, 교사 피드백을 기다리는 중임을 전달
- 최종 리포트 도착 : 피드백이 반영된 최종 리포트 열람 기능 제공
각 단계별로 다른 버튼과 안내 메시지를 공통 컴포넌트로 분리하여 props로 상태값을 전달하는 방식으로 구현했습니다.
// src/components/career/studentNotice.tsx
interface StudentNoticeProps {
status: "empty" | "aiRegistered" | "analyzing" | "warning" | "complete";
className?: string;
}
function StudentNotice({ status, className = "" }: StudentNoticeProps) {
const config = {
empty: {
text: "등록된 데이터가 없습니다. 담당 교사와 상담 관련 문의하세요.",
color: "bg-background-disabled",
font: "font-bold text-lg text-disabled",
icon: empty,
},
aiRegistered: {
text: "AI 상담이 등록되었습니다! 상담 카드를 통해 지금 바로 진행해보세요!",
color: "bg-background-information",
font: "font-bold text-lg text-information",
icon: aiRegisterd,
},
analyzing: {
text: "지금 담당 교사와 함께 결과 리포트를 분석중입니다!",
color: "bg-background-yellow",
font: "font-bold text-lg text-yellow",
icon: analyzing,
},
warning: {
text: "대화가 중단되면 리포트가 생성되지 않으며, 상담 내용은 저장되지 않습니다.",
color: "bg-background-danger",
font: "font-bold text-lg text-danger",
icon: warning,
},
complete: {
text: "리포트 생성 준비 완료! 상담을 마치려면 끝내기 버튼을 눌러주세요.",
color: "bg-background-success",
font: "font-bold text-lg text-success",
icon: complete,
},
};
const { text, color, font, icon } = config[status];
return (
<div className={`flex gap-5 px-10 py-4 rounded-xl ${color}`}>
<img src={icon} alt="status icon" width="24px" height="24px" />
<span className={font}>{text}</span>
</div>
);
}
export default StudentNotice;4-2) 교사 홈 화면 : 다수의 학생을 한눈에 파악하기
교사는 여러 학생의 상태를 동시에 확인하고 필요한 조치를 빠르게 판단해야 합니다.
퍼소나를 설정하면서 교사가 가장 필요한 것이 '빠른 현황 파악'임을 명확히 했기 때문에,
홈 화명네서 불필요한 탐색 없이 바로 행동으로 이어질 수 있어야 했습니다.
각 학생의 상담 상태를 뱃지로 시각화하고, 카드 클릭 시 해당 학생 홈 화면으로 이동할 수 있도록 했습니다.
구조 측면에서는 학생 홈 화면과 선택한 학생 화면이 동일한 레이아웃을 공유하되,
사용자 역할에 따라 버튼과 콘텐츠만 분기하는 방식으로 재사용성을 높였습니다.
4-3) AI 채팅 화면 : 상담 흐름을 어떻게 설계할 것인가
AI 채팅은 이 서비스의 핵심 경험이었습니다.
단순한 문답형 챗봇이 아니라, 실제 진로 상담의 흐름과 유사한 경험을 제공하는 것이 목표였기 때문에
채팅 화면을 상담 단계에 따라 3단계로 구분하여 기획했습니다.
- 사용자 목표 설정 : 상담 시작 시점에 학생에게 상담의 목적을 묻고, 스스로 기대하는 바를 정의하도록 유도했습니다.
- 심층 대화 : 실제 진로 상담 데이터를 기반으로 성향, 가치관, 고민 등을 탐색하는 질문을 배치했습니다.
- 결과 대기 : 충분한 대화가 이루어진 이후, 리포트 생성이 가능한 상태임을 안내하고 상담 종료 흐름으로 자연스럽게 연결되도록 구성했습니다. 학생이 갑작스럽게 끊기는 느낌 없이 마무리될 수 있도록 전환 메시지를 별도로 설계했습니다.
해당 기능을 기획하면서 가장 신경 쓴 부분은 학생이 AI와의 대화에 심리적 부담 없이 참여하고,
스스로 진로를 탐색해 나가는 흐름을 자연스럽게 유도하는 것이었습니다.
대화 흐름 구현은 AI 개발 담당자가 맡았고, 저는 채팅 인터페이스 구조와 단계별 사용자 경험 기획을 담당했습니다.
4-4) 리포트 화면 : 동일한 정보, 다른 목적
학생용 리포트와 교사용 리포트는 동일한 레이아웃 구조를 공유하면서도, 역할에 따라 다른 경험을 제공해야 했습니다.
학생은 상담 결과를 이해하고 추가 탐색으로 이어지는 경험이,
교사는 내용을 빠르게 파악한 뒤 피드백을 바로 작성하는 경험이 필요했습니다.
두 목적을 하나의 구조 안에서 어떻게 담을 것인가가 설계의 핵심이었습니다.
정보는 중요도에 따라 위에서 아래로 점진적으로 이해할 수 있도록 시각적 우선순위를 설정했고,
각 항목 하단에는 커리어넷 등 외부 링크를 배치해 학생이 자기 탐색을 이어갈 수 있도록 했습니다.
(1) 역할 기반 분기 구조
공통으로 보여줄 콘텐츠와 역할별로 다르게 보여줄 콘텐츠를 명확하게 나누는 것이 먼저였습니다.
추천 직업 목록처럼 학생과 교사 모두에게 필요한 정보는 공통 컴포넌트로 렌더링하고,
그 아래에 user?.isStudent 조건으로 학생에게만 안내 메시지를 추가하는 방식으로 구현했습니다.
// 공통 콘텐츠는 모두에게 보여주고
{recommended_jobs.map((job, index) => (
<RecommendedJobCard key={index} {...job} />
))}
// 역할 기반 분기: 학생에게만 안내 메시지 표시
{user?.isStudent && (
<div className="bg-background text-body p-4 rounded-lg text-center">
※ 이 추천은 상담 내용 기반 제안입니다. 담임 교사의 조언으로 최종 결정하세요.
</div>
)}
(2) 컴포넌트 분리
인적사항 카드처럼 학생용과 교사용이 아예 다른 형태인 경우에는,
하나의 컴포넌트 안에서 분기하는 대신 UserCard와 TeacherCard를 별도로 분리해 각각 export하는 방식을 택했습니다.
조건 분기가 컴포넌트 내부에 쌓이는 것을 방지하고, 각 역할의 UI를 독립적으로 관리할 수 있도록 하기 위해서였습니다.
(3) 비동기 로딩 처리
리포트는 AI 분석 결과를 서버에서 받아오는 구조였기 때문에,
데이터가 준비되기 전 사용자 경험을 어떻게 처리할지도 고민이 필요했습니다.
상담 완료 후 리포트 생성 요청을 보내는 시점에 로딩 상태를 관리하고, 완료 전까지는 스켈레톤 UI를 폴백으로 노출했습니다.
{isReportLoading ? (
<div className="flex flex-col items-center gap-4">
<div className="rounded-full h-12 w-12 border-4
border-primary border-t-transparent" />
<p className="text-title font-semibold">리포트를 생성하는 중입니다...</p>
</div>
) : (
<ChatInterface />
)}5. 회고
Keep - 사용자 시나리오를 먼저 생각하기
찾다 프로젝트에서 가장 많이 훈련된 것은 "기능을 어떻게 만들까"보다 "
사용자가 이 화면에서 무엇을 느끼고, 다음에 무엇을 할까"를 먼저 생각하는 방식이었습니다.
홈 화면을 4단계로 분기한 것도, AI 채팅을 3단계 흐름으로 설계한 것도,
교사와 학생의 리포트 레이아웃을 공유한 것도 모두 기술적 결정이기 이전에 사용자 경험에 대한 판단이었습니다.
기획 단계에서 퍼소나를 먼저 상세하게 설정하고, 상황을 기준으로 화면을 설계하는 방식은
앞으로도 이어가고 싶습니다.
Problem - 기획에서 놓친 것들
공모전이 팀원 모두에게 처음이었고, 결과적으로 기획에 과도하게 초점이 맞춰진 채 진행되었습니다.
가장 아쉬웠던 것은 퍼블리싱을 마친 뒤 실제 사용 흐름을 테스트하고 개선할 기회를 갖지 못했다는 점입니다.
특히 리포트 구성을 직접 설계하고 디자인까지 완성했는데, 실제로 사용되며 어떤 반응과 도움이 될지
확인하지 못한 것이 서류 발표 이후 마음에 걸렸습니다.
기술적으로는 상담 상태에 따른 UI 분기 로직이 컴포넌트 내부에 쌓여있어,
유지보수 관점에서 더 명확하게 정리했어야 했다는 아쉬움이 있습니다.
또한 UX/UI와 개발을 동시에 진행하다 보니, 기획과 개발의 전환 시점이 명확하지 않았습니다.
어디까지 기획하고 언제부터 개발로 넘어가야 하는지의 기준이 없었던 것이
작업 흐름을 불안정하게 만들어 비효율적인 협업을 만들었습니다.
Try - 다음 프로젝트에서 다르게 할 것들
(1) 기획과 개발의 전환 기준을 명확히 정하기
기한이 주어진 프로젝트에서 UX/UI와 개발을 함께 맡을 때,
각 단계에 집중하는 시점을 팀 내에서 미리 합의해두는 것이 필수적이라는 것을 배웠습니다.
이후 진행한 다른 프로젝트에서도 디자인과 개발을 동시에 맡았는데, 구분 없이 진행했을 때
두 역할 모두 품질에 영향을 받고 협업 흐름도 불안정해진다는 것을 다시 한번 경험했습니다.
역할 전환의 기준을 미리 정해두는 것이 결과물의 완성도를 높이는 데 얼마나 중요한지 체감하고 있습니다.
(2) 상태 관리 로직을 더 구조적으로 다루기
상담 상태에 따라 분기되는 UI는 이 프로젝트 구현의 핵심이었는데, 실제 데이터와 연동되는 상태 동기화 로직은 구체화하지 못했습니다.
규모가 크지 않더라도, 작은 프로젝트에서 이 패턴을 직접 구현해보며 경험적으로 보완해나가고 싶습니다.
마치며
1차 심사를 통과하지 못했지만, 찾다 프로젝트는 저에게 꽤 많은 것을 남겼습니다.
서비스 주제를 설정할 때 데이터에서 출발해 퍼소나를 상세하게 설정하고,
사용자 여정을 화면으로 옮기는 과정 전체를 온전히 경험했습니다.
결과보다 그 과정이 훨씬 값졌다고 지금은 생각합니다.
이 프로젝트의 경험을 바탕으로, 이후 참여한 공모전에서 짧은 시간 안에 밀도 있는 서비스 주제를 도출하고
찾다에서 아쉬웠던 부분인 개발에 더 집중할 수 있었습니다.
덕분에 더 큰 규모의 서비스를 빠르게 완성하여 장려상 수상이라는 결과를 만드는 것까지 이어질 수 있었습니다.
[프로젝트 회고] 고용노동 공공데이터 공모전 참여 서비스, 갭로그
갭로그(Gaplog) : 공백기 청년을 위한 커리어 회복 플랫폼 개발 회고프로젝트 기간 : 2025.04 ~ 2025.07서비스 유형 : Web역할 : 팀장 / 프론트엔드 개발인원 : 백엔드 1명 AI 1명 프론트엔드 2명 (총 4명)서
jignonne.tistory.com
'my projects > 2025' 카테고리의 다른 글
| [프로젝트 회고] 관광데이터 활용 공모전 참여 서비스, 섬띵(SumThing) (0) | 2026.02.24 |
|---|---|
| [프로젝트 회고] 고용노동 공공데이터 공모전 참여 서비스, 갭로그 (2) | 2026.02.08 |
| [프로젝트 회고] 크리스마스 트리 꾸미기 서비스, 트리토리 (2) | 2026.01.30 |