Heart4D

Team: 길우근, 김재혁, 황재진

Role: UX 디자이너, 프로덕트 오너

Contribution: 포커스 그룹 인터뷰, UX/UI 디자인, 프론트엔드 개발

Timeframe: Jul - Dec 2021

Summary

학생과 교수진의 온라인 교육 경험 증진을 위해.

펜데믹으로 인해 장기화된 온라인 교육은 많은 학생들의 학습 몰입도를 저하시키고 교육자들의 고민을 깊게 했습니다. 특히나 복잡한 구조의 장기를 탐구하는 의과대학의 문제는 더욱 심각했습니다. 학생들이 온라인에서 3D 모델을 통한 입체적인 교육 경험을 얻을 수 있는 플랫폼이 존재하지 않았고, 강의 제작자인 교수진의 관점에서는 제작 비용이 비약적으로 상승하는 3D 기반 강의 제공이 어려웠습니다.

포커스 그룹 인터뷰를 진행해 학생과 교수진의 온라인 교육 경험에 대해 이해했습니다.
인사이트를 기반으로 양방향 온라인 교육 경험에 대한 UX 개선 작업을 진행했습니다.
스크럼을 통해 온라인 학습 및 강의 제작 플랫폼 디자인 및 개발을 수행했습니다.

Discovery

양날의 검과 같은 온라인 학습 경험

온라인 교육 환경에서 만나는 학생과 교수진의 서로 다른 관점에 대한 이해가 필요했습니다. 의과대학 본과 재학생 10명과, 영상의학과 및 심혈관내과 교수진 10명을 별도로 모집하여 포커스 그룹 인터뷰를 진행했습니다. 온라인 교육에서 학생의 학습 자유도가 높아졌지만, 학생-교수진의 인터랙션이 약화되고 강의 품질이 낮아졌다고 느끼는 것을 확인할 수 있었습니다.

높아진 학습 자유도

학생들은 온라인 강의를 원할 때 들을 수 있는 것에 만족도가 높음

규칙적인 학습을 위해 학생 스스로 지속적인 동기 부여가 필요함

영상 형태의 강의가 한 호흡으로 이어져 도중에 멈출 수 없음

강의 품질의 저하

학생은 다양한 자료를 바탕으로 한 풍부한 학습 경험을 원함

교수진은 현실적 제약으로 인해 한 번 만든 강의 자료를 재사용할 수 밖에 없음

제한된 강의 자료 양식으로 인해 내용의 깊이가 얕아짐

학생-교수진 인터랙션의 약화

학생은 학습 중 발생한 궁금증을 바로 해결하지 못해 답답함

교수진 또한 강의에 대한 피드백 수용과 개선을 원하나 소통의 창구가 부족함

Design

교수진과 학생, 양방향으로 연결되는 온라인 교육 경험

해당 프로젝트에서는 사용자의 페인 포인트 중 강의 품질의 저하에 초점을 맞추어 UX 개선을 진행했습니다. 교수진은 간단한 모델 조작과 강의 내용 입력을 통해 반자동으로 강의를 구성할 수 있으며, 학생들은 실시간으로 업데이트된 강의를 통해 3D 모델을 직접 조작해보며 학습에 더욱 몰입할 수 있습니다. 이를 통해 양측 모두에게 양질의 온라인 교육 경험을 제공할 수 있는 인터페이스를 디자인했습니다.

Hero Shot — [↑] 학생용 모바일 학습 인터페이스(좌) 및 교수진용 강의 제작 인터페이스(우)

Key Feature

자유로운 모델 조작과 직관적인 클릭만으로 강의 자료를 구성할 수 있습니다. 원하는 심장 모델의 구도를 설정하고, 강조하고 싶은 부위와 효과를 선택한 뒤 강의 내용을 작성하기만 하면 한 단계가 완성됩니다.

원하는 호흡의 강의를 단계 별로 제작할 수 있습니다. 기존에 만들어둔 강의 내용을 자유롭게 수정하거나, 추가 내용을 덧붙일 수도 있습니다. 단계에 따라 달라지는 심장 모델의 각도는 회전 트랜지션이 자동으로 적용됩니다.

몰입감있는 학습 경험을 제공합니다. 학생은 강의 제작자의 의도한 호흡대로 학습을 진행합니다. 손쉬운 단계 전환과 자유로운 심장 모델 조작을 통해 심혈관 분야에 대해 심도 있게 이해할 수 있습니다.

자유롭게 학습을 중단 및 재개할 수 있습니다. 강의 진척도는 실시간으로 저장되므로 학생은 자신의 흐름에 맞추어 학습을 진행할 수 있습니다. 과정 별 진척도를 시각화함으로써 학습을 완료할 수 있도록 유도합니다.

Development

픽셀에서 코드로, 직접 옮기는 인터페이스

디자인 프로세스 이후에는 프론트엔드 개발을 진행했습니다. 초기 제품은 모바일 환경에서만 사용 가능했지만 다양한 사용 환경으로의 확장을 고려하여 PWA(Progressive Web App) 방식으로 개발되었습니다. 인터페이스 컴포넌트를 재사용 가능하도록 개발하고, 컴포넌트명 작성 규칙을 설정함으로써 제품의 유지 보수가 용이하도록 했습니다. (개발 과정은 완료되지 않은 상태이며, 핵심 기능 위주의 MVP 테스트 단계에 있습니다.)

학습하기

관상 동맥이란?

12 단계

18 분

간단함

진행률

20대 건강한 심장 모델

심장
20대 건강한 심장
관상동맥이란?
67.7%
4단계 남았어요.

관상 동맥이란?

Explore

X Ray

관상동맥이란?

67.7%

4단계 남았어요.

심장

20대 건강한 심장

관상 동맥이란?

좌심실 알아보기

심혈관의 협착 및 카테터 시술

우심실과 우심방 톺아보기

1/12

[↑] 제품 개발에 사용된 인터페이스 컴포넌트

Scrum

"저희 애자일하게 개발해봐요!"

디자인 컨셉을 빠르게 검증하고 개선하기 위해서 디자인 및 개발 과정을 스크럼으로 진행했습니다. 이를 위한 스프린트 일정 및 백로그 관리, 외부 관계자와의 소통 등을 담당하는 프로덕트 오너 역할을 함께 수행했습니다. 스프린트는 2주 일정으로 반복 진행했으며, Jira 및 Slack을 활용해 조직 구성원간의 유기적인 협업이 이루어지도록 했습니다.

scrum process — [↑] Jira를 이용한 스프린트 프로세스 관리

스프린트를 반복하면서 학습 현황을 확인할 수 있는 대시보드 탭 디자인 추가, 컴포넌트 애니메이션 및 트랜지션 추가를 통한 몰입도 향상과 같은 다양한 방식을 통해 인터페이스 사용성을 개선할 수 있었습니다.

Retrospective

말뿐인 '애자일'이 되지 않도록

실무에 스크럼 프레임워크를 처음 적용해보는 과정에서 여러 시행 착오를 거쳤습니다. 그럼에도 스크럼 및 스프린트의 효율성을 크게 체감할 수 있었고, 다시 스크럼을 진행할 때 활용할 수 있도록 느낀점을 정리했습니다.

스프린트 내에 할 수 있는 업무량을 명확히 설정해야 합니다.제한된 시간에 할당된 이슈를 해결해야했기 때문에 적절한 업무량을 찾는 것은 중요한 요소였습니다. 조직 구성원들마다 서로 다른 기준으로 설정한 스토리 포인트는 오히려 혼란을 야기하기도 했습니다. 효과적인 스프린트 진행을 위해서는 벨로시티 및 스토리 포인트를 설정하는 기준 또한 명확하고 공감 가능해야 함을 알 수 있었습니다.
스크럼의 핵심은 이슈 해결이 아니라 지속적인 발전입니다.스프린트가 반복되면서 마무리 날짜를 맞추기 위해 빠르게 이슈를 해결하는데만 급급해졌습니다. 이로 인해 충분한 고민 없이 디자인 프로세스를 진행했고, 해결되었다고 생각한 이슈가 비슷한 형태로 다시 등장하는 것을 확인할 수 있었습니다. 이 과정에서 제품을 지속적으로 발전시키고자 하는 스크럼의 본질을 되새길 수 있었습니다.