이번에는 중장비 업무 일지 앱 을 소개하려고 합니다.

제작동기

지인의 부탁으로 중장비를 이용하여 작업한 사항을 기록하고 결제를 관리할 수 있는 웹앱을 제작하였습니다.

웹앱의 기능을 보강하여 앱으로 만들어 보면 좋을 것 같다는 생각으로 앱을 제작하게 되었습니다.

중장비 업무 일지 앱 의 원형 웹앱

제작과정

웹앱의 기능을 최대한 살리면서 작업 기록자 입장에서 편리하게 사용할 수 있는 것에 초점을 맞추어서 제작을 하였습니다. 웹앱을 의뢰한 지인에게 이것저것 문의를 하여 의문이 나는 점을 정리하면서 작업을 진행하였습니다.

작업을 진행하면서 어려웠던 점이 작업을 하다보면 현장 사진을 찍는데 사진첩에서 선택하게 끔하는 기능이었습니다. 사용자에 따라서 촬영된 사진이 아주 많은 경우가 있는데 사진 전체를 읽어들이는 것이 아니라 일부만 보여주고 스크롤이 되면 다시 보여주는 부분을 자연스럽게 구현하는 것이 생각보다 간단하지는 않았습니다. 그리고 바로 촬영을 하여야 하는 경우도 있어서 그 부분도 간단하지는 않았습니다.

그 다음으로는 작업에 대한 정보를 입력하는 부분이었습니다. 생각보다 입력하여야 하는 요소가 많고 사용자별로 상황이 각각 다를 수가 있어서 중장비와 다른 요소들을 최대한 사용자가 정의하여 사용할 수 있도록 하는 것에 주안점을 두었습니다. 그리고 가장 중요한 결제여부를 쉽게 관리할 수 있도록 작업하였습니다.

입력된 일지를 쉽게 찾아볼 수 있도록 달력에 숫자를 표시하여 나타나도록 하였는데 달력을 마음대로 보이도록 하는 것이 예상보다 간단하지는 않았습니다. 그래도 사용자 입장에서는 달력에서 숫자를 보면서 결제 여부를 확인하는 것이 가장 좋을 것으로 생각되어 구현하게 되었습니다.

중장비 업무 일지 앱 메인화면

부가적인 기능으로 간단한 통계 기능을 추가하였습니다. 가장 많이 작업한 중장비 및 비율등을 차트로 출력하여 쉽게  확인할 수 있도록 하였습니다. 처음에는 간단한 차트 기능을 직접 구현하려고 하였으나 훌륭한 차트 라이브러리가 많아서 그것을 이용하였습니다. 외부 라이브러리를 연동하는 작업을 진행하면서 그 방법을 익히게 되었습니다.

중장비 업무 일지 앱 통계 화면

마지막으로 아이콘을 제작하였는데 굴삭기 사진을 참고하여 그래픽 툴을 이용하여 그렸습니다. 역시나 그래픽 작업에 익숙하지 않다보니 실제 기능을 구현하는 것보다 더 어려운 작업이었습니다. 기존 앱의 아이콘도 보고 비슷한 기능의 앱의 아이콘은 어떻게 되어있는지도 확인하면서 작업을 진행하였습니다.

앱은 다음 주소에서 확인하실 수 있습니다.

https://play.google.com/store/apps/details?id=jaeyoung.kim.heavyvehiclediary.free

작동하는 화면을 동영상으로 캡처하여 사용할 때 참고 할 수 있도록 하였습니다.

괘종시계 앱 을 소개할까 합니다.

제작동기

예전에 할머니댁에서 사용하시던 괘종시계가 있습니다. 어려서 부터 보아와서 그런지 똑딱똑딱 소리와 정각과 30분마다 소리가 나는 괘종시계를 좋아하였습니다. 문득 앱으로 만들어 보면 어떨까 하는 생각이 들었습니다.

괘종시계 앱 의 모체가 된 실물 괘종시계

제작과정

스마트폰으로 사진을 찍고 똑딱똑딱 소리도 녹음하였습니다. 소리는 간단하게 편집하여 필요한 부분을 가져왔습니다. 앱에 사용할 이미지는 사진을 그래픽 프로그램으로 불러와서 테두리를 따라 선을 그렸습니다. 그 다음 세부적인 부분을 실물을 보아가며 보강하여 그렸습니다. 그래픽 작업을 전문적으로 하지 않아서 그런지 매우 어렵고 시간이 많이 소요되었습니다.

시계추 부분의 금속질감을 표현하는 것이 어려웠는데 인터넷 상에서 자료와 강의를 참고하여 그럭저럭 이미지는 완성할 수 있었습니다. 아래 이미지는 최종 완성된 작업물이지만 이전에 여러번 다시 그리는 작업을 반복하여 그나마 보아줄만한 이미지를 완성할 수 있었습니다.

괘종시계 앱에 사용한 이미지

이미지를 작업은 완료하였지만 실제 기기에 맞도록 크기를 조절하여 사용하게 되었습니다. 시계 이미지를 배경으로 하고 시침과 분침을 추가하여 시간이 가는 것을 먼저 확인하였습니다. 잘 되는 것 같았는데 분침이 시계의 원 부분을 벗어나는 현상이 있었습니다. 분명히 중심축에 맞추어서 시침과 분침을 배열하여 맞지 않을 이유가 없었는데 위치가 벗어나는 현상이 계속 있었습니다. 오랜시간 확인한 결과 이미지의 숫자판 부분이 완전한 원이 아니였습니다. 비율에 따라 줄이면 원의 부분도 완전한 원으로 유지되면서 줄어들거라고 생각하여 발생한 문제였습니다. 그래서 시계의 틀 부분과 숫자판 부분을 따로 분리하였습니다. 틀 부분은 배경으로 하고 숫자판 부분은 완전한 원이 되도록 축소하여  배치하였더니 숫자판 경계 부분을 벗어나는 현상이 없어졌습니다.

그 다음으로 추가 움직이는 부분을 작업하였는데 단순하게 위치만 변경되도록 하니 움직임이 자연스럽지 않았습니다. 이런저런 자료를 찾아보니 움직임을 부드럽게 하는 방법이 있어서 적용해 보니 훨씬 자연스러운 움직임을 보여 주었습니다.

그 다음으로 추의 움직임과 시간에 따라 소리가 출력되는 부분을 추가하였습니다. 추가 왼쪽, 오른쪽으로 이동할 때마다 녹음한 똑딱 소리가 나도록 하였고 정각이 되면 숫자만큼 종소리가 반복되도록 하였습니다. 그 다음 30분이 되면 종소리가 한번 나도록 작업하여 작업을 마무리 하였습니다. 그런데 소리가 스튜디오에서 녹음한 것이 아니다 보니 잡음이 들어가서 약간 어색한 소리가 났습니다. 소리 편집 프로그램을 이용하여 잡음을 감소시키고 다시 적용을 하니 훨씬 나아졌습니다.

처음에는 간단할 것으로 생각이 되었는데 장시간의 그래픽작업과 예기치 못한 문제의 발생등 쉬운 작업은 아니었던 것 같습니다. 처음 올려본 앱이어서 그런지 애착이 더 많이 갑니다.

다음 주소에서 확인해 보실 수 있습니다.

https://play.google.com/store/apps/details?id=jaeyoung.kim.grandfatherclock

작동되는 동영상 부분도 꼭 보시기 바랍니다. 에뮬레이터에서 작동하는 것을 동영상으로 캡처하고 약간의 편집 작업을 통하여 완성하였습니다.