배경
- 정부 원격훈련 기관 심사를 받기 위해 외부 LMS로 이관
- 원격훈련은 진도율, 하루 학습 한도, 평가, 수료 기준을 학습자에게 보여 줘야 함
- 기존 마이페이지에는 학습 현황과 수료 기준을 보여 줄 화면이 없음
서비스 기획 · 신규 화면 설계
학습자 포털 기획 ⬜
목표
- 진도율, 하루 학습 한도, 평가, 수료 기준을 학습자가 직접 확인하는 화면 갖추기
- VOD 회원의 사용 흐름은 유지하고, 별도 사이트 없이 마이페이지 안에서 해결
- 6월 초 합류한 디자이너 2명과 한 달 안에 화면 5종 디자인 완료
- 기능 개발 전에 퍼블리싱 화면이 피그마와 같은지 PC와 모바일에서 확인
업무
- 이관 프로젝트 안에서 학습 화면 기획 전체를 담당
- 원격훈련 요건 정리, 메뉴 구조, 신규 화면 5종 와이어프레임과 기능 정의
- 동작 데모 제작, 개발사 정책 협의, 퍼블리싱 디자인 QA 운영
성과
- 진도율, 하루 학습 한도, 수료 기준을 보여 주는 학습 화면 5종을 기존 마이페이지 안에 설계
- 디자이너 합류 후 약 한 달 만에 5종 디자인 완료. AI로 와이어프레임 초안을 이틀 만에 준비하고, 동작 데모를 개발사 구현 기준으로 확정
- AI로 뽑은 점검표로 퍼블리싱 완료 3일 뒤 QA를 시작해, 기능 개발 전에 화면 이슈 490건을 찾아 수정 확인
Background
배경
1. 서비스 맥락 및 프로젝트 배경
openpath.kr은 디자이너 대상 교육 플랫폼으로, 회원 대부분은 VOD 강의를 구매해 듣습니다. 2027년 정부 원격훈련 기관 심사를 받기 위해 플랫폼을 외부 LMS로 이관하게 됐고, 원격훈련은 진도율과 하루 학습 시간, 평가 결과, 수료 여부를 학습자가 직접 확인할 수 있어야 합니다. 기존 마이페이지에는 이런 화면이 없어, VOD 회원의 사용 흐름은 유지하면서 원격훈련 학습 화면을 새로 설계해야 했습니다.
LMS 이관 프로젝트 안에서 진행했고, 벤더 선정과 계약, 일정 관리는 이관 페이지에 정리했습니다.
2. 개편 전 상태 (As-Is)
- 마이페이지 메뉴: 내 클래스, 내가 작성한 글, 개인 정보 관리, 결제/환불 내역, 내 쿠폰, 1:1 문의 6개. 학습 현황은 강의 카드의 수강률 한 줄
- 수료증: 수강 완료한 강의 카드의 버튼으로만 발급, 모아 보는 화면 없음
- 원격훈련 화면: 없음. 진도율, 하루 학습 한도, 평가 결과를 보여 줄 곳이 없음
- 검색과 알림: 사이트 검색과 알림 페이지 없음
Tasks
진행 업무
- 1. 원격훈련 요건 정리와 참고 사이트 분석AI(Claude Code)로 원격훈련 기준과 개발사 정책을 화면 단위로 요약해 원문과 대조하고, 교육 플랫폼과 공공 학습 사이트의 학습 화면을 비교
- 2. 학습 메뉴 통합 구조 설계별도 학습자 포털 대신 마이페이지 사이드바에 학습 메뉴를 넣는 구조를 제안하고 개발사와 합의
- 3. 신규 화면 5종 와이어프레임과 기능 정의대시보드, 원격훈련 강의장 등 5개 화면의 상태별 케이스와 기능 설명을 정리해 전달. AI로 와이어프레임 초안을 먼저 만들어 디자이너 합류 전에 준비
- 4. 동작 데모 제작과 기획 전달AI로 디자인을 입힌 클릭 가능한 데모를 직접 만들고, 회의 결정을 바로 반영하며 디자이너 브리핑과 개발사 협의에 사용
- 5. 퍼블리싱 디자인 QAAI로 피그마 기준 점검 항목을 먼저 뽑고, 이슈 기록 방식을 개발사와 정해 4인이 PC와 모바일을 나눠 검수
How
항목별 세부 업무
1. 원격훈련 요건 정리와 참고 사이트 분석
2026.06
배경
- 원격훈련은 하루 학습 시간, 진도율, 평가 점수로 수료를 판정하는데, 개발사 목업에는 오픈패스에 필요한지 알 수 없는 항목(출석률, 예상 점수 등)이 섞여 있었음
진행 업무
- 요건 자료와 개발사 정책을 AI(Claude Code)로 화면 기준 요약본으로 만들고 원문과 대조해, 학습자에게 보여 줄 항목을 추림
- 국내 교육 플랫폼과 공공 학습 사이트를 비교하고, 대시보드는 참고 서비스 패턴별 컨셉 5개를 만들어 비교
- 필수 여부가 불분명한 목업 항목은 질의서로 모아 개발사에 확인
결과
- 출결 메뉴를 빼고, 하루 학습 한도와 과제, 시험 상태 기준을 확정
2. 학습 메뉴 통합 구조 설계
2026.06
배경
- 개발사 목업은 학습자 포털로 들어가면 사이트 메뉴가 사라지는 별도 구조라, VOD 회원도 강의를 볼 때마다 사이트를 오가야 함
진행 업무
- 학습 메뉴를 기존 마이페이지에 넣고 원격훈련 강의장만 강의 카드에서 들어가는 구조를 데모로 만들어 개발사에 제안
결과
- 개발사가 강의실 기능을 유지하는 조건으로 제안을 수용해 구조 확정
3. 신규 화면 5종 와이어프레임과 기능 정의
2026.06 ~ 07
배경
- 디자이너 2명이 6월 초 합류해 한 달 안에 화면을 마쳐야 했고, 원격훈련 정책은 진행 중에도 바뀜
진행 업무
- 대시보드, 원격훈련 강의장, 성적/수료증, 알림, 검색의 상태별 케이스를 나누고 화면마다 기능 설명을 붙임
- AI로 피그마 와이어프레임 초안을 먼저 만들어, 디자이너 합류 전 이틀 동안 약 37개 프레임을 준비
- 원격훈련 강의가 추가되며 늘어난 강의 카드의 상태 표시(수강 중, 수료 등)를 다시 정리해 줄임
결과
- 7월 초 기능 설명과 스타일 가이드를 포함한 피그마를 개발사에 전달
- 정리한 강의 카드 상태 규칙은 오픈 전 10월 전수 QA에서 내 클래스 화면의 판정 기준으로 사용
4. 동작 데모 제작과 기획 전달
2026.06.10 ~ 06.26
배경
- 와이어프레임만으로는 표와 달력의 배치, 화면 이동이 전달되지 않아 화면마다 말로 설명해야 했음
진행 업무
- Claude Code로 openpath.kr 레이아웃을 입힌 클릭 가능한 데모를 만들고, 수강 중과 수료, 미수료 같은 케이스를 바꿔 볼 수 있게 구성
- 디자이너 시안과 회의 결정을 바로 반영해 3주 동안 187회 갱신하고, 디자이너 브리핑과 개발사 미팅에서 같은 화면을 사용
결과
- 디자이너가 데모로 화면 흐름을 먼저 보고 작업해 합류 7영업일 만에 5종 PC 1차 시안이 나왔고, 개발사가 데모에 담긴 화면 구조와 동작을 그대로 구현하기로 확정
5. 퍼블리싱 디자인 QA
2026.08.07 ~ 09.03
배경
- 기능 개발 전에 퍼블리싱 화면이 피그마와 같은지 PC와 모바일에서 확인해야 함
진행 업무
- AI로 피그마 기준 화면을 분석해 28개 화면의 점검 항목과 사전 이슈를 먼저 뽑음
- 이슈를 슬라이드 한 장에 한 건씩 기록하고 개발사가 처리 상태를 표시하는 방식을 제안해, 디자이너 2명, 기획자 1명과 화면을 나눠 검수
- 기능 개발 뒤 확인할 학습자 포털 테스트 케이스 128건을 퍼블리싱 완료 전에 작성
결과
- 퍼블리싱 완료 3일 뒤 QA를 시작해 이슈 490건을 찾아 수정 확인까지 진행
- 작성해 둔 테스트 케이스는 10월 전수 QA의 기능 점검 항목으로 옮겨 사용
Result
결과
퍼블리싱 시점 (2026.09 기준)
신규 학습 화면
5종
별도 사이트 이동 없이 마이페이지 안에서 사용
디자인 완료
약 1개월
디자이너 합류부터 피그마 전달까지
개발 전 화면 이슈
490건
퍼블리싱 단계에서 찾아 수정 확인
개편 전후 (11월 LMS 오픈과 함께 적용 예정)
| 화면 | 개편 전 | 개편 후 |
|---|---|---|
| 진입 구조 | 마이페이지 메뉴 6개 | 같은 사이드바에 대시보드, 성적·수료증, 알림 추가. 별도 사이트 이동 없음 |
| 학습 현황 | 강의 카드의 수강률 | 대시보드에서 최근 수강 강의, 수강 현황, 학습 기록 달력 |
| 수료증 | 수강 완료 카드의 버튼으로만 발급 | 성적·수료증 메뉴에서 VOD와 원격훈련으로 나눠 조회와 다운로드 |
| 원격훈련 | 없음 | 강의장 7개 탭, 하루 학습 한도와 수료 조건 표시 |
| 검색 | 없음 | 추천 검색어와 최근 검색어, 카테고리 필터, 최신순과 인기순 정렬 |
| 강의 카드 상태 표시 | 상품 유형별로 따로 정의 | 원격훈련까지 포함해 하나의 기준으로 정리 |
Decisions
주요 결정
1. 별도 학습자 포털 대신 마이페이지 통합
개발사는 원격훈련 기능을 그대로 쓸 수 있는 별도 학습자 포털을 권했습니다. 회원 대부분인 VOD 수강생이 강의를 볼 때마다 사이트를 오가지 않도록, 학습 메뉴는 마이페이지에 넣고 원격훈련 강의장만 개발사 기능을 그대로 쓰는 구조로 합의했습니다.
2. 출결 메뉴를 빼고 진도율 중심으로 구성
목업의 출결 메뉴를 세미나와 정규 과정용으로 남길 계획이었지만, 원격훈련은 진도율만 관리하고 오프라인 세미나에는 출석 기록 자체가 없었습니다. 대부분의 회원에게 빈 화면이 될 메뉴라 빼고, 모든 회원에게 같은 학습 기록(연속 학습일, 달력)을 보여 주기로 했습니다.
3. 와이어프레임과 동작 데모 병행 전달
피그마 와이어프레임과 기능 설명만 넘기면 데모 제작 시간을 아낄 수 있었지만, 흐름이 많은 화면은 회의마다 말로 설명해야 했습니다. AI로 데모를 만들면 수정 비용이 낮아, 화면 기준과 기능 설명은 피그마에, 흐름과 인터랙션은 데모에 담아 함께 넘겼습니다.
Retrospective
배운 점
시안 비용이 낮을수록 먼저 늘릴 비교안
대시보드는 참고 서비스 패턴별 컨셉 5개를 AI로 만들어 나란히 놓고, 같은 날 하나로 좁혔습니다. 시안을 만드는 비용이 낮아지면 첫 안을 다듬기보다 여러 안을 놓고 고르는 편이 결정이 빠르다는 것을 배웠습니다.
기능을 빼기 전에 화면으로 거쳐야 할 확인
개발사가 필수가 아니라고 해 뺀 토론 탭을, 다음 회의에서 화면을 함께 보다가 다시 넣게 됐습니다. 답변만 보고 기능을 빼거나 바꿀 때는 반영한 화면을 다시 보여 주고 확정해야 한다는 것을 배웠습니다.
퍼블리싱 전에 화면 단위로 맞춰 둘 공통 규칙
스타일 가이드를 넘겼지만 일부 피그마 화면이 폰트 규칙과 달랐고, 퍼블리싱 도중 일괄 수정을 요청하자 정상이던 한글까지 깨졌습니다. 모든 화면에 걸리는 규칙은 퍼블리싱 전에 화면이 규칙과 맞는지부터 확인해야 한다는 것을 배웠습니다.
다른 프로젝트
안재찬 · asa0677@naver.com