예비 부부의 필수품! ‘웨딩 D데이’ 계산용 워치페이스 만들기

안녕하세요, ‘소프트한 김군’입니다. 지난 번 칼럼까진 여러분과 소프트웨어의 이모저모를 살펴봤는데요, 이번 회차부턴 일상에 필요한 것들을 소프트웨어로 만들어보는 시간을 갖고자 합니다. 기획에서 개발, 활용까지… 소프트웨어가 생활을 어떻게 바꿔놓을 수 있는지 저와 함께 살펴보실까요?
 

프롤로그_”사실 저도 예비 신랑입니다”

5월은 ‘결혼의 계절’이죠. 사실 저도 이달 결혼을 앞둔 예비 신랑이어서 요즘 결혼 준비로 정신 없이 바쁜 나날을 보내고 있습니다. 생각보다 할 일이 너무 많아 ‘결혼 준비가 이렇게 힘들구나!’ 새삼 실감하고 있는데요. 특히 요즘은 결혼일까지 빠듯한 일정을 조율할 일이 많고 주변 지인을 만날 때마다 “예식일이 얼마 남았느냐”는 질문을 자주 받아 자연스레 ‘결혼식까지 남은 일자를 알려주는 계산기가 있으면 좋겠다’는 생각이 들었습니다.

고심하던 전 지난해 여자 친구에게 선물 받아 애용해온 삼성 기어 S2(이하 ‘기어 S2’)를 활용, 남은 결혼 준비 시간을 보다 효율적으로 관리하고자 결혼 준비용 워치페이스(watch face) 애플리케이션을 만들기로 했습니다.

소프트웨어를 만들려면 우선 필요한 기능과 자원(resource)에 대한 정의가 필요한데요. ‘웨딩 D데이’ 계산용 워치페이스를 만들기 위해 제가 세운 개략적 목표는 △결혼식 분위기와 어울리는, 산뜻한 화면 △D데이를 쉽고 빠르게 설정할 수 있는 인터페이스 △결혼식까지 남은 기간 설정(최대 1년) 등 세 가지였습니다. 저뿐 아니라 다른 예비 신랑∙신부가 사용하더라도 도움 될 수 있도록 군더더기 기능은 제외하고 꼭 필요한 기능만 구현하기로 했죠.

단계1. 이미지 리소스 제작하기_초침은 ‘♡’로!

워치페이스가 조악해 보이지 않으려면 이미지 제작에 공을 많이 들여야 합니다. 저작권 문제에서 자유롭기 위해 이번 작품은 제가 직접 그려보기로 했습니다. 우선 가장 중요한 시침∙분침∙초침과 배경 이미지를 만들어볼 텐데요.

배경 이미지는 오픈소스 체제로 운영되는 이미지 편집 도구 ‘김프(Gimp)’로 만들었습니다. 위와 같이 12개 시각을 산뜻한 민트 색상의 점으로 찍었습니다.

그 다음, 배경에 ‘포인트’로 활용할 케이크 이미지를 만들었는데요. 보다 깔끔한 느낌을 줄 수 있도록 파워포인트로 제작한 후 배경 이미지 중앙 하단에 배치시켰습니다. 어때요, 한결 세련돼졌죠?

이제 시침과 분침, 초침을 만들 차례입니다. 결혼 준비용 워치페이스인 만큼 결혼식 분위기가 물씬 풍기도록 신랑∙신부의 얼굴을 활용해보겠습니다.

신랑은 검정색 보타이로, 신부는 흰색 티아라와 투명 베일로 각각 장식했습니다. 초침은 ‘사랑’을 상징하는 하트(♡) 모양으로 마무리했고요.

지금까지 만든 이미지를 합치면 아래와 같은 모양이 되는데요, 제법 시계 같은 분위기가 나죠?

단계2. 시계 작동시키기_결혼일과 D데이 표기

이번엔 이미지로만 제작된 시계를 실제 시계처럼 움직여보겠습니다. 이 단계에선 프로그래밍이 필요한데요. 기어 S2 프로그래밍 작업을 진행하려면 타이젠 웨어러블 SDK(Software Development Kit)를 설치해야 합니다. 타이젠 공식 홈페이지에 접속하시면 무료로 다운로드하실 수 있습니다. 그 후 타이젠 웨어러블 SDK가 제공하는 4개 함수, 즉 △watch_time_get_hour() △watch_time_get_minute() △watch_time_get_second() △watch_time_get_day()를 이용해 현재 날짜와 시간 정보를 얻어오세요. 다음으로 ‘evas_map_util_rotate()’ 함수를 활용하면 시침∙분침∙초침 이미지를 회전시킬 수 있습니다.

화면 우측 중앙엔 날짜를 표시해주는 레이아웃(layout)을 넣고 현재 날짜를 표시하도록 했습니다. 위 그림은 이미지 형태라 확인되지 않지만 드디어 ‘실제 시간 변화에 따라 움직이는’ 시계가 완성됐습니다.

지금부턴 본격적으로 시계에 ‘남은 일자’ 기능을 넣어보겠습니다. 단순히 시침과 분침, 초침만 움직이면 일반 시계와 다를 게 없을 테니까요. 먼저 배경에 타이틀과 남은 일자 텍스트를 출력해보겠습니다. 이 단계에선 EFL의 ‘라벨(Label)’ 컴포넌트(component)를 사용했습니다. 참, EFL은 타이젠 전용 사용자 인터페이스(UI) 라이브러리입니다. 라벨은 텍스트를 화면에 표기해주는 컴포넌트고요.

위 그림에서처럼 워치페이스 중앙 상단에 시계 타이틀인 ‘웨딩 데이(Wedding Day)’와 결혼 날짜 텍스트를 출력했고 남은 일자 텍스트는 케이크 아래쪽으로 배치했습니다. 점점 ‘결혼 준비용 워치페이스’ 모양을 갖춰가고 있죠?

단계3. 인벤터로 D데이 설정 인터페이스 만들기

이제 날짜 입력 화면을 만들 차례입니다. 이 단계에서 전 기어 S2 레이아웃 편집 지원 도구 ‘인벤터(Enventor)’를 사용했습니다(인벤터 역시 오픈소스 체제로 운영됩니다).

위 그림은 인벤터를 이용해 남은 일자 설정 뷰(view)를 만든 모습입니다. 코드상에서 위 뷰를 레이아웃으로 로드해 하단부에 버튼(button)을 넣고 다음과 같이 날짜 입력 화면을 만들었습니다. 직접 그려서 만든 ‘-’와 ‘+’ 이미지를 터치해 ‘월’과 ‘일’을 설정하고 ‘OK’를 누르면 날짜가 설정되는 인터페이스 화면입니다.

단계4. ‘D데이 카운트’ 기능 넣기_윤년 계산도

지금까지 시계 이미지와 날짜를 입력할 수 있는 인터페이스 화면을 만들어봤습니다. 이번엔 마지막으로 설정된 날짜에 맞춰 ‘남은 일자 계산’ 기능을 넣을 차례인데요, 우선 아래 표에서 1월부터 12월까지 월(月)별 일수를 확인하겠습니다.

남은 일자 계산은 현재 날짜부터 결혼식 날짜까지 일(日)을 누적해 계산하면 됩니다. 예를 들어 현재 월과 결혼식 월이 같으면 일만 빼주면 됩니다(1월 1일부터 1월 10일까지라고 하면 10-1=9일). 현재 월과 결혼식 월이 다르면 현재 월의 마지막 일에서 현재 일을 뺀 후 중간 달은 마지막 일을 더합니다. 그리고 결혼식 월의 일만큼 더하면 되죠(3월 30일부터 5월 2일까지라고 하면 31-30+30+2=33일).

여기서 추가적으로 고려해야 할 부분이 있습니다. 바로 윤년(leap year)인데요, 태양력과 실제 1년의 오차를 메우기 위해 매 4년 주기로 찾아오는 윤년의 경우, 2월 일수가 28일이 아닌 29일이기 때문입니다. △100으로 나눠 떨어지지 않고 4로 나눠 떨어지는 연도 △400으로 나눠 떨어지는 연도 등 두 가지 조건 중 하나를 만족시키면 윤년으로 정의할 수 있는데요. 이를 C언어로 표현하면 아래와 같습니다.

끝으로 결혼 준비용 워치페이스 특유의 기능을 구현할 차례인데요. 결혼식까지 남은 일자를 1년 주기로 설정하는 기능이 바로 그겁니다. 예를 들어 현재 날짜가 5월 15일인데 결혼식을 5월 14일로 설정하면 남은 일자는 ‘-1일’이 아니라 ‘364일’이 되는 거죠. 따라서 사용자는 결혼식 연도를 고려할 필요 없이 월과 일만 설정하면 1년 내 범위에서 남은 일자를 계산할 수 있습니다. 결혼식은 최대 1년 전부터 준비하는 게 일반적이니 그 정도 설정이면 충분하겠죠?

자, 이제 결혼식 날이 됐을 때의 화면입니다. EFL의 ‘렉트(Rect)’와 라벨 컴포넌트를 활용해 만들어봤는데요. 간단히 터치해 사라지도록 했습니다.

드디어 워치페이스가 완성됐습니다. 아래 주요 화면을 다시 한 번 확인해볼까요?

에필로그_예비 신부 ‘감동’ 얻는 데도 성공!

이상과 같은 과정을 거쳐 완성된 워치페이스를 기어 S2에 적용한 후 다녀봤습니다. 일단 결혼식까지 남은 날짜가 줄어드는 걸 보며 시간 관리에 더욱 신경을 쓰게 됐습니다. 시기별로 꼭 해야 할 일을 제때 찾아 할 수 있었던 것도 빼놓을 수 없는 성과였죠. “결혼식이 언제냐”는 사람들의 질문에 자신 있게 “○일 남았다”고 대답할 수 있게 된 점도 좋았습니다. 그리고 또 한 가지, 여자 친구를 감동시키는 데도 성공했죠. ‘완성물을 좀 더 다듬어 좀 더 많은 예비 신랑∙신부가 활용할 수 있도록 앱스토어에 올려야겠다’는 생각도 했습니다.

다음 칼럼에서도 일상에 유용한 소프트웨어를 한 번 만들어보려 합니다. 이번엔 직장 생활 하며 누구나 겪는 일, ‘커피 값 계산’ 상황을 재치 있게 헤쳐갈 수 있도록 해주는 ‘복불복 게임’을 제작할 계획이니 많이 기대해주세요!