글로벌 온라인 학습·진로 테스트 플랫폼

온라인 학습, 진로 진단, 결과 리포트 흐름을 하나로 묶은 글로벌형 러닝 플랫폼입니다.

Delivery Stack

구축에 사용한 기술과 운영 기준

프로젝트 소개 상단에서 기술 스택과 공개 범위를 먼저 보여 주어, 아래의 상세 설명과 실서비스 화면을 어떤 기준으로 봐야 하는지 바로 이해할 수 있게 구성했습니다.

Next.jsTypeScriptReactVercel
교육·진로운영 중2026

프로젝트 한눈에 보기

진단과 학습이 분리되지 않도록 진로 테스트 결과를 기반으로 추천 학습 경로를 제시하고, 학습자와 운영자가 같은 데이터 흐름 위에서 움직이도록 설계한 프로젝트입니다.

Core Journey

진단 → 추천 → 학습

테스트 이후 학습 전환이 끊기지 않도록 흐름을 짧게 설계했습니다.

Operation Lens

결과 + 수강 이력

운영자가 검사 결과와 학습 행동을 함께 볼 수 있도록 구조화했습니다.

Experience

퍼널형 메인 UX

첫 진입부터 마이페이지까지 같은 문맥으로 이어지는 UI를 적용했습니다.

Challenge

사용자는 테스트만 하고 이탈하거나 학습만 소비하는 흐름으로 갈라지기 쉬웠고, 운영자는 진단 결과와 수강 행동을 함께 추적하기 어려웠습니다.

Solution

진단 결과, 추천 과정, 학습 이력, 피드백을 하나의 사용자 여정으로 재구성해 테스트 이후 학습 전환율과 운영 가시성을 동시에 확보하는 구조로 구축했습니다.

Desktop + Mobile Experience

실서비스 화면

Live Preview
글로벌 온라인 학습·진로 테스트 플랫폼의 데스크톱과 모바일 운영 화면

추천 검사, 결과 리포트, 학습 전환 화면이 하나의 퍼널 안에서 이어지도록 구성한 실제 서비스 목업입니다.

서비스 기획UI/UX 설계학습 흐름 설계운영 구조 정의

Operation Journey

운영 흐름 타임라인

1

진단 진입

목적에 맞는 검사를 선택하고 시작 장벽을 낮춘 진입 화면을 제공합니다.

2

결과 해석

단순 점수 노출이 아니라 다음 행동으로 이어질 수 있는 결과 문맥을 제시합니다.

3

추천 학습 전환

추천 강좌와 학습 경로를 바로 보여 주어 이탈 없이 수강으로 연결합니다.

4

운영 추적

운영자는 검사 결과와 수강 행동을 함께 보며 후속 관리를 할 수 있습니다.

Design Focus Graph

설계 초점 지표

정량 성과 수치가 아니라, 이 프로젝트가 어떤 경험 영역에 우선순위를 두고 설계되었는지를 시각화한 보드입니다.

전환 동선92

테스트에서 학습 신청으로 바로 이어지는 흐름

추천 정합성88

결과 기반 추천 노출과 학습 경로 매칭

운영 가시성84

학습·검사 데이터를 함께 해석하는 관리자 시야

확장 구조79

다기관·다국어 확장을 고려한 정보 구조

Delivery Scope

무엇을 구축했고 어떻게 구현했는가

범위를 따로, 기능을 따로 읽는 대신 실제 구축 단위와 사용자 관점 기능을 한 흐름으로 묶어 읽을 수 있도록 재구성했습니다.

2 Blocks

구축 범위

4 Items
1

진로 진단 테스트 설계 및 결과 리포트 흐름

2

추천 학습 과정 노출 및 수강 전환 구조

3

학습자 마이페이지와 운영자 관리 동선 정의

4

글로벌 확장을 고려한 온라인 서비스 정보 구조 정리

주요 기능

4 Items
1

진단 결과에 따라 학습 경로를 추천하는 퍼널형 메인 구조

2

과정 탐색, 수강 신청, 학습 이력 확인을 잇는 일관된 사용자 여정

3

운영자가 콘텐츠와 사용자 흐름을 함께 볼 수 있는 관리 관점 설계

4

진단형 서비스와 LMS형 서비스를 하나로 연결한 하이브리드 구조

Operational Value

운영에서 어떤 가치가 발생하는가

구축 이후 실제 운영자가 체감하는 포인트와 기대 효과를 한 묶음으로 정리해, 도입 가치가 바로 읽히도록 구성했습니다.

2 Blocks

운영 포인트

3 Items
1

진단에서 학습으로 이어지는 전환 동선을 짧게 유지

2

학습자별 결과 요약과 수강 이력을 함께 관리할 수 있는 운영 구조 확보

3

테스트 중심 유입과 과정 중심 유입을 모두 수용하는 랜딩 구조 적용

기대 효과

3 Items
1

진단형 서비스와 학습형 서비스를 단일 제품으로 운영할 수 있는 기반 마련

2

사용자 행동 데이터를 추천과 운영 관리에 다시 활용할 수 있는 구조 확보

3

향후 다국어·다기관 확장을 고려한 확장형 IA 정리

Next Step

유사한 운영형 플랫폼을 기획 중이라면 구조부터 함께 정리할 수 있습니다.

화면만 예쁘게 만드는 것이 아니라 운영 방식, 관리자 동선, 데이터 축적 구조까지 함께 설계해야 실제로 오래 쓰는 프로젝트가 됩니다.