세타랩 의과대학 e포트폴리오의 성적 화면을, 점수를 나열하지 않고 평균 곁에서 지금의 나를 읽는 화면으로 설계하였습니다.

상황

세타랩은 의과대학 학생의 학습과 활동을 기록하는 e포트폴리오 서비스를 구축하고 운영하는 회사입니다. 학생은 학년별, 월별 계획과 성찰, 이수 현황, 봉사 시간, 시험 성적을 이 서비스에 쌓아 가고, 교수는 그 기록을 보며 피드백을 남기고 제출물을 승인합니다.

프로젝트는 두 차례에 걸쳐 진행되었습니다. 2019년 12월에는 의예과에 새로 열리는 메뉴 5종(이수현황, 이수학점, 의무봉사, 인문사회계열, CPM)의 학생과 교수 화면 디자인을 요청받았습니다. 2020년 10월에는 학생이 종합시험 결과를 확인하는 나의 향상도 종합평가 화면과 그래프 2종을 이어서 맡았습니다.

두 번 모두 세타랩이 작성한 기획서와 기존 디자인 가이드가 함께 전달되었습니다. 기획서에는 화면에 들어갈 정보와 계정별 권한, 데이터가 없는 경우까지 정리되어 있었습니다. 다만 숫자와 표가 많은 화면에서 학생의 눈이 어디에 먼저 닿아야 하는지, 그래프가 어떤 상태로 움직이는지는 화면 설계에서 정해야 할 몫으로 남아 있었습니다.

발견

기획서와 기존 화면을 분석하여 확인한 내용은 다음과 같습니다.

• 학생이 성적 화면에서 알고 싶은 것은 점수 하나가 아니라 평균과 비교한 지금의 위치입니다. 같은 75점이라도 평균이 60점일 때와 90점일 때 의미가 다릅니다.
• 시험은 회차가 쌓이는 구조입니다. 지난 회차는 흐름을 읽는 배경이고, 가장 최근 회차가 지금 확인해야 할 결과입니다. 아직 치르지 않은 회차도 화면에 자리를 차지합니다.
• 성적은 민감한 정보입니다. 이수 현황 화면은 성적을 기본으로 가리고 학생이 원할 때만 보이도록 기획되어 있었습니다.
• 이수 항목은 종류가 많지만 학생에게 필요한 답은 대부분 짧습니다. 끝났는지, 진행 중인지, 아직 시작하지 않았는지입니다.

이를 바탕으로 성적과 이수 화면을 표의 모음이 아닌, 학생이 지금의 자신을 확인하고 다음에 할 일을 정하는 화면으로 정의하였습니다.

방향을 정립하는 과정

나의 점수와 평균은 늘 한 쌍으로

모든 그래프에서 나의 점수는 파랑, 평균은 주황으로 정하고, 두 값을 항상 함께 보여 주었습니다. 의무봉사 화면의 도넛 그래프, 월별 막대그래프, 종합평가의 회차별 그래프와 점수 분포 곡선까지 같은 규칙을 따릅니다. 이를 통해 학생은 화면이 바뀌어도 색만으로 자신과 평균을 구분합니다.

지금 볼 것은 가장 최근 회차

회차별 그래프에서는 가장 최근 회차만 진한 색과 그림자로 강조하고, 지난 회차는 옅게 두었습니다. 아직 결과가 올라오지 않은 회차는 빈 막대로 자리를 남기고, 마우스를 올리면 “데이터 업로드 전”이라고 알려 줍니다. 점수 분포 곡선에는 나의 위치를 점과 세로선으로 표시하여, 전체 학생 사이에서 지금 어디쯤인지 한눈에 읽히도록 하였습니다.

상태는 아이콘으로, 성적은 필요할 때만

이수 항목은 이수, 미이수, 진행 중, 완료, 대기의 상태를 아이콘과 짧은 단어로 요약하였습니다. 표를 열지 않아도 남은 일을 먼저 확인할 수 있습니다. 성적 표는 기본으로 가려 두고, 오른쪽 위의 “성적 표시” 토글로 펼치도록 하였습니다.

이 과정을 통해 정립한 원칙은 다음과 같습니다.

• 점수 하나보다, 평균 곁의 나의 위치를
• 모든 회차보다, 가장 최근의 결과를
• 표의 숫자보다, 한 단어로 읽히는 상태를

한 일

신규 메뉴의 학생과 교수 화면

이수현황은 의예과에서 쌓은 기록을 한 화면에 모은 요약 화면입니다. 학기별 성적과 전체 평균, 항목별 누적 학점, 학년별, 월별 계획과 성찰의 제출 현황, 의무봉사와 독서일기의 누적 시간, 인성과 리더십, CPR 같은 필수 이수 항목을 차례로 배치하였습니다. 선택 이수는 연구멘토링, 영어 성적, 인문사회계열, CPM을 같은 상태 카드로 정리하였습니다.

교수 화면은 학생을 찾고, 기록을 확인하고, 판단을 남기는 순서로 구성하였습니다.

• 학생별 보기 | 나의 지도학생을 맨 위에 두고, 그 아래에 학년별 학생을 카드로 나열하였습니다. 이름으로 바로 찾을 수 있도록 검색을 오른쪽 위에 두었습니다.
• 의무봉사 조회 | 학생의 누적 봉사 시간과 전체 평균을 도넛 그래프로 나란히 두고, 월별 시간을 나와 평균의 막대로 비교하였습니다. 시간이 누락되었을 때 바로 헬프데스크로 연결되는 안내를 표 위에 두었습니다.
• 인문사회계열 승인 | 학생이 신청한 과목과 사유, 첨부 파일을 위에서 아래로 읽은 뒤, 맨 아래에서 피드백을 쓰고 반려, 임시저장, 승인 가운데 하나를 고르도록 하였습니다. 승인은 다른 버튼과 구분되는 색으로 두었습니다.

모든 기록 화면의 아래에는 피드백톡을 두었습니다. 교수의 말은 왼쪽, 학생의 말은 오른쪽에 놓아 대화처럼 읽히고, 학생은 피드백을 받은 자리에서 바로 개선 계획을 남길 수 있습니다.

나의 향상도 종합평가

종합평가 화면은 위에서 아래로 범위를 좁혀 가는 구조입니다. 맨 위의 평가 향상도에서 회차별 흐름과 전체 분포 속 나의 위치를 확인하고, 회차를 고르면 그 아래의 계통별 결과가 바뀝니다. 계통별 평가 결과는 상위 계통과 하위 계통을 오른쪽에 따로 뽑아, 잘한 과목과 보완할 과목이 그래프를 읽기 전에 먼저 보이도록 하였습니다. 마지막으로 방사형 그래프가 계통 전체의 균형을 보여 줍니다.

첫 제안에서는 계통별 결과를 가로 막대로, 그 가운데 “전체”를 별도의 바탕과 평균선으로 구분하였습니다. 세타랩의 수정 요청을 거친 최종 화면에서는 계통별 결과를 회차별 그래프와 같은 세로 막대로 맞추고, 총점과 원점수, 100점 기준 환산 점수를 함께 보여 주는 말풍선을 더하였습니다.

첫 제안 | 가로 막대, "전체"를 별도 바탕으로 구분 (2020.11.01)

수정 반영 | 세로 막대, 상위와 하위 계통 (2020.11)

그래프는 디자인 파일만으로는 움직임을 전달할 수 없기 때문에 인터랙션 설명서를 함께 만들었습니다.

• 최근 회차 강조 | 가장 최근 회차는 진한 색과 그림자, 지난 회차는 옅은 색으로 구분합니다.
• 마우스 오버 | 막대와 곡선 위의 점에 마우스를 올리면 평균과 나의 점수가 말풍선으로 나타납니다.
• 데이터 업로드 전 | 결과가 아직 없는 회차는 빈 막대와 안내 말풍선으로 표시합니다.
• 회차 선택 핸들 | 계통별 분포도 왼쪽의 세로 막대에서 핸들을 움직여 회차를 고르고, 선택한 영역, 고르지 않은 영역, 고를 수 없는 영역을 색으로 나누었습니다.

결과물

• 신규 메뉴 학생 화면(이수현황, 이수학점, 의무봉사, 인문사회계열 작성)
• 신규 메뉴 교수 화면(학생별 보기, 이수현황, 이수학점, 의무봉사 조회, 인문사회계열 목록과 승인), 피드백톡 작성 전후 화면
• 나의 향상도 종합평가 학생 화면과 마우스 오버 상태 화면
• 회차별 막대그래프, 점수 분포 곡선, 계통별 막대그래프, 방사형 그래프 디자인
• 그래프 인터랙션 설명서