코리노트의 화면마다 요청받은 안과 제안하는 안을 나란히 놓고, 고객사가 근거를 보고 결정하도록 하였습니다.

상황

코리노트는 공인중개사 등 자격시험을 준비하는 수험생을 위한 암기 노트 앱입니다. 과목과 목차를 만들고, 질문과 답변을 사진, 녹음, 엑셀로 담은 뒤, 슬라이드로 넘기며 복습합니다. 복습한 내용은 물음표, 느낌표, OK의 세 단계로 스스로 표시합니다.

프로젝트는 고객사의 문의로 시작되었습니다. 고객사는 화면마다 필요한 기능과 원하는 느낌을 정리한 기획서를 보내왔고, 요청은 이 기획서를 화면 디자인으로 옮기는 일이었습니다.

기획서를 화면으로 옮기는 과정에서 몇 가지 불편이 확인되었습니다. 하나의 설정이 여러 페이지로 나뉘어 있었고, 전체 설정과 재생 설정이 같은 톱니바퀴 아이콘을 쓰고 있었습니다. 이에 따라 요청받은 화면은 그대로 만들되, 더 나은 방법이 보이는 화면에는 제안안을 함께 드리는 방식으로 진행하였습니다.

발견

수험생은 공부를 하기 위해 앱을 엽니다. 따라서 화면은 지금 해야 할 일을 바로 보여 주어야 하며, 기능을 찾게 만들어서는 안 됩니다. 판단 기준은 고객사에 전달한 설명 자료의 내용을 한 문장으로 정리하였습니다.

기능은 그 기능이 필요한 화면에 둡니다.

이후의 제안은 모두 이 기준을 따릅니다. 기능을 더하기보다, 이미 있는 기능을 필요한 순간의 화면으로 옮기는 일에 집중하였습니다.

방향을 정립하는 과정

고르기 쉽도록, 안을 나누어 드립니다

메인 화면은 무엇을 가장 먼저 보여 줄지에 따라 세 가지 안으로 나누어 제시하였습니다. 과목, 책갈피, 목표를 고르게 보여 주는 균등 강조형, 과목 목록을 강조하는 과목 강조형, 시험까지 남은 날을 강조하는 목표 강조형입니다. 과목 아이콘은 아직 열어 보지 않은 과목은 닫힌 책으로, 공부한 과목은 펼친 책으로 그려, 목록만 보고도 진도를 알 수 있도록 하였습니다.

앱 아이콘 역시 네 가지 방향을 함께 제시하였습니다. 고객사는 그중 C를 노트의 형태로 만들고 옆면에 색인 띠를 둔 안을 선택하였으며, 이 아이콘은 이후 설정 화면과 스토어 배너까지 이어졌습니다.

메인 화면 | 균등 강조형, 과목 강조형, 목표 강조형 (2019.03)

앱 아이콘 | 네 가지 방향 중 C 형태의 노트(오른쪽 아래)로 결정 (2019.03)

요청안은 그대로, 제안안은 근거와 함께

2020년 4월, 처음 쓰는 사람을 위한 안내 화면을 작업할 때에는 장표마다 ’요청 버전’과 ’제안 버전’을 나란히 두었습니다. 요청 버전은 기획서 그대로 만든 화면이며, 제안 버전에는 무엇을 바꾸었고 왜 바꾸었는지를 한두 문장으로 적었습니다.

예를 들어 메인 화면의 책갈피 영역은, 등록된 책갈피가 없을 때 비어 있는 상자와 안내 문구만 남습니다. 이에 따라 책갈피가 없으면 메인에서 감추고, 책갈피를 만드는 순간인 슬라이드 화면에서 안내하는 안을 제안하였습니다.

요청 버전과 제안 버전 | 첫 화면과 슬라이드 화면의 안내 (2020.04)

결정은 고객사가 내립니다. 실제로 메인 화면의 책갈피 안내는 요청 버전으로 확정되었습니다. 제안의 목적은 안을 관철하는 것이 아니라, 고객사가 두 안의 차이를 보고 판단할 수 있도록 근거를 함께 드리는 데 있습니다.

한 일

1차(2019.02 ~ 03)에서는 메인, 목차, 필기 노트, 슬라이드, 설정까지 앱 전체 화면을 설계하였습니다. 전체 설정과 같은 톱니바퀴를 쓰던 재생 설정은 화면 가운데의 재생 버튼으로 바꾸었고, 여러 페이지로 나뉘어 있던 재생 설정은 한 화면으로 합쳐 페이지를 오가는 불편을 줄였습니다. 가운데 재생 버튼은 이후 모든 버전에서 유지되었습니다.

목차 화면에 대해 고객사는 이렇게 답하였습니다.

“이 아이디어 참 좋습니다.”

2차(2019.08 ~ 09)에서는 무료 버전과 프리미엄 버전으로 나뉘는 구조에 맞추어 화면을 다시 정리하였습니다.

• 엑셀 받기와 내보내기 | 설정에서 빼내어, 필기를 입력하는 화면(엑셀 업로드)과 필기 목록 화면(엑셀 저장)에 두었습니다.
• 자동 재생 표시 | 카메라가 녹화 중일 때의 붉은 표시등을 빌려 와, 슬라이드가 자동으로 넘어가는 중임을 알 수 있도록 하였습니다. 복습 상태에 쓰인 세 가지 색과 겹치지 않는 색을 썼습니다.
• 무료와 프리미엄 | 무료 표시는 약하게, 프리미엄 표시는 아이덴티티 색을 더해 강조하였습니다. 데이터 초기화는 다른 버튼과 떨어진 단독 버튼으로 두어 잘못 누르는 일을 막았습니다.
• 설정 화면 길이 | 모든 설정을 스크롤 없이 한 화면에서 볼 수 있도록 항목을 다시 배치하였습니다.

또한 스토어에 올라갈 스크린샷 8장과 대표 배너, 개발자가 그대로 옮길 수 있는 세로와 가로 화면의 픽셀 가이드를 함께 전달하였습니다.

메인 | 목표일, 책갈피, 과목

목차 | 하위 목차를 접고 펼치는 구조

3차(2020.04)에서는 처음 앱을 연 사람이 무엇부터 해야 하는지 알 수 있도록, 첫 과목 등록 버튼과 화면별 안내 문구를 설계하고 가이드 파일로 정리하였습니다.

결과물

앱 전체 화면(세로와 가로), 과목 아이콘, 앱 아이콘, 무료/프리미엄 설정 화면, 스토어 스크린샷 8장, 대표 배너, 개발자용 픽셀 가이드.

1년 2개월 동안 출시 화면에서 수익 구조의 전환, 사용 안내까지 세 차례에 걸쳐 같은 고객사와 이어진 작업입니다.