---
title: "모바일 앱 개발: 사용자 스토리"
date: "2021-05-21"
categories: 
  - "app-development"
  - "mobile-development"
  - "mobiletogether"
tags: 
  - "app-design"
  - "app-development"
  - "mobile-development-tools"
  - "user-stories"
description: 태양 에너지 생산량을 추적하는 모바일 앱 개발 과정을 살펴보고, 사용자 요구 사항, 데이터 관리, 그리고 효과적인 시각화 기술에 중점을 두겠습니다.
---
Status: #blog

Tags:  #app-design #app-development #mobile-development-tools #user-stories

Categories: [mobile-development](/blog/ko/category/mobile-development.md) | [mobile-development](/blog/ko/category/mobile-development.md) | [mobile-development](/blog/ko/category/mobile-development.md)
# 모바일 앱 개발: 사용자 스토리

아, 봄이 왔네요! 새들이 노래하고, 꽃들이 피어나고, 해가 뜨는 시간은 점점 길어지고 지는 시간은 늦춰집니다. 이렇게 늘어난 햇빛 덕분에 태양광 발전 시스템은 전기를 생산하는 시간이 더 많아집니다. 하지가 다가옴에 따라, 태양광 발전 시스템은 일 년 중 가장 생산성이 높은 시기를 맞이합니다.

옥상 태양광 시스템을 소유한 사람들은 종종 자신의 시스템 생산량을 꾸준히 확인하는 데 열정적입니다. 배우이자 코미디언인 존 호드그먼은 심지어 태양광 발전량에 대한 과도한 모니터링 문제로 벌어진 논쟁을 [중재](https://maximumfun.org/transcripts/judge-john-hodgman/transcript-judge-john-hodgman-ep-443-daylight-savings-crime/)하기도 했습니다. 제 친구 케이시 또한 태양광 에너지에 대해 매우 열정적입니다. 케이시를 만날 때마다 그녀는 항상 최신 전력 생산량(킬로와트시)에 대한 정보를 알려줍니다. 케이시의 집은 따뜻하고 햇볕이 잘 드는 지역에 위치해 있으며, 에어컨 사용량이 가장 많은 곳입니다. 그녀는 지난 6월 말에 집 지붕에 태양광 패널을 설치했으며, 여름철 긴 낮 동안 시스템이 충분한 전력을 생산하여 에어컨 사용량을 충당할 수 있도록 했습니다.

케일리는 8월 전기 요금을 받은 후, 태양광 설치업체에 전화하여 기쁜 소식을 전했습니다. 그녀의 집에서 한 달 동안 사용한 전력량이 0으로 나왔다는 것입니다. "솔직히 말씀드리면, 저는 매일 전기 계량기를 확인해서 시스템이 어떻게 작동하는지 확인했어요." 케일리는 설치업체 담당자에게 말했습니다.

"누구나 그렇게 해요." 설치 기사가 대답했습니다. "심지어 일부 사용자들이 하루에 세 번씩 계량기를 확인한다고 말하기도 합니다!"

케이지는 제가 MobileTogether를 사용하여 개발한 모바일 앱이 그녀의 태양광 발전 시스템에 대한 보고 도구로 유용할 수 있는지 물었습니다. "저는 스마트폰에 계기판의 수치를 입력할 수 있을 거예요." 그녀는 말했습니다. "매일 아침 식사 전에 강아지를 산책시키는 시간에 할 수 있을 것 같아요."

그렇게 저희의 모바일 앱 개발 협력이 시작되었습니다. 그 결과로 탄생한 앱을 저희는 "솔라 파워 툴(Solar Power Tool)"이라고 부릅니다.

![](/blog/images/mt_darktheme_blog_1-1.jpg)

<!--more-->

케이지의 태양광 시스템은 생산된 전력량을 보고하는 소프트웨어를 포함하고 있지만, 이것은 전체 시스템의 절반에 불과합니다. 많은 주택용 태양광 발전 시스템과 마찬가지로, 케이지의 집은 전력망에 연결되어 있으며, [순간 전기 계량 방식](https://en.wikipedia.org/wiki/Net_metering)을 사용합니다. 태양광 패널은 햇빛이 비치는 동안에만 집안에 전력을 공급합니다. 밤이나 전력 수요가 생산량을 초과할 때는 전력망에서 전기가 공급됩니다. 태양광 패널이 집에서 소비하는 전력보다 더 많은 전력을 생산하는 경우, 남는 전력은 전력망에 다시 공급되어 전력 회사의 발전 용량을 보완하는 역할을 합니다.

매달 발행되는 전기 회사 청구서에는 각 가정에서 한 달 동안 생산하고 소비하는 전력량이 명시되어 있습니다. 계정 소유자는 초과 소비량에 대한 요금과 소정의 연결 수수료를 지불합니다. 생산량이 소비량을 초과하는 경우, 그 차액은 다음 달 청구서에 반영됩니다. 이러한 가정에는 두 개의 계량기가 설치되어 있는데, 한 계량기는 생산된 전력을, 다른 계량기는 소비된 전력을 기록합니다.

케이지는 매달 전기 요금 고지서를 기다리는 대신, 앱을 통해 잔액을 실시간으로 확인할 수 있기를 원했습니다. 그래서 모바일 앱 개발을 위한 요구 사항 목록을 작성했습니다

- 계기 판독값을 입력할 수 있는 매우 간단한 입력 양식을 제공합니다
- 측정값을 자동으로 분석하여 계좌 잔액을 계산합니다
- 일일 실적과 월별 잔액을 숫자와 그래프를 통해 시각적으로 보여줍니다
- 시간의 흐름에 따른 잉여분을 추적하여 월별 변화를 보여줍니다.

MobileTogether는 저희가 앱의 요구사항을 효과적으로 구현하는 데 필요한 모든 기능을 제공했습니다. 저희는 먼저 일일 및 월별 기록을 위한 XML 데이터 구조를 정의했습니다. 아래는 XMLSpy의 그리드 뷰에서 보여주는 월별 데이터의 예시입니다

[![태양광 발전량 추적을 위한 월별 보고 데이터.](/blog/images/monthly-grid-view.png)](monthly-grid-view.png)

날짜와 계량값을 확인하고, 4번째 열부터 7번째 열까지의 데이터(생산된 전력량, 사용된 전력량, 월별 잉여량, 총 잔액)는 모두 간단한 숫자 계산으로 이루어져 있습니다. 예를 들어, 5번째 행을 보면, 생산된 전력량(kWhGen)은 9월의 태양광 발전량 측정값에서 8월의 측정값을 뺀 값입니다. 태양광 발전량 측정기는 항상 앞으로만 작동하지만, 사용량 측정기는 시간대에 따라 일사량과 전력 소비량에 따라 앞으로 또는 뒤로 작동합니다.

다음으로, 모바일 앱 개발의 다음 단계로 앱의 전체적인 흐름을 설계했습니다. 우리는 앱을 크게 두 개의 주요 페이지로 구성하기로 결정했습니다. 하나는 일일 성과를 보여주는 페이지이고, 다른 하나는 월별 기록을 보여주는 페이지입니다. 데이터 입력 양식은 각 주요 페이지에서 접근할 수 있는 하위 페이지로 구성됩니다. 아래는 MobileTogether Pages 도우미 창으로, 페이지 구조를 보여줍니다

[![모바일 앱 개발 과정에서 정의되는 페이지 구조  ](/blog/images/pages-helper.png)](pages-helper.png)

각 페이지에 있는 버튼들은 MobileTogether 기능을 활용하여 화면 간 이동을 도와줍니다.

그런 다음, 데이터를 차트 형태로 시각적으로 표현하는 방법을 고민했습니다. MobileTogether를 사용하면 개발자가 여러 레이어로 차트를 만들 수 있으며, 심지어 다양한 유형의 차트를 결합할 수도 있습니다. 우리는 면적 차트와 막대 차트를 결합하기로 결정했습니다. 면적 차트는 배경에 배치하여 일별 및 월별 전기 소비량을 나타내고, 막대 차트는 겹쳐서 태양광 발전량을 보여주도록 했습니다. 우리의 논리는 가정에서는 냉장고, 전자 시계, 휴대폰 충전기 등 다양한 기기로 인해 밤에도 지속적으로 전기를 사용한다는 것입니다. 반면, 태양광 발전은 일출과 일몰에 따라 간헐적으로 이루어집니다.

시뮬레이터는 MobileTogether Designer의 기능 중 하나로, 모바일 앱 개발 과정에서 솔루션을 즉시 실행하여 로직을 테스트하고, 다양한 iOS, Android 또는 Windows 기기에서 앱이 어떻게 표시될지 미리 확인하며, 워크플로우 데이터의 변경 사항을 검토할 수 있습니다. 다음은 시뮬레이터에서 볼 수 있는 일일 보고서 페이지의 예시입니다

[![모바일 앱 개발 과정에서 MobileTogether 시뮬레이터를 통해 확인할 수 있는 일일 생산량 보고 차트입니다.](/blog/images/daily-sim-view.png)](daily-sim-view.png)

이 페이지는 4월 18일부터 시작하여 14일간의 생산량을 보여줍니다. 상단 차트에서 볼 수 있듯이, 태양광 발전량은 날씨, 특히 구름의 양에 따라 매일 크게 달라집니다. 하단 차트는 매일의 생산량과 소비량의 차이(흑자 또는 적자)를 보여줍니다. 4월 18일에는 생산량보다 소비량이 1킬로와트 더 많았고, 4월 29일에는 생산량과 소비량이 정확히 일치하여 균형을 이루었습니다.

첫 번째 차트 아래에 있는 "표시" 버튼을 클릭하면 해당 데이터의 숫자 테이블이 나타납니다

!["표시/숨기기" 버튼을 통해 일일 성과 통계 정보를 표시하거나 숨길 수 있습니다.](/blog/images/daily-data-table.png)

"Show" 버튼은 데이터 테이블의 "MobileTogether 가시성" 속성을 제어합니다. 테이블 자체는 페이지 내에서 스크롤이 가능하며, 이전 달 전체에 대한 데이터를 포함합니다. "새로운 데이터 추가" 버튼을 누르면 새로운 데이터 입력용 하위 페이지가 열립니다

[![사용자가 새로운 일일 측정값을 입력할 수 있도록 하는 데이터 입력 하위 페이지입니다.](/blog/images/enter-daily.png)](enter-daily.png)

버튼의 동작 설정에서 "모달 다이얼로그" 옵션을 선택하면 해당 페이지가 팝업 창으로 열리며, 이 경우 원래 페이지는 백그라운드에서 계속 표시됩니다.

[![모바일 앱 개발 시 서브 페이지의 레이아웃을 정의하는 설정](/blog/images/modal-subpage.png)](modal-subpage.png)

MobileTogether를 사용하면 계기 판독값을 입력하는 입력 필드 컨트롤에 도움말 텍스트를 추가할 수 있습니다. 또한 MobileTogether의 키보드 속성도 활용했습니다. 케이시가 새로운 값을 입력하기 위해 편집 필드를 터치하면, 숫자만 표시됩니다.

[![새로운 일일 독서 시작.](/blog/images/enter-daily-2.png)](enter-daily-2.png)

두 개의 계량기에서 측정한 값을 모두 입력한 후, 케이시는 "생산량 계산" 버튼을 클릭합니다

[![새로운 데이터를 기반으로 당일 생산량 통계를 계산합니다.](/blog/images/enter-daily-3.png)](enter-daily-3.png)

이 기능은 XQuery 계산을 수행하여 미리보기용 일별 생산 데이터를 생성합니다. 케이시는 생성된 데이터를 추가하거나, 입력된 데이터를 취소할 수 있습니다. 새로운 일별 데이터를 추가하면, 일별 보고서 페이지에 표시되는 차트가 자동으로 업데이트됩니다

[![새로운 측정값을 추가하면, 일일 생산량 차트가 자동으로 업데이트됩니다.](/blog/images/enter-daily-4.png)](enter-daily-4.png)

월간 보고서 페이지는 일일 보고서와 유사한 방식으로 구성되어 있습니다. 아래에 안드로이드 폰에서 보이는 월간 보고서 페이지의 두 가지 화면을 보여드립니다 [다크 모드 및 라이트 모드](https://www.altova.com/blog/mobile-apps-that-automatically-support-dark-theme/):

[![안드로이드 폰에서 다크 모드와 라이트 모드로 표시되는 월간 보고서 페이지의 모습입니다](/blog/images/monthly-report.png)](monthly-report.png)

이 페이지에 있는 데이터 테이블은 월별 통계를 보여줍니다. 처음 12행은 케이시의 공과금 청구서에 기록된 계기 측정값을 기반으로 하며, 4~7열의 값은 앱에서 계산됩니다. 13행은 가장 최근의 일일 측정값 기록을 기반으로 합니다. 케이시가 새로운 일일 측정값을 추가할 때마다 앱은 일일 데이터 테이블과 일일 차트를 업데이트하고, 또한 자동으로 월별 총계를 계산하여 월별 테이블의 13행을 대체하고, 월별 차트를 업데이트합니다.

이 기능은 이 모바일 앱 개발의 핵심 요구사항을 해결합니다. 바로 가장 최근의 공과금 청구서 이후 누적된 잉여금을 모니터링하는 것입니다. 누적된 잉여금은 월별 데이터 테이블의 13번째 행, 첫 번째 월별 차트 아래에 있는 설명, 그리고 양쪽 월별 차트의 가장 오른쪽 항목에 표시됩니다.

각 페이지 오른쪽 상단에 있는 톱니바퀴 아이콘은 설정 메뉴로 연결되는 버튼이며, MobileTogether에 내장된 버튼 이미지로 만들어졌습니다. 이 버튼을 클릭하면 설정 페이지가 열리며, 아래 그림은 아이폰에서 보이는 설정 페이지의 모습입니다

[![아이폰에서 확인하는 설정 페이지입니다.](/blog/images/settings-1.png)](settings-1.png)

설정 페이지의 처음 4개의 버튼은 개발 과정이나 분석을 위해 데이터 세트를 조작하고 교환할 수 있도록 했습니다. 마지막 설정은 콤보 박스 형태로, 케이시가 일일 보고서 페이지의 차트를 초기화하여 7일, 14일, 21일 또는 30일 동안의 데이터를 표시하도록 설정할 수 있습니다.

[![일일 잔액 차트의 21일 동안의 추이.](/blog/images/daily-balance-21.png)](daily-balance-21.png)

케이시는 초기 모바일 앱 개발 이후 결과에 매우 만족했습니다. 매일 아침 강아지를 데리고 산책을 나갔으며, 산책 중에 계기판의 수치를 기록했습니다. 우편으로 공과금 고지서가 도착하면, 그녀는 계기 판독원이 기록한 수치를 바탕으로 월별 표를 업데이트했습니다.

그러던 어느 날, 그녀가 저에게 전화를 걸었습니다. "아시다시피, 저는 거의 1년 동안 집에만 있었는데, 이제 다시 여행을 떠나고 싶어요." 그녀는 말했습니다. "제가 며칠 동안 앱 사용을 중단하면 어떻게 될까요?"

저는 그 점에 대해 고민했고, 확인하기 위해 테스트 데이터 세트를 만들었습니다. 결과적으로, 월별 보고서는 문제가 없다는 것을 알게 되었습니다. 사용자가 하루 또는 일주일 동안 계기 값을 입력하지 않더라도, 앱은 항상 가장 최근 청구서와 마지막으로 입력된 일일 계기 값을 기준으로 누적 잔여량을 계산합니다.

일일 보고서에는 몇 가지 사소한 문제가 있었습니다. 일일 측정값을 입력하는 날짜 필드는 날짜 선택 컨트롤이었으며, 기본적으로 현재 날짜가 자동으로 입력되었지만, 사용자는 측정값이 있는 다른 날짜를 선택할 수 있었습니다.

하지만 며칠 동안의 측정값이 누락되면, 마지막 날의 일일 생산량 데이터와 차트 값은 부정확해집니다. 모든 생산량과 소비량은 모두 마지막 날에 기록됩니다.

해결책은 간단했습니다. 우리는 일일 통계 계산 과정에 조건문과 반복문을 추가하여 논리적인 부분을 강화하기로 결정했습니다

- 만약 새로운 측정 날짜가 마지막 측정 날짜로부터 하루 이상 지난 경우, 누락된 날짜 수를 계산합니다
- 측정값 사이의 총 일수를 총 생산량과 총 소비량으로 나누십시오.
- 각 누락된 측정일에 평균 생산량과 평균 소비량을 할당하기 위해 루프를 사용합니다.

저는 이 로직을 MobileTogether의 액션 그룹에 구현하고, 케이시가 "매일 읽기 추가" 버튼을 클릭했을 때 수행되는 단계에 이 새로운 액션 그룹을 추가했습니다.

케이지는 5월 2일, 3일간의 캠핑 및 등산 여행을 즐겁게 떠났습니다. 5월 6일, 그녀가 돌아온 다음 날 아침, 평소처럼 일일 계량값을 입력했습니다. 아래는 아이폰에서 확인한 그녀의 일일 보고서와 월별 보고서의 일부 내용으로, 누락된 일일 계량값은 평균값을 사용하여 표시되었습니다

[![아이폰 화면에 표시되는, 독서 누락 일수를 줄이기 위한 전략의 결과입니다.](/blog/images/monthly-report-2.png)](monthly-report-2.png)

5월 3일, 4일, 5일의 일일 계량기 기록이 "0"으로 표시된 것은 평균값을 나타냅니다.

만약 크로스 플랫폼 모바일 앱 개발을 하고 있다면, 완벽한 기능의 시각적 프로그래밍과 통합 디버깅 기능을 갖춘 도구가 필요합니다! 저희 MobileTogether의 [동영상 데모](https://www.altova.com/ko/mobiletogether/demos#video_Demos)를 확인해 보시거나, 더 많은 [샘플 앱](https://www.altova.com/ko/mobiletogether/demos)을 살펴보시고, 심층적인 정보를 얻으려면 [온라인 매뉴얼](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/)을 참고하십시오. 크로스 플랫폼 모바일 앱을 가장 빠르게 개발할 준비가 되셨다면, [MobileTogether 디자이너를 다운로드](https://www.altova.com/ko/mobiletogether/download)하여 시작해 보세요.