개발 동기
고등학생인 본인이 자신의 내신의 총합산 점수를 대략으로라도 알고 싶어서 Play Store에 내신 계산기 앱을 찾아봤지만, 제대로 UI와 기능이 짜인 앱을 찾을 수 없었다. (2019년 8월) 그래서 직접 개발하게 되었다.
디자인 과정
이 앱 개발을 시작하며 내가 중점을 둔 부분은 사실 기능보다는 UI였다. 실제로도 UI 개발만 1주일 반, 기능 구현은 해외여행 포함해서 4일 걸렸다.
처음엔 UI를 Adobe XD로 디자인했다. 가장 처음 고민한 디자인은 *Splash Screen 디자인이었다. (*Splash Screen: 앱 실행하자마자 나오는 로딩 화면) 앱 실행하자마자 가장 처음 나오는 화면이기 때문에, 이 화면엔 앱 이름, 버전 정보를 잘 보이게 넣고 싶었다. 그리고 배경화면도 심심한 단색이 아닌 예쁜 그라데이션을 적용해 보고 싶었다. 그래서 만든 첫 디자인이 바로 아래 사진이었다.
하지만 배경 화면의 색깔이 너무 밝다는 생각이 들었고, 좀 더 어두운 계열의 색깔을 사용하고 싶었다. 그래서 구글에서 색깔 조합을 검색하다가 보라색 계열의 그라데이션이 생각보다 고급지다는 걸 알게 되었고, 그 색깔을 Splash Screen의 배경 색상뿐만 아니라 앱의 퍼스널 컬러로 정하기로 했다. 그래서 다시 생해서 나온 디자인은 아래 사진이다.
아까보다 배경화면이 눈이 덜 아프고 고급진 느낌이다. 그리고 오른쪽 아래에 버전 정보를 추가하였다. 이렇게 Splash Screen의 디자인을 다 끝내고, Adobe XD는 다시는 쓰이지 않았다. 익숙하지 않아서 오히려 시간을 더 많이 잡아먹었기 때문이다.
Splash Screen을 디자인 한 이후부터는 Activity 디자인을 안드로이드 스튜디오에서 xml을 작성하며 바로바로 만들었다. 두 번째로 디자인한 화면은 메인 화면이었다. 메인이기 때문에, 이 화면에는 종합 성적, 각 학년과 학기의 성적을 모두 한 화면에서 보여줘야 했다. 하지만 이 정보를 모두 담기에는 화면 크기에 제약이 있었고, 나는 이 문제를 위아래 스크롤로 해결했다. 하지만 그냥 스크롤에 텍스트로만 조합하자니 디자인이 심심했다. 그래서 CardView라는 레이아웃을 이용하였다. CardView를 사용하면 가장 좋은 점이 앱 디자인에 입체감이 생기고 정보를 분류할 수 있다는 점이다.
이렇게 비슷한 유형의 정보들을 묶어서 구분 지어 보여줄 수 있다. 그냥 텍스트로만 나열했다면 훨씬 심심한 디자인이 되었을 것이다. 하지만 메인 화면을 흰색깔의 카드로 가득 체우려니 이것 역시 심심했다. 그래서 가장 중요한 정보인 종합 성적만 특별하게 보여줄 방법이 없을까 고민했다. 그러다가 문득 안드로이드 앱 출시 관리 앱인 Play Console앱의 디자인이 생각났다. 이 앱에서는 스크롤을 내리면 이미지가 점차 사라지다 Toolbar가 생기는 형식의 레이아웃이 구현돼 있었다.
이 형식의 레이아웃을 따라 적용하기로 했다. 다행히 안드로이드 스튜디오에서 템플릿을 적용해줘서 쉽게 적용할 수 있었다. 아래로 스크롤하는 부분에 현재 성적의 큰 총합산을 크게 표시하도록 했다. 그리고 그 아래에는 등급 반영 비율을 조정할 수 있는 버튼과 현제 반영 비율을 표시한 텍스트를 띄웠다.
이렇게 하니 훨씬 앱이 디자인에 신경 쓴 앱처럼 보였다. 이 이후엔 아까 만든 CardView의 디자인을 고민했다. 사실 카드뷰 디자인은 아무리 생각해도 별 아이디어가 떠오르지 않아서 1시간 만에 대충 하고 끝냈다. 보여줄 정보들을 종합성적, 성적 분석, 각 학년당 성적 이렇게 5가지 카테고리로 나누고, 5개의 CardView를 만들었다. 종합성적을 보여주는 CardView에는 종합성적을 가장 크게 표시하고 바로 밑에 각 학년당 종합 성적을 보여주게 했다. 가장 아래쪽에는 성적을 입력할 수 있는 화면으로 전환이 가능한 버튼을 배치했다.
그 외 나머지들도 거의 이런 형식이다.
메인 화면의 디자인이 끝나고 난 다음, 성적 입력 화면을 디자인했다. 성적 입력 화면은 이 앱에 있어서 성적을 보여주는 것 다음으로 중요한 기능이다. 그래서 성적 입력하는 화면을 가장 오래 고민해서 디자인했다. 이 화면을 디자인할 때 최대한 사용자가 쉽고 편리하게 입력을 할 수 있어야 한다. 고등학교는 총3학년에 학년당 2학기씩 존재하므로 성적 입력하는 부분을 6개나 만들어야 했다. 이걸 세로로 쭉 배치하자니 앱이 스크롤하는 시간이 너무 길어지고 볼품없어졌다. 그래서 난 각 학년을 좌우로 스와이프 해서 화면을 전환하고, 각 화면에 학기를 CardView로 구분 지어 놓는 레이아웃을 생각하게 되었다.
좌우 스와이프는 ViewPager를 이용했다. CardView는 내부에 RecyclerView를 이용해 과목들을 추가/삭제할 수 있도록 구현했다. RecyclerView의 아이템도 역시 CardView를 이용하여 디자인했다.
마지막으로 디자인한 화면은 분석 화면이다. 사실 굳이 필요 없는 기능이지만, 나는 이 앱을 다른 내신 계산기 앱과는 차별성을 두고 싶었다. 사용자가 자신의 성적을 분석해서 볼 수 있게 만들고 싶었다. 그래서 그래프를 통해 정보를 전달하기로 했다. 그래프를 사용함으로써 내 성적을 학년별, 과목별로 내 성적의 변화 추이를 한눈에 보이게 만들 수 있었다.
이 화면 역시 한 줄로 쭉 넣기엔 스크롤을 많이 해야 돼서 ViewPager로 좌우로 넘기며 볼 수 있게 구현했다.
이렇게 모든 화면의 디자인을 끝냈다. 머리로 구상과 동시에 xml로 작성해서 디자인은 금방 끝냈다. 이다음은 바로 기능 구현을 시작했다.
Play Store: https://play.google.com/store/apps/details?id=com.k1a2.schoolcalculator
포잉 Poäng - 내신등급 계산기 - Google Play 앱
▶ poäng 의 뜻 poäng은 스웨덴어로 점수를 매기다, 관리하다 라는 의미를 지니고 있습니다. 포잉은 내신을 계산/분석하여 내신 관리를 도와주는 역할을 수행합니다. ▶ 주요 기능 1) 학기별, 학년별 내신 성적 계산 자신의 내신 성적을 입력하면 학기별, 학년별로 평균등급을 산출함 2) 종합성적 계산 학기별, 학년별 내신성적을 바탕으로 입력한 반영비율에 따라 종합성적을 산출함 3) 내신 성적 분석 학년별, 학기별, 과목별로 나누어 그래프로 자신의 내신
play.google.com